Аутентификация с помощью Firebase с использованием ссылки электронной почты в JavaScript

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

Вход в систему по электронной почте имеет множество преимуществ:

  • Простая регистрация и вход.
  • Снижение риска повторного использования паролей в приложениях, что может подорвать безопасность даже правильно выбранных паролей.
  • Возможность аутентификации пользователя, а также проверка того, что пользователь является законным владельцем адреса электронной почты.
  • Для входа в систему пользователю требуется только доступная учетная запись электронной почты. Никакого владения номером телефона или учетной записью в социальной сети не требуется.
  • Пользователь может безопасно войти в систему без необходимости вводить (или запоминать) пароль, который может быть затруднительным на мобильном устройстве.
  • Существующего пользователя, который ранее входил в систему с помощью идентификатора электронной почты (пароля или федеративного), можно обновить, чтобы он входил в систему только с помощью электронной почты. Например, пользователь, забывший свой пароль, все равно может войти в систему без необходимости его сброса.

Прежде чем начать

Если вы еще этого не сделали, скопируйте фрагмент инициализации из консоли Firebase в свой проект, как описано в разделе «Добавление Firebase в проект JavaScript» .

Чтобы войти в систему по ссылке электронной почты, сначала необходимо включить поставщика электронной почты и метод входа по ссылке электронной почты для вашего проекта Firebase:

  1. В консоли Firebase откройте раздел Auth .
  2. На вкладке «Метод входа» включите поставщика электронной почты и пароля . Обратите внимание, что для использования входа по ссылке электронной почты необходимо включить вход по электронной почте и паролю.
  3. В том же разделе включите метод входа по ссылке электронной почты (вход без пароля) .
  4. Нажмите Сохранить .

Чтобы инициировать процесс аутентификации, предоставьте пользователю интерфейс, который предложит пользователю указать свой адрес электронной почты, а затем вызовите sendSignInLinkToEmail , чтобы запросить у Firebase отправку ссылки аутентификации на электронную почту пользователя.

  1. Создайте объект ActionCodeSettings , который предоставит Firebase инструкции по созданию ссылки электронной почты. Задайте следующие поля:

    • url : глубокая ссылка для встраивания и любое дополнительное состояние, которое необходимо передать. Домен ссылки необходимо добавить в список авторизованных доменов консоли Firebase, который можно найти, перейдя на вкладку «Метод входа» (Аутентификация -> Настройки).
    • android и ios : приложения, которые будут использоваться при открытии ссылки для входа на устройстве Android или Apple. Узнайте больше о том, как настроить динамические ссылки Firebase для открытия ссылок действий по электронной почте через мобильные приложения.
    • handleCodeInApp : установлено значение true. Операцию входа в систему всегда необходимо выполнять в приложении, в отличие от других внешних действий с электронной почтой (сброс пароля и проверка электронной почты). Это связано с тем, что в конце потока ожидается, что пользователь войдет в систему, и его состояние аутентификации сохранится в приложении.

    • dynamicLinkDomain : если для проекта определено несколько пользовательских доменов динамических ссылок, укажите, какой из них использовать, когда ссылка должна открываться через указанное мобильное приложение (например, example.page.link ). В противном случае автоматически выбирается первый домен.

      Web

      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'
  },
  dynamicLinkDomain: 'example.page.link'
};
      auth_email_link_actioncode_settings.js

      Web 

      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'
};
      email-link-auth.js

    Дополнительные сведения о настройках ActionCodeSettings см. в разделе «Состояние передачи в действиях по электронной почте» .

  2. Попросите пользователя указать адрес электронной почты.

  3. Отправьте ссылку для аутентификации на адрес электронной почты пользователя и сохраните адрес электронной почты пользователя на случай, если пользователь завершит вход в систему по электронной почте на том же устройстве.

    Web

    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;
    // ...
  });
    auth_email_link_send.js

    Web 

    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;
    // ...
  });
    email-link-auth.js

Проблемы безопасности

Чтобы предотвратить использование ссылки для входа в систему в качестве непредусмотренного пользователя или на непредусмотренном устройстве, Firebase Auth требует, чтобы адрес электронной почты пользователя был указан при завершении процесса входа в систему. Чтобы вход прошел успешно, этот адрес электронной почты должен совпадать с адресом, на который изначально была отправлена ​​ссылка для входа.

