Как реализовать социальные логины в MEAN-стеке? - PullRequest
Новая
       1

Как реализовать социальные логины в MEAN-стеке?

0 голосов
/ 19 сентября 2018

Я успешно внедрил несколько социальных логинов в Node JS.

Я застрял с реализацией в стеке MEAN.

Поток, который я реализовал до сих пор:

Шаг 1:

Кнопка в Angular.При щелчке я вызываю API в Node, который возвращает URL-адрес OAuth, на который должен быть перенаправлен пользователь.

Step2:

Как только пользователь вводит свои правильные учетные данные, генерируется access_token и отправляется на URL-адрес обратного вызова в Node.

Шаг 3:

Мне нужно отправить обратный вызов в Angular, был ли сгенерирован access_token или нет.Я не уверен, как передать данные на Angular Page.

Это правильный подход?

Ответы [ 4 ]

0 голосов
/ 25 сентября 2018

так что я сам делаю средний социальный медиа-проект, и я использовал oauth.io,

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

это действительно простая в использовании и реализуемая единственная вещь, которую вам нужно знатькак импортировать пакет npm в угловом формате.

компонент HTML 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/

0 голосов
/ 24 сентября 2018

Есть два способа сделать это.Один использует passport.js и клиент OIDC.Вот примеры обоих аутентификаций

Passport.js implementation

Oidc implementation

0 голосов
/ 24 сентября 2018

Итак, когда генерируется токен аутентификации.Вы будете перенаправлять пользователя на некоторый URL обратного вызова вместе с токеном авторизации.Ваш сервер узлов будет прослушивать этот URL и будет хранить сеанс пользователя, используя некоторую библиотеку узлов для сеансов.Наряду с этим, вы будете делать res.redirect на URL, на который приземлится пользователь, если сгенерирован токен авторизации, если не перенаправить его на какой-то другой URL.

Скажите, что в вашем угловом приложении у вас есть дваURL-адрес входа в систему, зарегистрированный URL-адрес.

В случае успешной аутентификации:

Так что, если генерируется токен авторизации, вы перенаправляете пользователя на зарегистрированный URL-адрес и устанавливаете cookie-файл сеанса для пользователя.

В случае сбоя аутентификации:

Если токен аутентификации не сгенерирован, вы будете перенаправлять пользователя на URL входа с некоторым состоянием ошибки как часть параметров запроса URL.Что-то вроде / login? Auth_error = true, где вы можете обрабатывать auth_error соответствующим образом и показывать на клиенте.

С точки зрения безопасности, напишите промежуточное программное обеспечение на уровне вашего узла, которое будет проверять все ваши запросы API и проверять, является ли файл cookie сеанса пользователядействителен или нет перенаправить его на страницу входа.

Также, на мой взгляд, для этого может быть несколько подходов, но именно так я реализовал вход в свои приложения.Таким образом, этот ответ с этой точки зрения.

0 голосов
/ 24 сентября 2018

В Angular вы можете использовать уже имеющиеся библиотеки для этого.Не нужно делать это самостоятельно.Здесь у вас есть ссылки на две такие библиотеки, которые также OIDC сертифицированы:

Я также добавляю ссылку в инструкции Google по аутентификации OIDC, где у вас есть вся необходимая информация для настройки библиотек на использованиеАутентификация OIDC от Google.

Проверьте также эту библиотеку angular-6-social-login , которая обеспечивает логин для Google, Facebook и LinkedIn.

Это все с открытым исходным кодом, таквы все еще можете сделать это самостоятельно и использовать библиотеки в качестве примеров того, как это сделать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...