Uwierzytelnij się w Firebase za pomocą łącza e-mail w JavaScript

Możesz użyć uwierzytelniania Firebase, aby zalogować użytkownika, wysyłając mu wiadomość e-mail zawierającą link, który może kliknąć, aby się zalogować. W tym procesie weryfikowany jest również adres e-mail użytkownika.

Logowanie się przez e-mail ma wiele zalet:

  • Rejestracja i logowanie o niskim współczynniku tarcia.
  • Mniejsze ryzyko ponownego użycia hasła w różnych aplikacjach, co może podważyć bezpieczeństwo nawet dobrze wybranych haseł.
  • Możliwość uwierzytelnienia użytkownika przy jednoczesnej weryfikacji, czy użytkownik jest prawowitym właścicielem adresu e-mail.
  • Aby się zalogować, użytkownik potrzebuje jedynie dostępnego konta e-mail. Nie jest wymagane posiadanie numeru telefonu ani konta w mediach społecznościowych.
  • Użytkownik może zalogować się bezpiecznie, bez konieczności podawania (lub zapamiętywania) hasła, co na urządzeniu mobilnym może być uciążliwe.
  • Istniejącego użytkownika, który wcześniej logował się przy użyciu identyfikatora e-mail (hasła lub konta federacyjnego), można uaktualnić tak, aby logował się wyłącznie przy użyciu adresu e-mail. Na przykład użytkownik, który zapomniał hasła, nadal może się zalogować bez konieczności resetowania hasła.

Zanim zaczniesz

Jeśli jeszcze tego nie zrobiłeś, skopiuj fragment inicjujący z konsoli Firebase do swojego projektu, jak opisano w artykule Dodawanie Firebase do projektu JavaScript .

Aby logować użytkowników za pomocą łącza e-mail, musisz najpierw włączyć dostawcę poczty e-mail i metodę logowania za pomocą łącza e-mail dla swojego projektu Firebase:

  1. W konsoli Firebase otwórz sekcję Uwierzytelnianie .
  2. Na karcie Metoda logowania włącz dostawcę adresu e-mail/hasła . Pamiętaj, że aby móc logować się za pomocą łącza e-mail, musi być włączone logowanie za pomocą adresu e-mail/hasła.
  3. W tej samej sekcji włącz metodę logowania za pomocą łącza e-mail (logowanie bez hasła) .
  4. Kliknij Zapisz .

Aby zainicjować proces uwierzytelniania, wyświetl użytkownikowi interfejs, który poprosi go o podanie adresu e-mail, a następnie wywołaj sendSignInLinkToEmail , aby poprosić Firebase o przesłanie linku uwierzytelniającego na adres e-mail użytkownika.

  1. Skonstruuj obiekt ActionCodeSettings , który udostępnia Firebase instrukcje dotyczące tworzenia łącza e-mail. Ustaw następujące pola:

    • url : precyzyjny link do umieszczenia i wszelki dodatkowy stan, który należy przekazać. Domenę linku należy dodać na liście autoryzowanych domen Firebase Console, którą znajdziemy wchodząc w zakładkę Metoda logowania (Uwierzytelnianie -> Metoda logowania).
    • android i ios : aplikacje, z których można korzystać po otwarciu łącza logowania na urządzeniu z systemem Android lub Apple. Dowiedz się więcej o konfigurowaniu łączy dynamicznych Firebase w celu otwierania linków do działań w wiadomościach e-mail za pośrednictwem aplikacji mobilnych.
    • handleCodeInApp : Ustaw na true. Operację logowania należy zawsze przeprowadzić w aplikacji, w przeciwieństwie do innych pozapasmowych działań e-mailowych (reset hasła i weryfikacja adresu e-mail). Dzieje się tak, ponieważ na końcu przepływu oczekuje się, że użytkownik będzie zalogowany, a jego stan uwierzytelnienia zostanie utrwalony w aplikacji.

    • dynamicLinkDomain : Jeśli dla projektu zdefiniowano wiele niestandardowych domen łączy dynamicznych, określ, która z nich ma być używana, gdy łącze ma być otwierane za pośrednictwem określonej aplikacji mobilnej (na przykład example.page.link ). W przeciwnym wypadku automatycznie wybierana jest pierwsza domena.

      Web modular API

      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 namespaced API

      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

    Aby dowiedzieć się więcej na temat ActionCodeSettings, zapoznaj się z sekcją Przekazywanie stanu w akcjach e-mailowych .

  2. Poproś użytkownika o adres e-mail.

  3. Wyślij link uwierzytelniający na adres e-mail użytkownika i zapisz adres e-mail użytkownika na wypadek, gdyby użytkownik ukończył logowanie e-mailem na tym samym urządzeniu.

    Web modular API

    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 namespaced API

    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

