Check out what’s new from Firebase at Google I/O 2022. Learn more

Microsoft'u JavaScript ile Kullanarak Kimlik Doğrulama

Uçtan uca oturum açma akışını gerçekleştirmek için Firebase SDK'yı kullanarak genel OAuth Login'i uygulamanıza entegre ederek, Microsoft Azure Active Directory gibi OAuth sağlayıcılarını kullanarak kullanıcılarınızın Firebase ile kimlik doğrulamasını sağlayabilirsiniz.

Sen başlamadan önce

Microsoft hesaplarını (Azure Active Directory ve kişisel Microsoft hesapları) kullanan kullanıcılarda oturum açmak için önce Microsoft'u Firebase projeniz için oturum açma sağlayıcısı olarak etkinleştirmelisiniz:

  1. JavaScript projenize Firebase ekleyin .
  2. Firebase konsolunda , Yetkilendirme bölümünü açın.
  3. Oturum açma yöntemi sekmesinde, Microsoft sağlayıcısını etkinleştirin.
  4. Bu sağlayıcının geliştirici konsolundan İstemci Kimliğini ve İstemci Sırrını sağlayıcı yapılandırmasına ekleyin:
    1. Bir Microsoft OAuth istemcisini kaydettirmek için Hızlı Başlangıç: Azure Active Directory v2.0 uç noktası ile bir uygulama kaydetme bölümündeki talimatları izleyin. Bu uç noktanın, Microsoft kişisel hesaplarının yanı sıra Azure Active Directory hesaplarını kullanarak oturum açmayı desteklediğini unutmayın. Azure Active Directory v2.0 hakkında daha fazla bilgi edinin .
    2. Bu sağlayıcılara uygulamaları kaydederken, projeniz için *.firebaseapp.com alan adını uygulamanız için yönlendirme alanı olarak kaydettirdiğinizden emin olun.
  5. Kaydet'i tıklayın .

Firebase SDK ile oturum açma akışını yönetin

Bir web uygulaması oluşturuyorsanız, Microsoft hesaplarını kullanarak kullanıcılarınızın kimliğini Firebase ile doğrulamanın en kolay yolu, tüm oturum açma akışını Firebase JavaScript SDK ile halletmek.

