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 Kimlik Doğrulama'yı 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ünme kaydı ve oturum açma.
  • Uygulamalar arasında daha düşük parola yeniden kullanım riski, bu da iyi seçilmiş parolaların bile güvenliğini tehlikeye atabilir.
  • Bir kullanıcının kimliğini doğrulama ve aynı zamanda kullanıcının bir e-posta adresinin yasal sahibi olduğunu 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ı veya sosyal medya hesabı sahibi olmanız gerekmez.
  • Bir kullanıcı, bir mobil cihazda hantal olabilen bir şifre sağlamaya (veya hatırlamaya) gerek kalmadan güvenli bir şekilde oturum açabilir.
  • Daha önce bir e-posta tanımlayıcısı (parola veya birleşik) ile oturum açmış mevcut bir kullanıcı, yalnızca e-posta ile oturum açmak üzere yükseltilebilir. Örneğin, parolasını unutan bir kullanıcı, parolasını sıfırlamaya gerek kalmadan yine de oturum açabilir.

Sen başlamadan önce

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

Kullanıcıları e-posta bağlantısıyla oturum açmak için, önce Firebase projeniz için E-posta sağlayıcısını ve E-posta bağlantısı oturum açma yöntemini etkinleştirmelisiniz:

  1. Firebase konsolunda , Yetkilendirme 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/şifre oturum açmanın etkinleştirilmesi gerektiğini unutmayın.
  3. Aynı bölümde, E-posta bağlantısı (parolasız 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 vermesini 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 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 : Gömülecek 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) gidilerek bulunabilen yetkili etki alanlarının Firebase Konsolu 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 aracılığıyla e-posta eylemi bağlantılarını açmak için Firebase Dinamik Bağlantılarını 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 Auth durumunun uygulamada devam etmesidir.

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

      Web version 9

      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 version 8

      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. Kullanıcının e-posta adresine kimlik doğrulama bağlantısını gönderin ve kullanıcının aynı cihazda e-posta oturum açma işlemini tamamlaması durumunda kullanıcının e-postasını kaydedin.

    Web version 9

    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 version 8

    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

Firebase Auth, istenmeyen bir kullanıcı olarak veya istenmeyen bir cihazda oturum açmak için bir oturum açma bağlantısının kullanılmasını önlemek için, oturum açma akışı tamamlanırken kullanıcının e-posta adresinin sağlanmasını gerektirir. Oturum açma işleminin 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 bağlantısını, bağlantıyı talep ettikleri cihazda açan kullanıcılar için, oturum açma e-postasını gönderdiğinizde e-posta adreslerini yerel olarak (örneğin, localStorage veya tanımlama bilgilerini kullanarak) depolayarak bu akışı kolaylaştırabilirsiniz. Ardından, akışı tamamlamak için bu adresi kullanın. Kullanıcının e-postasını yönlendirme URL parametrelerinde iletmeyin ve oturum enjeksiyonlarını etkinleştirebileceğinden yeniden kullanın.

Oturum açma tamamlandıktan sonra, önceki doğrulanmamış oturum açma mekanizmaları kullanıcıdan kaldırılacak ve mevcut oturumlar geçersiz kılınacaktır. Örneğin, birisi daha önce aynı e-posta ve şifre ile doğrulanmamış bir hesap oluşturduysa, sahipliği iddia eden ve bu doğrulanmamış hesabı oluşturan taklitçinin doğrulanmamış e-posta ve şifre ile tekrar oturum açmasını önlemek için kullanıcının şifresi kaldırılacaktır.

Ayrıca, bağlantınızın aracı sunucular tarafından potansiyel olarak 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.

Giriş sayfasında oturum açmayı tamamlamak için, kullanıcının e-postası ve tek seferlik kodu içeren gerçek e-posta bağlantısıyla signInWithEmailLink arayın.

Web version 9

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 version 8

// 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çmanın 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ışı yoluyla yapıldığı gibi oturum açmayı tamamlayacak şekilde yapılandırılması gerekir.

Bir Android uygulamasında e-posta bağlantısıyla oturum açma 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 ele alınacağı 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ğrulanmış bir kullanıcı, bu oturum açma yöntemini mevcut hesabına ekleyebilir.

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

Web version 9

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 version 8

// 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ı yeniden doğrulamak için de kullanılabilir.

Web version 9

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 version 8

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

Hem parola hem de e-posta ile bağlantı tabanlı oturum açmayı destekliyorsanız, parola/bağlantı kullanıcısı için oturum açma yöntemini ayırt etmek için fetchSignInMethodsForEmail kullanın. Bu, kullanıcıdan önce e-postasını 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:

Web version 9

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

Web version 8

// 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 oturum açtığı kullanıcı adı ve parolası, telefon numarası veya yetkilendirme sağlayıcı bilgileri gibi kimlik bilgileriyle ilişkilendirilir. 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 bir kullanıcıyı tanımlamak için kullanılabilir.

  • Uygulamalarınızda, kullanıcınızın auth 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 konusuna bakın.

  • Firebase Gerçek Zamanlı Veritabanınız 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ısı kimlik bilgilerini mevcut bir kullanıcı hesabına bağlayarak, kullanıcıların birden çok 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 version 9

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 version 8

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