JavaScript'te E-posta Bağlantısı Kullanarak Firebase ile Kimlik Doğrulama

Firebase Authentication'ı kullanarak bir kullanıcıya e-posta göndererek oturum açabilirsiniz oturum açmak için tıklayabilecekleri bir bağlantı içeren, Bu süreçte kullanıcının e-posta adresi de doğrulanır.

E-posta ile oturum açmanın pek çok avantajı vardır:

  • Kayıt ve oturum açma işlemlerini kolaylaştırın.
  • Uygulamalarda şifrelerin yeniden kullanılması ihtimali daha düşüktür ve bu da güvenliği olumsuz etkileyebilir. doğru şekilde seçilmiş şifreler oluşturabilirsiniz.
  • Bir kullanıcının kimliğini doğrularken aynı zamanda kullanıcının bir e-posta adresinin yasal sahibidir.
  • Kullanıcının oturum açmak için yalnızca erişilebilir bir e-posta hesabına ihtiyacı vardır. Hiçbir sahipliği yoksa telefon numarası veya sosyal medya hesabı gereklidir.
  • Kullanıcı, herhangi bir güvenlik onayı sağlamadan (veya hatırlamadan) Bu da mobil cihazlarda kullanışsız olabilir.
  • Daha önce bir e-posta tanımlayıcısı (şifre) ile oturum açmış mevcut bir kullanıcı veya birleşik) yalnızca e-posta ile oturum açacak şekilde yükseltilebilir. Örneğin, şifresini unutan bir kullanıcı tekrar oturum açmaya gerek kalmadan oturum açabilir. şifresini sıfırlayabilir.

Başlamadan önce

Henüz yapmadıysanız ilk kullanıma hazırlama snippet'ini Firebase konsolunu içinde açıklandığı şekilde projenize ekleyin Firebase'i JavaScript projenize ekleyin.

Kullanıcıların e-posta bağlantısıyla oturum açmasını sağlamak için önce E-posta sağlayıcısını etkinleştirmeniz ve Firebase projeniz için e-posta bağlantısı oturum açma yöntemi:

  1. Firebase konsolunda Auth bölümünü açın.
  2. Oturum açma yöntemi sekmesinde, E-posta/Şifre sağlayıcısını etkinleştirin. Not e-posta bağlantısıyla oturum açmayı kullanmak için e-posta/şifre oturum açma etkinleştirilmelidir.
  3. Aynı bölümde, E-posta bağlantısı (şifresiz oturum açma) oturum açmayı etkinleştirin. yöntemidir.
  4. Kaydet'i tıklayın.

Kimlik doğrulama akışını başlatmak için kullanıcıya kullanıcıdan e-posta adresini girmesini ve ardından telefonla aramasını ister Firebase'in kimlik doğrulama bağlantısını şu adrese göndermesini istemek için sendSignInLinkToEmail Kullanıcının e-postası.

  1. Firebase'e sağlamak için ActionCodeSettings nesnesini oluşturun. E-posta bağlantısının nasıl oluşturulacağıyla ilgili talimatlar. Aşağıdaki alanları ayarlayın:

    • url: Yerleştirilecek derin bağlantı ve iletilecek ek durum. Bağlantının alan adı, Firebase Konsolu'ndaki Yetkili alan adları (Oturum açma yöntemi sekmesine gidilerek bulunabilir) (Kimlik Doğrulama -> Ayarlar).
    • android ve ios: Şu cihazda oturum açma bağlantısı açıldığında kullanılacak uygulamalar: Android veya Apple cihaz. Şu işlemler hakkında daha fazla bilgi edinin: Firebase Dynamic Links'i yapılandırın e-posta işlemi bağlantılarını mobil uygulamalar aracılığıyla açmak için.
    • handleCodeInApp: Doğru değerine ayarlanır. Oturum açma işlemi her zaman uygulamada tamamlanması, diğer bant dışı e-posta işlemlerinin (şifre) sıfırlama ve e-posta doğrulamaları). Bunun nedeni, akışın sonunda kullanıcıların Kullanıcının oturum açmış olması beklenir ve Yetki durumu şu süre içinde devam eder: görebilirsiniz.

    • dynamicLinkDomain: Birden fazla özel dinamik bağlantı alan adı tanımlandığında bağlantı şununla açılacağında hangisinin kullanılacağını belirtin: Belirli bir mobil uygulama (örneğin, example.page.link). Aksi halde ilk alan adı otomatik olarak seçilir.

      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 hakkında daha fazla bilgi edinmek için E-posta İşlemlerinde İletim Durumu bölümüne ekleyin.

  2. Kullanıcıdan e-posta adresini isteyin.

  3. Kimlik doğrulama bağlantısını kullanıcının e-posta adresine gönderin ve kullanıcının e-postasını kaydedin Kullanıcı, e-postayla oturum açma işlemini aynı cihazda tamamlamalıdır.

    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

