Как настроить беспарольную аутентификацию Firebase с помощью веб-приложения React

Введение Это руководство является дополнением к ». Во введении к этому руководству я отметил, что Firebase предлагает другие схемы аутентификации, помимо базовой аутентификации по электронной почте/паролю. Одной из таких альтернатив является . статье «Как настроить аутентификацию Firebase с помощью веб-приложения React аутентификация без пароля Аутентификация без пароля — привлекательный вариант при создании приложений. Это упрощает работу с пользователем, поскольку вашим пользователям не нужно запоминать свои пароли и, следовательно, им не придется беспокоиться о их потере. Это также облегчает разработку, поскольку нет необходимости разрабатывать логику захвата паролей или управления. В этом руководстве вы создадите простой рабочий процесс входа/подтверждения/профиля/выхода, который реализует беспарольную аутентификацию Firebase. Прежде чем вы начнете Google устанавливает различные аутентификации Firebase. Если вы используете бесплатный план , обратите внимание, что вы будете 5 электронными письмами со ссылками для входа в день. Хотя плана Spark может быть достаточно для целей тестирования, вам потребуется перейти на план с оплатой по мере использования, чтобы превысить этот предел. ограничения Spark ограничены Blaze Предварительные условия В этом руководстве я буду ссылаться на руководство в качестве , а связанный с ним проект — в качестве . «Как настроить аутентификацию Firebase с помощью веб-приложения React» предварительного руководства предварительного проекта Для выполнения этого руководства вам потребуется: Завершено руководство по необходимым требованиям, включая все необходимые условия. Шаг 1. Включение беспарольной аутентификации в вашем проекте Firebase В руководстве по предварительным требованиям вы создали новый проект Firebase для базовой аутентификации по электронной почте и паролю. Теперь вы включите тот же проект для аутентификации без пароля. Войдите в свою и нажмите . учетную запись Firebase «Перейти к консоли» Нажмите на свой проект аутентификации, указанный на панели управления проектами Firebase. В этом руководстве используется имя проекта . my-auth-test Нажмите на в меню левой панели. аутентификацию Нажмите на вкладку в главном окне. «Метод входа» Судя по вашим действиям в руководстве по предварительным требованиям, в таблице уже должен отображаться в столбце со статусом « . Нажмите на значок карандаша, чтобы открыть панель конфигурации поставщика . «Поставщики входа» адрес электронной почты и пароль «Поставщики» Включено» электронной почты/пароля Нажмите на переключатель, чтобы включить . ссылку на электронную почту (вход без пароля) Нажмите . Сохранить Теперь ваш проект Firebase настроен для поддержки аутентификации без пароля. Шаг 2. Создание нового проекта React и установка пакетов Шаг 2а — Создание нового проекта React Создайте новый проект React, используя желаемое имя приложения. В этом руководстве используется . passwordless-auth npx create-react-app passwordless-auth Шаг 2б — Установка пакетов Для этого руководства требуется установка трех пакетов Node.js: : Firebase SDK. Firebase : для маршрутизации. React Router DOM : для стилизации. Bootstrap Установите каждый из трех пакетов выше через : npm npm install firebase npm install react-router-dom npm install bootstrap Шаг 3. Скопируйте из предварительного проекта. firebase.js В предварительном проекте вы создали файл , который использует данные конфигурации вашего проекта Firebase для создания экземпляра службы аутентификации Firebase. Ваш файл должен иметь следующую структуру со значениями конфигурации проекта Firebase: firebase.js firebase.js вашего import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { apiKey: "AIzaSyDiUlY68W9Li_0EIkmdGdzD7nvqCT9kHnY", authDomain: "my-auth-test-fbd48.firebaseapp.com", projectId: "my-auth-test-fbd48", storageBucket: "my-auth-test-fbd48.appspot.com", messagingSenderId: "1078604952662", appId: "1:1078604952662:web:5d0b908439cfb5684ab7f7" } const app = initializeApp(firebaseConfig); const auth = getAuth(app); export { auth } Скопируйте в новую папку проекта React. firebase.js Если вам нужно просмотреть конфигурацию проекта Firebase, нажмите значок шестеренки рядом с в меню левой панели. Вкладка уже должна быть выбрана. Прокрутите вниз до раздела , содержащего панель . Параметр на панели уже должен быть выбран. Значения конфигурации вашего проекта будут перечислены в отображаемом блоке кода. «Обзор проекта» «Общие» «Ваши приложения» «Веб-приложения» npm веб-приложений Шаг 4. Создание приложения React Шаг 4а. Обзор компонентов приложения React Приложение React будет состоять из 5 компонентов: , , , и . App Layout Login Confirm Profile App Компонент определяет общую структуру приложения, включая маршрутизацию. App Layout Компонент определяет разметку приложения, которая остается единообразной на всех маршрутах. Layout Login Точкой входа пользователя в приложение является форма входа. Когда пользователь пытается войти в систему через свой адрес электронной почты, на его/ее адрес электронной почты отправляется электронное письмо со ссылкой для входа. Confirm Пользователь перенаправляется на страницу , когда нажимает ссылку для входа. Confirm Страница просит пользователя подтвердить адрес электронной почты, использованный при входе в систему. Profile Пользователь перенаправляется на страницу после подтверждения своего адреса электронной почты. Profile Пользователь может нажать кнопку выхода на странице , чтобы выйти из своей учетной записи. Profile Последний каталог будет содержать следующие файлы: src src |__ index.js |__ firebase.js // Copied from prerequisite project in Step 3. |__ App.js |__ Layout.jsx |__ Login.jsx |__ Confirm.jsx |__ Profile.jsx Шаг 4b. Очистка шаблона проекта React и копирование файлов из предварительного проекта Вы можете удалить те же файлы из шаблона проекта React, как описано в шаге 5b.1 руководства по предварительным требованиям. Удалите следующие файлы из вашего проекта React: reportWebVitals.js setupTests.js logo.svg index.css App.css App.test.js Скопируйте из необходимого проекта в папку нового проекта. В этом руководстве используется тот же файл. Если вам нужно пересобрать , см. шаг 5b.2 руководства по предварительным требованиям или скопируйте приведенный ниже блок кода. index.js index.js Скопируйте из необходимого проекта в папку нового проекта. В этом руководстве используется тот же файл. Если вам нужно пересобрать , см. шаг 5d руководства по предварительным требованиям или скопируйте приведенный ниже блок кода. При желании вы можете обновить текст проекта в теге , чтобы или любой другой заголовок, который вы предпочитаете. Layout.jsx Layout.jsx Layout.jsx React With Firebase Passwordless Authentication Ваши файлы и должны выглядеть следующим образом: index.js Layout.jsx // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import "bootstrap/dist/css/bootstrap.min.css"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // Layout.jsx import { Outlet } from "react-router-dom"; const Layout = () => { return( React With Firebase Passwordless Authentication

) } export default Layout Шаг 4c — Создание App.js Файл во многом такой же, как и в предварительном проекте, с изменениями всего в двух строках. Чтобы облегчить создание файла, скопируйте из необходимого проекта в папку нового проекта. App.js App.js Удалите следующую строку из файла и замените ее, как показано ниже: import // Delete this line: import Signup from "./Signup"; // Replace it with: import Confirm from "./Confirm"; Удалите из файла следующий и замените его, как показано ниже: // Delete this line: } > // Replace it with: } > Сохраните App.js Полный файл теперь должен выглядеть следующим образом: import Layout from "./Layout"; import Login from "./Login"; import Confirm from "./Confirm"; import Profile from "./Profile"; import { BrowserRouter, Routes, Route } from "react-router-dom"; const App = () => { return ( }> }> } > } > ) } export default App Обратите внимание, что компонент снова является домашним маршрутом приложения, как это было в предварительном проекте. Login Шаг 4d — Создание Login.jsx В случае аутентификации без пароля вам, очевидно, не нужно включать поле пароля, а также вам не нужно управлять состоянием ввода пароля. Таким образом, форма входа должна содержать только адрес электронной почты пользователя. Создайте новый файл в каталоге . Login.jsx src Добавьте следующий код: import { useState } from "react"; import { auth } from "./firebase"; import { sendSignInLinkToEmail } from "firebase/auth"; const Login = () => { const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const actionCodeSettings = { url: "http://localhost:3000/confirm", handleCodeInApp: true } const callSendSignInLinkToEmail = (e) => { e.preventDefault(); sendSignInLinkToEmail(auth, email, actionCodeSettings) .then(() => { setNotice("An email was sent to your email address. Click the link in the email to login."); }) .catch((error) => { setNotice("An error occurred when sending a login link to your email address: ", error.name); }) } return( { "" !== notice && { notice } } setEmail(e.target.value) }> Email address callSendSignInLinkToEmail(e)}>Submit ) } Сохраните . Login.jsx После получения адреса электронной почты пользователя форма отправляет электронное письмо со ссылкой для входа на его адрес с помощью метода Firebase . В случае успеха пользователь уведомляется об отправке электронного письма. Обратите внимание, что объект передается в качестве параметра методу и включает URL-адрес, на который будет перенаправлен пользователь, когда он щелкнет ссылку для входа, отправленную по электронной почте. В этом случае URL-адрес сопоставляется с маршрутом указанным в Login.jsx sendSignInLinkToEmail actionCodeSettings sendSignInLinkToEmail /confirm App.js Шаг 4e — Создание Confirm.jsx Метод в Firebase используется для входа в систему пользователя, который нажал на ссылку для входа. Как вы вскоре увидите, метод принимает параметр , а значение должно соответствовать адресу электронной почты, который пользователь использовал при входе в систему через форму входа. предоставляет пользователю форму для подтверждения его/ее адреса электронной почты и впоследствии пытается войти в систему. signInWithEmailLink email email Confirm.jsx Создайте новый файл в каталоге . Confirm.jsx src Добавьте следующий код: import { useState } from "react"; import { auth } from "./firebase"; import { isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Confirm = () => { const navigate = useNavigate(); const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const callSignInWithEmailLink = (e) => { e.preventDefault(); if (isSignInWithEmailLink(auth, window.location.href)) { signInWithEmailLink(auth, email, window.location.href) .then(() => { navigate("/profile"); }) .catch((error) => { setNotice("An occurred during sign in: ", error.name); }) } } return( { "" !== notice && { notice } } setEmail(e.target.value) }> Please confirm your email address callSignInWithEmailLink(e)}>Confirm ) } export default Confirm Сохраните . Confirm.jsx Метод сначала проверяет, действительна ли ссылка для входа, которую использует пользователь. Если это так, для входа пользователя вызывается метод . Еще раз повторим: значение , передаваемое в метод , должно соответствовать адресу электронной почты, который пользователь использовал в форме входа. Обратите внимание: если пользователь является новым пользователем (т. е. он/ее входит в систему впервые), Firebase автоматически создаст пользователя в хранилище аутентификации Firebase. Это еще один пример упрощения аутентификации без пароля: создание учетной записи для новых пользователей выполняется автоматически. isSignInWithEmailLink signInWithEmailLink email signInWithEmailLink Шаг 4f — Создание Profile.jsx Последний компонент, который вы создадите, — это . Пользователи перенаправляются на этот компонент после успешного входа в систему через . Маршрут приветствует пользователя адресом электронной почты и предоставляет кнопку для выхода из системы. После выхода из системы пользователь перенаправляется обратно к компоненту . Profile.jsx Confirm.jsx Login Создайте новый файл в каталоге . Profile.jsx src Добавьте следующий код: import { auth } from "./firebase"; import { signOut } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Profile = () => { const navigate = useNavigate(); const logoutUser = async (e) => { e.preventDefault(); await signOut(auth); navigate("/"); } return( Welcome { auth.currentUser.email } . You are logged in!

