ASP.NET 核心 REST API 在 SPA (Angular 2) 中进行社交注册
Social registration in SPA (Angular 2) with ASP.NET Core REST API
我已经实现了简单的 Angular 2 应用程序，它使用 ASP.NET Core WebApi 作为后端。对于身份验证，我添加了生成 JWT 访问和刷新令牌的“/登录”路由，这些令牌又由 SPA 存储在 localStorage 中并在 HTTP 请求中使用。
现在我想集成社交注册功能，以便用户可以使用 ie Facebook 按钮登录。从用户的角度来看，我想将其分为 3 个步骤：
- 单击“通过 Facebook 注册”按钮并重定向到 Facebook 网站（以登录并确认我的应用请求）。
- 点击确认并重定向到我的 SPA /注册页面，他的名字已经从 Facebook 个人资料填写
- 填写剩余字段（如他最喜欢的玩具）并单击 "Finish registration"
此注册后，如果用户再次点击通过 facebook 注册，他将被重定向到 facebook（如果他已经登录），他会自动重定向到服务器路由，检查这样的用户是否已经注册，如果是则重定向他到SPA主页
如何在我的应用程序中正确集成这样的工作流程？注意：我想在我的 Angular2 应用程序中执行身份验证和注册，而不是在不同的身份验证服务器上。
我只是建议 this tut on auth0 + A2 。
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 伪身份验证（有陷阱需要避免）。这将涉及四个步骤：
- 将用户重定向到 Facebook 进行登录，
- 验证从 Facebook 登录页面返回的重定向并存储访问令牌，
- 调用 Facebook 的图表 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是一个特殊的Graph API端点，“translates to the user_id of the person whose access token is currently being used to make the API calls.”端点然后returns相关的用户信息。
您的应用程序可以使用 Facebook user info 来填充其客户端字段 and/or 它的服务器端数据库。 id 是您的应用程序独有的，不等同于 Facebook user_id； id 是唯一标识应用用户的合理方式。
将此流程正确集成到您的应用程序中的四个选项。
- 可能最好遵循 Facebook's best practices。即：
- 使用他们的 Login with Facebook button and/or
- 使用他们的 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 不是身份验证的证明。
- 攻击者可以注入访问令牌。
- 访问令牌没有观众限制。
- 攻击者可以注入无效的用户信息。
- 每个身份提供者可能有自己的身份协议。
我已经实现了简单的 Angular 2 应用程序，它使用 ASP.NET Core WebApi 作为后端。对于身份验证，我添加了生成 JWT 访问和刷新令牌的“/登录”路由，这些令牌又由 SPA 存储在 localStorage 中并在 HTTP 请求中使用。
现在我想集成社交注册功能，以便用户可以使用 ie Facebook 按钮登录。从用户的角度来看，我想将其分为 3 个步骤：
- 单击“通过 Facebook 注册”按钮并重定向到 Facebook 网站（以登录并确认我的应用请求）。
- 点击确认并重定向到我的 SPA /注册页面，他的名字已经从 Facebook 个人资料填写
- 填写剩余字段（如他最喜欢的玩具）并单击 "Finish registration"
此注册后，如果用户再次点击通过 facebook 注册，他将被重定向到 facebook（如果他已经登录），他会自动重定向到服务器路由，检查这样的用户是否已经注册，如果是则重定向他到SPA主页
如何在我的应用程序中正确集成这样的工作流程？注意：我想在我的 Angular2 应用程序中执行身份验证和注册，而不是在不同的身份验证服务器上。
我只是建议 this tut on auth0 + A2 。
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 伪身份验证（有陷阱需要避免）。这将涉及四个步骤：
- 将用户重定向到 Facebook 进行登录，
- 验证从 Facebook 登录页面返回的重定向并存储访问令牌，
- 调用 Facebook 的图表 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是一个特殊的Graph API端点，“translates to the user_id of the person whose access token is currently being used to make the API calls.”端点然后returns相关的用户信息。
您的应用程序可以使用 Facebook user info 来填充其客户端字段 and/or 它的服务器端数据库。 id 是您的应用程序独有的，不等同于 Facebook user_id； id 是唯一标识应用用户的合理方式。
将此流程正确集成到您的应用程序中的四个选项。
- 可能最好遵循 Facebook's best practices。即：
- 使用他们的 Login with Facebook button and/or
- 使用他们的 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 不是身份验证的证明。
- 攻击者可以注入访问令牌。
- 访问令牌没有观众限制。
- 攻击者可以注入无效的用户信息。
- 每个身份提供者可能有自己的身份协议。