Question

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

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

我在登录后将用户重定向到谷歌然后收集google返回的数据时，我也有点失落。

我在角度为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函数。这个对象会包含＆＃39; name＆＃39;，＆＃39; email＆＃39;，＆＃39; token＆＃39;等字段。在下面的代码中，它只是写入控制台。

    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

所以过程将是：

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

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

1 个答案: