Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Node.js

Аутентификация через социальные сети для приложений Node.js при помощи Passport

by
Read Time:7 minsLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

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

Простым выходом из ситуации является предоставление пользователям возможности пройти аутентификацию при помощи имеющихся у них аккаунтов в социальных сетях, например: Facebook, Twitter, Google и т.д. В этой статье мы собираемся осуществить как раз это и добавить возможность входа через социальные сети в пример приложения Node.js, созданного в первой части этой серии, посвященной аутентификации. В результате у нас будет возможность пройти аутентификацию за счет наших аккаунтов Facebook и Twitter при помощи промежуточного ПО (* программное обеспечение. Здесь и далее примеч. пер.) Passport.

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

Вход через социальные сети

Для тех, кто не в курсе, возможность входа через  социальные сети является типом Single Sign-on (* технологии единого входа) за счет использования имеющейся информации со сайтов социальных сетей, например: Facebook, Twitter и т.д., что предполагает наличие у пользователей уже созданных аккаунтов.

Возможность входа через социальные сети реализуется главным образом за счет какой-либо схемы аутентификации, например OAuth 2.0. Для подробного ознакомления с разными потоками (* метод получения токена (уникального идентификатора) для авторизации) входа, которые поддерживает OAuth, прочитайте эту статью. Мы отдали предпочтение Passport для реализации возможности входа через социальные сети для нас, поскольку он предоставляет разнообразные модули для множества провайдеров OAuth, будь то Facebook, Twitter, Google, GitHub и т.д. В данной статье мы будем использовать модули passport-facebook и passport-twitter для предоставления возможности входа при помощи имеющихся у пользователей аккаунтов в Facebook или Twitter.

Аутентификация через Facebook

Для того, чтобы сделать возможной аутентификацию через Facebook, нам для начала необходимо создать приложение Facebook при помощи Портала Facebook для разработчиков. Запишите App ID и App Secret и укажите URL-адрес обратного вызова, перейдя в Settings и указав значение в поле Site URL раздела Website для приложения. Также убедитесь, что ввели корректный адрес электронной почты в поле Contact Email. Он необходим для того, чтобы сделать приложение общедоступным.

Далее перейдите в раздел Status & Review (* App Review) и переключите ползунок в положение Yes, чтобы сделать приложение доступным для пользователей. Мы создаем конфигурационный файл (* файл, с данными о предыдущей, текущей или будущей конфигурации системы или приложения), fb.js, для размещения информации о конфигурации приложения, которая будет необходима для подключения к Facebook.

Стратегия входа через Facebook

Теперь переходим обратно к нашему приложению и определяем стратегию Passport для аутентификации через Facebook при помощи модуля FacebookStrategy, используя вышеуказанные настройки для получения профиля пользователя Facebook и показа его данных в представлении.

Настройка маршрутов

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

Страница для входа нашей демоверсии приложения выглядит следующим образом:

Login With Facebook or TwitterLogin With Facebook or TwitterLogin With Facebook or Twitter

При нажатии кнопки Login with Facebook будет осуществлена попытка аутентификации через Facebook. Если вы уже входили в Facebook, то вам будет выведен нижеследующий диалог, в котором запрашивается ваше разрешение на получение доступа к данным вашего профиля и адресу электронной почты, или же вас попросят войти в Facebook и затем будет показан этот диалог.

Facebook Auth - Grant PermissionsFacebook Auth - Grant PermissionsFacebook Auth - Grant Permissions

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

Уместно заметить, что помимо основной информации, которую предоставляет эта демоверсия приложения, вы могли бы использовать тот же самый механизм аутентификации для извлечения более полезной информации о пользователе, например, его список друзей, за счет указания соответствующей области действия и использования Facebook API с токеном доступа, полученным вместе с данными профиля пользователя.

Аутентификация через Twitter

Для осуществления аутентификации через Twitter необходимо подключить подобный модуль для реализации аутентификации, и Passport помогает в этом за счет своего модуля passport-twitter.

Для начала вам необходимо создать новое приложение Twitter при помощи интерфейса Управления приложением. Один момент, на который стоит здесь обратить внимание, - это то, что при указании URL обратного вызова Twitter не работает гладко с ним, если в поле для ввода URL обратного вызова указано "localhost". Для преодоления этой трудности при разработке вы могли бы использовать специальный адрес обратной связи, или "127.0.0.1" вместо "localhost". После создания приложения запишите следующие ключ API и секретную информацию в конфигурационный файл таким образом:

Стратегия входа через Twitter

Стратегия входа через Twitter является экземпляром TwitterStrategy и имеет следующий вид:

Настройка маршрутов

Теперь для того чтобы протестировать приложение, убедитесь, что вы используете http://127.0.0.1: <port> , а не http://localhost: <port>. Как мы упоминали выше, похоже, что возникает проблема при обмене токенами с Twitter, если в качестве имени хоста указано "localhost". При нажатии кнопки Login with Twitter, как и ожидалось, происходит запрос у пользователя разрешения на использование данных аккаунта пользователя Twitter.

Twitter Auth - Grant PermissionsTwitter Auth - Grant PermissionsTwitter Auth - Grant Permissions

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

Заключение

Вот и все!! Мы успешно добавили возможности входа через Facebook и Twitter в наш пример приложения без написания большого количества кода и не связываясь со сложностями, связанными с механизмом аутентификации, передав тяжелую работу Passport. Подобные стратегии входа могут быть написаны для множества провайдеров, поддерживаемых Passport. С кодом для всего приложения можно ознакомиться в этом репозитории git. Если хотите, то можете расширить его возможности и использовать его в ваших собственных проектах.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.