Catch up on everthing we announced at this year's Firebase Summit. 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, kullanıcılarınızın Microsoft Azure Active Directory gibi OAuth sağlayıcılarını kullanarak 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ştirmeniz gerekir:

  1. JavaScript projeye Firebase ekleyin .
  2. In Firebase konsoluna , Auth bölümünü açın.
  3. Yöntem sekmesinde İşaret Üzerine Microsoft sağlayıcı sağlar.
  4. Sağlayıcı yapılandırmasına o sağlayıcının geliştirici konsolundan İstemci Kimliği ve İstemci Sırrı ekleyin:
    1. Bir Microsoft OAuth istemcisi kayıt olmak için yönergeleri izleyin Quickstart: Kayıt Azure Active Directory v2.0 son nokta ile bir uygulama . 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. Daha fazla bilgi Azure Active Directory v2.0 hakkında.
    2. Bu sağlayıcılar ile uygulamaları kaydederken, kayıt emin olun *.firebaseapp.com uygulamanız için yönlendirme alanı olarak projeniz için domain.
  5. Kaydet seçeneğini 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 Firebase ile kimliğini doğrulamanın en kolay yolu, tüm oturum açma akışını Firebase JavaScript SDK'sı ile yönetmektir.

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

  1. Sağlayıcı kimliğini microsoft.com kullanarak bir OAuthProvider bir örneğini oluşturun.

    Web sürümü 9

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

    Web sürümü 8

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

    Web sürümü 9

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

    Web sürümü 8

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

    Parametreler Microsoft desteklerin için bkz Microsoft OAuth belgelerine . Birlikte Firebase-gerekli parametreleri geçemediği Not setCustomParameters() . Bu parametreler client_id, response_type, redirect_uri, eyalet, kapsamı ve response_mode vardır.

    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 nesnesindeki "kiracı" alanı belirtilerek yapılabilir.

    Web sürümü 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 sürümü 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ı: doğrulama sağlayıcısından talep istediğiniz ek OAuth temel profil ötesinde 2.0 kapsamlarını belirtme.

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

    Daha fazla bilgi için bakınız , Microsoft izinler ve rıza belgeleri .

  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 pop-up penceresi ile oturum için çağrı signInWithPopup :

    Web sürümü 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 sürümü 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ı, çağrı yönlendirme yaparak oturum açmak için signInWithRedirect :

    Web sürümü 9

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

    Web sürümü 8

    firebase.auth().signInWithRedirect(provider);

    Kullanıcı tamamlandıktan sonra oturum açma sayfasına ve iadeler, sen arayarak oturum açma sonucu elde edebilirsiniz getRedirectResult .

    Web sürümü 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 sürümü 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ıyla tamamlayan sağlayıcısı ile bağlantılı belirteç OAuth erişim alınabilir firebase.auth.UserCredential döndürülen nesne.

    OAuth erişim jetonu kullanarak, arayabilecek Microsoft Graph API .

    Ö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 fotoğraf URL'sini sağlamaz ve bunun yerine, profil fotoğrafı için ikili veri yoluyla talep edilmesi gerekmektedir Microsoft Graph API .

    OAuth erişim belirteci ilave olarak, kullanıcının OAuth İD jetonu da alınabilir firebase.auth.UserCredential nesne. sub İD belirteci istem uygulamaya özel ve Firebase Auth ile ve erişilebilir ile kullanılan birleşik kullanıcı belirtecini eşleşmez user.providerData[0].uid . oid iddia alan yerine kullanılmalıdır. Oturum için Azure AD kiracı kullanırken, oid iddia tam bir eşleşme olacak. Ancak sigara kiracı durumu için, oid alan doldurulur. Bir birleşik kimlik için 4b2eabcdefghijkl , oid bir şekilde sahip olacaktır 00000000-0000-0000-4b2e-abcdefghijkl .

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

    Web sürümü 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 sürümü 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ı desen ile kullanılabilir reauthenticateWithPopup / reauthenticateWithRedirect son girişi gerektiren hassas operasyonlar için taze kimlik bilgilerini almak için kullanılabilir.

    Web sürümü 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 sürümü 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 eklemeniz gerekir:

  1. Projenizi açın Firebase konsoluna .
  2. Kimlik Doğrulama bölümünde Oturum açma yöntemi sayfasında açın.
  3. : Yetkili Alanlar listesine aşağıdaki gibi bir URI ekle
    chrome-extension://CHROME_EXTENSION_ID

Sadece pop-up işlemleri ( signInWithPopup , linkWithPopup ve reauthenticateWithPopup Chrome uzantıları HTTP yönlendirmeleri kullanamaz gibi), Chrome uzantıları için 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. Popup yöntemleri kullanarak uzantılarda yalnızca kullanılabilir Manifest V2 . Yeni Manifest V3 sadece hiç pop-up işlemleri gerçekleştiremiyor hizmet işçilerinin şeklinde, arka plan komut dosyaları sağlar.

Chrome uzantısının bildirim dosyası marka olarak eklemek emin https://apis.google.com URL content_security_policy AllowList.

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