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

Bir kullanıcıya, oturum açmak için tıklayabilecekleri 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-posta ile oturum açmanın sayısız avantajı vardır:

• Düşük sürtünmeli kayıt ve oturum açma.
• Uygulamalar arasında, iyi seçilmiş parolaların bile güvenliğini tehlikeye atabilecek daha düşük parola yeniden kullanım riski.
• Kullanıcının bir e-posta adresinin meşru sahibi olduğunu doğrularken aynı zamanda bir kullanıcının kimliğini doğrulama yeteneği.
• Bir kullanıcının oturum açmak için yalnızca erişilebilir bir e-posta hesabına ihtiyacı vardır. Bir telefon numarasına veya sosyal medya hesabına sahip olmanız gerekmez.
• Bir kullanıcı, bir mobil cihazda külfetli olabilecek bir parola sağlamaya (veya hatırlamaya) gerek kalmadan güvenli bir şekilde oturum açabilir.
• Daha önce bir e-posta tanımlayıcısı (şifre veya birleşik) ile oturum açmış olan 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ırlamak zorunda kalmadan oturum açabilir.

Sen başlamadan önce

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

Firebase projeniz için Email Link oturum açmayı etkinleştirin

Kullanıcıların e-posta bağlantısıyla oturum açması için öncelikle Firebase projeniz için E-posta sağlayıcı 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ı oturum açmayı kullanmak için e-posta/parola 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.

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, kullanıcıdan e-posta adresini vermesini isteyen bir arayüz sunun 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 arayı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 herhangi bir ek durum. Bağlantının etki alanı, Oturum açma yöntemi sekmesine (Kimlik Doğrulama -> Oturum açma yöntemi) giderek bulunabilen Firebase Konsolu yetkili etki alanları listesine eklenmelidir.
   • android ve ios : Bir Android veya Apple cihazında oturum açma bağlantısı açıldığında kullanılacak uygulamalar. Mobil uygulamalar yoluyla e-posta işlem bağlantılarını açmak için Firebase Dynamic Links'in nasıl yapılandırılacağı 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 kimlik doğrulama durumunun uygulama içinde kalmasıdır.

   • 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 takdirde, ilk etki alanı 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-posta oturumunu aynı cihazda tamamlaması durumunda 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

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

Güvenlik endişeleri

İstenmeyen bir kullanıcı olarak veya istenmeyen bir cihazda oturum açmak için oturum açma bağlantısının kullanılmasını önlemek için 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 orijinal olarak gönderildiği adresle eşleşmesi gerekir.

Oturum açma e-postasını gönderdiğinizde, örneğin localStorage veya çerezleri kullanarak, e-posta adreslerini yerel olarak depolayarak, bağlantıyı istedikleri cihazda oturum açma bağlantısını açan kullanıcılar için bu akışı kolaylaştırabilirsiniz. Ardından, akışı tamamlamak için bu adresi kullanın. Kullanıcının e-postasını yeniden yönlendirme URL'si parametrelerinde iletmeyin ve oturum enjeksiyonlarını etkinleştirebileceği için yeniden kullanmayın.

Oturum açma işlemi tamamlandıktan sonra, 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 parolayla doğrulanmamış bir hesap oluşturduysa, sahiplik iddiasında bulunan ve bu doğrulanmamış hesabı oluşturan taklitçinin doğrulanmamış e-posta ve parolayla tekrar oturum açmasını önlemek için kullanıcının parolası 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çmayı tamamlama

E-posta bağlantısı derin bağlantısının biçimi , bant dışı e-posta eylemleri (e-posta doğrulama, parola sıfırlama ve e-posta değişikliği iptali) için kullanılan biçimle 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 adresi ve tek seferlik kodu içeren gerçek e-posta bağlantısıyla signInWithEmailLink 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 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

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

Bir mobil uygulamada oturum açmayı tamamlama

Firebase Authentication, e-posta bağlantısını bir mobil cihaza göndermek için Firebase Dynamic Links'i kullanır. Mobil uygulama aracılığıyla oturum açma işleminin tamamlanması için, uygulamanın gelen uygulama bağlantısını algılaması, temeldeki derin bağlantıyı ayrıştırması ve ardından oturum açmayı web akışı aracılığıyla yapıldığı gibi tamamlaması 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çmanın nasıl yapılacağı hakkında daha fazla bilgi edinmek için Apple platformları kılavuzuna bakın.

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

Bu kimlik doğrulama yöntemini mevcut bir kullanıcıya da bağlayabilirsiniz. Örneğin, telefon numarası gibi daha önce 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, operasyonun 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ş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.

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çmaya zorlamak için bir hata gösterilebilir. İşlem türü ve kullanıcı kullanıcı kimliği hakkında bilgi sağlamak için bağlantıda bazı durumlar iletilebilir.

E-posta/şifreyi e-posta bağlantısından ayırt etme

E-posta ile hem parola hem de bağlantı tabanlı oturum açmayı destekliyorsanız, bir parola/bağlantı kullanıcısı için oturum açma yöntemini farklılaştırmak için fetchSignInMethodsForEmail kullanın. Bu, kullanıcıdan önce e-posta adresini sağlamasının istendiği ve ardından oturum açma yönteminin sunulduğu tanımlayıcı öncelikli akışlar için kullanışlıdır:

import { getAuth, fetchSignInMethodsForEmail, EmailAuthProvider} from "firebase/auth";

// After asking the user for their email.
const email = window.prompt('Please provide your email');

const auth = getAuth();
fetchSignInMethodsForEmail(auth, email)
  .then((signInMethods) => {
    // This returns the same array as fetchProvidersForEmail but for email
    // provider identified by 'password' string, signInMethods would contain 2
    // different strings:
    // 'emailLink' if the user previously signed in with an email/link
    // 'password' if the user has a password.
    // A user could have both.
    if (signInMethods.indexOf(EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/password.
    }
    if (signInMethods.indexOf(EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/link.
    }
  })
  .catch((error) => {
    // Some error occurred, you can inspect the code: error.code
  });
email_link_diferentiate.js

// After asking the user for their email.
var email = window.prompt('Please provide your email');
firebase.auth().fetchSignInMethodsForEmail(email)
  .then((signInMethods) => {
    // This returns the same array as fetchProvidersForEmail but for email
    // provider identified by 'password' string, signInMethods would contain 2
    // different strings:
    // 'emailLink' if the user previously signed in with an email/link
    // 'password' if the user has a password.
    // A user could have both.
    if (signInMethods.indexOf(
            firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/password.
    }
    if (signInMethods.indexOf(
            firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/link.
    }
  })
  .catch((error) => {
    // Some error occurred, you can inspect the code: error.code
  });
email-link-auth.js

Yukarıda açıklandığı gibi, e-posta/şifre ve e-posta/bağlantı, farklı oturum açma yöntemleriyle aynı firebase.auth.EmailAuthProvider (aynı PROVIDER_ID ) olarak kabul edilir.

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 (yani, kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) bağlanır. Bu yeni hesap, Firebase projenizin bir parçası olarak saklanı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. Ardından, kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Bkz . Kullanıcıları Yönetin .

• Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama Güvenlik Kurallarınızda , oturum açmış kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve bunu, bir 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ısı kullanarak uygulamanızda oturum açmasına izin verebilirsiniz.

Bir kullanıcının oturumunu kapatmak için signOut öğesini 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