В этом руководстве мы будем реализовывать аутентификацию через Facebook и GitHub в веб-приложении Node.js. Для этого мы будем использовать Passport , промежуточное ПО аутентификации для Node.js. Паспорт поддерживает аутентификацию с провайдерами OpenId / OAuth .
Express Web App
Перед началом работы убедитесь, что на вашем компьютере установлен Node.js.
Мы начнем с создания папки для нашего приложения и последующего доступа к этой папке в терминале:
mkdir AuthApp cd AuthApp Для создания приложения узла мы будем использовать следующую команду:
npm init
Вам будет предложено предоставить некоторую информацию для package.json узла. Просто нажмите Enter до конца, чтобы выйти из конфигурации по умолчанию.
Далее нам понадобится HTML-файл для отправки клиенту. Создайте файл с именем auth.html в корневой папке вашего приложения со следующим содержимым:
<html> <head> <title>Node.js OAuth</title> </head> <body> <a href=auth/facebook>Sign in with Facebook</a> <br></br> <a href=auth/github>Sign in with Github</a> </body> </html>
Вот и весь HTML-код, который нам понадобится для этого урока.
Вам также понадобится Express , фреймворк для создания веб-приложений, вдохновленный Sinatra Руби. Чтобы установить Express, введите в терминале следующую команду:
npm install express --save
Как только вы это сделаете, пришло время написать код.
Создайте файл index.js в корневой папке вашего приложения и добавьте в него следующее содержимое:
/* EXPRESS SETUP */ const express = require('express'); const app = express(); app.get('/', (req, res) => res.sendFile('auth.html', { root : __dirname})); const port = process.env.PORT || 3000; app.listen(port , () => console.log('App listening on port ' + port));
В приведенном выше коде мы требуем Express и создаем наше приложение Express, вызывая express () . Затем мы объявляем маршрут для домашней страницы нашего приложения. Там мы отправляем созданный нами HTML-файл клиенту, который обращается к этому маршруту. Затем мы используем process.env.PORT чтобы установить для порта переменную окружения, если она существует. В противном случае мы будем использовать значение по умолчанию 3000 , то есть порт, который мы будем использовать локально. Это дает вам достаточно гибкости, чтобы перейти от разработки непосредственно к производственной среде, где порт может быть установлен поставщиком услуг, например, Heroku . Прямо ниже мы вызываем app.listen () с установленной нами переменной порта и простым журналом, чтобы сообщить нам, что все работает нормально и на каком порту приложение прослушивает.
Теперь мы должны запустить наше приложение, чтобы убедиться, что все работает правильно. Просто напишите на терминале следующую команду:
node index.js
Вы должны увидеть сообщение: App listening on port 3000 . Если это не так, вы, вероятно, пропустили шаг. Вернитесь и попробуйте снова.
Двигаясь дальше, давайте посмотрим, обслуживается ли наша страница клиенту. Перейдите в веб-браузер и перейдите по http://localhost:3000 .
Если вы видите страницу, которую мы создали в auth.html , мы auth.html к работе.
Вернитесь к терминалу и остановите приложение, нажав Ctrl + C. Поэтому помните, что когда я говорю «запустите приложение», вы пишете node index.js , а когда я говорю «остановить приложение», вы делаете Ctrl + C. Ясно? Хорошо, вы только что запрограммированы 🙂
Настройка паспорта
Как вы скоро поймете, Passport позволяет легко аутентифицировать наших пользователей. Давайте установим Passport с помощью следующей команды:
npm install passport --save
Теперь мы должны настроить паспорт. Добавьте следующий код внизу файла index.js :
/* PASSPORT SETUP */ const passport = require('passport'); app.use(passport.initialize()); app.use(passport.session()); app.get('/success', (req, res) => res.send("You have successfully logged in")); app.get('/error', (req, res) => res.send("error logging in")); passport.serializeUser(function(user, cb) { cb(null, user); }); passport.deserializeUser(function(obj, cb) { cb(null, obj); });
Здесь мы требуем Passport и инициализируем его вместе с промежуточным программным обеспечением для аутентификации сеанса непосредственно в нашем приложении Express. Затем мы устанавливаем маршруты '/success' и '/error' , которые будут отображать сообщение о том, как прошла аутентификация. Это тот же синтаксис для нашего последнего маршрута, только на этот раз вместо использования [res.SendFile()](http://expressjs.com/en/api.html#res.sendFile) мы используем [res.send()](http://expressjs.com/en/api.html#res.send) , который отображает данную строку как text/html в браузере. Затем мы используем обратные вызовы serializeUser и deserializeUser . Первый будет вызван при аутентификации, и его задача — сериализовать пользовательский экземпляр и сохранить его в сеансе через cookie. Второй будет вызываться при каждом последующем запросе на десериализацию экземпляра, предоставляя ему уникальный идентификатор cookie в качестве «учетных данных». Подробнее об этом вы можете прочитать в паспортной документации .
Как примечание, это очень простое наше приложение-пример будет прекрасно работать без deserializeUser , но оно убивает цель сохранения сеанса, что вам нужно в каждом приложении, требующем входа в систему.
Это все для фактической настройки паспорта. Теперь мы наконец можем заняться бизнесом.
Реализация аутентификации Facebook
Первое, что нам нужно сделать, чтобы обеспечить аутентификацию Facebook, это установить пакет passport-facebook . Вы знаете, как это происходит:
npm install passport-facebook --save
Теперь, когда все настроено, добавить аутентификацию Facebook очень просто. Добавьте следующий код внизу файла index.js :
/* FACEBOOK AUTH */ const FacebookStrategy = require('passport-facebook').Strategy; const FACEBOOK_APP_ID = 'your app id'; const FACEBOOK_APP_SECRET = 'your app secret'; passport.use(new FacebookStrategy({ clientID: FACEBOOK_APP_ID, clientSecret: FACEBOOK_APP_SECRET, callbackURL: "/auth/facebook/callback" }, function(accessToken, refreshToken, profile, cb) { return cb(null, profile); } )); app.get('/auth/facebook', passport.authenticate('facebook')); app.get('/auth/facebook/callback', passport.authenticate('facebook', { failureRedirect: '/error' }), function(req, res) { res.redirect('/success'); });
Давайте пройдемся по этому блоку кода шаг за шагом. Во-первых, нам требуется модуль passport-facebook . Затем мы объявляем переменные, в которых мы будем хранить наш идентификатор приложения и секрет приложения (вскоре мы увидим, как их получить). После этого мы сообщаем Passport use экземпляр FacebookStrategy нам необходим. Чтобы реализовать указанную стратегию, мы даем ей наш идентификатор приложения и секретные переменные приложения, а также callbackURL который мы будем использовать для аутентификации пользователя. В качестве второго параметра требуется функция, которая будет возвращать информацию профиля, предоставленную пользователем.
Далее мы настраиваем маршруты для обеспечения аутентификации. Как вы можете видеть в callbackURL мы перенаправляем пользователя на маршруты /error и /success мы определили ранее. Мы используем passport.authenticate , который пытается аутентифицироваться с помощью данной стратегии по ее первому параметру, в данном случае это facebook . Вы, наверное, заметили, что мы делаем это дважды. На первом он отправляет запрос в наше приложение Facebook. Второй вызывается URL-адресом обратного вызова, который Facebook будет использовать для ответа на запрос входа в систему.
Теперь вам нужно создать приложение для Facebook. Подробнее о том, как это сделать, см. Очень подробное руководство Facebook «Создание приложения Facebook» , в котором приведены пошаговые инструкции по его созданию.
Когда ваше приложение будет создано, перейдите в Настройки на странице конфигурации приложения. Там вы увидите свой идентификатор приложения и секрет приложения . Не забудьте заменить переменные, которые вы объявили для них в файле index.js на соответствующие им значения.
Затем введите «localhost» в поле « Домены приложения» . Затем перейдите к Добавить платформу внизу страницы и выберите Веб-сайт . Используйте http://localhost:3000/auth/facebook/callback в качестве URL сайта .
На левой боковой панели, в разделе « Продукты », вы должны увидеть Facebook Login . Нажмите, чтобы попасть туда.
Наконец, установите для поля URI валидного OAuth-перенаправления значение http://localhost:3000/auth/facebook/callback .
Если вы запустите приложение сейчас и нажмете ссылку « Войти через Facebook» , Facebook попросит вас предоставить необходимую информацию, и после входа в систему вы будете перенаправлены на маршрут /success , где вы увидите сообщение You have successfully logged in .
Это оно! Вы только что настроили аутентификацию Facebook . Довольно легко, правда?
Реализация аутентификации GitHub
Процесс добавления GitHub Authentication очень похож на то, что мы сделали для Facebook. Сначала мы установим модуль passport-github :
npm install passport-github --save
Теперь перейдите в файл index.js и добавьте следующие строки внизу:
/* GITHUB AUTH */ const GitHubStrategy = require('passport-github').Strategy; const GITHUB_CLIENT_ID = "your app id" const GITHUB_CLIENT_SECRET = "your app secret"; passport.use(new GitHubStrategy({ clientID: GITHUB_CLIENT_ID, clientSecret: GITHUB_CLIENT_SECRET, callbackURL: "/auth/github/callback" }, function(accessToken, refreshToken, profile, cb) { return cb(null, profile); } )); app.get('/auth/github', passport.authenticate('github')); app.get('/auth/github/callback', passport.authenticate('github', { failureRedirect: '/error' }), function(req, res) { res.redirect('/success'); });
Это выглядит знакомо! Это практически так же, как и раньше. Разница лишь в том, что мы используем GithubStrategy вместо FacebookStrategy .
Пока что … то же самое. Если вы еще не поняли, следующим шагом будет создание нашего приложения GitHub . GitHub имеет очень простое руководство по созданию приложения GitHub , которое проведет вас через весь процесс.
Когда вы закончите, на панели конфигурации вам нужно будет задать URL-адрес домашней страницы http://localhost:3000/ а URL-адрес обратного вызова авторизации — http://localhost:3000/auth/github/callback , как мы сделали с Facebook.
Теперь просто перезапустите Node-сервер и попробуйте войти, используя ссылку GitHub.
Оно работает! Теперь вы можете позволить своим пользователям входить в GitHub.
Вывод
В этом уроке мы увидели, как Passport сделал задачу аутентификации довольно простой. Реализация аутентификации Google и Twitter происходит по почти одинаковой схеме. Я призываю вас реализовать их с помощью модулей passport-google и passport-twitter . Тем временем код этого приложения доступен на GitHub .