Obawy dotyczące bezpieczeństwa

Aby zapobiec używaniu linku do logowania do logowania się jako niezamierzony użytkownik lub na niezamierzonym urządzeniu, Firebase Auth wymaga podania adresu e-mail użytkownika podczas kończenia procesu logowania. Aby logowanie się powiodło, ten adres e-mail musi być zgodny z adresem, na który pierwotnie został wysłany link do logowania.

Możesz usprawnić ten przepływ dla użytkowników, którzy otwierają link do logowania na tym samym urządzeniu, na którym żądają łącza, przechowując ich adresy e-mail lokalnie – na przykład za pomocą usługi localStorage lub plików cookie – podczas wysyłania wiadomości e-mail logowania. Następnie użyj tego adresu, aby zakończyć przepływ. Nie podawaj adresu e-mail użytkownika w parametrach adresu URL przekierowania i używaj go ponownie, ponieważ może to umożliwić zastrzyki sesji.

Po zakończeniu logowania wszelkie dotychczasowe niezweryfikowane mechanizmy logowania zostaną usunięte z użytkownika, a wszelkie istniejące sesje zostaną unieważnione. Na przykład, jeśli ktoś wcześniej utworzył niezweryfikowane konto przy użyciu tego samego adresu e-mail i hasła, hasło użytkownika zostanie usunięte, aby uniemożliwić osobie podszywającej się, która rościła sobie prawo własności i utworzyła to niezweryfikowane konto, ponowne zalogowanie się przy użyciu niezweryfikowanego adresu e-mail i hasła.

Upewnij się także, że używasz adresu URL HTTPS w środowisku produkcyjnym, aby uniknąć potencjalnego przechwycenia łącza przez serwery pośredniczące.

Kończenie logowania na stronie internetowej

Format głębokiego łącza e-mailowego jest taki sam, jak format używany w przypadku działań e-mailowych poza pasmem (weryfikacja adresu e-mail, resetowanie hasła i anulowanie zmiany adresu e-mail). Firebase Auth upraszcza tę kontrolę, udostępniając interfejs API isSignInWithEmailLink , który pozwala sprawdzić, czy łącze jest łączem do logowania za pomocą łącza e-mail.

Aby dokończyć logowanie na stronie docelowej, zadzwoń pod numer signInWithEmailLink , podając adres e-mail użytkownika i rzeczywisty link e-mail zawierający kod jednorazowy.

Web modular API

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 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_complete.js

Web namespaced API

// 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

Dokończenie logowania w aplikacji mobilnej

Uwierzytelnianie Firebase wykorzystuje łącza dynamiczne Firebase do wysyłania linku e-mail na urządzenie mobilne. Aby zakończyć logowanie za pośrednictwem aplikacji mobilnej, należy ją skonfigurować tak, aby wykrywała przychodzące łącze do aplikacji, analizowała głęboki link, a następnie dokończyła logowanie, tak jak odbywa się to za pośrednictwem przepływu sieci.

