Добавьте аутентификацию Firebase в свое приложение Vue
Firebase предоставляет очень простой и быстрый способ добавить аутентификацию в ваше приложение Vue.js. В этой статье я покажу вам, как легко разрешить пользователям регистрироваться в вашем приложении, используя свой адрес электронной почты и пароль.
Что мы будем создавать
Мы собираемся создать очень простое приложение Vue, используя Vue CLI. Мы изменим шаблонное приложение по умолчанию, чтобы оно предоставляло форму для регистрации в качестве нового пользователя, страницу входа и страницу панели инструментов, отображаемую только для тех, кто вошел в систему.
Пользователи смогут зарегистрироваться в приложении, используя систему аутентификации по электронной почте и паролю в Firebase. После регистрации и входа в систему им будет представлена страница панели инструментов.
Создание нашего проекта
Я буду использовать Vue CLI, чтобы разработать проект, с которого мы начнем. Для этого в вашей системе должен быть установлен Vue CLI. Если он у вас не установлен, вы можете установить его глобально с помощью этой команды:
npm install -g @vue/cli
Теперь мы можем использовать Vue CLI для создания нашего проекта. Создайте новый проект с помощью этой команды:
vue create vue-firebase-auth-tutorial
Вам будет предложено выбрать предустановку. Выберите «Выбрать функции вручную», а затем выберите «babel», «Router» и «Linter / Formatter».
Вас спросят, хотите ли вы использовать режим истории для «Маршрутизатора». Выберите «Да» (должно быть по умолчанию).
Вы можете выбрать любой линтер, который хотите, но для этого урока я выберу «Eslint + Prettier».
После завершения работы Vue CLI он выдаст вам команды для перехода в новый каталог, который был только что создан, и команду для запуска сервера. Следуйте этим указаниям. После запуска сервера вы можете открыть в браузере localhost:8080. Вы должны увидеть это:
Firebase
В этом руководстве я предполагаю, что вы уже создали учетную запись в Firebase. Если нет, вам нужно сделать это, прежде чем продолжить.
Мы будем использовать Firebase SDK в нашем приложении для обеспечения функциональности аутентификации. Вы можете установить Firebase в свое приложение с помощью этой команды:
npm install firebase
Создание проекта в Firebase
Следующим шагом будет добавление проекта в консоль Firebase. Войдите в консоль Firebase. Нажмите кнопку, чтобы добавить новый проект:
Вы можете добавить Google Analytics в свой проект, но я не буду добавлять его в этом руководстве. Нажмите кнопку «Создать проект».
После того, как Firebase создаст ваш новый проект, вам нужно будет добавить Firebase в свое приложение. Щелкните значок сети:
Вам будет предложено ввести псевдоним для вашего приложения. Я ввел псевдоним «Vue Firebase Auth Tutorial». После ввода своего псевдонима нажмите кнопку «Зарегистрировать приложение»:
Для шага 2 будут инструкции по добавлению Firebase SDK в ваше приложение. Нам нужно только скопировать firebaseConfig и строку для инициализации приложения.
Откройте ваш main.js файл. Мы инициализируем Firebase в нашем приложении Vue. Под существующими строками импорта вставьте firebaseConfig и строку для инициализации приложения. Вам нужно будет добавить импорт для Firebase. Ваш main.js файл должен выглядеть так:
Установка метода аутентификации
Откройте консоль Firebase в своем браузере. В консоли найдите только что созданный проект и щелкните его.
В левом верхнем углу нажмите «Аутентификация»:
Нажмите кнопку «Начать».
В меню «Аутентификация» перейдите на вкладку «Метод входа»:
Наведите указатель мыши на первую запись «Электронная почта / Пароль». Щелкните значок карандаша, чтобы открыть диалоговое окно. Выберите «Включить»:
Нажмите кнопку «Сохранить». Теперь вы добавили возможность создавать и аутентифицировать пользователей, используя их адрес электронной почты и пароль.
Добавление новых компонентов
Когда мы создавали наше приложение с Vue Router, оно автоматически создавало два маршрута для нашего приложения: Home и About. Мы будем использовать Home как логин для нашего приложения. Мы будем использовать «О программе» в качестве страницы для регистрации в качестве нового пользователя нашего приложения.
Когда зарегистрированный пользователь входит в наше приложение, мы хотим показать ему страницу панели управления. Мы также хотим предоставить пользователю возможность выйти из нашего приложения. В настоящее время ни один из этих вариантов недоступен в нашем приложении, поэтому давайте добавим их сейчас.
Откройте App.vue файл. В настоящее время nav имеет две записи: "Домой" и "О программе". Мы изменим «О программе» на «Регистрация» и добавим две новые записи для «Личный кабинет» и «Выход из системы». Обновите навигацию, чтобы она выглядела так:
<div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/register">Register</router-link> | <router-link to="/dashboard">Dashboard</router-link> | <button @click="logout">Logout</button> </div>
Когда вы нажимаете кнопку выхода, вызывается метод logout. Мы определим это позже.
Создайте наш компонент входа в систему
Откройте файл Home.vue в папке просмотров. Удалите весь HTML-код в разделе шаблона. Замените его этим кодом, который предоставляет очень простую форму входа в систему. Вот код:
Теперь, если вы просмотрите наше приложение, вы увидите форму входа на домашней странице, подобную этой:
Наша форма немного переполнена полями ввода и кнопками, соприкасающимися друг с другом. Мы можем изменить это, добавив стили CSS. Мы могли бы добавить стили CSS в файл Home.vue. Поскольку мы собираемся использовать ту же форму для регистрации пользователя, нам нужно будет продублировать тот же стиль CSS в этом компоненте. Вместо этого мы можем поместить стиль в файл App.vue, и он будет стилизовать как наши формы входа в систему, так и формы регистрации.
Откройте файл App.vue. В стиле добавьте это:
input {
margin-right: 20px;
}
Теперь наша форма входа в систему выглядит лучше:
Создайте нашу регистрационную форму
Откройте файл About.vue в папке просмотров. Вы можете скопировать HTML-код из Home.vue файла и вставить его в этот файл. Измените каждую ссылку Login на Register. Ваш About.vue файл должен выглядеть так:
Обновите наши маршруты
В настоящее время URL-адрес для отображения нашей страницы регистрации - /about. Давайте изменим это на /register. Откройте файл index.js в папке роутера. Измените второй маршрут для /about на /register. Ваш массив routes должен выглядеть так:
Пока мы находимся в этом файле, давайте продолжим и добавим запись для отображения нашего компонента панели инструментов. Добавьте третий маршрут, чтобы отобразить /dashboard. Теперь ваш массив routes должен выглядеть так:
Создать компонент панели мониторинга
Создайте новый файл с именем Dashboard.vue в папке просмотров. Эта страница должна быть видна только пользователям, которые вошли в наше приложение.
В разделе шаблонов добавьте следующий HTML-код:
<div> <h2>Dashboard</h2> <p>This page is only visible to users that are currently logged in</p> </div>
Регистрация пользователей
Ранее, когда мы обновляли файл About.vue для регистрации пользователей, у нас был вызов метода с именем Register. Нам нужно добавить функционал для регистрации новых пользователей.
Во-первых, давайте ознакомимся с документацией Firebase о том, как создать учетную запись на основе пароля. Firebase Auth имеет метод createuserWithEmailAndPassword. Вам необходимо ввести адрес электронной почты и пароль пользователя. Этот метод либо зарегистрирует пользователя и вернет объект пользователя, либо вернет сообщение об ошибке. Давайте сейчас реализуем этот метод.
Откройте файл About.vue. Нам нужно добавить email и password к нашему объекту данных. В разделе сценария добавьте следующий объект данных:
Затем добавьте объект methods с помощью одного метода с именем register. Мы можем буквально скопировать пример из документации Firebase для этого метода. Нам потребуется внести следующие изменения в код из документации:
- Мы не будем использовать объект
user. - Отображение предупреждения в случае сбоя входа в систему.
- Если пользователь зарегистрирован, перенаправьте его на страницу входа.
Вот код метода register:
Давайте протестируем регистрацию нашего первого пользователя для нашего приложения. Нажмите «Зарегистрироваться» в навигации. Введите адрес электронной почты и пароль и нажмите кнопку «Зарегистрироваться».
Если пользователь был успешно зарегистрирован, вы должны получить предупреждение и быть перенаправлены на страницу входа.
Если регистрация не удалась, вы должны получить предупреждение с сообщением об ошибке.
Чтобы проверить, успешно ли был зарегистрирован пользователь, перейдите в консоль Firebase и щелкните свой проект. На левой панели навигации нажмите
«Аутентификация». Затем щелкните вкладку «Пользователи». Вы увидите своего пользователя в списке:
Теперь, когда мы успешно реализовали регистрацию новых пользователей для нашего приложения, нам нужно реализовать возможность для пользователей входить в систему.
Вход в систему пользователей
Мы использовали код, предоставленный Firebase, для регистрации нового пользователя. Документация Firebase предоставляет образец кода для входа пользователя с адресом электронной почты и паролем. Мы будем использовать метод аутентификации Firebase signInWithEmailAndPassword.
Как и в случае с Register, мы внесем те же изменения в пример кода. Мы предупредим пользователя, если он успешно вошел в систему, и перенаправим его на страницу панели управления.
Если логин не удался, мы отображаем предупреждение с сообщением об ошибке.
Вот метод login, который должен быть в вашем Home.vue файле:
Создание Route Guard
Мы не хотим, чтобы пользователи могли переходить к /dashboard, если они не вошли в систему. Мы можем сделать это, добавив защиту маршрута для /dashboard.
Откройте файл index.js в папке роутера. Мы добавим мета-ключ к /register маршруту, который будет сообщать, что требуется аутентификация. Вот обновленный маршрут:
Прежде чем маршрутизатор Vue обработает маршрут, у него есть метод beforeEach. Мы можем проверить, требует ли маршрут аутентификации, проверив мета-значение.
Если требуется аутентификация, нам нужно иметь возможность проверить, вошел ли пользователь в систему или нет. К счастью, в Firebase auth есть объект currentUser. Мы будем использовать это, чтобы проверить, вошел ли пользователь в систему или нет.
Если они в настоящее время вошли в систему, мы отобразим страницу панели управления.
В противном случае мы отобразим предупреждение, сообщающее пользователю, что он должен войти в систему, и перенаправим его на домашнюю страницу, чтобы он мог войти в систему.
Вот код:
Выйти
Последнее, что нам нужно добавить в наше приложение, - это метод logout. Firebase auth предоставляет signOut метод, который мы будем использовать.
Откройте файл App.vue. Мы выйдем из системы. В случае успеха они получат предупреждение и будут перенаправлены на домашнюю страницу.
Если выход не удается, мы отображаем предупреждение с сообщением об ошибке и перенаправляем их на домашнюю страницу.
Добавьте этот код для метода logout:
В приведенном выше коде мы используем Firebase, но не имеем ссылки на нее в нашем index.js файле. Нам нужно это добавить. Прокрутите вверх до верхней части файла, где находятся существующие строки импорта. Добавьте эту строку:
import firebase from 'firebase';
С этим добавленным, вы можете попрактиковаться в регистрации нового пользователя. Затем войдите в систему с этим пользователем и убедитесь, что вы перенаправлены на страницу панели управления. Затем выйдите из системы и убедитесь, что вы перенаправлены на домашнюю страницу.
Поздравляем, вы успешно добавили аутентификацию Firebase в свое приложение Vue!
Полный код доступен на GitHub.
Использование других методов аутентификации
Я написал несколько последующих статей о добавлении аутентификации в ваше приложение Vue с использованием других методов аутентификации.
Хотите использовать Auth0 для аутентификации? Прочтите эту статью.
Хотите использовать AWS Amplify для аутентификации? Прочтите эту статью.
Заключение
Firebase предлагает очень эффективный метод добавления аутентификации в ваши приложения Vue. Он позволяет добавлять аутентификацию без необходимости писать собственную внутреннюю службу и самостоятельно выполнять аутентификацию.
Надеюсь, вам понравилась эта статья. Спасибо за прочтение.