Güvenlikle ilgili sorunlar

Oturum açma bağlantısının istenmeyen kullanıcı olarak veya istenmeyen bir cihazdaysa Firebase Auth, kullanıcının e-posta adresinin ne zaman sağlandığını göreceğiz. Oturum açma işleminin başarılı olması için bu e-posta adresi, oturum açma bağlantısının gönderildiği adresle eşleşmelidir.

Oturum açma bağlantısını e-posta adresini yerel olarak saklayarak bağlantı isteğinde bulunurlar. (oturum açma e-postasını gönderdiğinizde), localStorage veya çerezleri kullanır. Ardından, akışı tamamlamak için bu adresi kullanın. Kullanıcının e-postasını, yönlendirme URL'si parametrelerinde iletmeyin ve Bu işlem, oturum yerleştirmeyi etkinleştirebilir.

Oturum açma işlemi tamamlandıktan sonra, önceki doğrulanmamış tüm oturum açma mekanizmaları kaldırılır ve mevcut tüm oturumlar geçersiz kılınır. Örneğin, bir kullanıcı daha önce aynı alan adıyla doğrulanmamış bir hesap veya e-posta adresini ve şifreyi çıkardıktan sonra, kullanıcının şifresi hesabın sahibi olduğunu iddia eden ve bu doğrulanmamış hesabı oluşturan kişinin kimliğine bürünen: doğrulanmamış e-posta ve şifreyle tekrar oturum açmayı deneyin.

Ayrıca bağlantınızın olmasını önlemek için üretimde HTTPS URL'si kullandığınızdan emin olun engellenebilir.

Oturum açma işlemini web sayfasında tamamlama

E-posta bağlantısı derin bağlantısının biçimi bant dışı e-posta işlemleri için kullanılan biçim (e-posta doğrulaması, şifre sıfırlama ve e-posta değişikliği iptali). Firebase Auth, isSignInWithEmailLink API'yi sağlayarak bu kontrolü basitleştirir bir bağlantının e-posta bağlantısı ile oturum açma olup olmadığını kontrol etmek için.

Açılış sayfasında oturum açma işlemini tamamlamak için signInWithEmailLink numaralı telefonu Kullanıcının e-postası ve tek kullanımlık kodu içeren asıl e-posta bağlantısı.

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

Oturum açma işlemini mobil uygulamada tamamlama

Firebase Authentication, e-posta bağlantısını bir mobil cihaz Oturum açma işlemini mobil uygulama aracılığıyla tamamlamak için gelen uygulama bağlantısını algılayacak şekilde yapılandırılması gerekir; temel derin bağlantıyı tıklayın ve ardından web akışı aracılığıyla olduğu gibi oturum açma işlemini tamamlayın.

Android cihazlarda e-posta bağlantısıyla oturum açma işlemi hakkında daha fazla bilgi edinmek için Android kılavuzuna bakın.

