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

Question

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

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

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

在此注册之后，如果用户再次点击通过 facebook 注册，他将被重定向到 facebook（如果他已经登录），他会自动重定向到服务器路由，该路由会检查此类用户是否已经注册，然后将他重定向到SPA主页

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

Answer 1

我想在我的 Angular2 应用程序中执行身份验证和注册。

您要查找的是Implicit Grant，其中 Facebook 作为授权服务器和资源服务器。 Implicit Grant 支持对单页应用程序（例如您的 Angular2 应用程序）进行授权，而 Facebook Graph API 支持对用户信息的请求。

如何在我的应用中正确集成这样的工作流程？

由于Facebook does not support OpenID Connect，您将需要使用 OAuth2 伪身份验证（需要避免陷阱）。这将涉及四个步骤：

1. 将用户重定向到 Facebook 进行登录，
2. 验证从 Facebook 登录页面返回的重定向并存储访问令牌，
3. 调用 Facebook 的 Graph API 以请求相关访问令牌的用户信息，并且
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. 即用户登录后，您的客户端应用程序会收到一个访问令牌，它使用该令牌来发出对受保护 API 的请求。为了避免这些陷阱，最好注意它们：

1. 访问令牌不是身份验证的证明。
2. 对受保护 API 的访问不是身份验证的证明。
3. 攻击者可以注入访问令牌。
4. 访问令牌没有受众限制。
5. 攻击者可以注入无效的用户信息。
6. 每个身份提供者都可能有自己的身份协议。

Answer 2

我只是建议 this tut on auth0 + A2 。