护照与智威汤逊与Google/Facebook战略 - 我如何将智威汤逊与Google/Facebook战略相结合？

这个问题是任何人谁是熟悉护照与智威汤逊与Google/Facebook战略 - 我如何将智威汤逊与Google/Facebook战略相结合？

Node.js的
快递
护照
JWT认证与护照（JSON网络令牌）
Facebook的OAuth2.0的或谷歌的OAuth2 .0

我一直在做一些在线课程，并了解如何做以下两件事：

认证使用Passport本地策略+ JWT令牌使用Passport谷歌/ Facebook的战略+曲奇/会话
认证。

我试图结合这两个课程的内容基本上。我想使用Google策略+智威汤逊认证。我想使用JWT而不是cookies，因为我的应用程序将成为网络/移动/平板电脑应用程序，而且我需要访问来自不同域的api。

有我与这个有两个问题： 揭开序幕谷歌/ Facebook的OAuth的管道，你需要调用“/ auth /中的Facebook”或“/ auth /中谷歌”。 Oauth流程基本上都是一样的，所以当我从现在开始说'/ auth/google'时，我指的是两者之一。现在我遇到的问题是：在客户端上，我是否使用href按钮链接或axios/ajax调用来调用“/ auth/google”路由？如果我使用href或axios/ajax方法，我仍然遇到两种解决方案的问题。

在href方法问题： 当我分配一个<a>标签与A HREF到/ auth /中谷歌的认证工作完全正常。用户通过Google Auth流程进行推送，他们登录并调用'/ auth/google/callback'路由。我现在的问题是如何正确地将JWT令牌从'/ auth/google/callback'发送回客户端？

经过大量的谷歌搜索后，我看到人们已经简单地通过重定向查询参数中的oauth回调将JWT传递回客户端。例如：

res.redirect(301, `/dashboard?token=${tokenForUser(req.user)}`);

我与此有关的问题是，现在的身份验证能力保存在我的浏览器历史记录！我可以注销（销毁保存在localStorage中的令牌），然后只需查看我的浏览器URL历史记录，返回包含查询参数中的令牌的url，然后我将自动再次登录，而无需通过Google策略！这是一个巨大的安全缺陷，显然是解决这个问题的不正确方法。

的爱可信/ Ajax方法问题： 现在摆在我这个问题说明问题，我肯定知道，如果我得到这个工作，它会解决我与以前的href问题让所有的问题。如果我设法从axios.get（）调用中调用'/ google/auth'并在响应正文中接收JWT，我将不会将该标记作为url参数发送，并且不会保存在浏览器历史记录中！完美的权利？也仍有一些问题，这种方法:(

当试图调用axios.get('/auth/google')我得到以下错误：

我怎么一直试图解决的问题：

我将cors安装到了我的npm服务器上，并在我的index.js文件中添加了app.use(cors());。
我拿了一个刺，并在“授权的J中添加了”http://localhost:3000“ Google开发者控制台中的“avaScript起源”。

这些解决方案都没有解决这个问题，所以现在我真的觉得停滞不前。我想使用axios/ajax的方法，但我不知道如何克服这个错误。

对不起，这么长的留言，但我真的觉得我必须给你所有的信息，以便你能够帮助我。

再次感谢，期待收到您的来信！

来源

2017-09-24 Vaderico

我以这种方式解决了这个：

在前端（可移动应用程序）我做了登录请求谷歌（或Facebook）和用户之后，选择他的账户，并记录在我回来包含谷歌身份验证令牌和基本用户信息的响应。
然后，我将该Google认证令牌发送至后端，我的API向Google API发送了更多请求以确认该令牌。（See step 5）
成功请求后，您将获得基本的用户信息和电子邮件。在这一点上，你可以假设用户通过谷歌登录是好的，因为谷歌检查返回它没关系。
然后您只需注册或使用该电子邮件登录用户并创建该JWT令牌。
将令牌返回给客户端，并将其用于将来的请求。

我希望它有帮助。我多次实现了这一点，它显示出一个很好的解决方案。

来源

2017-09-24 08:27:46 vblazenka

我找到的解决方案是在弹出式窗口（window.open）中执行OAuth流程，它使用预定义的回调在成功验证后将令牌传递到前端。

下面是相关的代码示例，从本教程采取： https://www.sitepoint.com/spa-social-login-google-facebook/

这里是预先定义的回调和初始开启方式，从您的前端称为：

window.authenticateCallback = function(token) { 
    accessToken = token; 
}; 

window.open('/api/authentication/' + provider + '/start');

这里是您的OAuth回拨URL在成功验证（这是弹出窗口中的最后一步/页面）时应返回的内容：

<!-- src/public/authenticated.html --> 
<!DOCTYPE html> 
<html> 
    <head> 
    <title>Authenticated</title> 
    </head> 
    <body> 
    Authenticated successfully. 

    <script type="text/javascript"> 
     window.opener.authenticateCallback('{{token}}'); 
     window.close(); 
    </script> 
    </body> 
</html>

您的令牌现在可用于您的前端的预定义回调函数，您可以轻松地将其保存在localStorage中。

我想尽管如此，您可以在同一窗口中执行OAuth流程（无弹出窗口），并返回一个HTML页面（类似于上面），它只保存标记并立即将用户重定向到仪表板。

但是，如果您的前端域与您的api/auth服务器不同，那么您可能需要使用一次性使用时间敏感的令牌（由您的api/auth服务器重定向到您的前端通过你的api/auth服务器），你的前端可以用来调用和接收（使用axios）你的实际令牌。这样你就不会有浏览器历史安全问题。

来源

2017-12-23 02:16:05 nickjag

护照与智威汤逊与Google/Facebook战略 - 我如何将智威汤逊与Google/Facebook战略相结合？

回答

相关问题