JavaScript ile Microsoft Kullanarak Kimlik Doğrula

Kullanıcılarınızın aşağıdaki gibi OAuth sağlayıcıları kullanarak Firebase ile kimlik doğrulaması yapmasına izin verebilirsiniz: Genel OAuth Girişi entegrasyonuyla Microsoft Azure Active Directory Uçtan uca oturum açma akışını gerçekleştirmek için Firebase SDK'sını kullanarak uygulamanıza ekleyin.

Başlamadan önce

Microsoft hesaplarını (Azure Active Directory ve kişisel) kullanarak kullanıcıların oturumunu açmak için Microsoft hesaplarıyla oturum açmadıysanız) öncelikle Microsoft'u Firebase projeniz:

  1. Firebase'i JavaScript projenize ekleyin.
  2. Firebase konsolunda Auth bölümünü açın.
  3. Oturum açma yöntemi sekmesinde Microsoft sağlayıcısını etkinleştirin.
  4. Söz konusu sağlayıcının geliştirici konsolundan İstemci Kimliği ve İstemci Gizli Anahtarı'nı sağlayıcı yapılandırması:
    1. Microsoft OAuth istemcisi kaydetmek için şu sayfadaki talimatları uygulayın: Hızlı başlangıç kılavuzu: Azure Active Directory v2.0 uç noktasına bir uygulama kaydedin. Bu uç noktanın Azure'un yanı sıra Microsoft kişisel hesapları da kullanarak oturum açmayı desteklediğini unutmayın Active Directory hesapları. Daha fazla bilgi Azure Active Directory 2.0 sürümü hakkında.
    2. Bu sağlayıcılara uygulama kaydederken şunu kaydettiğinizden emin olun: Projenizin *.firebaseapp.com alan adını uygulamasını indirin.
  5. Kaydet'i tıklayın.

Oturum açma akışını Firebase SDK'sı ile yönetme

Bir web uygulaması oluşturuyorsanız kullanıcılarınızın kimliklerini doğrulamanın en kolay yolu Oturum açma akışının tamamını yönetmek için Firebase'in Microsoft hesaplarını kullanması gerekir .

Oturum açma akışını Firebase JavaScript SDK ile yönetmek için aşağıdaki adımları uygulayın:

  1. Sağlayıcı kimliğini kullanarak OAuthProvider örneği oluşturma microsoft.com adresinde bulabilirsiniz.

    Web

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

    Web

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

    Web

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

    Web

    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 dokümanları. Firebase'in gerekli parametrelerini setCustomParameters() Bu parametreler client_id, response_type, redirect_uri, state, scope ve response_mode parametresini kullanabilirsiniz.

    Yalnızca belirli bir Azure AD kiracısındaki kullanıcıların oturum açmasına izin vermek için Azure AD kiracısının kolay alan adını girerek ya da kiracının GUID tanımlayıcısı kullanılabilir. Bu işlem, "kiracı" alanına girmelisiniz.

    Web

    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

    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ı: Temel profilin ötesinde, ek OAuth 2.0 kapsamlarını belirtin. kimlik doğrulama sağlayıcısından istekte bulunabilirsiniz.

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

    Daha fazla bilgi edinmek için Microsoft izinleri ve izin dokümanları.

  4. OAuth sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulayın. Etkili bir ekip oluşturmak için Microsoft Hesapları ile oturum açmalarına olanak tanımak için oturum açma sayfasına yönlendirilirsiniz. Yönlendirme yöntemi mobil cihazlarda tercih edilir.

    • Pop-up pencereyle oturum açmak için signInWithPopup numaralı telefonu arayın:

    Web

    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

    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 yönlendirerek oturum açmak için signInWithRedirect çağırın:

    Web

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

    Web

    firebase.auth().signInWithRedirect(provider);

    Kullanıcı oturum açmayı tamamlayıp sayfaya geri döndüğünde oturum açma sonucunu getRedirectResult çağırarak devre dışı bırakabilirsiniz.

    Web

    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

    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.
      });

    İşlem tamamlandığında, sağlayıcı, firebase.auth.UserCredential nesnesinden alınabilir geri döndü.

    OAuth erişim jetonunu kullanarak Microsoft Graph API.

    Örneğin, temel profil bilgilerini almak için aşağıdaki REST API şöyle adlandı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ılardan farklı olarak, Microsoft fotoğraf URL'si sağlar ve bunun yerine, profil fotoğrafı için ikili verilerde talep edilen e-posta adresi Microsoft Graph API.

    OAuth erişim jetonuna ek olarak, kullanıcının OAuth Kimlik jetonu firebase.auth.UserCredential nesnesinden de alınabilir. İlgili içeriği oluşturmak için kullanılan Kimlik jetonundaki sub talebi uygulamaya özeldir ve birleşik uygulamayla eşleşmez Firebase Auth tarafından kullanılan ve üzerinden erişilebilen kullanıcı tanımlayıcısı user.providerData[0].uid. Bunun yerine oid hak talebi alanı kullanılmalıdır. Oturum açmak için Azure AD kiracısı kullanılırken oid talebi tam olarak aynı olur eşleşmesini sağlar. Ancak kiracı olmayan destek kaydı için oid alanı doldurulur. Birleşik Krallık için 4b2eabcdefghijkl kimliğine sahip olan oid, bir form içerir 00000000-0000-0000-4b2e-abcdefghijkl.

  5. Yukarıdaki örneklerde oturum açma akışlarına odaklanılsa da kullanarak Microsoft sağlayıcısını mevcut bir kullanıcıya bağlama linkWithPopup/linkWithRedirect Örneğin, birden çok sağlayıcıyı aynı kullanıcıya göstererek bu iki sağlayıcıdan ikisiyle de oturum açabilmesini sağlar.

    Web

    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

    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ı desen aşağıdaki Şu amaçlarla kullanılabilir: reauthenticateWithPopup/reauthenticateWithRedirect yakın zamanda işlem yapılmasını gerektiren hassas işlemler için yeni kimlik bilgilerini alma giriş yapın.

    Web

    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

    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.
        });

Chrome uzantılarında Firebase ile kimlik doğrulama

Bir Chrome uzantı uygulaması oluşturuyorsanız daha fazla bilgi için Ekran dışı dokümanlar rehberi.

Sonraki adımlar

Kullanıcı ilk kez oturum açtığında yeni bir kullanıcı hesabı oluşturulur ve bilgileri (kullanıcı adı ve şifre, telefon numarası) Numara veya kimlik doğrulama sağlayıcı bilgileri (oturum açan kullanıcı). Bu yeni Firebase projenizin bir parçası olarak saklanır ve aşağıdaki verileri tanımlamak için kullanılabilir: nasıl oturum açarsa açsın, projenizdeki tüm uygulamalarda kullanılır.

  • Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu Auth nesnesine bir gözlemci ayarlayın. Ardından, kullanıcının User nesnesindeki temel profil bilgilerini içerir. Görüntüleyin Kullanıcıları Yönetme

  • Firebase Realtime Database ve Cloud Storage içinde Güvenlik Kuralları'nı kullanarak şunları yapabilirsiniz: auth değişkeninden, oturum açmış kullanıcının benzersiz kullanıcı kimliğini alabilirsiniz. ve kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanılır.

Kullanıcıların çoklu kimlik doğrulama kullanarak uygulamanızda oturum açmasına izin verebilirsiniz yetkilendirme sağlayıcısının kimlik bilgilerini hesaba katılmaz.

Bir kullanıcının oturumunu kapatmak için numaralı telefonu arayın signOut:

Web

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

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

Web

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