9

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

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

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

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

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

4

2 回答 2

6

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

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

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

由于Facebook 不支持 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 端点，它“转换为当前正在使用其访问令牌进行 API 调用的人的 user_id。 ”端点然后返回相关的用户信息。

您的应用程序可以使用该Facebook 用户信息来填充其客户端字段和/或其服务器端数据库。是您的应用所id独有的，并不等同于 Facebook user_id；这id是唯一识别您的应用程序用户的合理方式。

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

旁白：您所说的 OAuth2 伪身份验证是什么意思？

OAuth2 是一种伪身份验证方案，因为OAuth2 不是身份验证协议。也就是说，在用户登录后，您的客户端应用程序会收到一个访问令牌，该令牌用于发出对受保护 API 的请求。为了避免这些陷阱，最好了解它们：

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

我只想在 auth0 + A2 上建议这个tut。

于 2016-10-08T23:07:53.053 回答