Firebase JavaScript SDK ile oturum açma akışını yönetmek için şu adımları izleyin:

  1. Microsoft.com sağlayıcı kimliğini kullanarak bir OAuthProvider örneği oluşturun.

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');

    Web version 8

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  2. İsteğe bağlı : OAuth isteğiyle birlikte göndermek istediğiniz ek özel OAuth parametrelerini belirtin.

    Web version 9

    provider.setCustomParameters({
      // Force re-consent.
      prompt: 'consent',
      // Target specific email with login hint.
      login_hint: 'user@firstadd.onmicrosoft.com'
    });

    Web version 8

    provider.setCustomParameters({
      // Force re-consent.
      prompt: 'consent',
      // Target specific email with login hint.
      login_hint: 'user@firstadd.onmicrosoft.com'
    });

    Microsoft'un desteklediği parametreler için Microsoft OAuth belgelerine bakın. Firebase için gerekli parametreleri setCustomParameters() ile iletemeyeceğinizi unutmayın. Bu parametreler client_id , response_type , redirect_uri , state , scope ve response_mode'dur .

    Yalnızca belirli bir Azure AD kiracısındaki kullanıcıların uygulamada oturum açmasına izin vermek için Azure AD kiracısının kolay etki alanı adı veya kiracının GUID tanımlayıcısı kullanılabilir. Bu, özel parametreler nesnesinde "kiracı" alanı belirtilerek yapılabilir.

    Web version 9

    provider.setCustomParameters({
      // Optional "tenant" parameter in case you are using an Azure AD tenant.
      // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
      // or "common" for tenant-independent tokens.
      // The default value is "common".
      tenant: 'TENANT_ID'
    });

    Web version 8

    provider.setCustomParameters({
      // Optional "tenant" parameter in case you are using an Azure AD tenant.
      // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
      // or "common" for tenant-independent tokens.
      // The default value is "common".
      tenant: 'TENANT_ID'
    });
  3. İsteğe bağlı : Kimlik doğrulama sağlayıcısından istemek istediğiniz temel profilin ötesinde ek OAuth 2.0 kapsamları belirtin.

    provider.addScope('mail.read');
    provider.addScope('calendars.read');
    

    Daha fazla bilgi edinmek için Microsoft izinlerine ve izin belgelerine bakın.

  4. OAuth sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulaması yapın. Bir açılır pencere açarak veya oturum açma sayfasına yeniden yönlendirerek kullanıcılarınızdan Microsoft Hesaplarıyla oturum açmalarını isteyebilirsiniz. Yönlendirme yöntemi mobil cihazlarda tercih edilmektedir.

    • Bir açılır pencereyle oturum açmak için signInWithPopup arayın:

    Web version 9

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    signInWithPopup(auth, provider)
      .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.
    
        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });

    Web version 8

    firebase.auth().signInWithPopup(provider)
      .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        // ...
    
        /** @type {firebase.auth.OAuthCredential} */
        var credential = result.credential;
    
        // OAuth access and id tokens can also be retrieved:
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    • Oturum açma sayfasına yeniden yönlendirerek oturum açmak için signInWithRedirect arayın:

    Web version 9

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);

    Web version 8

    firebase.auth().signInWithRedirect(provider);

    Kullanıcı oturum açma işlemini tamamlayıp sayfaya döndükten sonra, getRedirectResult çağırarak oturum açma sonucunu alabilirsiniz.

    Web version 9

    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    getRedirectResult(auth)
      .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.
    
        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });

    Web version 8

    firebase.auth().getRedirectResult()
      .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        // ...
    
        /** @type {firebase.auth.OAuthCredential} */
        var credential = result.credential;
    
        // OAuth access and id tokens can also be retrieved:
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });

    Başarılı bir şekilde tamamlandığında, sağlayıcıyla ilişkili OAuth erişim belirteci, döndürülen firebase.auth.UserCredential nesnesinden alınabilir.

    OAuth erişim belirtecini kullanarak Microsoft Graph API'sini çağırabilirsiniz.

    Örneğin temel profil bilgilerini almak için aşağıdaki REST API çağrılabilir:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me
    

    Firebase Auth tarafından desteklenen diğer sağlayıcıların aksine, Microsoft bir fotoğraf URL'si sağlamaz ve bunun yerine bir profil fotoğrafı için ikili verilerin Microsoft Graph API aracılığıyla istenmesi gerekir.

    OAuth erişim belirtecine ek olarak, kullanıcının OAuth Kimliği belirteci de firebase.auth.UserCredential nesnesinden alınabilir. Kimlik belirtecindeki sub hak talebi uygulamaya özeldir ve Firebase Auth tarafından kullanılan ve user.providerData[0].uid aracılığıyla erişilebilir olan birleştirilmiş kullanıcı tanımlayıcısıyla eşleşmeyecektir. Bunun yerine oid talep alanı kullanılmalıdır. Oturum açmak için bir Azure AD kiracısı kullanırken, oid talebi tam bir eşleşme olacaktır. Ancak kiracı olmayan durumda, oid alanı doldurulur. 4b2eabcdefghijkl federe kimliği için, oid 00000000-0000-0000-4b2e-abcdefghijkl şeklinde olacaktır.

  5. Yukarıdaki örnekler oturum açma akışlarına odaklanırken, ayrıca linkWithPopup / linkWithRedirect kullanarak bir Microsoft sağlayıcısını mevcut bir kullanıcıya bağlayabilirsiniz. Örneğin, birden çok sağlayıcıyı aynı kullanıcıya bağlayarak, ikisinden biriyle oturum açmalarına izin verebilirsiniz.

    Web version 9

    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');
    const auth = getAuth();
    
    linkWithPopup(auth.currentUser, provider)
        .then((result) => {
          // Microsoft credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

    Web version 8

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then((result) => {
          // Microsoft credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
          // OAuth ID token can also be retrieved:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });
  6. Aynı model, yakın zamanda oturum açmayı gerektiren hassas işlemler için yeni kimlik bilgilerini almak için kullanılabilen reauthenticateWithPopup / reauthenticateWithRedirect ile kullanılabilir.

    Web version 9

    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');
    const auth = getAuth();
    reauthenticateWithPopup(auth.currentUser, provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

    Web version 8

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
          // OAuth ID token can also be retrieved:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });

Bir Chrome uzantısında Firebase ile kimlik doğrulaması yapın

Bir Chrome uzantısı uygulaması oluşturuyorsanız, Chrome uzantı kimliğinizi eklemelisiniz:

  1. Projenizi Firebase konsolunda açın.
  2. Kimlik Doğrulama bölümünde, Oturum açma yöntemi sayfasını açın.
  3. Yetkili Etki Alanları listesine aşağıdakine benzer bir URI ekleyin:
    chrome-extension://CHROME_EXTENSION_ID

Chrome uzantıları HTTP yönlendirmelerini kullanamadığından, Chrome uzantılarında yalnızca açılır pencere işlemleri ( signInWithPopup , linkWithPopup ve reauthenticateWithPopup ) kullanılabilir. Kimlik doğrulama açılır penceresi tarayıcı eylemi açılır penceresini iptal edeceğinden, bu yöntemleri bir tarayıcı eylemi açılır penceresi yerine bir arka plan sayfası komut dosyasından çağırmalısınız. Açılır pencere yöntemleri yalnızca Manifest V2 kullanan uzantılarda kullanılabilir. Daha yeni Manifest V3 , yalnızca açılır pencere işlemlerini gerçekleştiremeyen hizmet çalışanları biçiminde arka plan komut dosyalarına izin verir.

Chrome uzantınızın manifest dosyasında https://apis.google.com URL'sini content_security_policy izin verilenler listesine eklediğinizden emin olun.

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 kimlik doğrulama sağlayıcısı bilgileri gibi kimlik bilgilerine 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ı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.
});

Web version 8

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