Короткий вступ до OAuth за допомогою Passport.js

Що таке OAuth?

OAuth (Open Authorization) - це протокол авторизації. Додаток третьої сторони може використовувати його для доступу до даних користувачів із веб-сайту (наприклад, Google або Twitter), не повідомляючи їх пароль. Такі сайти, як Quora, Medium, AirBnb та багато інших, пропонують аутентифікацію за допомогою OAuth.

OAuth справді робить наше життя простішим, усуваючи необхідність запам'ятовувати пароль кожного облікового запису, який ви створюєте майже на будь-якому веб-сайті. Потрібно лише пам’ятати пароль основного облікового запису постачальника послуг OAuth.

Що таке Passport.js?

Passport - це проміжне програмне забезпечення, яке реалізує автентифікацію на веб-додатках на базі Express. Він надає понад 500 стратегій. Що це за стратегії? Стратегії використовуються для автентифікації запитів. Кожна стратегія має свій власний пакет npm (наприклад, твиттер паспорта, паспорт google-oauth20). Перед використанням стратегію потрібно налаштувати.

Навіщо використовувати Passport.js?

Ось шість причин, за якими ви повинні використовувати паспорт:

  • Він легкий
  • Легко налаштовується
  • Підтримує постійні сеанси
  • Пропонує OAuth
  • Надає окремі модулі для кожної стратегії
  • Дає можливість реалізувати власні стратегії

Давайте щось побудуємо

Для початку нам потрібно встановити паспорт від NPM:

npm install passport 

Ми збираємося створити просту програму, яка надає користувачеві доступ до секретного маршруту, лише якщо він увійшов у систему. Я буду використовувати стратегію паспорта-google-oauth20 у цьому посібнику. Не соромтеся використовувати будь-яку іншу вподобану вам стратегію, але обов’язково перевірте документи, щоб дізнатися, як вона налаштована.

Перш ніж продовжувати, нам потрібні clientID та clientSecret. Щоб отримати його, перейдіть на //console.developers.google.com і створіть новий проект. Потім перейдіть до Увімкнути API та служби та ввімкніть API Google+. Виберіть API і натисніть на створення облікових даних.

Заповніть форму та використовуйте однакову URL-адресу зворотного виклику як у формі, так і у вашому файлі. Не забудьте прочитати коментарі до коду, щоб зрозуміти, як все поєднується.

app.js

// Required dependencies const express = require('express'); const app = express(); const passport = require('passport'); const GoogleStrategy = require('passport-google-oauth20'); const cookieSession = require('cookie-session'); // cookieSession config app.use(cookieSession({ maxAge: 24 * 60 * 60 * 1000, // One day in milliseconds keys: ['randomstringhere'] })); app.use(passport.initialize()); // Used to initialize passport app.use(passport.session()); // Used to persist login sessions // Strategy config passport.use(new GoogleStrategy({ clientID: 'YOUR_CLIENTID_HERE', clientSecret: 'YOUR_CLIENT_SECRET_HERE', callbackURL: '//localhost:8000/auth/google/callback' }, (accessToken, refreshToken, profile, done) => { done(null, profile); // passes the profile data to serializeUser } )); // Used to stuff a piece of information into a cookie passport.serializeUser((user, done) => { done(null, user); }); // Used to decode the received cookie and persist session passport.deserializeUser((user, done) => { done(null, user); }); // Middleware to check if the user is authenticated function isUserAuthenticated(req, res, next) { if (req.user) { next(); } else { res.send('You must login!'); } } // Routes app.get('/', (req, res) => { res.render('index.ejs'); }); // passport.authenticate middleware is used here to authenticate the request app.get('/auth/google', passport.authenticate('google', { scope: ['profile'] // Used to specify the required data })); // The middleware receives the data from Google and runs the function on Strategy config app.get('/auth/google/callback', passport.authenticate('google'), (req, res) => { res.redirect('/secret'); }); // Secret route app.get('/secret', isUserAuthenticated, (req, res) => { res.send('You have reached the secret route'); }); // Logout route app.get('/logout', (req, res) => { req.logout(); res.redirect('/'); }); app.listen(8000, () => { console.log('Server Started!'); }); 

index.ejs

  • Login
  • Secret
  • Logout

Як бачите, ми створили /secretмаршрут і надаємо доступ до нього лише за умови автентифікації користувача. Щоб перевірити, чи аутентифіковано користувача, ми створили проміжне програмне забезпечення, яке перевіряє, чи в запиті є об’єкт користувача. Нарешті, для виходу ми використали req.logout()метод, передбачений паспортом, щоб очистити сесію.

Ось кілька ресурсів, щоб дізнатись більше про паспорт

Офіційна документація Passport.js

Проста, ненав’язлива автентифікація для Node.js www.passportjs.org

Висновок

Тут ми побачили лише одну стратегію. Є ще 500+. Я настійно рекомендую вам ознайомитися з офіційною документацією Passport та дізнатись, що ще вони пропонують. Дякуємо, що знайшли час прочитати це. Не соромтеся спілкуватися зі мною на LinkedIn, Twitter та GitHub. Я бажаю вам успіху!

Попередня стаття

Короткий вступ до Матеріального дизайну за допомогою Materialize

Що таке матеріальний дизайн? medium.freecodecamp.org