Аутентификация Facebook с помощью NodeJS и Passport.

Это немного сложно, но если вы можете сделать это с одним социальным провайдером, вы можете легко сделать это с кем угодно.

Для этой демонстрации я буду использовать ExpressJS, AngularJS во внешнем интерфейсе и токены JWT.

Первое, что вам нужно сделать, это создать свое приложение в Facebook для разработчиков, каждый социальный провайдер требует того же, и после этого они предоставят вам идентификатор и SECRET_KEY (возможно, с другими именами…).

С нашей точки зрения, мы разместим ссылку для входа в Facebook, мы оставим ее там, потому что нам нужно настроить маршрут, который она будет использовать, и некоторые другие вещи в бэкэнде, так что имейте это в виду:

<a href="/login/facebook" target="_self">Facebook Login</a>

Теперь самое интересное. Вам необходимо установить паспорт JS, и каждый провайдер требует определенного расширения паспорта. Ваш package.json должен иметь что-то вроде этого:

"express": "^4.15.2",
"jsonwebtoken": "^7.3.0",
“passport”: “⁰.3.2”,
“passport-facebook”: “².1.1”,

Как только это будет правильно установлено, мы можем перейти к файлу нашего сервера, запросить паспорт и фактически заставить наше приложение использовать стратегию facebook.

var express = require('express');
var passport = require('passport');
var Strategy = require('passport-facebook').Strategy;
passport.use(new Strategy({
    clientID: '1h321k2g3k12g3k1gkkgweliudh',
    clientSecret: 'kjfhadfjhadkfjhgaldfhaldkhg',
    callbackURL: 'http://localhost:3000/login/facebook/return'
  }, function(accessToken, refreshToken, profile, done) {        
      //here you can perform any DB query for saving the user or getting some information. we have access to his/her data through the 'profile' argument that we are been given. The 'done' argument is a callback function that we need to use with whatever is we want to send to the front end.
 done();
}));

Следует отметить, что вы НИКОГДА не должны хранить ID и SECRET таким образом, я просто сделал это с целью показать вам, куда все должно идти. Вы можете сохранить эти ключи как переменные среды на вашем компьютере или сервере.

Другое дело — callbackURL, который мы предоставили в facebook. Это маршрут, который они будут использовать, чтобы нанести ответный удар в случае успешной аутентификации!.

Теперь мы можем создать этот маршрут на стороне нашего сервера, чтобы выполнить фактическую аутентификацию, поэтому он будет использовать функцию паспорта. Это маршрут, который мы используем со ссылкой в ​​начале этого поста. Если наша серверная часть настроена, это вызовет серверы facebook для запроса разрешений у пользователя.

app.get('/login/facebook', passport.authenticate('facebook'))

Теперь, как мы упоминали ранее, если все работает нормально, Facebook выберет другой маршрут, который мы предоставили, помните?

callbackURL: 'http://localhost:3000/login/facebook/return'

Итак, давайте определим этот маршрут:

app.get('/login/facebook/return',
    passport.authenticate('facebook', { failureRedirect: '/' }),
    function(req, res) {
          // In the 'req' a we have access to what ever is that we pass to the 'done' function and we can go back to the front end with that information. The way i found to do this is to just pass the data to the url as params in this redirect like this:

      res.redirect('/?user=' + req.user.name)
  );

В интерфейсе URL-адрес изменится, и он принесет нам информацию, отправленную обратно. У Angular есть способ воспользоваться этим через $location:

$location.search() // this will break apart the query in the url giving you access to the data

Вот и все!