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

Firebase Authentication'ı kullanarak bir kullanıcıya, oturum açmak için tıklayabileceği bağlantı içeren bir e-posta göndererek oturum açabilirsiniz. Bu işlemde, 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.
• Şifrelerin uygulamalarda yeniden kullanılma riski daha düşüktür. Bu durum, iyi seçilmiş şifrelerin bile güvenliğini tehlikeye atabilir.
• Bir kullanıcının kimliğini doğrularken aynı zamanda kullanıcının bir e-posta adresinin meşru sahibi olduğunu doğrulayabilme.
• Kullanıcının oturum açmak için yalnızca erişilebilir bir e-posta hesabına ihtiyacı vardır. Telefon numarasının veya sosyal medya hesabının sahibi olmanız gerekmez.
• Kullanıcılar, şifre sağlamalarına (veya hatırlamalarına) gerek kalmadan güvenli bir şekilde oturum açabilir. Bu da mobil cihazların çalışmasını zorlaştırabilir.
• Daha önce e-posta tanımlayıcısı (şifre veya birleşik) ile oturum açmış olan mevcut bir kullanıcı, yalnızca e-posta adresiyle oturum açacak şekilde yükseltilebilir. Örneğin, şifresini unutan bir kullanıcı, şifresini sıfırlamaya gerek kalmadan oturum açmaya devam edebilir.

Başlamadan önce

Henüz yapmadıysanız Firebase'i JavaScript projenize ekleme bölümünde açıklandığı gibi, ilk kullanıma hazırlama snippet'ini Firebase konsolundan projenize kopyalayın.

Firebase projeniz için E-posta Bağlantısıyla oturum açma özelliğini etkinleştirme

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

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. E-posta bağlantısıyla oturum açmayı kullanmak için e-posta/şifre ile oturum açma özelliğinin 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.

Kullanıcının e-posta adresine bir kimlik doğrulama bağlantısı gönderin

Kimlik doğrulama akışını başlatmak için kullanıcıya, e-posta adresini girmesini isteyen bir arayüz sunun. Ardından, Firebase'in kimlik doğrulama bağlantısını kullanıcının e-postasına göndermesini istemek için sendSignInLinkToEmail numaralı telefonu arayın.

1. Firebase'e e-posta bağlantısının nasıl oluşturulacağıyla ilgili talimatları sağlayan ActionCodeSettings nesnesini oluşturun. 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 alanlar listesine eklenmelidir. Bu listeye, Oturum açma yöntemi sekmesine (Kimlik Doğrulama -> Ayarlar) gidilerek ulaşabilirsiniz.
   • android ve ios: Android veya Apple cihazda oturum açma bağlantısı açıldığında kullanılacak uygulamalar. Mobil uygulamalar aracılığıyla e-posta işlem bağlantılarını açmak için Firebase Dynamic Links'i yapılandırma hakkında daha fazla bilgi edinin.
   • handleCodeInApp: Doğru değerine ayarlanır. Oturum açma işleminin, diğer bant dışı e-posta işlemlerinin (şifre sıfırlama ve e-posta doğrulamaları) aksine her zaman uygulamada tamamlanması gerekir. Bunun nedeni, akışın sonunda kullanıcının oturum açmasının beklendiği ve Yetkilendirme durumunun uygulama içinde devam ediyor olmasıdır.

   • dynamicLinkDomain: Bir proje için birden fazla özel dinamik bağlantı alan adı tanımlandığında, bağlantı belirtilen bir mobil uygulama üzerinden açılacağında hangisinin kullanılacağını belirtin (ör. example.page.link). Aksi takdirde ilk alan otomatik olarak seçilir.

     Web modüler 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 ad alanı API'si

     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 Geçiş Durumu bölümüne bakın.

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-posta oturum açma işlemini aynı cihazda tamamlaması ihtimaline karşı kullanıcının e-postasını kaydedin.

   Web modüler 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 ad alanı API'si

   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

E-posta bağlantısıyla oturum açma işlemini tamamlayın

Güvenlikle ilgili sorunlar

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ışı tamamlanırken kullanıcının e-posta adresinin sağlanmasını zorunlu kılar. Oturum açmanın başarılı olması için bu e-posta adresi, oturum açma bağlantısının ilk gönderildiği adresle eşleşmelidir.

