Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

Firebase Authentication'ı 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 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 baltalayabilir.
  • 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, şifresini unutan bir kullanıcı, şifresini sıfırlamaya gerek kalmadan yine de oturum açabilir.

Sen başlamadan önce

Zaten yapmadıysanız, gelen başlatma pasajını kopyalayın Firebase konsolunda açıklandığı gibi projenize JavaScript projeye Ekle Firebase .

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. In Firebase konsoluna , Auth bölümünü açın.
  2. Yöntem sekmesinde İşaret Üzerine, E-posta / Şifre sağlayıcı sağlar. 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ını (şifresiz oturum açma) yöntemiyle oturum açma sağlar.
  4. Kaydet seçeneğini tıklayın.

Kimlik doğrulama akışını başlatır kullanıcı istemleri e-posta adresini temin etmek dair bir arayüz ile kullanıcıya sunmak ve daha sonra çağırmak için sendSignInLinkToEmail Firebase kullanıcının e-posta kimlik doğrulama bağlantı göndermek olduğunu isteğine.

  1. Construct ActionCodeSettings e-posta bağlantısını nasıl oluşturulduğu hakkında talimatlar Firebase sağlar nesneyi. Aşağıdaki alanları ayarlayın:

    • url : embed ve herhangi bir ek devlete derin bağlantı boyunca geçirilecek. 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 : Oturum açma bağlantısını Android veya Apple cihazda açıldığında uygulamaların kullanımı. Konusunda daha fazla bilgi Firebase Dinamik Linkler yapılandırmak mobil uygulamalar aracılığıyla açık-posta eylem bağlantıları.
    • handleCodeInApp : true değerine 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 : birden fazla özel dinamik bağlantı alanları bir proje, bağlantı belirtilen bir mobil uygulama üzerinden açılacak olduğunda hangisinin kullanılacağını belirtmek (örneğin, için tanımlandığında example.page.link ). Aksi takdirde, ilk alan otomatik olarak seçilir.

      Web sürümü 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'
      };

      Web sürümü 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'
      };

    ActionCodeSettings üzerinde daha fazla bilgi için bakınız E-posta İşlemleri Pas Devlet bölümünde.

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

    Web sürümü 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;
        // ...
      });

    Web sürümü 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;
        // ...
      });

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 işlemi 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ı biçimi aynıdır bant eposta eylemlerin out kullanılan biçime (e-posta doğrulama, şifre sıfırlama ve e-posta değişikliği iptal). Firebase Auth sağlayarak bu denetimi kolaylaştırır isSignInWithEmailLink bir bağlantı oturum açma olup olmadığı e-posta bağlantısını kontrol etmek API.

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

Web sürümü 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.
    });
}

Web sürümü 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.
    });
}

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ı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.

Daha bir Android uygulamasındaki e-posta bağlantı ile oturum açma nasıl ele alınacağı üzerinde bilgi edinmek için bkz Android rehber .

Daha üzerinde, bir Apple uygulamasında oturum açma e-posta bağlantı ile idare başvurmak için nasıl öğrenmek için Apple platformları rehber .

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 sürümü 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.
  });

Web sürümü 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.
  });

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 sürümü 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.
  });

Web sürümü 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.
  });

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.

Eğer şifre ve bağlantı tabanlı oturum açma e-posta ile, yöntemini farklılaştırmak için oturum açma şifre / link kullanıcı için kullanımı hem destekleyen fetchSignInMethodsForEmail . 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 sürümü 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
  });

Web sürümü 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
  });

E-posta / şifre ve e-posta / linke Yukarıda açıklandığı gibi aynı kabul edilir firebase.auth.EmailAuthProvider (aynı PROVIDER_ID oturum açma farklı yöntemlerle).

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ının kimlik bilgileriyle (yani kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcısı 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ığından bağımsız olarak projenizdeki her uygulamada bir kullanıcıyı tanımlamak için kullanılabilir.

  • Uygulamalarınızla olarak, kullanıcı yetkilendirme durumunu öğrenmek için tavsiye edilen yöntem üzerinde bir gözlemci ayarlamaktır Auth nesnesine. Daha sonra, kullanıcının temel profil bilgileri alabilirsiniz User nesnesi. Bkz Kullanıcıları Yönetme .

  • Senin Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama yılında Güvenlik Kuralları , alabilirsiniz, kullanıcının benzersiz bir kullanıcı kimliği imzalı auth değişkeni ve hangi verilerin kullanıcı teneke erişimi kontrol etmek için kullanabilirsiniz.

Kullanıcıların birden çok kimlik doğrulama sağlayıcıları kullanarak uygulamada oturum izin verebilir mevcut bir kullanıcı hesabına auth sağlayıcı kimlik bilgilerini birbirine bağlayan.

Bir kullanıcı Oturumu kapatmak için çağrı signOut :

Web sürümü 9

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

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

Web sürümü 8

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