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

Реализация аутентификации в современных веб-приложениях - головная боль. Самый простой способ добавить проверку подлинности в ваше приложение, использовать Auth0, он имеет бесплатный план, который включает до 7000 регулярных активных пользователей и двух социальных провайдеров. Пользователь считается активным, если он выполнял вход в приложение в течении последних 30 дней. Для многих компаний, это только 15% от основной пользовательской базы. В этой статье вы узнаете о проблемах современной аутентификации и как вы сможете решить их с Auth0!

Проблемы современной аутентификации

Аутентификация является неотъемлемой частью почти всех современных приложений. Как разработчики, в последние годы мы смогли насладиться множеством интересных улучшений в Интернете, но к сожалению, качественной реализации аутентификации в приложениях мы не увидели. У данной проблемы есть несколько причин:

  • Постоянно меняющаяся среда идентификационных данных, например вход из социальных сетей, таких как Google, Facebook, Twitter и другие
  • Необходимость в более сложном уровне безопасности с помощью функций многофакторной аутентификации, беспарольного входа в систему и единого входа
  • Новый подход к архитектуре приложений, делает его более трудным для реализации аутентификации

Аутентификация из социальных сетей

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

Особенности современной аутентификации

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

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

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

Аутентификация для одной страницы приложения

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

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

Простой способ интеграции современной аутентификации

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

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

Auth0 имеет интеграцию практически для всех популярных фреймворков и языков. Не используете фреймворк? Нет проблем! Для интеграции Auth0 нужно всего лишь добавить несколько строк JavaScript кода.

Шаг 0: Авторизация в Auth0

Для начала необходимо создать аккаунт и авторизоваться в нем.

Шаг 1: Добавление скрипта Auth0Lock

Lock - готовый виджет окна входа в систему. Его можно добавить из CDN или найти его в NPM.

<!-- index.html -->

  <!-- Auth0Lock script -->
  <script src="https://cdn.auth0.com/js/lock-8.1.min.js"></script>

  <!-- Setting the right viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Шаг 2: Конфигурация Auth0Lock

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

// app.js

var lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_DOMAIN');

Шаг 3: Реализация входа

Первое что нужно сделать, это добавить кнопку входа виджета Lock.

<!-- index.html -->
  
  ...
  
  <button id="btn-login" class="btn-login">Sign In</button>
 
  ...

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

// app.js

document.getElementById('btn-login').addEventListener('click', function() {
  lock.show(function(err, profile, token) {
    if (err) {
      // Error callback
      console.error("Something went wrong: ", err);
    } else {
      // Success calback  

      // Save the JWT token.
      localStorage.setItem('userToken', token);
      // Save the profile
      localStorage.setItem('userProfile', JSON.stringify(profile));
    }
  });
});

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

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

Шаг 4. Вызов аутентификации в API

После регистрации пользователя, вы можете выполнить вызов аутентификации при помощи API путем добавления JWT в качестве заголовка аутентификации.

// app.js

var getFoos = fetch('/api/foo', {
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('userToken')
  },
  method: 'GET',
  cache: false
});

getFoos.then(function (response) {
  response.json().then(function (foos) {
    console.log('the foos:', foos);
  });
});

В этом примере мы используем Fetch API, но вы можете использовать простой вызов XHR или другие библиотеки для создания XHR вызова.

Шаг 5: Реализация выхода

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

// app.js

localStorage.removeItem('userToken');
localStorage.removeItem('userProfile');
window.location.href = "/";

Вот и все! Всего в 5 шагов, мы смогли добавить аутентификацию через фронтенд в свое мобильное приложение.

Перевод статьи The Easiest Way to Implement Modern Authentication

Тэги: APIappmobileauth0

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.