Więcej informacji na temat obsługi logowania za pomocą łącza e-mail w aplikacji na Androida znajdziesz w przewodniku po Androidzie .

Aby dowiedzieć się więcej na temat obsługi logowania za pomocą łącza e-mail w aplikacji Apple, zapoznaj się z przewodnikiem po platformach Apple .

Możesz także powiązać tę metodę uwierzytelniania z istniejącym użytkownikiem. Na przykład użytkownik uwierzytelniony wcześniej u innego dostawcy, na przykład za pomocą numeru telefonu, może dodać tę metodę logowania do swojego istniejącego konta.

Różnica będzie dotyczyć drugiej połowy operacji:

Web modular API

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 namespaced API

// 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

Można to również wykorzystać do ponownego uwierzytelnienia użytkownika łącza e-mail przed wykonaniem poufnej operacji.

Web modular API

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 namespaced API

// 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

Ponieważ jednak przepływ może zakończyć się na innym urządzeniu, na którym pierwotny użytkownik nie był zalogowany, przepływ ten może nie zostać ukończony. W takim przypadku użytkownikowi może zostać wyświetlony błąd mający na celu wymuszenie otwarcia łącza na tym samym urządzeniu. W łączu można przekazać pewien stan, aby dostarczyć informacji o typie operacji i identyfikatorze użytkownika.

Jeśli projekt utworzyłeś 15 września 2023 r. lub później, ochrona wyliczeń adresów e-mail jest domyślnie włączona. Ta funkcja zwiększa bezpieczeństwo kont użytkowników projektu, ale wyłącza metodę fetchSignInMethodsForEmail() , którą wcześniej zalecaliśmy w celu implementacji przepływów opartych na identyfikatorze.

Chociaż możesz wyłączyć ochronę wyliczania adresów e-mail w swoim projekcie, odradzamy robienie tego.

Więcej szczegółów znajdziesz w dokumentacji dotyczącej ochrony wyliczeń e-maili .

Domyślny szablon wiadomości e-mail do logowania za pomocą linku

Domyślny szablon wiadomości e-mail zawiera sygnaturę czasową w temacie i treści wiadomości e-mail, dzięki czemu kolejne wiadomości e-mail nie są zwijane w jeden wątek, a łącze jest ukrywane .

Ten szablon dotyczy następujących języków:

Kod Język
ar arabski
zh-CN Uproszczony chiński)
zh-TW Chiński tradycyjny)
nl Holenderski
pl język angielski
pl-GB Angielski brytyjski)
ks Francuski
de Niemiecki
ID indonezyjski
To Włoski
ja język japoński
ko koreański
pl Polski
pt-BR portugalski (Brazylia)
pt-PT portugalski (Portugalia)
ru Rosyjski
es hiszpański
es-419 hiszpański (Ameryka Łacińska)
t tajski

Następne kroki

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i powiązane z poświadczeniami — czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami o dostawcy uwierzytelniania — za pomocą których użytkownik się zalogował. To nowe konto jest przechowywane jako część Twojego projektu Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w Twoim projekcie, niezależnie od tego, w jaki sposób użytkownik się loguje.

  • W aplikacjach zalecanym sposobem sprawdzenia stanu uwierzytelnienia użytkownika jest ustawienie obserwatora w obiekcie Auth . Następnie można uzyskać podstawowe informacje o profilu użytkownika z obiektu User . Zobacz Zarządzanie użytkownikami .

  • W regułach bezpieczeństwa bazy danych Firebase Realtime i Cloud Storage możesz uzyskać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i użyć go do kontrolowania, do jakich danych użytkownik może uzyskać dostęp.

Możesz zezwolić użytkownikom na logowanie się do aplikacji przy użyciu wielu dostawców uwierzytelniania, łącząc poświadczenia dostawcy uwierzytelniania z istniejącym kontem użytkownika.

Aby wylogować użytkownika, wywołaj funkcję signOut :

