3.9.11.3.1. REST API 中的社交账号登录

社交账号登录的机制也可以在 REST API 中使用。完整的示例应用程序可以在 GitHub 上找到，同时在社交网站登录部分有详细描述，下面是使用 Facebook 帐户获取访问令牌的关键点。

  • 在 web 模块的根包下创建 restapi 包，并在其中实现自定义 Spring MVC 控制器。该控制器应包含两个主要方法：get() 方法获取 ResponseEntity 实例，login() 方法获取 OAuth 令牌。

FacebookAuthenticationController.java

  1. @RequestMapping(method = RequestMethod.GET)
  2. public ResponseEntity get() {
  3.     String loginUrl = getAsPrivilegedUser(() ->
  4.             facebookService.getLoginUrl(getAppUrl(), OAuth2ResponseType.CODE_TOKEN)
  5.     );
  7.     HttpHeaders headers = new HttpHeaders();
  8.     headers.set(HttpHeaders.LOCATION, loginUrl);
  9.     return new ResponseEntity<>(headers, HttpStatus.FOUND);
  10. }

在这里，我们检查 Facebook code，获取访问代码并使用 OAuthTokenIssuer 发出访问令牌：

FacebookAuthenticationController.java

  1. @RequestMapping(method = RequestMethod.POST, value = "login")
  2. public ResponseEntity<OAuth2AccessToken> login(@RequestParam("code") String code) {
  3.     User user = getAsPrivilegedUser(() -> {
  4.         FacebookUserData userData = facebookService.getUserData(getAppUrl(), code);
  6.         return socialRegistrationService.findOrRegisterUser(
  7.             userData.getId(), userData.getEmail(), userData.getName());
  8.     });
  10.     OAuth2AccessTokenResult tokenResult = oAuthTokenIssuer.issueToken(user.getLogin(),
  11.             messageTools.getDefaultLocale(), Collections.emptyMap());
  13.     HttpHeaders headers = new HttpHeaders();
  14.     headers.set(HttpHeaders.CACHE_CONTROL, "no-store");
  15.     headers.set(HttpHeaders.PRAGMA, "no-cache");
  16.     return new ResponseEntity<>(tokenResult.getAccessToken(), headers, HttpStatus.OK);
  17. }
  • 从 web/core 模块扫描中排除 restapi 包：OAuthTokenIssuer bean 仅在 REST API 上下文中可用，在应用程序上下文中对其进行扫描将导致错误。
  1. <context:component-scan base-package="com.company.demo">
  2.     <context:exclude-filter type="regex" expression="com\.company\.demo\.restapi\..*"/>
  3. </context:component-scan>
  • 在项目的 modules/web/web/VAADIN 文件夹中创建 facebook-login-demo.html 文件，包含在 HTML 页面上运行的 JavaScript 代码：

facebook-login-demo.html

  1. <html>
  2. <head>
  3.     <title>Facebook login demo with REST-API</title>
  4.     <script src="jquery-3.2.1.min.js"></script>
  5.     <style type="text/css">
  6.  #users { display: none; }
  7.     </style>
  8. </head>
  9. <body>
  10. <h1>Facebook login demo with REST-API</h1>
  12. <script type="application/javascript"...>
  13. </script>
  15. <a id="fbLink" href="/app/rest/facebook">Login with Facebook</a>
  17. <div id="users">
  18.     You are logged in!
  20.     <h1>Users</h1>
  22.     <div id="usersList">
  23.     </div>
  24. </div>
  26. </body>
  27. </html>

以下脚本将尝试使用 Facebook 登录。首先，它将从 URL 中删除 code 参数，然后它将 code 传递给 REST API 以获取 OAuth 访问令牌，在成功验证的情况下，将能够正常加载和保存数据。

facebook-login-demo.html

  1. var oauth2Token = null;
  3. function tryToLoginWithFacebook() {
  4.     var urlHash = window.location.hash;
  6.     if (urlHash && urlHash.indexOf('&code=') >= 0) {
  7.         console.log("Try to login to CUBA REST-API!");
  9.         var urlCode = urlHash.substring(urlHash.indexOf('&code=') + '&code='.length);
  10.         console.log("Facebook code: " + urlCode);
  12.         history.pushState("", document.title, window.location.pathname);
  14.         $.post({
  15.             url: '/app/rest/facebook/login',
  16.             headers: {
  17.                 'Content-Type': 'application/x-www-form-urlencoded'
  18.             },
  19.             dataType: 'json',
  20.             data: {code: urlCode},
  21.             success: function (data) {
  22.                 oauth2Token = data.access_token;
  24.                 loadUsers();
  25.             }
  26.         })
  27.     }
  28. }
  30. function loadUsers() {
  31.     $.get({
  32.         url: '/app/rest/v2/entities/sec$User?view=_local',
  33.         headers: {
  34.             'Authorization': 'Bearer ' + oauth2Token,
  35.             'Content-Type': 'application/x-www-form-urlencoded'
  36.         },
  37.         success: function (data) {
  38.             $('#fbLink').hide();
  39.             $('#users').show();
  41.             $.each(data, function (i, user) {
  42.                 $('#usersList').append("<li>" + user.name + " (" + user.email + ")</li>");
  43.             });
  44.         }
  45.     });
  46. }
  48. tryToLoginWithFacebook();

另一个示例或在 CUBA 应用程序中运行 JavaScript 代码，可以在JavaScript 用法示例部分找到。