Question

我在AngularJS应用程序中使用Hello.js让用户通过Facebook进行身份验证。一旦用户登录并从Facebook获取用户信息，我使用json并从我自己的数据库中获取用户对象并将其存储在根范围内，以便我站点中的各个区域可以访问用户的配置文件信息（例如，在我显示登录用户名的标题中。）

这是处理身份验证内容的服务

angular.module('myApp')
  .factory('userService', function($rootScope, $location) {
    // Hello.js Functions
    hello.init({ 
      facebook : '1234567891234545'   
    });

    var service = {
      isLoggedIn: function() {
        return $rootScope.loggedInUser != null;
      },
      login: function() {
        hello('facebook').login( function() {
          hello('facebook').api('/me').success(function(json) {
            $rootScope.loggedInUser = getUserFromMyOwnAPI(json.id);    
            $rootScope.$apply(function() {
              $location.path('/');
            });
          });
        });          
      },
      logout: function() {
        hello('facebook').logout( function() {
          $rootScope.loggedInUser = null;
          $location.path('/');
        });          
      },
      loggedInUser: function(){
        return $rootScope.loggedInUser;
      }
    }

    return service;
})

我遇到的问题是，每次刷新页面时，都会丢失个人资料信息。这是有道理的，因为存储用户数据的$ rootScope.loggedInUser（基于我从Facebook得到的json）将在页面刷新后重置。

我应该如何处理？我应该将用户数据放在localStorage而不是rootScope吗？或者，每当我想引用用户的个人资料信息时，我应该以某种方式利用hello（'facebook'）。api（'/ me'）？

我注意到hello.js已经在localStorage中存储了一些内容：

key: hello
{"facebook":{"state":"","access_token":"blahblahblah","expires_in":6776,"https":"1","client_id":"12345","network":"facebook","display":"none","redirect_uri":"http://adodson.com/hello.js/redirect.html","scope":"basic","expires":1412632794.806}}

所以我想知道我是否会通过将用户对象添加到localStorage来重复工作。

Answer 1

这个问题的答案是主观的，可以用不同的方式来论证。但是，根据您的问题和评论，我认为在本地存储中保留（非敏感）用户个人资料信息是提供不间断用户体验的好选择。

Answer 2

切勿将用户信息（包括但不限于社交网络信息）存储在localStorage，cookie和/或其他不安全机制中。即使您需要对不那么重要的信息做出妥协，也要使用内存（如范围变量）。您还必须考虑在localStorage中存储用户信息时出现的复杂性，例如当用户退出社交网络时。现在，会话跟踪与WWW本身一样古老。如何跟踪会话？有无数的文章讨论了Cookies，Json Web令牌，服务器端的会话状态等的优缺点。我个人的意见是将大部分用户信息存储在服务器端，并使用会话将当前用户链接到该会话存储在任何可能的介质中的ID，例如Cookie，Query Param，localStorage等。这仅在您有后端并且您的OAuth为您提供令牌时才有用。我在hello.js中没有看到它为你提供了一个令牌。因此，鉴于您不应该在浏览器中存储任何客户端用户信息，并且hello.js不会为您提供在后续调用中重用的令牌，我建议您每次都登录用户。

Answer 3

关于您的代码：

正如Adin和DanArl已经说过的那样，您可以通过许多不同的方式实现用户会话跟踪的过程 - 最好是服务器端，通过存储在会话cookie中的某种标识符来识别。

关于您的实际代码，您可以查看jshint：三个警告

10  Use '!==' to compare with 'null'.
31  Missing semicolon.
34  Missing semicolon.
Three undefined variables
1   angular
4   hello
13  hello
14  hello
23  hello
15  getUserFromMyOwnAPI

你应该通过将'hello'传递给'userService'来正确地注入'hello'。（如果您想了解有关AngularJS中依赖项注入的更多信息，请查看：https://docs.angularjs.org/guide/di

关于您的实际问题：

收到令牌后 - 从您喜欢的存储方式 - 您应该能够通过以下方式检查和验证令牌：

GET graph.facebook.com/debug_token?
     input_token={token-to-inspect}
     &access_token={app-token-or-admin-token}

来源：https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.1#checktoken

然后你可能有机会将这些信息传递给helljs（我已经习惯了这个库）

用户配置文件信息在每次刷新页面后重置（使用Hello.js）

3 个答案: