Простий спосіб додати аутентифікацію в будь-який веб-додаток

Простий спосіб додати аутентифікацію в будь-який веб-додаток

Проблеми сучасної аутентифікації

Аутентифікація є невід'ємною частиною майже всіх сучасних додатків. Як розробники, в останні роки ми змогли насолодитися безліччю цікавих покращень в Інтернеті, але на жаль, якісної реалізації аутентифікації в додатках ми не побачили. У даної проблеми є кілька причин:

Особливості сучасної аутентифікації

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

Багатофакторна аутентифікація, яка також згадується як двоступенева перевірка, в даний час широко використовується в якості додаткового рівня безпеки. Реалізація цих функцій різниться, але в цілому підхід однаковий, при вході в додаток, користувачеві відправляється код за допомогою текстового повідомлення (або через спеціальний додаток, наприклад Google Authenticator).

Аутентифікація для однієї сторінки додатка

Для аутентифікації в односторінкових додатках, можна скористатися сесіями й аутентифікації на основі cookie, але цей метод часто ламається і як правило, не дуже добре адаптується. Якщо ми розробляємо програму на Angular, React. Vue, Ember, хорошим способом аутентифікації користувачів буде використання JSON Web Tokens (JWT).

JWT аутентифікація досить масивна для сучасних додатків, тому доведеться витратити багато часу і зусиль для її реалізації.

Простий спосіб інтеграції сучасної аутентифікації

Auth0 можна використовувати в веб-додатках і мобільних додатках з майже будь-якою комбінацією фронтенда і бекенд, ідеально підходить як для SPA і традиційних веб-додатків. Є багато готових способів інтеграції. на будь-якій мові і фреймворку, з відмінною документацією.

Крок 1: Додавання скрипта Auth0Lock

Lock - готовий віджет вікна входу в систему. Його можна додати з CDN або знайти його в NPM.

Крок 2: Конфігурація Auth0Lock

Конфігурація Auth0Lock включає в себе створення екземпляра служби.

Крок 3: Реалізація входу

Перше що потрібно зробити, це додати кнопку входу віджета Lock.

Тепер додамо обробник подій для кнопки, який буде відкривати Lock.

Після натискання на кнопку Sign In. з'явиться вікно входу віджета Lock.

Простий спосіб додати аутентифікацію в будь-який веб-додаток

Ви можете спробувати виконати вхід під тестовим користувачем. Коли користувач зареєструється, його токен і профіль буде збережений в локальному сховищі.

Простий спосіб додати аутентифікацію в будь-який веб-додаток

Крок 4. Виклик аутентифікації в API

Після реєстрації користувача, ви можете зателефонувати аутентифікації за допомогою API шляхом додавання JWT як заголовок аутентифікації.

У цьому прикладі ми використовуємо Fetch API. але ви можете використовувати простий виклик XHR або інші бібліотеки для створення XHR виклику.

Крок 5: Реалізація виходу

Для виходу з системи, необхідно видалити токен і профіль з локального сховища.

От і все! Всього в 5 кроків, ми змогли додати аутентифікацію через фронтенд в свій мобільний додаток.

Схожі статті