Question

我已经在Node JS中成功实现了多个社交登录。

我坚持使用MEAN堆栈中的实现。

到目前为止我已经实现的流程：

第1步：

角度按钮。点击时，我在Node中调用一个API，该API返回必须将用户转发到的OAuth URL。

第二步：

一旦用户输入正确的凭据，就会生成access_token并将其发送到Node中的回调URL。

第3步：

无论是否已生成access_token，我都需要向Angular发送回调。我不确定如何将数据传递到Angular Page。

这是正确的方法吗？

Answer 1

所以我本人正在做一个卑鄙的社交媒体项目，所以我使用了oauth.io，

https://github.com/oauth-io/oauth-js

它真正易于使用且可实现的唯一要知道的事情是如何导入angular中的npm软件包。

linkedin HTML组件

    <html>
<header>

</header>

<body>

<a (click)="linkedinConnector()" id="linkedin-button" class="btn btn-block btn-social btn-linkedin">
  <i class="fa fa-linkedin"></i> Sign in with Linkedin
</a>

</body>
</html>

linkendin TS组件

import { Component, OnInit } from '@angular/core';
import 'oauthio-web';


declare var OAuth: any;
@Component({
  selector: 'app-linkedin-connector',
  templateUrl: './linkedin-connector.component.html',
  styleUrls: ['./linkedin-connector.component.css']
})

export class LinkedinConnectorComponent implements OnInit {

  constructor(private api: ApiService) { }

  ngOnInit() {}


  public linkedinConnector() {
    OAuth.initialize('OAUTH-IO PUBLIC KEY');

    // Use popup for oauth
    OAuth.popup('linkedin2').then(linkedin => {
      console.log('linkedin:', linkedin.access_token);

      linkedin.get('/v1/companies/[company-ID]/updates?format=json').then(data => {
       //do with the data what you want
      });
    });
  }

}

但是我使用弹出窗口而不是重定向。他们也已重定向，因此您可以使用那里的文档来实现
http://docs.oauth.io/

Answer 2

有两种方法可以做到这一点。一种是使用passport.js和OIDC客户端。这是两个强化的示例

Passport.js implementation

Oidc implementation

Answer 3

因此，当生成身份验证令牌时。您将用户重定向到一些回调URL以及auth令牌。您的节点服务器将侦听该URL，并将使用某些用于会话的节点库来存储用户会话。随之而来的是，您将执行一个res.redirect重定向到该URL，如果未将其重定向到其他URL，则会生成该用户生成的身份验证令牌。

在您的角度应用程序中，您有两个URL登录URL，即登录URL。

如果身份验证成功：

因此，如果生成了身份验证令牌，则将用户重定向到登录的url并为该用户设置会话cookie。

万一验证失败：

如果未生成身份验证令牌，则将用户重定向到具有某些错误状态的登录URL，这是url查询参数的一部分。像/ login？auth_error = true这样的东西，您可以在其中适当地处理auth_error并在客户端上显示。

从安全角度出发，在节点层上编写一个中间件，该中间件将验证所有api请求，并检查用户会话cookie是否有效，否则将其重定向到登录页面。

在我看来，可以有多种方法来执行此操作，但这就是我在应用程序中实现登录的方式。所以这个答案就是从这个角度来看的。

Answer 4

在Angular中，您可以使用已经可用的库。无需自己动手。在这里，您具有两个同样经过OIDC认证的此类库的链接：

我还在Google的OIDC身份验证说明中添加了link，其中您具有所有必要的信息，可以配置库以使用来自Google的OIDC身份验证。

还请检查此库angular-6-social-login，该库提供Google，Facebook和LinkedIn的登录信息。

这些都是开源的，因此您仍然可以自己进行操作，并使用库作为示例来进行操作。

如何在MEAN堆栈中实现社交登录？

4 个答案: