Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Node.js
Code

Автентифікація через соціальні мережі для застосунків Node.js за допомогою Passport

by
Length:MediumLanguages:

Ukrainian (українська мова) 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 Twitter

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

Facebook 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 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.