Вы можете упростить этот процесс для пользователей, которые открывают ссылку для входа на том же устройстве, на котором они запрашивают ссылку, сохраняя их адрес электронной почты локально (например, с помощью localStorage или файлов cookie) при отправке электронного письма для входа. Затем используйте этот адрес для завершения потока. Не передавайте адрес электронной почты пользователя в параметрах URL-адреса перенаправления и не используйте его повторно, поскольку это может активировать внедрение сеансов.

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

Также убедитесь, что вы используете URL-адрес HTTPS в производстве, чтобы избежать потенциального перехвата вашей ссылки промежуточными серверами.

Завершение входа на веб-страницу

Формат глубокой ссылки на электронную почту такой же, как формат, используемый для внешних действий с электронной почтой (проверка электронной почты, сброс пароля и отзыв изменения электронной почты). Firebase Auth упрощает эту проверку, предоставляя API isSignInWithEmailLink чтобы проверить, является ли ссылка входом в систему со ссылкой электронной почты.

Чтобы завершить вход на целевой странице, вызовите signInWithEmailLink , указав адрес электронной почты пользователя и фактическую ссылку электронной почты, содержащую одноразовый код.

Web

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.
    });
}
email_link_complete.js

Web 

// 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.
    });
}
email-link-auth.js

Завершение входа в мобильное приложение

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

Дополнительные сведения о том, как выполнить вход по ссылке электронной почты в приложении Android, см. в руководстве по Android .

Дополнительные сведения о том, как обрабатывать вход по ссылке электронной почты в приложении Apple, см. в руководстве по платформам Apple .

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

Разница будет во второй половине операции:

Web

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.
  });
auth_email_link_link.js

Web 

// 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.
  });
email-link-auth.js

Это также можно использовать для повторной аутентификации пользователя ссылки электронной почты перед выполнением конфиденциальной операции.

Web

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.
  });
auth_email_link_reauth.js

Web 

// 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.
  });
email-link-auth.js

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

Если вы создали проект 15 сентября 2023 г. или позже, защита перечисления электронной почты включена по умолчанию. Эта функция повышает безопасность учетных записей пользователей вашего проекта, но отключает метод fetchSignInMethodsForEmail() , который мы ранее рекомендовали для реализации потоков с приоритетом идентификаторов.

Хотя вы можете отключить защиту перечисления электронной почты для своего проекта, мы не рекомендуем этого делать.

Дополнительные сведения см. в документации по защите перечисления электронной почты .

Шаблон электронной почты по умолчанию для входа по ссылке

Шаблон электронного письма по умолчанию включает метку времени в теме и теле электронного письма, чтобы последующие электронные письма не сводились в одну цепочку, а ссылка не была скрыта .

Этот шаблон применим к следующим языкам:

Код Язык
ар арабский
ж-CN Китайский (упрощенный)
ж-TW Китайский (традиционный)
Нидерланды Голландский
ru Английский
ru-GB английский (Великобритания)
фр. Французский
де немецкий
идентификатор индонезийский
это итальянский
да японский
ко корейский
пожалуйста Польский
пт-БР Португальский (Бразилия)
пт-ПТ Португальский (Португалия)
ру Русский
эс испанский
эс-419 Испанский (Латинская Америка)
й тайский

Следующие шаги

После того, как пользователь входит в систему в первый раз, создается новая учетная запись пользователя, которая связывается с учетными данными (то есть именем пользователя и паролем, номером телефона или информацией поставщика аутентификации), с которыми пользователь вошел в систему. Эта новая учетная запись хранится как часть вашего проекта Firebase и может использоваться для идентификации пользователя в каждом приложении вашего проекта, независимо от того, как пользователь входит в систему.

  • В ваших приложениях рекомендуемый способ узнать статус аутентификации вашего пользователя — установить наблюдателя на объекте Auth . Затем вы можете получить базовую информацию профиля пользователя из объекта User . См. Управление пользователями .

  • В правилах безопасности Firebase Realtime Database и Cloud Storage Firebase вы можете получить уникальный идентификатор пользователя, вошедшего в систему, из переменной auth и использовать его для управления тем, к каким данным пользователь может получить доступ.

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

Чтобы выйти из системы, вызовите signOut :

Web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web 

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js