Создайте страницу входа с помощью FirebaseUI для Vue за 20 минут

Аутентификация FirebaseUI предоставляет самый простой и легкий способ добавить предварительно созданный пользовательский интерфейс и реализовать sign-in поток, включая OAuthпровайдеров, таких как Facebook, Google и т. д.

Если вы посмотрите на большинство экранов входа в систему в Интернете или на мобильных устройствах, вы увидите три наиболее важных метода входа, такие как Электронная почта и пароль, Facebook и Google. .

В конце этой статьи у вас будет полностью функциональный процесс входа в систему, включая экран входа в систему, как на снимке экрана ниже, с инструкциями STEP by STEP.

Давайте начнем!

Настройка стартового проекта VueJs

Я уже создал пример стартового проекта vue и загрузил его, чтобы вы могли продолжить, если хотите. Я также предполагаю, что на вашем компьютере установлен узел.

После его загрузки откройте терминал / командную строку и cd в папку стартового проекта и введите команду npm install, которая установит зависимости для проекта.

После запуска приложения с помощью команды npm run dev.

Затем перейдите на локальный хост, и вы увидите, как работает приложение, как на скриншоте ниже.

Как видите, в этом примере приложения есть три элемента навигации: главная страница (/), профиль(/profile) и логин (/login).

Довольно просто!

Добавьте Firebase в веб-приложение

ПЕРВЫЙ шаг вам нужно установить пакет firebase в проект

npm install firebase --save

Затем перейдите в Firebase и создайте проект, если вы еще этого не сделали.

После этого,

Получите код конфигурации Firebase на панели управления Firebase → Обзор проекта (в левом верхнем углу) → нажмите значок шестеренки → нажмите Настройки проекта

Затем прокрутите страницу до конца → в разделе Фрагмент Firebase SDK → выберите параметр Config и скопируйте код.

firebase-project-setting-code-configuration-code

Если вы не видели страницу конфигурации, вам необходимо зарегистрировать приложение, щелкнув веб-значок </>, который откроет окно, и следуйте инструкциям для завершения процесса регистрации. После регистрации вы можете вернуться в указанное выше место и получить код конфигурации firebase.

Далее я собираюсь инициализировать Firebase.

Для этого перейдите в файл main.js и вверху импортируйте firebase.

импортировать firebase из firebase

После этого вставьте код конфигурации, который вы скопировали ранее.

const firebaseConfig = {
apiKey: *****,
authDomain: firebaseUIAuth-*****.firebaseapp.com,
databaseURL : «https://****-709a3.firebaseio.com',
projectId: firebaseUIAuth-709a3,
storageBucket: «»,
messagingSenderId: «2547636* **397”,
appId: “1:254763***397:web:***c15c671b5c”
};

Обязательно получите код конфигурации из вашего проекта firebase, так как приведенный выше код не будет работать для вашего проекта.

Наконец, инициализируйте firebase.

firebase.initializeApp(firebaseConfig);

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

Войти через Facebook с помощью FirebaseUI

Для ПЕРВОГО шага вам необходимо установить firebaseui пакетов в проект.

npm install firebaseui --save

СЛЕДУЮЩИМ шагом будет импорт пакетов firebase, firebaseui и firebaseui.css в компонент Login.vue.

импортировать firebase из 'firebase';
импортировать firebaseui из 'firebaseui';
импортировать 'firebaseui/dist/firebaseui.css';

Затем создайте элемент с идентификатором внутри <template>, который является элементом-контейнером, в котором появится кнопка «Войти через Facebook».

‹section id='firebaseui-auth-container'›‹/section›

После этого создайте объект firebaseui, передав firebase.auth() и сохраните его в переменной с именем ui внутри функции mounted(), как показано ниже.

Как вы можете видеть в приведенном ниже коде, я определил объект Javascript с именем uiConfig, который будет иметь два свойства:

установлено() {
var ui = новый firebaseui.auth.AuthUI(firebase.auth());
var uiConfig = {
signInSuccessUrl: '/profile',
signInOptions: [firebase.auth.FacebookAuthProvider.PROVIDER_ID]
};
ui.start('#firebaseui-auth-container', uiConfig);
}

