使用Angular 2和WebAPI进行社交登录

Question

我正在尝试研究如何使用.NET Core WebAPI解决方案有效地使社交登录与Angular 2一起工作。

目前，我只对谷歌登录感兴趣，据我所知它使用OAuth。从我在线研究后可以看到，我需要使用'angular2-jwt'包来处理JSON令牌。我是否需要使用IdentityServer来处理后端的社交登录？

我在登录后将用户重定向到谷歌然后收集数据谷歌返回时，我也有点不知所措。

我已经在有角度2的社交登录上找到了一些混合资源，但似乎找不到任何简洁的回答我与.NET Core相关的问题。

作为一个注释，在未来，我很可能会为不想使用社交登录的人集成进一步的社交登录和常规注册页面，所以我想找到一个可以轻松扩展以适应这种情况的解决方案。

Answer 1

有一个简单而伟大的angular2-social-login插件https://www.npmjs.com/package/angular2-social-login，带有Google，Facebook和Linkedin登录选项。

完整的例子可以在这里找到https://github.com/heresy/angular2-social-login-example

安装后，您只需为您的域提供API_KEYS（在开发模式下，它可能是http://localhost:4200）如果您没有为特定社交网络提供密钥，则需要删除providers数组中的相应项。否则，您将在控制台中收到错误。

let providers = {
    "google": {
      "clientId": "GOOGLE_CLIENT_ID"
    },
    "linkedin": {
      "clientId": "LINKEDIN_CLIENT_ID"
    },
    "facebook": {
      "clientId": "FACEBOOK_CLIENT_ID",
      "apiVersion": "<version>" //like v2.4 
    }
  };

将Google，Facebook或Linkedin按钮连接到signIn功能。

<button (click)="signIn('google')">google</button>

如果您的API密钥有效，将使用登录表单打开一个新窗口。您无需担心重定向，插件会处理它。输入有效的用户名和密码后，用户数据对象将返回到signIn函数。此对象将包含“name”，“email”，“token”等字段。在下面的代码中，它只是写入控制台。

    signIn(provider){
        this.sub = this._auth.login(provider).subscribe(
          (data) => {
            console.log(data);
        }
    )
  }

现在，当您拥有此数据时，可以将其发送到后端，以注册或登录用户。

您想将JWT与ASP NET Web Api一起使用。在这里你可以找到很好的解决方案：https://github.com/cuongle/WebApi.Jwt

对于Angular应用程序，到目前为止我使用的最佳解决方案是：https://github.com/auth0/angular2-jwt

所以这个过程将是：

1. 尝试使用Google，Facebook或Linkedin登录
2. 如果登录成功，将检索用户数据
3. 使用JWT实现将数据发送到API，执行检查，然后将JWT发送回Angular应用程序
4. 对于将来的所有请求，angular2-jwt插件将使用此令牌，但它有效且未过期。