JavaScript ile Microsoft Kullanarak Kimlik Doğrula

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

Başlamadan önce

Kullanıcıların Microsoft hesaplarını (Azure Active Directory ve kişisel Microsoft hesapları) kullanarak oturum açması için önce Microsoft'u Firebase projeniz için oturum açma sağlayıcısı olarak etkinleştirmeniz gerekir:

  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. Sağlayıcının geliştirici konsolundaki İstemci Kimliği ve İstemci Gizli Anahtarı'nı sağlayıcı yapılandırmasına ekleyin:
    1. Microsoft OAuth istemcisi kaydetmek için Hızlı Başlangıç: Azure Active Directory v2.0 uç noktasına uygulama kaydetme başlıklı makaledeki talimatları uygulayın. 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 2.0 hakkında daha fazla bilgi edinin.
    2. Bu sağlayıcılara uygulama kaydederken projenizin *.firebaseapp.com alanını, uygulamanızın yönlendirme alanı olarak kaydettiğinizden emin olun.
  5. Kaydet'i tıklayın.

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

Web uygulaması geliştiriyorsanız kullanıcılarınızın Microsoft hesaplarını kullanarak Firebase ile kimlik doğrulamanın en kolay yolu, oturum açma akışının tamamını Firebase JavaScript SDK'sıyla yönetmek olacaktır.

Oturum açma akışını Firebase JavaScript SDK'sı ile işlemek için aşağıdaki adımları uygulayın:

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

    Web

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');
    auth_msft_create_provider.js

    Web

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    microsoft-oauth.js

  2. İsteğe bağlı: OAuth isteğiyle birlikte göndermek istediğiniz ek özel OAuth parametrelerini belirtin.

    Web

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

    Web

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

    Microsoft'un desteklediği parametreler için Microsoft OAuth dokümanlarına bakın. setCustomParameters() ile Firebase için zorunlu parametreleri 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ında bulunan kullanıcıların uygulamaya giriş yapmasına izin vermek için Azure AD kiracısının kolay alan adı veya kiracının GUID tanımlayıcısı kullanılabilir. Bu işlem, özel parametreler nesnesinde "kiracı" alanını belirterek yapılabilir.

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

    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'
});
    microsoft-oauth.js

  3. İsteğe bağlı: Kimlik doğrulama sağlayıcıdan istemek istediğiniz temel profilin dışındaki ek OAuth 2.0 kapsamlarını belirtin.

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

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

  4. OAuth sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulama Kullanıcılarınızdan Microsoft Hesaplarıyla oturum açmalarını isteyebilirsiniz. Bunun için pop-up pencere açabilir veya oturum açma sayfasına yönlendirebilirsiniz. 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.
  });
    auth_msft_signin_popup.js

    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.
  });
    microsoft-oauth.js
    • Oturum açma sayfasına yönlendirilerek oturum açmak için signInWithRedirect numaralı telefonu arayın:

    signInWithRedirect, linkWithRedirect veya reauthenticateWithRedirect'i kullanırken en iyi uygulamaları takip edin.

    Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_msft_signin_redirect.js

    Web

    firebase.auth().signInWithRedirect(provider);
    microsoft-oauth.js

    Kullanıcı oturum açmayı tamamlayıp sayfaya döndükten sonra getRedirectResult işlevini çağırarak oturum açma sonucunu elde edebilirsiniz.

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

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

    İşlem başarıyla tamamlandığında, sağlayıcıyla ilişkili OAuth erişim jetonu, döndürülen firebase.auth.UserCredential nesnesinden alınabilir.

    OAuth erişim jetonunu kullanarak Microsoft Graph API'yi ç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, fotoğraf URL'si sağlamaz. Bunun yerine, profil fotoğrafının ikili verilerinin Microsoft Graph API üzerinden istenmesi gerekir.

    OAuth erişim jetonuna ek olarak, kullanıcının OAuth kimlik jetonu da firebase.auth.UserCredential nesnesinden alınabilir. Kimlik jetonundaki sub iddiası uygulamaya özeldir ve Firebase Auth tarafından kullanılan ve user.providerData[0].uid üzerinden erişilebilen birleşik kullanıcı tanımlayıcısıyla eşleşmez. Bunun yerine oid hak talebi alanı kullanılmalıdır. Oturum açmak için bir Azure AD kiracısı kullanıldığında oid hak talebi tam olarak eşleşir. Ancak kiracı olmayan durumda oid alanı doldurulur. Bir birleşik kimlik 4b2eabcdefghijkl için oid, 00000000-0000-0000-4b2e-abcdefghijkl biçiminde olacaktır.

  5. Yukarıdaki örnekler oturum açma akışlarına odaklansa da linkWithPopup/linkWithRedirect kullanarak bir Microsoft sağlayıcıyı mevcut bir kullanıcıya bağlayabilirsiniz. Örneğin, aynı kullanıcıya birden fazla sağlayıcı bağlayabilir ve kullanıcının bu sağlayıcılardan biriyle oturum açmasına izin verebilirsiniz.

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

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

  6. Aynı kalıp, yakın zamanda giriş yapılmasını gerektiren hassas işlemler için yeni kimlik bilgilerini almak üzere kullanılabilen reauthenticateWithPopup/reauthenticateWithRedirect ile kullanılabilir.

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

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

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

Chrome uzantısı uygulaması geliştiriyorsanız Ekran Dışı Dokümanlar kılavuzuna göz atın.

Sonraki adımlar

Kullanıcı ilk kez oturum açtıktan sonra yeni bir kullanıcı hesabı oluşturulur ve kullanıcının oturum açarken kullandığı kimlik bilgilerine (yani kullanıcı adı ve şifre, telefon numarası veya kimlik doğrulama sağlayıcı 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 kullanıcıyı tanımlamak için kullanılabilir.

  • Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu Auth nesnesine bir gözlemci ayarlamaktır. Ardından, kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Kullanıcıları yönetme başlıklı makaleyi inceleyin.

  • Firebase Realtime Database ve Cloud Storage Güvenlik Kurallarınızda, oturum açmış kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.

Kimlik doğrulama sağlayıcı kimlik bilgilerini mevcut bir kullanıcı hesabına bağlayarak kullanıcıların uygulamanızda birden fazla kimlik doğrulama sağlayıcı kullanarak oturum açmasına izin verebilirsiniz.

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

Web

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

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