Первый — это signInSuccessUrl, и он устанавливает для него значение маршрута /profile. Это свойство перенесет его на страницу профиля после успешного входа в систему.

Второе свойство — signInOption, это массив, в котором у меня есть кнопка Facebook. Это место, где вы будете добавлять больше кнопок позже.

Наконец, вызовите метод start() для объекта ui и передайте #firebaseui-auth-container в качестве первого аргумента и uiConfig в качестве второго.

Теперь вы можете увидеть кнопку Войти через Facebook на странице входа.

Вы можете настроить больше параметров, чем указано внутри объекта uiConfig. Например, если вы хотите, чтобы процесс входа был всплывающим окном, вы можете установить signInFlow: всплывающее окно. Подробнее здесь.

Хороший!

Но есть проблема…

Если я перейду на домашнюю страницу или страницу профиля и вернусь на страницу входа, я не увижу кнопку «Войти через Facebook», а также получу сообщение об ошибке в консоли браузера.

'Ошибка: экземпляр AuthUI для ключа уже существует

Это связано с тем, что я запускаю одностраничное приложение vue, поэтому оно пытается создавать экземпляр объекта Firebase Auth UI каждый раз, когда я перехожу к маршруту /login.

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

Итак, замените код внутри методаmounted()

от

var ui = новый firebaseui.auth.AuthUI(firebase.auth());

let ui = firebaseui.auth.AuthUI.getInstance();
if (!ui) {
ui = новый firebaseui.auth.AuthUI(firebase.auth());
}

Это решит проблему AuthUI instance!

Теперь давайте нажмем кнопку и посмотрим, что происходит… Я получил предупреждающее сообщение.

Конфигурация поставщика удостоверений не найдена

Это сообщение ведет к следующему шагу, который включает провайдера входа Facebook в Firebase.

Перейдите в Консоль Firebase → Аутентификация →Способы входа → Facebook.

Затем щелкните значок карандаша в правой части строки Facebook, после чего откроется всплывающее окно, включите переключатель в правом верхнем углу и нажмите «Сохранить».

На данном этапе Firebase не позволяет сохранять данные, так как для завершения настройки требуются App ID и App Secret из консоли разработчика Facebook.

Чтобы получить идентификатор приложения и секрет приложения от Facebook, перейдите на developer.facebook.com и войдите в систему.

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

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

Затем нажмите Создать идентификатор приложения.

После этого перейдите на панель управления приложения Facebook →выберите настройки (на боковой панели) → Основные сведения

Получив идентификатор приложения и секрет приложения, перейдите в консоль Firebase → Аутентификация → Способы входа → щелкните значок редактирования на рядом с Facebook и добавьте туда App ID и App Secret.

Прежде чем нажать «Сохранить», скопируйте URI перенаправления OAuth.

URI, который вы скопировали из Firebase, будет добавлен в приложение Facebook для завершения процесса.

Для этого перейдите на панель управления приложения Facebook → Продукт → Добавить новый, нажав значок +, и выберите Facebook Login, нажав кнопку Настроить.

После создания продуктов выберите «Вход через Facebook» в разделе «Продукты» → Настройки → Найдите Действительные URI перенаправления OAuth и вставьте URL-адрес перенаправления, который был скопирован из Консоль Firebase здесь и нажмите сохранить изменения.

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

Все готово!

Теперь вернитесь на страницу входа и нажмите кнопку Sign in with Facebook, и вы будете перенаправлены на страницу профиля, указывающую на то, что вы успешно вошли в систему через Facebook. 🙂

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

Первый шаг — импортировать firebase на страницу профиля.

импортировать firebase из 'firebase';

Затем создайте свойство с именем user и установите его начальное значение null внутри data().

данные() {
возврат{
пользователь: null
};
},

После этого определите firebase onAuthStateChanged внутри функции created(), чтобы увидеть, вошел ли пользователь в систему или нет.

создано() {
firebase.auth().onAuthStateChanged(user =› {
если (пользователь) {
this.user = пользователь;
}
});
}

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

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

