Аутентификация Nuxt.js упрощается благодаря Auth0 (токен обновления включен!)

Почему я это делаю?

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

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

Веб-сайт формы Auth0:

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

СОСРЕДОТОЧЬТЕСЬ НА СВОЕМ ОСНОВНОМ БИЗНЕСЕ!

Это то, что мы всегда должны помнить.

Начиная

В этом руководстве объясняется, как настроить аутентификацию для SPA Nuxt.js с использованием Auth0 и ПОТОКА аутентификации PKCE.

Мы будем изучать следующие вещи:

Настройте клиент Auth0
Настройте SPA Nuxt.js
Интегрируйте Auth0 в наше SPA с помощью auth0-spa-js

Настройка клиента Auth0

Прежде всего, мы собираемся настроить поле входа Auth0.

Затем в разделе Приложения Auth0 нажмите Создать приложение.

На открывшейся странице конфигурации выберите вкладку Настройки.

Прокрутите страницу и добавьте http://localhost:3000 к каждому URI приложения (за исключением URI входа в приложение).

Обновить токен

Теперь мы можем выбрать, какой тип токена обновления мы хотим для нашего приложения.

Нам предлагается выбрать одно из двух действий Refresh Token:

Ротация токена обновления выдает новый токен обновления и делает недействительным предыдущий. Мы легко можем сказать, что ротация токена обновления снижает риск компрометации токена обновления.

Подробнее о ротации токенов Refresh здесь.

Нас попросят ввести время жизни и интервал повторного использования токена обновления.

Теперь откройте Дополнительные настройки,выберитеТипы предоставлениявкладкуи убедитесь, чтоэтоКод авторизации и Обновить токен установлены

Наконец, нажмите Сохранить изменения.

Настройка Nuxt.js SPA

Начните с создания нового нового приложения Nuxt.js.

create-nuxt-app nuxt-auth0

Инструмент командной строки теперь задаст несколько вопросов.
Важно: при запросе режима рендеринга выберите «Одностраничное приложение».

? Choose rendering mode
  Universal (SSR)
❯ Single Page App

По завершении мы можем получить доступ к вновь созданной папке и запустить приложение, набрав (на основе диспетчера пакетов, который мы выбрали ранее)

yarn dev
//OR
npm run dev

Давайте посмотрим на наше приложение, работающее по адресу http://localhost:3000.

Пришло время защитить нашу индексную страницу, и для этого мы устанавливаем auth0-spa-js.

auth0-spa-js

yarn add @auth0/auth0-spa-js
//OR
npm install @auth0/auth0-spa-js

Примечание: существует высокая вероятность того, что мы столкнемся с ошибкой в консоли Nuxt при установке библиотеки auth0-spa-js: для этого пакета требуется установить core-js@2.

yarn add core-js@2
//OR
npm install --save core-js@2

Я знаю, что core-js@2 больше не поддерживается, но я не могу понять, в чем проблема (если вы найдете решение, напишите его в разделе комментариев ниже 🙏)

Теперь мы создаем новый плагин с именем auth0.js.

Таким образом, мы можем получить доступ к $auth0 в каждом файле нашего проекта.

Затем мы добавляем только что созданный подключаемый модуль в файл nuxt.config.js.

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

Примечание. Эта функция в первую очередь пытается обработать обратный вызов перенаправления входа. Если запрошенная страница, защищенная этим промежуточным ПО, НЕ является первой страницей, вызываемой после входа в систему, функция handleRedirectCallback выдает ошибку.
Мы проверяем, аутентифицирован ли пользователь, вызывая getTokenSilently : в случае отрицательного ответа (это может произойти, когда мы вообще не аутентифицированы или токен доступа устарел и не может быть обновлен) пользователь будет перенаправлен на URL-адрес Auth0 /authorize, который показывает окно входа Auth0 (с функцией redirect) .

Примечание 2. Если нужно защитить более одной страницы, мы можем получить URL-адрес, к которому мы пытались получить доступ (target.fullPath), и передать его вызову buildAuthorizeUrl. Этот URL-адрес будет возвращен приложению после аутентификации и используется для перенаправления нас в место, которое мы пытаемся достичь до входа в систему.

Примечание 3. Обратите внимание, что мы используем buildAuthorizeUrl вместо loginWithRedirect. Это единственный способ избежать Nuxt.js для отображения запрошенной страницы, даже если мы не аутентифицированы. Причина в том, что loginWithRedirect звонит window.location.assign(url)

Наконец, мы добавляем промежуточное ПО и кнопку выхода на страницу index.vue.

Это все, что нам нужно, пришло время увидеть все в действии на http://localhost:3000

TL;DR В этот момент вы можете легко спросить меня: почему вы не используете замечательный модуль аутентификации Nuxt.js?
В данный момент , модуль аутентификации обеспечивает только неявный поток предоставления.
В чем разница между потоком аутентификации PKCE и неявным потоком предоставления?

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

Если вы хотите посмотреть дальше, нажмите здесь.

Первый доступ

Когда мы попытаемся достичь http://localhost:3000, мы будем перенаправлены в окно входа Auth0.

После создания пользователя приложение nuxt-auth0 запросит доступ к нашей учетной записи арендатора.

После нажатия «Принять» мы будем перенаправлены на нашу индексную страницу.

Вот и все.

Я надеюсь, что вы нашли этот урок полезным!

Ресурсы

Вы можете найти окончательный код в этом репозитории GitHub

Примечание от JavaScript In Plain English

Мы запустили три новых издания! Проявите любовь к нашим новым публикациям, подписавшись на них: AI на простом английском, UX на простом английском, Python на простом английском — спасибо и продолжайте учиться!

Мы также всегда заинтересованы в помощи в продвижении качественного контента. Если у вас есть статья, которую вы хотели бы отправить в какое-либо из наших изданий, отправьте нам электронное письмо по адресу [email protected], указав свое имя пользователя на Medium, и мы добавим вас в качестве автора. Также сообщите нам, к каким публикациям вы хотите добавиться.