Apple'da e-posta bağlantısıyla oturum açma işleminin nasıl yapılacağı hakkında daha fazla bilgi için Apple platformları kılavuzuna bakın.

Bu kimlik doğrulama yöntemini mevcut bir kullanıcıya da bağlayabilirsiniz. Örneğin: Kullanıcının kimliği daha önce başka bir sağlayıcıda (ör. telefon numarası) doğrulandığında bu oturum açma yöntemini mevcut hesabına ekleyebilir.

Fark, işlemin ikinci yarısında olacaktır:

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

Bu, bir e-posta bağlantısı kullanıcısının kimliğini yeniden doğrulamak için de kullanılabilir. hassas bir işlemdir.

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

Ancak akış, asıl kullanıcının çalıştığı farklı bir cihazda sona erebileceği için giriş yapılmadı, bu akış tamamlanmayabilir. Bu durumda, bir hata bağlantıyı aynı cihazda açmaya zorlamak için kullanıcıya gösterilir. Biraz durum bilgisi sağlamak için bağlantıda iletilebilir. ve kullanıcı kimliği.

Projenizi 15 Eylül 2023'te veya sonrasında oluşturduysanız e-posta numaralandırma koruması varsayılan olarak etkindir. Bu özellik, hesabınızın güvenliğini projenin kullanıcı hesaplarına uygulanır, ancak fetchSignInMethodsForEmail() devre dışı bırakılır yöntemini kullanmayı tercih ettik.

Projeniz için e-posta numaralandırma korumasını devre dışı bırakabilirsiniz ancak kullanmanızı önermeyiz.

E-posta numaralandırma koruması ile ilgili dokümanlara göz atın inceleyebilirsiniz.

Bağlantıyla oturum açma için varsayılan e-posta şablonu

Varsayılan e-posta şablonunun konu satırında ve e-posta gövdesinde bir zaman damgası bulunur. Böylece, sonraki e-postalar tek bir ileti dizisine daraltılmaz ve nasıl gizleneceğini gösterir.

Bu şablon aşağıdaki diller için geçerlidir:

Kod Dil
ar Arapça
zh_CN Çince (Basitleştirilmiş)
zh-TW Çince (Geleneksel)
n Felemenkçe
en İngilizce
en-GB İngilizce (İngiltere)
fr Fransızca
de Almanca
id Endonezce
it İtalyanca
Ja Japonca
Ko Korece
pl Lehçe
pt-BR Portekizce (Brezilya)
PT-PT Portekizce (Portekiz)
ru Rusça
es İspanyolca
es-419 İspanyolca (Latin Amerika)
. Tayca

Sonraki adımlar

Kullanıcı ilk kez oturum açtığında yeni bir kullanıcı hesabı oluşturulur ve bilgileri (kullanıcı adı ve şifre, telefon numarası) Numara veya kimlik doğrulama sağlayıcı bilgileri (oturum açan kullanıcı). Bu yeni Firebase projenizin bir parçası olarak saklanır ve aşağıdaki verileri tanımlamak için kullanılabilir: nasıl oturum açarsa açsın, projenizdeki tüm uygulamalarda kullanılır.

  • Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu Auth nesnesine bir gözlemci ayarlayın. Ardından, kullanıcının User nesnesindeki temel profil bilgilerini içerir. Görüntüleyin Kullanıcıları Yönetme

  • Firebase Realtime Database ve Cloud Storage içinde Güvenlik Kuralları'nı kullanarak şunları yapabilirsiniz: auth değişkeninden, oturum açmış kullanıcının benzersiz kullanıcı kimliğini alabilirsiniz. ve kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanılır.

Kullanıcıların çoklu kimlik doğrulama kullanarak uygulamanızda oturum açmasına izin verebilirsiniz yetkilendirme sağlayıcısının kimlik bilgilerini mevcut kullanıcı hesabıyla oturum açın.

Bir kullanıcının oturumunu kapatmak için numaralı telefonu arayın 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