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

Kullanıcılara oturum açmak için tıklayabilecekleri bir bağlantı içeren e-posta göndererek oturum açmalarını sağlamak üzere Firebase Authentication'ı kullanabilirsiniz. Bu işlem sırasında kullanıcının e-posta adresi de doğrulanır.

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

• Kolay kaydolma ve oturum açma
• Uygulamalarda şifrelerin yeniden kullanılması riskini azaltır. Bu durum, iyi seçilmiş şifrelerin bile güvenliğini zayıflatabilir.
• Kullanıcının kimliğini doğrularken aynı zamanda kullanıcının bir e-posta adresinin yasal sahibi olduğunu doğrulama özelliği.
• Kullanıcıların oturum açmak için erişilebilir bir e-posta hesabı olması yeterlidir. Telefon numarası veya sosyal medya hesabı sahipliği gerekmez.
• Kullanıcılar, mobil cihazda zahmetli olabilecek bir şifre girmelerine (veya hatırlamalarına) gerek kalmadan güvenli bir şekilde oturum açabilir.
• Daha önce bir e-posta tanımlayıcısı (şifre veya federasyon) ile oturum açmış mevcut bir kullanıcı, yalnızca e-posta ile oturum açacak şekilde yükseltilebilir. Örneğin, şifresini unutan bir kullanıcı, şifresini sıfırlamasına gerek kalmadan oturum açabilir.

Başlamadan önce

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

Firebase projenizde e-posta bağlantısı ile 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 öncelikle Firebase projenizde e-posta sağlayıcısını ve e-posta bağlantısıyla oturum açma yöntemini etkinleştirmeniz gerekir:

1. Firebase konsolunda Güvenlik > Kimlik doğrulama'ya gidin.

2. Oturum açma yöntemi sekmesinde E-posta/Şifre oturum açma yöntemini etkinleştirin. E-posta bağlantısı ile oturum açma özelliğini 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 sağlayıcısını 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 gösterin ve ardından Firebase'in kimlik doğrulama bağlantısını kullanıcının e-posta adresine göndermesini istemek için sendSignInLinkToEmail işlevini çağırı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. Henüz yapmadıysanız alanınızı yetkili alanlar listesine ekleyin:

     1. Firebase konsolunda Güvenlik > Kimlik doğrulama > Ayarlar sekmesine gidin.

     2. Yetkili alanlar bölümünde Alan ekle'yi tıklayın ve alanınızı ekleyin.

   • android ve ios: Firebase Authentication'ın, Android veya Apple cihazda açılan yalnızca web'e yönelik ya da mobil bağlantı oluşturup oluşturmaması gerektiğini belirlemesine yardımcı olur.
   • handleCodeInApp: Doğru olarak ayarlayın. Diğer bant dışı e-posta işlemlerinin (şifre sıfırlama ve e-posta doğrulamaları) aksine, oturum açma işlemi her zaman uygulamada tamamlanmalıdır. Bunun nedeni, akışın sonunda kullanıcının oturum açmış olması ve kimlik doğrulama durumunun uygulamada kalıcı hale getirilmesidir.
   • linkDomain: Bir proje için özel Hosting bağlantı alanları tanımlandığında, bağlantının belirli bir mobil uygulama tarafından açılacağı durumlarda hangi alanın kullanılacağını belirtin. Aksi takdirde, varsayılan alan otomatik olarak seçilir (örneğin, PROJECT_ID.firebaseapp.com).

   • dynamicLinkDomain: Desteği sonlandırıldı. Bu parametreyi belirtmeyin.

     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'
       },
       // The domain must be configured in Firebase Hosting and owned by the project.
       linkDomain: 'custom-domain.com'
     };
     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 Durumu Geçirme 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 ile oturum açma işlemini aynı cihazda tamamlaması ihtimaline karşı e-posta adresini kaydedin.

   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

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

Güvenlikle ilgili endişeler

Giriş 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, giriş akışı tamamlanırken kullanıcının e-posta adresinin sağlanmasını zorunlu kılar. Oturum açma işleminin 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 bağlantısını, bağlantıyı istedikleri cihazda açan kullanıcılar için bu akışı kolaylaştırabilirsiniz. Örneğin, oturum açma e-postasını gönderirken e-posta adreslerini yerel olarak (localStorage veya çerezleri kullanarak) depolayabilirsiniz. Ardından, akışı tamamlamak için bu adresi kullanın. Yönlendirme URL'si parametrelerinde kullanıcının e-posta adresini iletmeyin ve oturum ekleme saldırılarını önlemek için bu adresi yeniden kullanmayın.

Oturum açma işlemi tamamlandıktan sonra, daha önce doğrulanmamış 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şturulmuşsa kimlik hırsızlığı yaparak sahipliği iddia eden ve doğrulanmamış hesabı oluşturan kişinin doğrulanmamış e-posta adresi 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 aracı sunucular tarafından olası bir şekilde engellenmesini önlemek için üretimde bir HTTPS URL'si kullandığınızdan emin olun.

Web sayfasında oturum açma işlemini 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ğrulama, şifre sıfırlama ve e-posta değişikliğini iptal etme) aynıdır. Firebase Auth, bir bağlantının e-posta ile oturum açma bağlantısı 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 signInWithEmailLink ile iletişime geçerek kullanıcının e-posta adresini ve tek seferlik kodu içeren gerçek e-posta bağlantısını paylaşı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

Mobil uygulamada oturum açma işlemini tamamlama

Firebase Authentication, e-posta bağlantısını bir mobil cihaza göndermek için Firebase Hosting kullanır. Mobil uygulama üzerinden oturum açma işleminin tamamlanması 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ışında olduğu gibi tamamlayacak şekilde yapılandırılması gerekir.

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

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

E-posta bağlantısıyla bağlama/yeniden kimlik doğrulama

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ğrulanmış bir kullanıcı, bu oturum açma yöntemini mevcut hesabına ekleyebilir.

Fark, işlemin ikinci yarısında olur:

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 özellik, 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ış, orijinal kullanıcının oturum açmadığı farklı bir cihazda sona erebileceğinden bu akış tamamlanmayabilir. Bu durumda, kullanıcıya bağlantıyı aynı cihazda açmasını zorunlu kılan bir hata gösterilebilir. İşlem türü ve kullanıcı kimliği hakkında bilgi sağlamak için bağlantıya bazı durumlar eklenebilir.

Kullanımdan kaldırıldı: E-posta bağlantısı ile e-posta-şifre arasındaki fark

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 kimlik öncelikli akışları uygulamak için daha önce ö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ı ile oturum açma için varsayılan e-posta şablonu

Varsayılan e-posta şablonu, konu ve e-posta mesajında zaman damgası içerir. Böylece sonraki e-postalar tek bir ileti dizisinde toplanmaz ve bağlantı gizlenmez.

Bu şablon aşağıdaki dillerde 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ı bilgileri) bağlanır. 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 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 nesnesinde bir gözlemci ayarlamaktır. Ardından, User nesnesinden kullanıcının temel profil bilgilerini alabilirsiniz. Kullanıcıları yönetme başlıklı makaleyi inceleyin.

• Firebase Realtime Database ve Cloud Storage Güvenlik Kurallarınızda, oturum açmış 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 uygulamanızda birden fazla kimlik doğrulama sağlayıcı kullanarak 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