Bağlantıyı talep ettikleri cihazda oturum açma bağlantısını açan kullanıcılar için bu akışı, oturum açma e-postası gönderdiğinizde e-posta adreslerini yerel olarak saklayarak (ör. localStorage veya çerezler kullanarak) kolaylaştırabilirsiniz. Ardından, akışı tamamlamak için bu adresi kullanın. Kullanıcının e-postasını, yönlendirme URL'si parametrelerinde iletmeyin ve yeniden kullanmayın. Aksi takdirde, oturum yerleştirme etkinleştirilebilir.

Oturum açma işlemi tamamlandıktan sonra, önceki doğrulanmamış tüm oturum açma mekanizmaları kullanıcıdan kaldırılır ve mevcut oturumlar geçersiz kılınır. Örneğin, daha önce aynı e-posta adresi ve şifreyle doğrulanmamış bir hesap oluşturulduysa hesabın sahibi olduğunu iddia eden ve bu doğrulanmamış hesabı oluşturan kimliğe bürünen kullanıcının doğrulanmamış e-posta ve şifreyle tekrar oturum açmasını önlemek için kullanıcının şifresi kaldırılır.

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

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çimle (e-posta doğrulaması, şifre sıfırlama ve e-posta değişikliği iptali) 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-postası ve tek kullanımlık kodun yer aldığı gerçek e-posta bağlantısı ile signInWithEmailLink numaralı telefonu arayın.

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

// 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 cihaza göndermek için Firebase Dynamic Links'i kullanır. Oturum açma işlemini mobil uygulama üzerinden tamamlamak için uygulamanın, gelen uygulama bağlantısını algılayacak, temel derin bağlantıyı ayrıştıracak ve ardından oturum açma işlemini web akışı üzerinden yapıldığı gibi tamamlayacak şekilde yapılandırılması gerekir.

Android uygulamalarında e-posta bağlantısıyla oturum açma işleminin nasıl yapılacağı hakkında daha fazla bilgi edinmek için Android rehberine bakın.

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.

E-posta bağlantısıyla bağlantı oluşturma/yeniden kimlik doğrulama

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

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

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

// 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, hassas bir işlem çalıştırmadan önce e-posta bağlantısı kullanıcısının kimliğini yeniden doğrulamak için de kullanılabilir.

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

// 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 giriş yapmadığı farklı bir cihazda tamamlanabileceği için bu akış tamamlanmayabilir. Bu durumda, kullanıcıyı bağlantıyı aynı cihazda açmaya zorlamak için bir hata gösterilebilir. İşlemin türü ve kullanıcı kimliği hakkında bilgi sağlamak için bağlantıda bazı durumlar iletilebilir.

Kullanımdan kaldırıldı: E-posta şifresi ile e-posta bağlantısı ayrılıyor

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

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

Daha fazla bilgi için e-posta numaralandırma koruması ile ilgili dokümanlara bakın.

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

Varsayılan e-posta şablonunun konu satırına ve e-posta gövdesine bir zaman damgası eklenir. Böylece sonraki e-postalar, bağlantı gizlenecek şekilde tek bir ileti dizisine daraltılmaz.

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

Sonraki adımlar

Bir kullanıcı ilk kez oturum açtıktan sonra yeni bir kullanıcı hesabı oluşturulur ve kullanıcının oturum açtığı kimlik bilgilerine (kullanıcı adı ve şifre, telefon numarası veya kimlik doğrulama sağlayıcı bilgisi) bağlanır. Bu yeni hesap Firebase projenizin bir parçası olarak depolanır ve kullanıcının nasıl oturum açtığından bağımsız olarak projenizdeki her uygulamada kullanıcıyı tanımlamak için kullanılabilir.

• Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmek için önerilen yol, Auth nesnesinde bir gözlemci ayarlamaktır. Daha sonra, kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Kullanıcıları Yönetme sayfasına göz atın.

• Firebase Realtime Database ve Cloud Storage Güvenlik Kurallarınızda, oturum açan kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.

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

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

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

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

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