‹div class='карточка по горизонтали' style='max-width:400px;margin:0 auto;' v-if='пользователь'›
‹div class='card-image' style='margin-top:25px;margin-left:10px;'› ‹img :src='user.photoURL'
style='width:75px;height:75px;border-radius:50%;border:4px solid #333' /› ‹/div›
‹div class='card-stacked'›
‹div class='card-content'›
‹p› name: ‹strong›{{user.displayName}}‹/strong›‹br /›email:‹strong›{{user.email}}‹/strong›‹br/›uid:
‹strong›{{user.uid}}‹/strong› ‹br /›поставщик: ‹strong
class='teal-text'›{{user.providerData[0].providerId}}‹/strong› ‹/p›
‹/дел›
‹/дел›
‹/дел›

На этом этапе страница вашего профиля будет выглядеть так:

Давайте добавим кнопку выйти перед добавлением других поставщиков.

Откройте NavBar.vue и добавьте logout в качестве третьей кнопки.

<li>
‹a @click='signoutButtonPressed'›Выйти‹/a›
</li>

Затем объявите функцию signoutButtonPressed() внутри объекта methods:{}.

методы: {
выход (e) {
e.stopPropagation();
firebase.auth().signOut();
this.$router.push({
имя: 'Вход'
});
}
}

В этой функции я вызвал метод signout(). Как только пользователь выйдет из системы, он будет перенаправлен на страницу входа.

Довольно прямолинейно!

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

Войдите в Google с помощью FirebaseUI

ШАГ 01. Перейдите на панель управления Firebase Console → раздел «Аутентификация» → вкладка «Способы входа», включите Google Provider, щелкнув значок карандаша на правая сторона.

ШАГ 02. Вернитесь к Login.vue внутри массива signInOptions и добавьте код Google Provider в Facebook.

signInOptions: [
firebase.auth.FacebookAuthProvider.PROVIDER_ID
firebase.auth.GoogleAuthProvider.PROVIDER_ID
]

ШАГ 03. Готово!

Я считаю, что это один из самых простых способов добавить Google Authentication в проект за очень короткое время. 🙂

Войдите с помощью электронной почты и пароля, используя FirebaseUI

ШАГ 01. Перейдите на панель инструментов Firebase Console → в раздел «Аутентификация» → вкладка «Способы входа», включите электронную почту, щелкнув значок карандаша справа. боковая сторона.

ШАГ 02. Вернитесь кLogin.vue внутри массива signInOptions и добавьте код Google Provider в Facebook.

signInOptions: [
firebase.auth.FacebookAuthProvider.PROVIDER_ID
firebase.auth.GoogleAuthProvider.PROVIDER_ID
firebase.auth.EmailAuthProvider.PROVIDER_ID
]

ШАГ 03. Теперь вы можете видеть кнопку Sign in with email при обновлении страницы Login.vue.

Когда вы нажмете кнопку Sign in with email, вы будете перенаправлены на страницу Account Chooser, где вы сможете увидеть все другие ранее зарегистрированные учетные записи с разными провайдерами.

Если вы пытаетесь войти в систему в первый раз, вы попадете на FirebaseUI страницу формы электронной почты по умолчанию.

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

Если он новый, он попросит вас добавить свое имя и пароль, чтобы создать новую учетную запись Firebase.

Как видите, все FirebaseUI уже установили пользовательский интерфейс, поэтому вам не нужно писать ни одной строки кода.

Вы можете задаться вопросом, что произойдет, если пользователь захочет войти в систему с другим провайдером в другое время.

Ответ: да… FirebaseUI позволяет пользователям входить в систему с разными провайдерами OAuth с помощью одного электронного письма и связывает их всех под одной учетной записью firebase.

В этом приложении vue.js есть несколько проблем с UX (пользовательский опыт).

Защита маршрутов Vue при аутентификации

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

На панели навигации давайте скроем профиль и кнопку выхода, когда пользователь не подписан, и скроем кнопку входа, когда пользователь вошел в систему.

Для этого перейдите к компоненту NavBar.vue и импортируйте firebase. импортировать firebase из «firebase».

импортировать firebase из 'firebase';