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

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

E-postayla oturum açmanın birçok avantajı vardır:

  • Düşük sürtünmeli kayıt ve oturum açma.
  • İyi seçilmiş şifrelerin güvenliğini bile zayıflatabilecek uygulamalar arasında şifrelerin yeniden kullanılması riski daha düşüktür.
  • Bir kullanıcının kimliğini doğrulamanın yanı sıra kullanıcının bir e-posta adresinin yasal sahibi olduğunu da doğrulama yeteneği.
  • Kullanıcının oturum açmak için yalnızca erişilebilir bir e-posta hesabına ihtiyacı vardır. Telefon numarasına veya sosyal medya hesabına sahip olmanız gerekmez.
  • Kullanıcı, mobil cihazda zahmetli olabilecek bir şifre sağlamaya (veya hatırlamaya) gerek kalmadan güvenli bir şekilde oturum açabilir.
  • Daha önce bir e-posta tanımlayıcıyla (şifre veya birleşik) oturum açan mevcut bir kullanıcı, yalnızca e-postayla oturum açacak şekilde yükseltilebilir. Örneğin, şifresini unutan bir kullanıcı, şifresini sıfırlamaya gerek kalmadan yine de oturum açabilir.

Sen başlamadan önce

Henüz yapmadıysanız, Firebase'i JavaScript projenize ekleme bölümünde açıklandığı gibi başlatma snippet'ini Firebase konsolundan projenize kopyalayın.

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

  1. Firebase konsolunda Kimlik Doğrulama bölümünü açın.
  2. Oturum açma yöntemi sekmesinde E-posta/Parola sağlayıcısını etkinleştirin. E-posta bağlantısıyla oturum açmayı kullanmak için e-posta/şifreyle oturum açmanın etkinleştirilmesi gerektiğini unutmayın.
  3. Aynı bölümde E-posta bağlantısı (şifresiz oturum açma) oturum açma yöntemini etkinleştirin.
  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 isteyen bir arayüz sunun ve ardından Firebase'in kimlik doğrulama bağlantısını kullanıcının e-postasına göndermesini istemek için sendSignInLinkToEmail çağırın.

  1. Firebase'e e-posta bağlantısının nasıl oluşturulacağına ilişkin talimatlar sağlayan ActionCodeSettings nesnesini oluşturun. Aşağıdaki alanları ayarlayın:

    • url : Yerleştirilecek derin bağlantı ve iletilecek ek durumlar. Bağlantının alan adının, Oturum açma yöntemi sekmesine (Kimlik Doğrulama -> Oturum açma yöntemi) giderek bulabileceğiniz Firebase Konsolu yetkili alan adları listesine eklenmesi gerekir.
    • android ve ios : Android veya Apple cihazında oturum açma bağlantısı açıldığında kullanılacak uygulamalar. Firebase Dinamik Bağlantılarını mobil uygulamalar aracılığıyla e-posta işlem bağlantılarını açacak şekilde nasıl yapılandıracağınız hakkında daha fazla bilgi edinin.
    • handleCodeInApp : True olarak ayarlayın. Diğer bant dışı e-posta işlemlerinden (şifre sıfırlama ve e-posta doğrulamaları) farklı olarak, oturum açma işleminin her zaman uygulamada tamamlanması gerekir. Bunun nedeni, akışın sonunda kullanıcının oturum açmasının beklenmesi ve uygulamada Kimlik Doğrulama durumunun devam etmesidir.

    • dynamicLinkDomain : Bir proje için birden fazla özel dinamik bağlantı alanı tanımlandığında, bağlantı belirli bir mobil uygulama aracılığıyla açılacağı zaman hangisinin kullanılacağını belirtin (örneğin, example.page.link ). Aksi halde ilk alan adı otomatik olarak seçilir.

      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

    ActionCodeSettings hakkında daha fazla bilgi edinmek için E-posta Eylemlerinde Geçiş Durumu bölümüne bakın.

  2. Kullanıcıdan e-postasını isteyin.

  3. Kimlik doğrulama bağlantısını kullanıcının e-postasına gönderin ve kullanıcının e-postayla oturum açma işlemini aynı cihazda tamamlaması ihtimaline karşı kullanıcının e-postasını kaydedin.

    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

Güvenlik endişeleri

Oturum açma bağlantısının istenmeyen bir kullanıcı olarak veya istenmeyen bir cihazda oturum açmak için kullanılmasını önlemek amacıyla Firebase Auth, oturum açma akışını tamamlarken kullanıcının e-posta adresinin sağlanmasını gerektirir. Oturum açmanın başarılı olması için bu e-posta adresinin, oturum açma bağlantısının ilk gönderildiği adresle eşleşmesi gerekir.

Oturum açma e-postasını gönderdiğinizde, e-posta adreslerini yerel olarak depolayarak (örneğin, localStorage veya çerezleri kullanarak) oturum açma bağlantısını talep ettikleri cihazda oturum açma bağlantısını açan kullanıcılar için bu akışı kolaylaştırabilirsiniz. Daha sonra akışı tamamlamak için bu adresi kullanın. Kullanıcının e-postasını yönlendirme URL'si parametrelerine iletmeyin ve yeniden kullanmayın, çünkü bu, oturum enjeksiyonlarını etkinleştirebilir.

Oturum açma işleminin tamamlanmasının ardından, daha önce doğrulanmamış tüm oturum açma mekanizmaları kullanıcıdan kaldırılacak ve mevcut tüm oturumlar geçersiz kılınacaktır. Örneğin, birisi daha önce aynı e-posta ve şifreyle doğrulanmamış bir hesap oluşturduysa, bu doğrulanmamış hesabın sahibi olduğunu iddia eden ve bu doğrulanmamış hesabı oluşturan kişinin doğrulanmamış e-posta ve şifreyle tekrar oturum açmasını önlemek için kullanıcının şifresi kaldırılacaktır.

Ayrıca bağlantınızın potansiyel olarak aracı sunucular tarafından ele geçirilmesini önlemek için üretimde bir HTTPS URL'si kullandığınızdan emin olun.

Bir web sayfasında oturum açma işlemini tamamlama

E-posta bağlantısı derin bağlantısının formatı , bant dışı e-posta işlemleri (e-posta doğrulama, şifre sıfırlama ve e-posta değişikliği iptali) için kullanılan formatla aynıdır. Firebase Auth, bir bağlantının e-posta bağlantısıyla oturum açma olup olmadığını kontrol etmek için isSignInWithEmailLink API'sini sağlayarak bu kontrolü basitleştirir.

Açılış sayfasında oturum açma işlemini tamamlamak için kullanıcının e-posta adresiyle ve tek seferlik kodu içeren gerçek e-posta bağlantısıyla signInWithEmailLink arayın.

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

Mobil uygulamada oturum açma işlemini tamamlama

Firebase Authentication, e-posta bağlantısını bir mobil cihaza göndermek için Firebase Dinamik Bağlantılarını kullanır. Mobil uygulama aracılığıyla oturum açma işleminin tamamlanması için uygulamanın, gelen uygulama bağlantısını algılayacak, temeldeki derin bağlantıyı ayrıştıracak ve ardından web akışında yapıldığı gibi oturum açma işlemini tamamlayacak şekilde yapılandırılması gerekir.

Bir Android uygulamasında e-posta bağlantısıyla oturum açmanın nasıl yapılacağı hakkında daha fazla bilgi edinmek için Android kılavuzuna bakın.

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

Bu kimlik doğrulama yöntemini mevcut bir kullanıcıya da bağlayabilirsiniz. Örneğin, daha önce telefon numarası gibi başka bir sağlayıcıyla kimliği doğrulanan bir kullanıcı, bu oturum açma yöntemini mevcut hesabına ekleyebilir.

Fark operasyonun ikinci yarısında olacaktır:

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

Bu aynı zamanda hassas bir işlemi çalıştırmadan önce bir e-posta bağlantısı kullanıcısının kimliğini yeniden doğrulamak için de kullanılabilir.

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

Ancak akış, orijinal kullanıcının oturum açmadığı farklı bir cihazda sonuçlanabileceğinden bu akış tamamlanmayabilir. Bu durumda kullanıcıya, bağlantıyı aynı cihazda açmaya zorlamak için bir hata gösterilebilmektedir. İşlemin türü ve kullanıcı kimliği hakkında bilgi sağlamak için bağlantıya bazı durumlar aktarılabilir.

Projenizi 15 Eylül 2023 veya sonrasında oluşturduysanız e-posta numaralandırma koruması varsayılan olarak etkinleştirilir. Bu özellik, projenizin kullanıcı hesaplarının güvenliğini artırır ancak daha önce tanımlayıcı öncelikli akışları uygulamak için önerdiğimiz fetchSignInMethodsForEmail() yöntemini devre dışı bırakır.

Projeniz için e-posta numaralandırma korumasını devre dışı bırakabilseniz de bunu yapmamanızı öneririz.

Daha fazla ayrıntı için e-posta numaralandırma korumasına ilişkin belgelere bakın.

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

Varsayılan e-posta şablonu, konu ve e-posta gövdesinde bir zaman damgası içerir; böylece sonraki e-postalar, bağlantının gizlenmesiyle tek bir ileti dizisine daraltılmaz .

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

Kod Dil
ar Arapça
zh-CN Basitleştirilmiş Çince)
zh-TW Çin geleneği)
nl Flemenkçe
tr İngilizce
tr-GB İngilizce (İngiltere)
Fr Fransızca
de Almanca
İD Endonezya dili
BT İtalyan
evet Japonca
evet Koreli
lütfen Lehçe
pt-BR Portekiz Brezilyası)
pt-PT Portekizce (Portekiz)
ru Rusça
es İspanyol
es-419 İspanyolca (Latin Amerika)
o Tay dili

Sonraki adımlar

Bir kullanıcı ilk kez oturum açtıktan sonra, yeni bir kullanıcı hesabı oluşturulur ve oturum açan kullanıcının kimlik bilgileriyle (yani kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) ilişkilendirilir. Bu yeni hesap, Firebase projenizin bir parçası olarak depolanır ve kullanıcının nasıl oturum açtığına bakılmaksızın projenizdeki her uygulamada bir kullanıcıyı tanımlamak için kullanılabilir.

  • Uygulamalarınızda kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu, Auth Doğrulama nesnesine bir gözlemci ayarlamaktır. Daha sonra kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Bkz . Kullanıcıları Yönetme .

  • Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama Güvenliği Kurallarınızda , oturum açan kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve bunu, kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.

Kimlik doğrulama sağlayıcısı kimlik bilgilerini mevcut bir kullanıcı hesabına bağlayarak kullanıcıların birden fazla kimlik doğrulama sağlayıcısı kullanarak uygulamanızda oturum açmasına izin verebilirsiniz.

Bir kullanıcının oturumunu kapatmak için signOut arayın:

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
,

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

E-postayla oturum açmanın birçok avantajı vardır:

  • Düşük sürtünmeli kayıt ve oturum açma.
  • İyi seçilmiş şifrelerin güvenliğini bile zayıflatabilecek uygulamalar arasında şifrelerin yeniden kullanılması riski daha düşüktür.
  • Bir kullanıcının kimliğini doğrulamanın yanı sıra kullanıcının bir e-posta adresinin yasal sahibi olduğunu da doğrulama yeteneği.
  • Kullanıcının oturum açmak için yalnızca erişilebilir bir e-posta hesabına ihtiyacı vardır. Telefon numarasına veya sosyal medya hesabına sahip olmanız gerekmez.
  • Kullanıcı, mobil cihazda zahmetli olabilecek bir şifre sağlamaya (veya hatırlamaya) gerek kalmadan güvenli bir şekilde oturum açabilir.
  • Daha önce bir e-posta tanımlayıcıyla (şifre veya birleşik) oturum açan mevcut bir kullanıcı, yalnızca e-postayla oturum açacak şekilde yükseltilebilir. Örneğin, şifresini unutan bir kullanıcı, şifresini sıfırlamaya gerek kalmadan yine de oturum açabilir.

Sen başlamadan önce

Henüz yapmadıysanız, Firebase'i JavaScript projenize ekleme bölümünde açıklandığı gibi başlatma snippet'ini Firebase konsolundan projenize kopyalayın.

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

  1. Firebase konsolunda Kimlik Doğrulama bölümünü açın.
  2. Oturum açma yöntemi sekmesinde E-posta/Parola sağlayıcısını etkinleştirin. E-posta bağlantısıyla oturum açmayı kullanmak için e-posta/şifreyle oturum açmanın etkinleştirilmesi gerektiğini unutmayın.
  3. Aynı bölümde E-posta bağlantısı (şifresiz oturum açma) oturum açma yöntemini etkinleştirin.
  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 isteyen bir arayüz sunun ve ardından Firebase'in kimlik doğrulama bağlantısını kullanıcının e-postasına göndermesini istemek için sendSignInLinkToEmail çağırın.

  1. Firebase'e e-posta bağlantısının nasıl oluşturulacağına ilişkin talimatlar sağlayan ActionCodeSettings nesnesini oluşturun. Aşağıdaki alanları ayarlayın:

    • url : Yerleştirilecek derin bağlantı ve iletilecek ek durumlar. Bağlantının alan adının, Oturum açma yöntemi sekmesine (Kimlik Doğrulama -> Oturum açma yöntemi) giderek bulabileceğiniz Firebase Konsolu yetkili alan adları listesine eklenmesi gerekir.
    • android ve ios : Android veya Apple cihazında oturum açma bağlantısı açıldığında kullanılacak uygulamalar. Firebase Dinamik Bağlantılarını mobil uygulamalar aracılığıyla e-posta işlem bağlantılarını açacak şekilde nasıl yapılandıracağınız hakkında daha fazla bilgi edinin.
    • handleCodeInApp : True olarak ayarlayın. Diğer bant dışı e-posta işlemlerinden (şifre sıfırlama ve e-posta doğrulamaları) farklı olarak, oturum açma işleminin her zaman uygulamada tamamlanması gerekir. Bunun nedeni, akışın sonunda kullanıcının oturum açmasının beklenmesi ve uygulamada Kimlik Doğrulama durumunun devam etmesidir.

    • dynamicLinkDomain : Bir proje için birden fazla özel dinamik bağlantı alanı tanımlandığında, bağlantı belirli bir mobil uygulama aracılığıyla açılacağı zaman hangisinin kullanılacağını belirtin (örneğin, example.page.link ). Aksi halde ilk alan adı otomatik olarak seçilir.

      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

    ActionCodeSettings hakkında daha fazla bilgi edinmek için E-posta Eylemlerinde Geçiş Durumu bölümüne bakın.

  2. Kullanıcıdan e-postasını isteyin.

  3. Kimlik doğrulama bağlantısını kullanıcının e-postasına gönderin ve kullanıcının e-postayla oturum açma işlemini aynı cihazda tamamlaması ihtimaline karşı kullanıcının e-postasını kaydedin.

    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

Güvenlik endişeleri

Oturum açma bağlantısının istenmeyen bir kullanıcı olarak veya istenmeyen bir cihazda oturum açmak için kullanılmasını önlemek amacıyla Firebase Auth, oturum açma akışını tamamlarken kullanıcının e-posta adresinin sağlanmasını gerektirir. Oturum açmanın başarılı olması için bu e-posta adresinin, oturum açma bağlantısının ilk gönderildiği adresle eşleşmesi gerekir.

Oturum açma e-postasını gönderdiğinizde, e-posta adreslerini yerel olarak depolayarak (örneğin, localStorage veya çerezleri kullanarak) oturum açma bağlantısını talep ettikleri cihazda oturum açma bağlantısını açan kullanıcılar için bu akışı kolaylaştırabilirsiniz. Daha sonra akışı tamamlamak için bu adresi kullanın. Kullanıcının e-postasını yönlendirme URL'si parametrelerine iletmeyin ve yeniden kullanmayın, çünkü bu, oturum enjeksiyonlarını etkinleştirebilir.

Oturum açma işleminin tamamlanmasının ardından, daha önce doğrulanmamış tüm oturum açma mekanizmaları kullanıcıdan kaldırılacak ve mevcut tüm oturumlar geçersiz kılınacaktır. Örneğin, birisi daha önce aynı e-posta ve şifreyle doğrulanmamış bir hesap oluşturduysa, bu doğrulanmamış hesabın sahibi olduğunu iddia eden ve bu doğrulanmamış hesabı oluşturan kişinin doğrulanmamış e-posta ve şifreyle tekrar oturum açmasını önlemek için kullanıcının şifresi kaldırılacaktır.

Ayrıca bağlantınızın potansiyel olarak aracı sunucular tarafından ele geçirilmesini önlemek için üretimde bir HTTPS URL'si kullandığınızdan emin olun.

Bir web sayfasında oturum açma işlemini tamamlama

E-posta bağlantısı derin bağlantısının formatı , bant dışı e-posta işlemleri (e-posta doğrulama, şifre sıfırlama ve e-posta değişikliği iptali) için kullanılan formatla aynıdır. Firebase Auth, bir bağlantının e-posta bağlantısıyla oturum açma olup olmadığını kontrol etmek için isSignInWithEmailLink API'sini sağlayarak bu kontrolü basitleştirir.

