Вы можете использовать аутентификацию Firebase для входа пользователя, отправив ему электронное письмо, содержащее ссылку, по которой он может щелкнуть, чтобы войти в систему. При этом также проверяется адрес электронной почты пользователя.
Вход в систему по электронной почте имеет множество преимуществ:
- Простая регистрация и вход.
- Снижение риска повторного использования паролей в приложениях, что может подорвать безопасность даже правильно выбранных паролей.
- Возможность аутентификации пользователя, а также проверка того, что пользователь является законным владельцем адреса электронной почты.
- Для входа в систему пользователю требуется только доступная учетная запись электронной почты. Никакого владения номером телефона или учетной записью в социальной сети не требуется.
- Пользователь может безопасно войти в систему без необходимости вводить (или запоминать) пароль, который может быть затруднительным на мобильном устройстве.
- Существующего пользователя, который ранее входил в систему с помощью идентификатора электронной почты (пароля или федеративного), можно обновить, чтобы он входил в систему только с помощью электронной почты. Например, пользователь, забывший свой пароль, все равно может войти в систему без необходимости его сброса.
Прежде чем начать
Если вы еще этого не сделали, скопируйте фрагмент инициализации из консоли Firebase в свой проект, как описано в разделе Добавление Firebase в проект JavaScript .
Включите вход по электронной почте для вашего проекта Firebase
Чтобы войти в систему по ссылке электронной почты, сначала необходимо включить поставщика электронной почты и метод входа по ссылке электронной почты для вашего проекта Firebase:
- В консоли Firebase откройте раздел Auth .
- На вкладке «Метод входа » включите поставщика электронной почты и пароля . Обратите внимание, что для использования входа по ссылке электронной почты необходимо включить вход по электронной почте и паролю.
- В том же разделе включите метод входа по ссылке электронной почты (вход без пароля) .
- Нажмите Сохранить .
Отправьте ссылку для аутентификации на адрес электронной почты пользователя.
Чтобы инициировать процесс аутентификации, предоставьте пользователю интерфейс, который предложит пользователю указать свой адрес электронной почты, а затем вызовите sendSignInLinkToEmail
, чтобы запросить у Firebase ссылку для аутентификации на электронную почту пользователя.
Создайте объект
ActionCodeSettings
, который предоставит Firebase инструкции по созданию ссылки электронной почты. Задайте следующие поля:-
url
: глубокая ссылка для встраивания и любое дополнительное состояние, которое необходимо передать. Домен ссылки необходимо добавить в список авторизованных доменов консоли Firebase, который можно найти, перейдя на вкладку «Метод входа» (Аутентификация -> Настройки). -
android
иios
: помогает Firebase Authentication определить, следует ли создавать ссылку только для Интернета или для мобильных устройств, которая открывается на устройстве Android или Apple. -
handleCodeInApp
: установлено значение true. Операцию входа в систему всегда необходимо выполнять в приложении, в отличие от других внешних действий с электронной почтой (сброс пароля и проверка электронной почты). Это связано с тем, что в конце потока ожидается, что пользователь войдет в систему, и его состояние аутентификации сохранится в приложении. -
linkDomain
: если для проекта определены пользовательские домены ссылок Hosting , укажите, какой из них использовать, когда ссылка должна открываться указанным мобильным приложением. В противном случае автоматически выбирается домен по умолчанию (например,PROJECT_ID .firebaseapp.com
). dynamicLinkDomain
: устарел. Не указывайте этот параметр.const actionCodeSettings = { // URL you want to redirect back to. The domain (www.example.com) for this // URL must be in the authorized domains list in the Firebase Console. url: 'https://www.example.com/finishSignUp?cartId=1234', // This must be true. handleCodeInApp: true, iOS: { bundleId: 'com.example.ios' }, android: { packageName: 'com.example.android', installApp: true, minimumVersion: '12' }, // The domain must be configured in Firebase Hosting and owned by the project. linkDomain: 'custom-domain.com' };
var actionCodeSettings = { // URL you want to redirect back to. The domain (www.example.com) for this // URL must be in the authorized domains list in the Firebase Console. url: 'https://www.example.com/finishSignUp?cartId=1234', // This must be true. handleCodeInApp: true, iOS: { bundleId: 'com.example.ios' }, android: { packageName: 'com.example.android', installApp: true, minimumVersion: '12' }, dynamicLinkDomain: 'example.page.link' };
Дополнительные сведения о ActionCodeSettings
см. в разделе «Передача состояния в действиях по электронной почте» .-
Попросите пользователя указать адрес электронной почты. Отправьте ссылку для аутентификации на адрес электронной почты пользователя и сохраните адрес электронной почты пользователя на случай, если пользователь завершит вход в систему по электронной почте на том же устройстве. import { getAuth, sendSignInLinkToEmail } from "firebase/auth"; const auth = getAuth(); sendSignInLinkToEmail(auth, email, actionCodeSettings) .then(() => { // The link was successfully sent. Inform the user. // Save the email locally so you don't need to ask the user for it again // if they open the link on the same device. window.localStorage.setItem('emailForSignIn', email); // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // ... });
firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings) .then(() => { // The link was successfully sent. Inform the user. // Save the email locally so you don't need to ask the user for it again // if they open the link on the same device. window.localStorage.setItem('emailForSignIn', email); // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // ... });
Завершите вход по ссылке электронной почты.
Проблемы безопасности
Завершение входа на веб-страницу
isSignInWithEmailLink
, чтобы проверить, является ли ссылка входом в систему со ссылкой электронной почты.
signInWithEmailLink
указав адрес электронной почты пользователя и фактическую ссылку электронной почты, содержащую одноразовый код.
import { getAuth, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth"; // Confirm the link is a sign-in with email link. const auth = getAuth(); if (isSignInWithEmailLink(auth, window.location.href)) { // Additional state parameters can also be passed via URL. // This can be used to continue the user's intended action before triggering // the sign-in operation. // Get the email if available. This should be available if the user completes // the flow on the same device where they started it. let email = window.localStorage.getItem('emailForSignIn'); if (!email) { // User opened the link on a different device. To prevent session fixation // attacks, ask the user to provide the associated email again. For example: email = window.prompt('Please provide your email for confirmation'); } // The client SDK will parse the code from the link for you. signInWithEmailLink(auth, email, window.location.href) .then((result) => { // Clear email from storage. window.localStorage.removeItem('emailForSignIn'); // You can access the new user by importing getAdditionalUserInfo // and calling it with result: // getAdditionalUserInfo(result) // You can access the user's profile via: // getAdditionalUserInfo(result)?.profile // You can check if the user is new or existing: // getAdditionalUserInfo(result)?.isNewUser }) .catch((error) => { // Some error occurred, you can inspect the code: error.code // Common errors could be invalid email and invalid or expired OTPs. }); }
// Confirm the link is a sign-in with email link. if (firebase.auth().isSignInWithEmailLink(window.location.href)) { // Additional state parameters can also be passed via URL. // This can be used to continue the user's intended action before triggering // the sign-in operation. // Get the email if available. This should be available if the user completes // the flow on the same device where they started it. var email = window.localStorage.getItem('emailForSignIn'); if (!email) { // User opened the link on a different device. To prevent session fixation // attacks, ask the user to provide the associated email again. For example: email = window.prompt('Please provide your email for confirmation'); } // The client SDK will parse the code from the link for you. firebase.auth().signInWithEmailLink(email, window.location.href) .then((result) => { // Clear email from storage. window.localStorage.removeItem('emailForSignIn'); // You can access the new user via result.user // Additional user info profile not available via: // result.additionalUserInfo.profile == null // You can check if the user is new or existing: // result.additionalUserInfo.isNewUser }) .catch((error) => { // Some error occurred, you can inspect the code: error.code // Common errors could be invalid email and invalid or expired OTPs. }); }
Завершение входа в мобильное приложение
Привязка/повторная аутентификация по ссылке электронной почты
import { getAuth, linkWithCredential, EmailAuthProvider } from "firebase/auth"; // Construct the email link credential from the current URL. const credential = EmailAuthProvider.credentialWithLink( email, window.location.href); // Link the credential to the current user. const auth = getAuth(); linkWithCredential(auth.currentUser, credential) .then((usercred) => { // The provider is now successfully linked. // The phone user can now sign in with their phone number or email. }) .catch((error) => { // Some error occurred. });
// Construct the email link credential from the current URL. var credential = firebase.auth.EmailAuthProvider.credentialWithLink( email, window.location.href); // Link the credential to the current user. firebase.auth().currentUser.linkWithCredential(credential) .then((usercred) => { // The provider is now successfully linked. // The phone user can now sign in with their phone number or email. }) .catch((error) => { // Some error occurred. });
import { getAuth, reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth"; // Construct the email link credential from the current URL. const credential = EmailAuthProvider.credentialWithLink( email, window.location.href); // Re-authenticate the user with this credential. const auth = getAuth(); reauthenticateWithCredential(auth.currentUser, credential) .then((usercred) => { // The user is now successfully re-authenticated and can execute sensitive // operations. }) .catch((error) => { // Some error occurred. });
// Construct the email link credential from the current URL. var credential = firebase.auth.EmailAuthProvider.credentialWithLink( email, window.location.href); // Re-authenticate the user with this credential. firebase.auth().currentUser.reauthenticateWithCredential(credential) .then((usercred) => { // The user is now successfully re-authenticated and can execute sensitive // operations. }) .catch((error) => { // Some error occurred. });
Устарело: отличие пароля электронной почты от ссылки электронной почты.
fetchSignInMethodsForEmail()
, который мы ранее рекомендовали для реализации потоков с приоритетом идентификаторов.
Шаблон электронной почты по умолчанию для входа по ссылке
Код | Язык |
---|---|
ар | арабский |
ж-CN | Китайский (упрощенный) |
ж-TW | Китайский (традиционный) |
Нидерланды | Голландский |
ru | Английский |
ru-GB | английский (Великобритания) |
пт | Французский |
де | немецкий |
идентификатор | индонезийский |
это | итальянский |
да | японский |
ко | корейский |
пожалуйста | Польский |
пт-БР | Португальский (Бразилия) |
пт-ПТ | Португальский (Португалия) |
ру | Русский |
эс | испанский |
эс-419 | Испанский (Латинская Америка) |
й | тайский |
Следующие шаги
В ваших приложениях рекомендуемый способ узнать статус аутентификации вашего пользователя — установить наблюдателя на объекте Auth
. Затем вы можете получить базовую информацию профиля пользователя из объектаUser
. См. Управление пользователями .В правилах безопасности базы данных реального времени и Cloud Storage Firebase Realtime Database вы можете получить уникальный идентификатор пользователя, вошедшего в систему, из переменной auth
и использовать его для управления тем, к каким данным пользователь может получить доступ.
signOut
:
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });