Добавьте аутентификацию в свое приложение Vue с помощью Auth0
Auth0 - это гибкое решение для добавления сервисов аутентификации и авторизации в ваши приложения. Посмотрите, как легко добавить в свое приложение Vue, чтобы вы могли регистрировать и входить в систему пользователей с их адресом электронной почты и паролем.
Что мы будем создавать
Мы собираемся создать очень простое приложение Vue, используя Vue CLI. Мы изменим шаблонное приложение по умолчанию, чтобы мы могли использовать Auth0 либо для регистрации нового пользователя, либо для входа в систему существующего пользователя. Как только пользователь войдет в систему, он получит доступ к странице «О программе».
Пользователи смогут зарегистрироваться в приложении, используя систему аутентификации по электронной почте и паролю в Auth0.
Создание нашего проекта
Я буду использовать Vue CLI, чтобы разработать проект, с которого мы начнем. Для этого в вашей системе должен быть установлен Vue CLI. Если он у вас не установлен, вы можете установить его глобально с помощью этой команды:
npm install -g @vue/cli
Теперь мы можем использовать Vue CLI для создания нашего проекта. Создайте новый проект с помощью этой команды:
vue create vue-authentication-auth0
Вам будет предложено выбрать предустановку. Выберите «Выбрать функции вручную», а затем выберите «babel», «Router» и «Linter / Formatter».
Вас спросят, хотите ли вы использовать режим истории для маршрутизатора. Выберите «Да» (должно быть по умолчанию).
Вы можете выбрать любой линтер, который хотите, но для этого урока я выберу «Eslint + Prettier».
После завершения работы Vue CLI он даст вам команды для перехода в новый каталог, который был только что создан, и для запуска сервера. Следуйте этим указаниям. После запуска сервера вы можете открыть в браузере адрес localhost: 8080. Вы должны увидеть это:
Создать учетную запись Auth0
Первое, что вам нужно сделать, это создать учетную запись с Auth0, если у вас ее еще нет. Создать учетную запись бесплатно.
Создать приложение Auth0
Создав бесплатную учетную запись Auth0, войдите в свою учетную запись. В левой навигационной панели нажмите «Приложения».
Отсюда нажмите кнопку «Создать приложение».
Вам будет представлено диалоговое окно, в котором вы сможете указать имя для вашего приложения и указать, какой тип приложения вы будете создавать.
Имя моего приложения - Vue Authentication Auth0. Вы можете указать любое название вашего приложения.
В качестве типа приложения выберите одностраничное веб-приложение.
После создания приложения на вкладке «Быстрый старт» будут представлены инструкции о том, как реализовать Auth0 в вашем веб-приложении с помощью самых популярных фреймворков JavaScript.
Поскольку мы используем Vue для нашего приложения, щелкните значок Vue.
Auth0 предоставляет очень подробные инструкции о том, как реализовать свой продукт аутентификации как услуги. В этом руководстве мы реализуем их инструкции в приложении Vue, которое мы уже создали.
Настройте параметры вашего приложения
Вы можете получить доступ к своим настройкам, щелкнув вкладку «Настройки» вверху страницы.
Вы увидите свой домен и идентификатор клиента в разделе "Основная информация". Мы вернемся к этому позже, потому что нам нужно будет сохранить эти значения для работы нашего приложения.
В разделе Application URIs нам нужно будет определить наши разрешенные URL-адреса обратного вызова, разрешенные URL-адреса для выхода и разрешенные веб-источники.
Для локального тестирования нашего приложения мы будем использовать URL-адрес http: // localhost: 8080.
Примечание. Если вы решите разместить свое приложение где-нибудь, например, на Netlify или Heroku, вам нужно будет обновить все эти настройки, указав URL-адрес вашего размещенного приложения.
В качестве надежных ›разрешенных URL-адресов обратного вызова, разрешенных URL-адресов для выхода и разрешенных веб-источников укажите http: // localhost: 8080.
Установить Auth0 SDK
Вернитесь в свое приложение Vue и добавьте клиентский SDK Auth0 с помощью этой команды:
npm install @auth0/auth0-spa-js
Создать оболочку аутентификации
SDK Auth0 требует, чтобы он был инициализирован до запуска вашего приложения Vue. У Vue есть хуки жизненного цикла, которые мы потенциально можем использовать для инициализации SDK. Вы могли подумать, что мы могли бы использовать beforeCreate хук в App.vue файле, но ошиблись. Позвольте мне показать вам, почему.
Вот изображение хуков жизненного цикла Vue.
beforeCreate - это самый первый срабатывающий хук жизненного цикла Vue. Но обратите внимание на то, что на этом изображении он запускается после создания приложения Vue с new Vue().
Нам нужно иметь возможность инициализировать Auth0 SDK перед new Vue(), который создает наше приложение Vue. Vue предоставляет механизм для этого с помощью плагина Vue.
Чтобы использовать плагин, вы должны вызвать его с помощью команды Vue.use(). Эту команду необходимо выполнить до того, как вы запустите приложение, вызвав new Vue().
Обертка аутентификации, которую мы будем создавать, на самом деле будет плагином Vue.
В каталоге src создайте новый каталог с именем auth. Внутри этого каталога auth создайте файл с именем index.js.
Мы скопируем код, предоставленный на вкладке «Быстрый старт», и вставим его в этот файл. Вот код:
Создать файл конфигурации
Объект параметров, переданный плагину, используется для предоставления значений для clientId и domain, о которых я упоминал ранее и сказал, что мы вернемся к нему позже.
В корневом каталоге вашего приложения создайте новый файл с именем auth_config.json. Мы заполним значения из вашего приложения для domain и clientId. Поместите этот код в файл auth_config.json и обязательно обновите его значениями для вашего приложения.
{
"domain": "yourAppValuesHere",
"clientId": "yourAppValuesHere"
}
Этот файл конфигурации содержит нечувствительные значения, относящиеся к вашему приложению Auth0. Этот файл не следует передавать в систему контроля версий. Мы можем сделать это, добавив имя файла в .gitignore файл.
Откройте файл .gitignore и добавьте в него auth_config.json.
Добавить плагин в наше приложение Vue
Теперь, когда мы создали наш плагин, нам нужно указать Vue, чтобы он использовал его. Откройте файл main.js. Добавьте эти два оператора импорта, которые импортируют наш плагин, а также наши domain и clientId из файла auth_config.json.
// Import the Auth0 configuration
import { domain, clientId } from "../auth_config.json";
// Import the plugin here
import { Auth0Plugin } from "./auth";
Затем нам нужно указать Vue использовать наш плагин. После операторов импорта добавьте этот код:
Войти в приложение
Если вы посмотрите на код плагина в auth/index.js файле, вы заметите, что есть два разных метода входа в систему: loginWithPopup и loginWithRedirect.
Auth0 предоставляет размещенную страницу входа в систему, которую любое приложение может использовать для входа в систему или регистрации пользователей для своего приложения. Метод loginWithRedirect получит доступ к размещенной странице входа. Это означает, что когда пользователи нажимают кнопку входа в систему, URL-адрес будет указывать на веб-сайт Auth0, где пользователь будет вводить свои данные для входа. После успешной аутентификации они будут перенаправлены обратно в наше приложение.
Если мы не хотим выполнять это перенаправление, Auth0 предоставляет возможность войти в систему или зарегистрировать пользователей через всплывающее окно, которое отображается на нашем веб-сайте.
Я покажу вам, как использовать оба этих метода входа в систему.
Откройте файл App.vue . В настоящее время в навигационной панели есть две записи: главная и страница «О программе». Нам нужно добавить две кнопки для входа в систему. Добавьте этот код в навигацию:
Обратите внимание, что кнопки заключены в директиву, которая гарантирует, что $auth.loading ложно. Если вы просмотрите код нашего плагина, вы увидите, что есть раздел данных со значением isAuthenticated. Это значение устанавливается, если пользователь успешно аутентифицируется с помощью Auth0. Если пользователь аутентифицирован, мы не хотим показывать две кнопки входа в систему.
Когда мы добавляем div, кнопки появляются в строке под ссылками для кнопок «Главная» и «О программе». Я хочу, чтобы все они были в одной строке, поэтому обновите стили CSS следующим образом:
#nav {
display: flex;
justify-content: center;
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
padding: 0 5px;
}
Теперь при просмотре приложения вы увидите две кнопки.
Две кнопки вызывают методы login и loginPopup. Давайте сейчас их реализуем.
Добавьте объект methods двумя способами. Вот код:
methods: {
login() {
this.$auth.loginWithRedirect();
},
loginPopup() {
this.$auth.loginWithPopup();
},
}
this.$auth - это дескриптор нашего плагина. Затем мы вызываем методы, доступные в нашем плагине.
Теперь вернитесь к своему приложению. Если вы нажмете кнопку «Войти», вы попадете на страницу авторизации, размещенную на Auth0.
Если вы нажмете кнопку «Всплывающее окно входа», вы увидите модальное окно входа в ваше приложение.
Независимо от того, какой из них вы выберете, вы увидите, что у вас есть возможность либо войти в систему, либо зарегистрироваться. Идите вперед и создайте учетную запись. Когда вы вернетесь в приложение, вы увидите, что обе кнопки входа в систему скрыты. Они скрыты, потому что значение isAuthenticated в плагине теперь true.
Реализовать выход
Следующим шагом является реализация выхода из системы. Откройте файл App.vue. Добавьте такую кнопку для выхода:
<button @click="logout" v-if="$auth.isAuthenticated"> Logout </button>
Здесь у нас есть директива, чтобы отображать эту кнопку только в том случае, если пользователь в настоящее время аутентифицирован. Вернитесь в свое приложение, и теперь вы должны увидеть кнопку «Выйти».
Добавьте этот метод для реализации функции выхода из системы:
logout() {
this.$auth.logout();
this.$router.push({ path: '/' });
}
В этом методе мы вызываем функцию выхода из системы в нашем плагине. Если пользователь находился на странице, которая видна только пользователям, прошедшим проверку подлинности, мы перенаправляем пользователя на домашнюю страницу.
Показывать страницы только аутентифицированным пользователям
В настоящее время у нашего приложения есть домашняя страница и страница «О нас». Вместо того, чтобы создавать новую страницу, давайте сделаем так, чтобы страница О программе была видна только в том случае, если пользователь вошел в систему.
Мы хотим отображать страницу «О программе» в навигационной панели только в том случае, если пользователь вошел в систему. Мы возьмем ту же директиву, которую мы используем для отображения кнопки «Выход из системы», и поместим ее на страницу «О программе» в навигационной панели. Обновите навигацию, чтобы она была такой:
<router-link v-if="$auth.isAuthenticated" to="/about">About</router-link>
Добавление Route Guard
Мы скрыли ссылку на страницу «О программе» в навигационной панели, если пользователь в настоящее время не аутентифицирован. Но пользователь может ввести URL-адрес «/ about», чтобы перейти непосредственно на страницу. Это показывает, что неаутентифицированный пользователь может получить доступ к этой странице. Способ избежать этого - использовать охранник маршрута.
В каталоге auth создайте новый файл с именем authGuard.js.
Добавьте этот код в файл:
Этот код проверяет, аутентифицирован ли пользователь в настоящий момент. Если это не так, он вызывает страницу входа, размещенную на Auth0, чтобы пользователь мог войти в систему. Если пользователю не удается войти в систему или он не может успешно войти в систему, он перенаправляет пользователя со страницы, которую он пытался доступ, который имеет охранник маршрута.
Теперь давайте реализуем эту защиту маршрута в нашем маршрутизаторе Vue. Откройте файл index.js в каталоге маршрутизатора.
Вверху файла добавьте импорт для только что созданного файла authGuard:
import { authGuard } from "../auth/authGuard";
Затем нам нужно добавить охрану маршрута к маршруту / about. Обновите маршрут / about следующим образом:
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
beforeEnter: authGuard
}
Вернитесь к своему приложению. Если вы в настоящее время не аутентифицированы, войдите в свое приложение. Вы должны увидеть запись «О программе» в навигаторе. Теперь выйдите из приложения. Попробуйте вручную перейти по URL-адресу «/ about.» Вы должны быть перенаправлены на страницу входа, размещенную на Auth0.
Поздравляю! Вы успешно добавили аутентификацию Auth0 в свое приложение Vue.
Получить код
У меня есть полный код в моей учетной записи GitHub здесь.
Заключение
Auth0 - это продукт аутентификации как услуги, который вы можете добавить в свое приложение. Это очень упрощает использование аутентификации.
Надеюсь, вам понравилась эта статья. Спасибо за прочтение.