logoutUser(e)}>Logout ) } export default Profile Сохраните . Profile.jsx Шаг 5 — Тестирование приложения Запустите приложение React: npm start Перейдите к в своем браузере, если ваш браузер не запускается автоматически. Вы должны увидеть форму . locahost:3000 Login Введите адрес электронной почты, который вы хотите использовать для входа, и нажмите . Если отправка прошла успешно, отобразится уведомление о том, что на ваш адрес электронной почты было отправлено письмо со ссылкой для входа. «Отправить» Войдите в свою учетную запись электронной почты и найдите письмо со ссылкой для входа в Firebase. Тема должна быть похожа на , где 13-значная числовая последовательность представляет собой вашего проекта Firebase (см. шаг 3 этого руководства). В разделе ниже я объясню, как вы можете изменить имя вашего проекта Firebase, чтобы оно отображалось «удобным для пользователя» именем в электронных письмах со ссылкой для входа. А пока откройте электронное письмо со ссылкой для входа и нажмите ссылку для входа. Вы будете перенаправлены на форму . Sign in to project-1078604952662 messagingSenderId «Необязательно» Confirm Введите адрес электронной почты, который вы использовали при входе в систему, в форме . Нажмите . Если подтверждение пройдет успешно, вы будете перенаправлены на страницу . Confirm «Подтвердить» Profile Нажмите кнопку на странице , чтобы выйти. Если выход пройдет успешно, вы вернетесь к форме . «Выход» Profile Login Приведенные выше шаги отражают рабочий процесс приложения. Необязательно: изменение названия проекта Вы можете изменить название своего проекта, чтобы в электронных письмах со ссылкой для входа, отправленных Firebase, отображалось «удобное для пользователя» имя вместо, например, . Войдите в свою и нажмите . project-1078604952662 учетную запись Firebase «Перейти к консоли» Нажмите на свой проект аутентификации, указанный на панели управления проектами Firebase. Нажмите на значок шестеренки рядом с в меню левой панели. Вкладка уже должна быть выбрана. пунктом «Обзор проекта» «Общие» Прокрутите вниз до параметра в разделе . «Общественное имя» «Ваш проект» Нажмите на значок карандаша и измените имя проекта по своему усмотрению. Нажмите . В ваших электронных письмах со ссылкой для входа теперь будет отображаться обновленное название проекта. Сохранить Заключение и следующие шаги Аутентификация без пароля становится все более популярным выбором среди разработчиков приложений, и это вполне понятно. Помимо очевидного преимущества, заключающегося в устранении необходимости управлять паролями, также нет необходимости в проверке электронной почты, поскольку процесс отправки ссылки для входа сам по себе является проверкой. Как и в случае с обязательным проектом, реализация здесь является базовой. Вы можете рассмотреть возможность простых улучшений, таких как: Блокирование/внесение в черный список определенных доменов адресов электронной почты (т. е. доменов, рассылающих спам). Локальное сохранение адреса электронной почты, введенного пользователем на странице , и проверка существования адреса электронной почты на странице . При таком подходе, если пользователь нажимает ссылку для входа на том же устройстве, где он/она получил доступ к странице , ему/ей не нужно будет снова вводить свой адрес электронной почты на странице , поскольку он будет восстановлен. из локального хранилища. Это обеспечивает еще более удобный пользовательский интерфейс. Login Confirm Login Confirm Вы можете узнать больше о беспарольной аутентификации Firebase в . официальной документации