Web modular API

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 namespaced API

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

Możesz użyć uwierzytelniania Firebase, aby zalogować użytkownika, wysyłając mu wiadomość e-mail zawierającą link, który może kliknąć, aby się zalogować. W tym procesie weryfikowany jest również adres e-mail użytkownika.

Logowanie się przez e-mail ma wiele zalet:

  • Rejestracja i logowanie o niskim współczynniku tarcia.
  • Mniejsze ryzyko ponownego użycia hasła w różnych aplikacjach, co może podważyć bezpieczeństwo nawet dobrze wybranych haseł.
  • Możliwość uwierzytelnienia użytkownika przy jednoczesnej weryfikacji, czy użytkownik jest prawowitym właścicielem adresu e-mail.
  • Aby się zalogować, użytkownik potrzebuje jedynie dostępnego konta e-mail. Nie jest wymagane posiadanie numeru telefonu ani konta w mediach społecznościowych.
  • Użytkownik może zalogować się bezpiecznie, bez konieczności podawania (lub zapamiętywania) hasła, co na urządzeniu mobilnym może być uciążliwe.
  • Istniejącego użytkownika, który wcześniej logował się przy użyciu identyfikatora e-mail (hasła lub konta federacyjnego), można uaktualnić tak, aby logował się wyłącznie przy użyciu adresu e-mail. Na przykład użytkownik, który zapomniał hasła, nadal może się zalogować bez konieczności resetowania hasła.

Zanim zaczniesz

Jeśli jeszcze tego nie zrobiłeś, skopiuj fragment inicjujący z konsoli Firebase do swojego projektu, jak opisano w artykule Dodawanie Firebase do projektu JavaScript .

Aby logować użytkowników za pomocą łącza e-mail, musisz najpierw włączyć dostawcę poczty e-mail i metodę logowania za pomocą łącza e-mail dla swojego projektu Firebase:

  1. W konsoli Firebase otwórz sekcję Uwierzytelnianie .
  2. Na karcie Metoda logowania włącz dostawcę adresu e-mail/hasła . Pamiętaj, że aby móc logować się za pomocą łącza e-mail, musi być włączone logowanie za pomocą adresu e-mail/hasła.
  3. W tej samej sekcji włącz metodę logowania za pomocą łącza e-mail (logowanie bez hasła) .
  4. Kliknij Zapisz .

Aby zainicjować proces uwierzytelniania, wyświetl użytkownikowi interfejs, który poprosi go o podanie adresu e-mail, a następnie wywołaj sendSignInLinkToEmail , aby poprosić Firebase o przesłanie linku uwierzytelniającego na adres e-mail użytkownika.

  1. Skonstruuj obiekt ActionCodeSettings , który udostępnia Firebase instrukcje dotyczące tworzenia łącza e-mail. Ustaw następujące pola:

    • url : precyzyjny link do umieszczenia i wszelki dodatkowy stan, który należy przekazać. Domenę linku należy dodać na liście autoryzowanych domen Firebase Console, którą znajdziemy wchodząc w zakładkę Metoda logowania (Uwierzytelnianie -> Metoda logowania).
    • android i ios : aplikacje, z których można korzystać po otwarciu łącza logowania na urządzeniu z systemem Android lub Apple. Dowiedz się więcej o konfigurowaniu łączy dynamicznych Firebase w celu otwierania linków do działań w wiadomościach e-mail za pośrednictwem aplikacji mobilnych.
    • handleCodeInApp : Ustaw na true. Operację logowania należy zawsze przeprowadzić w aplikacji, w przeciwieństwie do innych pozapasmowych działań e-mailowych (reset hasła i weryfikacja adresu e-mail). Dzieje się tak, ponieważ na końcu przepływu oczekuje się, że użytkownik będzie zalogowany, a jego stan uwierzytelnienia zostanie utrwalony w aplikacji.

    • dynamicLinkDomain : Jeśli dla projektu zdefiniowano wiele niestandardowych domen łączy dynamicznych, określ, która z nich ma być używana, gdy łącze ma być otwierane za pośrednictwem określonej aplikacji mobilnej (na przykład example.page.link ). W przeciwnym wypadku automatycznie wybierana jest pierwsza domena.

      Web modular API

      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 namespaced API

      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

    Aby dowiedzieć się więcej na temat ActionCodeSettings, zapoznaj się z sekcją Przekazywanie stanu w akcjach e-mailowych .

  2. Poproś użytkownika o adres e-mail.

  3. Wyślij link uwierzytelniający na adres e-mail użytkownika i zapisz adres e-mail użytkownika na wypadek, gdyby użytkownik ukończył logowanie e-mailem na tym samym urządzeniu.

    Web modular API

    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 namespaced API

    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

