对 Angular 视图 (cookie) 的 OAuth 令牌响应

Question

我已经为此苦苦挣扎了几个小时，需要一些帮助。我创建了一个简单的应用程序，该应用程序在将用户重定向到 Google Oauth 页面的角度视图中向用户显示“使用 Google 登录”按钮。这是按下按钮时调用 login() 函数的控制器代码：

angular.module('dashApp').controller('SigninCtrl', function ($scope) {

$scope.login=function() {
    var client_id="191641883719-5eu80vgnbci49dg3fk47grs85e0iaf9d.apps.googleusercontent.com";
    var scope="email";
    var redirect_uri="http://local.host:9000/api/auth/google";
    var response_type="code";
    var url="https://accounts.google.com/o/oauth2/auth?scope="+scope+"&client_id="+client_id+"&redirect_uri="+redirect_uri+
    "&response_type="+response_type;
    window.location.replace(url);
  };
});

我的google项目中设置的redirect URI重定向到一个服务器页面到这个服务器页面：

'use strict';

var _ = require('lodash');
var request = require('request');
var qs = require('querystring');
var fs = require('fs');

// Get list of auths
exports.google_get = function (req,res){
  var code = req.query.code,
      error = req.query.error;

  if(code){
    //make https post request to google for auth token
    var token_request = qs.stringify({
      grant_type: "authorization_code",
      code: code,
      client_id: "191641883719-5eu80vgnbci49dg3fk47grs85e0iaf9d.apps.googleusercontent.com",
      client_secret: process.env.GOOGLE_SECRET,
      redirect_uri: "http://local.host:9000/api/auth/google"
    });
    var request_length = token_request.length;
    var headers = {
      'Content-length': request_length,
      'Content-type':'application/x-www-form-urlencoded'
    };

    var options = {
      url:'https://www.googleapis.com/oauth2/v3/token',
      method: 'POST',
      headers: headers,
      body:token_request
    };

    request.post(options,function(error, response, body){
      if(error){
        console.error(error);
      }else{
        //WHAT GOES HERE?

      }
    });
  }
  if(error){
    res.status(403);
  }
}

我能够成功地将 google 返回的代码交换为身份验证令牌对象并将其记录到终端。有人告诉我应该使用以下方法设置 cookie：

res.setHeader('Content-Type', 'text/plain');
res.setCookie('SID','yes',{
  domain:'local.host',
  expires:0,
  path:'/dashboard',
  httpOnly:false
});

 res.status(200);
 res.end();

随后是页面上的控制器，我将用户引导至验证会话。

我做错了什么？

Answer 1

既然你已经完成了艰苦的工作，那么讨论 passport.js 是没有意义的，它实际上是为了简化这种社交登录身份验证而编写的。

让我们直接进入会话实现逻辑。

您需要在 app.js/server.js 中设置以下标头：

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
    next();
});

假设您在成功登录后返回此令牌：

{
    name : "some name",
    role : "some role",
    info : "some info"
}

您可以在 Angular 服务或控制器中使用客户端功能：

function(user,callback){
    var loginResource = new LoginResource(); //Angular Resource
    loginResource.email = user.email;
    loginResource.password = user.password;
    loginResource.$save(function(result){
        if(typeof result !== 'undefined'){
            if(result.type){
                $localStorage.token = result.token;
                $cookieStore.put('user',result.data);
                $rootScope.currentUser = result.data;
            }
        }
        callback(result);
    }); 
}

LoginResource 调用返回身份验证令牌的 REST 端点。

您可以将您的身份验证令牌存储在localStorage 和cookieStore。

localStorage 确保即使用户关闭了浏览器会话，我们也会保存令牌。 如果他清除了 localStorage 和 cookieStorage 则将他注销，因为您没有任何有效的令牌来授权用户。

这与我使用here 的逻辑相同。如果您需要更多帮助，请告诉我。