Açılış sayfasında oturum açma işlemini tamamlamak için kullanıcının e-posta adresiyle ve tek seferlik kodu içeren gerçek e-posta bağlantısıyla signInWithEmailLink arayın.

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

Mobil uygulamada oturum açma işlemini tamamlama

Firebase Authentication, e-posta bağlantısını bir mobil cihaza göndermek için Firebase Dinamik Bağlantılarını kullanır. Mobil uygulama aracılığıyla oturum açma işleminin tamamlanması için uygulamanın, gelen uygulama bağlantısını algılayacak, temeldeki derin bağlantıyı ayrıştıracak ve ardından web akışında yapıldığı gibi oturum açma işlemini tamamlayacak şekilde yapılandırılması gerekir.

Bir Android uygulamasında e-posta bağlantısıyla oturum açmanın nasıl yapılacağı hakkında daha fazla bilgi edinmek için Android kılavuzuna bakın.

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

Bu kimlik doğrulama yöntemini mevcut bir kullanıcıya da bağlayabilirsiniz. Örneğin, daha önce telefon numarası gibi başka bir sağlayıcıyla kimliği doğrulanan bir kullanıcı, bu oturum açma yöntemini mevcut hesabına ekleyebilir.

Fark operasyonun ikinci yarısında olacaktır:

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

Bu aynı zamanda hassas bir işlemi çalıştırmadan önce bir e-posta bağlantısı kullanıcısının kimliğini yeniden doğrulamak için de kullanılabilir.

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

Ancak akış, orijinal kullanıcının oturum açmadığı farklı bir cihazda sonuçlanabileceğinden bu akış tamamlanmayabilir. Bu durumda kullanıcıya, bağlantıyı aynı cihazda açmaya zorlamak için bir hata gösterilebilmektedir. İşlemin türü ve kullanıcı kimliği hakkında bilgi sağlamak için bağlantıya bazı durumlar aktarılabilir.

Projenizi 15 Eylül 2023 veya sonrasında oluşturduysanız e-posta numaralandırma koruması varsayılan olarak etkinleştirilir. Bu özellik, projenizin kullanıcı hesaplarının güvenliğini artırır ancak daha önce tanımlayıcı öncelikli akışları uygulamak için önerdiğimiz fetchSignInMethodsForEmail() yöntemini devre dışı bırakır.

Projeniz için e-posta numaralandırma korumasını devre dışı bırakabilseniz de bunu yapmamanızı öneririz.

Daha fazla ayrıntı için e-posta numaralandırma korumasına ilişkin belgelere bakın.

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

Varsayılan e-posta şablonu, konu ve e-posta gövdesinde bir zaman damgası içerir; böylece sonraki e-postalar, bağlantının gizlenmesiyle tek bir ileti dizisine daraltılmaz .

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

Kod Dil
ar Arapça
zh-CN Basitleştirilmiş Çince)
zh-TW Çin geleneği)
nl Flemenkçe
tr İngilizce
tr-TR İngilizce (İngiltere)
Fr Fransızca
de Almanca
İD Endonezya dili
BT İtalyan
evet Japonca
evet Koreli
lütfen Lehçe
pt-BR Portekiz Brezilyası)
pt-PT Portekizce (Portekiz)
ru Rusça
es İspanyol
es-419 İspanyolca (Latin Amerika)
o Tay dili

Sonraki adımlar

Bir kullanıcı ilk kez oturum açtıktan sonra, yeni bir kullanıcı hesabı oluşturulur ve oturum açan kullanıcının kimlik bilgileriyle (yani kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) ilişkilendirilir. Bu yeni hesap, Firebase projenizin bir parçası olarak depolanır ve kullanıcının nasıl oturum açtığına bakılmaksızın projenizdeki her uygulamada bir kullanıcıyı tanımlamak için kullanılabilir.

  • Uygulamalarınızda kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu, Auth Doğrulama nesnesine bir gözlemci ayarlamaktır. Daha sonra kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Bkz . Kullanıcıları Yönetme .

  • Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama Güvenliği Kurallarınızda , oturum açan kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve bunu, kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.

Kimlik doğrulama sağlayıcısı kimlik bilgilerini mevcut bir kullanıcı hesabına bağlayarak kullanıcıların birden fazla kimlik doğrulama sağlayıcısı kullanarak uygulamanızda oturum açmasına izin verebilirsiniz.

Bir kullanıcının oturumunu kapatmak için signOut arayın:

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