Obawy dotyczące bezpieczeństwa

Aby zapobiec używaniu linku do logowania do logowania się jako niezamierzony użytkownik lub na niezamierzonym urządzeniu, Firebase Auth wymaga podania adresu e-mail użytkownika podczas kończenia procesu logowania. Aby logowanie się powiodło, ten adres e-mail musi być zgodny z adresem, na który pierwotnie został wysłany link do logowania.

Możesz usprawnić ten przepływ dla użytkowników, którzy otwierają link do logowania na tym samym urządzeniu, na którym żądają łącza, przechowując ich adresy e-mail lokalnie – na przykład za pomocą usługi localStorage lub plików cookie – podczas wysyłania wiadomości e-mail logowania. Następnie użyj tego adresu, aby zakończyć przepływ. Nie podawaj adresu e-mail użytkownika w parametrach adresu URL przekierowania i używaj go ponownie, ponieważ może to umożliwić zastrzyki sesji.

Po zakończeniu logowania wszelkie dotychczasowe niezweryfikowane mechanizmy logowania zostaną usunięte z użytkownika, a wszelkie istniejące sesje zostaną unieważnione. Na przykład, jeśli ktoś wcześniej utworzył niezweryfikowane konto przy użyciu tego samego adresu e-mail i hasła, hasło użytkownika zostanie usunięte, aby uniemożliwić osobie podszywającej się, która rościła sobie prawo własności i utworzyła to niezweryfikowane konto, ponowne zalogowanie się przy użyciu niezweryfikowanego adresu e-mail i hasła.

Upewnij się także, że używasz adresu URL HTTPS w środowisku produkcyjnym, aby uniknąć potencjalnego przechwycenia łącza przez serwery pośredniczące.

Kończenie logowania na stronie internetowej

Format głębokiego łącza e-mailowego jest taki sam, jak format używany w przypadku działań e-mailowych poza pasmem (weryfikacja adresu e-mail, resetowanie hasła i anulowanie zmiany adresu e-mail). Firebase Auth upraszcza tę kontrolę, udostępniając interfejs API isSignInWithEmailLink , który pozwala sprawdzić, czy łącze jest łączem do logowania za pomocą łącza e-mail.

Aby dokończyć logowanie na stronie docelowej, zadzwoń pod numer signInWithEmailLink , podając adres e-mail użytkownika i rzeczywisty link e-mail zawierający kod jednorazowy.

Web modular API

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 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_complete.js

Web namespaced API

// 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

Dokończenie logowania w aplikacji mobilnej

Uwierzytelnianie Firebase wykorzystuje łącza dynamiczne Firebase do wysyłania linku e-mail na urządzenie mobilne. Aby zakończyć logowanie za pośrednictwem aplikacji mobilnej, należy ją skonfigurować tak, aby wykrywała przychodzące łącze do aplikacji, analizowała głęboki link, a następnie dokończyła logowanie, tak jak odbywa się to za pośrednictwem przepływu sieci.

