angular - 使用 ASP.NET Core REST API 在 SPA (Angular 2) 中进行社交注册

Question

我已经实现了使用 ASP.NET Core WebApi 作为后端的简单 Angular 2 应用程序。对于身份验证，我添加了生成 JWT 访问和刷新 token 的“/登录”路由，这些 token 又由 SPA 存储在 localStorage 中并在 HTTP 请求中使用。

现在我想集成社交注册功能，以便用户可以使用 ie Facebook 按钮登录。从用户的 Angular 来看，我想将其分为 3 个步骤:

1. 单击“通过 Facebook 注册”按钮并重定向到 Facebook 网站(以登录并确认我的应用请求)。
2. 点击确认并重定向到我的 SPA/注册页面，他的名字已经从 Facebook 个人资料填写
3. 填写剩余的字段(比如他最喜欢的玩具)并点击“完成注册”

此注册后，如果用户再次点击通过 facebook 注册，他将被重定向到 facebook(如果他已经登录)，他会自动重定向到服务器路由，检查这样的用户是否已经注册，如果已经注册，则将他重定向到SPA主页

如何在我的应用程序中正确集成这样的工作流程？注意:我想在我的 Angular2 应用程序中执行身份验证和注册，而不是在不同的身份验证服务器上。

Answer 1

I want to perform authentication and registration inside my Angular2 app.

您正在寻找的是 Implicit Grant ，以 Facebook 作为授权服务器和资源服务器。 Implicit Grant 支持对单页应用程序(例如您的 Angular2 应用程序)的授权，Facebook Graph API 支持对用户信息的请求。

How to correctly integrate such a workflow in my app?

自 Facebook does not support OpenID Connect ，您将需要使用 OAuth2 伪身份验证(需要避免陷阱)。这将涉及四个步骤:

1. 将用户重定向到 Facebook 进行登录，
2. 验证从 Facebook 登录页面返回的重定向并存储访问 token ，
3. 调用 Facebook 的 Graph API 以请求相关访问 token 的用户信息，并且
4. 使用该用户信息填写您应用中的字段。

在第三步中调用 API 可能如下所示:

FB.api('/me', (user) => { 
    console.log(user.id); // 101540562372987329832845483
    console.log(user.email); // example@example.com
    console.log(user.first_name); // Bob
});

/me 是一个特殊的 Graph API 端点，“translates to the user_id of the person whose access token is currently being used to make the API calls.”端点然后返回相关的用户信息。

您的应用可以使用 Facebook user info填充其客户端字段和/或其服务器端数据库。 id 对您的应用来说是唯一的，不等同于 Facebook user_id； id 是唯一标识您的应用程序用户的合理方式。

将此流程正确集成到您的应用中的四个选项。

• 最好关注 Facebook's best practices .即:
• 使用他们的 Login with Facebook button和/或
• 使用他们的 Login for the Web JavaScript SDK.
• 或者，使用现有的 OAuth2 库，e.g. satellizer .
• 或者，如果您想做很多工作，manually build your own login flow .

旁白:OAuth2 伪身份验证是什么意思？

OAuth2 是一种伪认证方案，因为 OAuth2 is NOT an authentication protocol.也就是说，在用户登录后，您的客户端应用程序会收到一个访问 token ，用于向 protected API 发出请求。为了避免陷阱，最好了解它们:

1. 访问 token 不是身份验证的证明。
2. 访问 protected API 并不是身份验证的证明。
3. 攻击者可以注入(inject)访问 token 。
4. 访问 token 没有观众限制。
5. 攻击者可以注入(inject)无效的用户信息。
6. 每个身份提供者可能有自己的身份协议(protocol)。