Аутентификация для одностраничных приложений может быть непростым делом. Во многих случаях архитектура SPA включает в себя изолированное интерфейсное приложение с такой структурой, как AngularJS, и отдельную серверную часть, которая служит API данных для передачи данных в интерфейс. В этих случаях традиционная аутентификация на основе сеанса, которая выполняется в большинстве приложений с двусторонним обменом, не работает. Сессионная аутентификация имеет много проблем для такого типа архитектуры, но, вероятно, самая большая из них заключается в том, что она вводит состояние в API, и одним из принципов REST является то, что все остается без гражданства. Еще одно соображение заключается в том, что если вы когда-нибудь захотите использовать тот же API данных в качестве серверной части для мобильного приложения, аутентификация на основе сеанса не будет работать.

Веб-токены JSON

Чтобы обойти эти ограничения, мы можем использовать JSON Web Tokens (JWT) для добавления аутентификации в наши одностраничные приложения. JWT - это открытый стандарт, который предоставляет нам способ аутентификации запросов от нашего внешнего приложения AngularJS к нашему внутреннему API. Однако JWT - это больше, чем просто токен. Одним из самых больших преимуществ JWT является то, что они включают полезную нагрузку данных, которая может иметь произвольные данные JSON в форме определяемых нами утверждений. Поскольку JWT имеют цифровую подпись с секретом, который хранится на сервере, мы можем быть уверены, что они не могут быть изменены, а данные в полезной нагрузке не могут быть изменены до достижения серверной части.

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

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

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

  • Условно отображать или скрывать определенные элементы в зависимости от того, есть ли у пользователя действующий JWT (например, кнопки входа и выхода)
  • Защитите определенные маршруты, к которым не должен иметь доступ неаутентифицированный пользователь.
  • Перенаправить пользователя в домашнее состояние или состояние входа в систему, если срок действия их JWT истекает или когда они выходят из системы

В этой статье мы реализуем аутентификацию от начала до конца в приложении AngularJS, и мы даже создадим небольшой сервер NodeJS, чтобы увидеть, как делать запросы к защищенному ресурсу. Существует множество деталей, касающихся настройки базы данных пользователей и выдачи JWT, поэтому вместо того, чтобы делать это самостоятельно, мы будем использовать Auth0, чтобы сделать это за нас. Auth0 предоставляет бесплатный план для 7000 активных пользователей, что дает нам много места во многих реальных приложениях. Мы также увидим, как можно легко добавить поле входа и даже использовать социальную аутентификацию с Auth0.

Чтобы увидеть весь код этого руководства, загляните в репо.

Подпишитесь на Auth0

Первое, что вам понадобится для этого урока, - это учетная запись Auth0. При регистрации учетной записи вам нужно будет дать своему приложению доменное имя, которое нельзя будет изменить позже. Поскольку у вас может быть несколько приложений под одной и той же учетной записью, то, как вы назовете свой домен, будет зависеть от вашей ситуации. В большинстве случаев лучше давать ему название, имеющее отношение к вашей организации, например название вашей компании. Если это имеет смысл, вы также можете использовать имя своего приложения - выбор за вами. Ваш домен Auth0 принимает шаблон your-domain.auth0.com и используется при настройке инструментов Auth0, которые мы увидим ниже.

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

После того, как вы зарегистрируетесь, перейдите в свою панель управления, чтобы все проверить. Если вы нажмете ссылку Приложения / API на левой боковой панели, вы увидите, что ваша учетная запись создается с помощью приложения по умолчанию. Щелкните приложение по умолчанию, чтобы увидеть свои учетные данные и другие сведения.

Сразу же мы должны заполнить наши Разрешенное происхождение. Это поле используется, чтобы сообщить Auth0, каким доменам разрешено делать запросы для аутентификации пользователей. В этом руководстве мы будем использовать http-sever, для которого по умолчанию используется http: // localhost: 8080.

Благодаря бесплатному тарифному плану Auth0 мы можем использовать двух провайдеров социальной идентификации, таких как Google, Twitter, Facebook и многих других. Все, что нам нужно сделать, чтобы заставить их работать, - это щелкнуть переключателем, и это можно сделать с помощью ссылки Connections ›Social на панели управления .

Установите зависимости и настройте Auth0

Нам понадобится несколько пакетов для этого приложения, некоторые из которых предоставляются Auth0 в виде модулей с открытым исходным кодом. Мы также будем использовать Angular Material, чтобы получить красивый стиль.

# Angular related modules 
npm install angular angular-material angular-ui-router angular-aria angular-animate
 
# Auth0 related modules 
npm install angular-jwt angular-storage auth0-angular 
# To serve the app (if not already installed) 
npm install -g http-server

Затем давайте настроим наши файлы app.js и index.html для начальной загрузки приложения. На данный момент мы можем сообщить Angular, к каким модулям нам нужен доступ, из установленных нами зависимостей.

// app.js 
(function() { 
    'use strict'; 
        angular 
            .module('authApp', ['auth0', 'angular-storage', 'angular-jwt', 'ngMaterial', 'ui.router']) 
            .config(function($provide, authProvider, $urlRouterProvider, $stateProvider, $httpProvider, jwtInterceptorProvider) { 
                    authProvider.init({ 
                         domain: 'YOUR_AUTH0_DOMAIN', 
                         clientID: 'YOUR_AUTH0_CLIENT_ID' 
                    }); 
             }); 
})();

Здесь мы настроили authProvider из auth0-angular с нашими учетными данными из панели управления. Конечно, вы захотите заменить значения в примере своими учетными данными.

Обратите внимание, что мы вводим скрипт виджета Auth0Lock из CDN Auth0. Это сценарий, который нам понадобится для отображения окна входа в систему, предоставляемого Auth0. Устанавливая область просмотра, как у нас, мы обеспечиваем правильное отображение виджета на мобильных устройствах.

Первоначально опубликовано на blog.yvn.io 9 января 2016 г.