Więcej informacji na temat obsługi logowania za pomocą łącza e-mail w aplikacji na Androida znajdziesz w przewodniku po Androidzie .

Aby dowiedzieć się więcej na temat obsługi logowania za pomocą łącza e-mail w aplikacji Apple, zapoznaj się z przewodnikiem po platformach Apple .

Możesz także powiązać tę metodę uwierzytelniania z istniejącym użytkownikiem. Na przykład użytkownik uwierzytelniony wcześniej u innego dostawcy, na przykład za pomocą numeru telefonu, może dodać tę metodę logowania do swojego istniejącego konta.

Różnica będzie dotyczyć drugiej połowy operacji:

Web modular API

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 namespaced API

// 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

Można to również wykorzystać do ponownego uwierzytelnienia użytkownika łącza e-mail przed wykonaniem poufnej operacji.

Web modular API

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 namespaced API

// 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

Ponieważ jednak przepływ może zakończyć się na innym urządzeniu, na którym pierwotny użytkownik nie był zalogowany, przepływ ten może nie zostać ukończony. W takim przypadku użytkownikowi może zostać wyświetlony błąd mający na celu wymuszenie otwarcia łącza na tym samym urządzeniu. W łączu można przekazać pewien stan, aby dostarczyć informacji o typie operacji i identyfikatorze użytkownika.

Jeśli projekt utworzyłeś 15 września 2023 r. lub później, ochrona wyliczeń adresów e-mail jest domyślnie włączona. Ta funkcja zwiększa bezpieczeństwo kont użytkowników projektu, ale wyłącza metodę fetchSignInMethodsForEmail() , którą wcześniej zalecaliśmy w celu implementacji przepływów opartych na identyfikatorze.

Chociaż możesz wyłączyć ochronę wyliczania adresów e-mail w swoim projekcie, odradzamy robienie tego.

Więcej szczegółów znajdziesz w dokumentacji dotyczącej ochrony wyliczeń e-maili .

Domyślny szablon wiadomości e-mail do logowania za pomocą linku

Domyślny szablon wiadomości e-mail zawiera sygnaturę czasową w temacie i treści wiadomości e-mail, dzięki czemu kolejne wiadomości e-mail nie są zwijane w jeden wątek, a łącze jest ukrywane .

Ten szablon dotyczy następujących języków:

Kod Język
ar arabski
zh-CN Uproszczony chiński)
zh-TW Chiński tradycyjny)
nl Holenderski
pl język angielski
pl-GB Angielski brytyjski)
ks Francuski
de Niemiecki
ID indonezyjski
To Włoski
ja język japoński
ko koreański
pl Polski
pt-BR portugalski (Brazylia)
pt-PT portugalski (Portugalia)
ru Rosyjski
es hiszpański
es-419 hiszpański (Ameryka Łacińska)
t tajski

Następne kroki

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i powiązane z poświadczeniami — czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami o dostawcy uwierzytelniania — za pomocą których użytkownik się zalogował. To nowe konto jest przechowywane jako część Twojego projektu Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w Twoim projekcie, niezależnie od tego, w jaki sposób użytkownik się loguje.

  • W aplikacjach zalecanym sposobem sprawdzenia stanu uwierzytelnienia użytkownika jest ustawienie obserwatora w obiekcie Auth . Następnie można uzyskać podstawowe informacje o profilu użytkownika z obiektu User . Zobacz Zarządzanie użytkownikami .

  • W regułach bezpieczeństwa bazy danych Firebase Realtime i Cloud Storage możesz uzyskać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i użyć go do kontrolowania, do jakich danych użytkownik może uzyskać dostęp.

Możesz zezwolić użytkownikom na logowanie się do aplikacji przy użyciu wielu dostawców uwierzytelniania, łącząc poświadczenia dostawcy uwierzytelniania z istniejącym kontem użytkownika.

Aby wylogować użytkownika, wywołaj funkcję signOut :

Web modular API

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 namespaced API

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