Question

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

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

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

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

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

Answer 1

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

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

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

从Facebook does not support OpenID Connect开始，您将需要使用OAuth2伪身份验证（其中包含要避免的陷阱）。这将涉及四个步骤：

将用户重定向到Facebook进行登录，
从Facebook的登录页面验证重定向并存储访问令牌
致电Facebook的Graph API以请求相关访问令牌的用户信息，并
使用该用户信息填写应用中的字段。

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

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

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

您的应用可以使用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的请求。为了避免陷阱，了解它们是件好事：

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

Answer 2

我只想在auth0 + A2上建议this。

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

2 个答案: