JavaScript ile Microsoft Kullanarak Kimlik Doğrula

Uçtan uca oturum açma akışı gerçekleştirmek için Firebase SDK'sı ile 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ı yapmasını sağlayabilirsiniz.

Başlamadan önce

Microsoft hesaplarını (Azure Active Directory ve kişisel Microsoft hesapları) kullanarak kullanıcıların oturumunu açmak için önce Firebase projenizde oturum açma sağlayıcısı olarak Microsoft'u 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. 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ına ekleyin:
   1. Microsoft OAuth istemcisi kaydetmek için Hızlı başlangıç kılavuzu: Azure Active Directory v2.0 uç noktasına uygulama kaydetme başlıklı makaledeki talimatları uygulayın. Bu uç noktanın, Azure Active Directory hesaplarının yanı sıra Microsoft kişisel hesapları da kullanarak oturum açmayı desteklediğini unutmayın. Azure Active Directory 2.0 sürümü 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ı ile yönetme

Bir web uygulaması oluşturuyorsanız, Microsoft hesaplarını kullanarak Firebase ile kullanıcılarınızın kimliklerini doğrulamanın en kolay yolu, oturum açma akışının tamamını Firebase JavaScript SDK ile yürütmektir.

Oturum açma akışını Firebase JavaScript SDK ile yönetmek 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 modüler API

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

   Web ad alanı API'si

   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 modüler API

   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 ad alanı API'si

   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. Firebase için gerekli parametreleri setCustomParameters() ile iletemeyeceğinizi unutmayın. Bu parametreler client_id, response_type, redirect_uri, state, scope ve response_mode parametreleridir.

   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 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 modüler API

   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 ad alanı API'si

   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ı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 izinleri ve izin belgelerini inceleyin.

4. OAuth sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulayın. Kullanıcılarınızdan bir pop-up pencere açarak veya oturum açma sayfasına yönlendirerek Microsoft Hesaplarıyla oturum açmalarını isteyebilirsiniz. Mobil cihazlarda yönlendirme yöntemi tercih edilir.

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

   Web modüler API

   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 ad alanı API'si

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

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

   Web modüler API

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

   Web ad alanı API'si

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

   Kullanıcı oturum açmayı tamamlayıp sayfaya geri döndüğünde, getRedirectResult numaralı telefonu arayarak oturum açma sonucunu alabilirsiniz.

   Web modüler API

   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 ad alanı API'si

   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, bir profil fotoğrafının ikili verilerinin Microsoft Graph API aracılığıyla 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 talebi 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 Azure AD kiracısı kullanılırken oid talebi tam eşleşme olur. Ancak kiracı olmayan destek kaydı için oid alanı doldurulur. Birleşik kimlik 4b2eabcdefghijkl için oid, 00000000-0000-0000-4b2e-abcdefghijkl biçiminde olur.

5. Yukarıdaki örneklerde oturum açma akışlarına odaklanılsa da linkWithPopup/linkWithRedirect kullanarak bir Microsoft sağlayıcısını mevcut bir kullanıcıya bağlayabilirsiniz. Örneğin, aynı kullanıcıya birden fazla sağlayıcı bağlayarak bu iki sağlayıcıdan biriyle oturum açabilirsiniz.

   Web modüler API

   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 ad alanı API'si

   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 amacıyla reauthenticateWithPopup/reauthenticateWithRedirect ile kullanılabilir.

   Web modüler API

   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 ad alanı API'si

   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

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  OAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Microsoft.
  let result = await signInWithPopup(getAuth(), new OAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Microsoft credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Microsoft credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

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

Bir Chrome uzantı uygulaması oluşturuyorsanız Dokümanlar Dışı Dokümanlar rehberine bakın.

Sonraki adımlar

Bir kullanıcı ilk kez oturum açtıktan sonra yeni bir kullanıcı hesabı oluşturulur ve kullanıcının oturum açtığı kimlik bilgilerine (kullanıcı adı ve şifre, telefon numarası veya kimlik doğrulama sağlayıcı bilgisi) 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 öğrenmek için önerilen yol, Auth nesnesinde bir gözlemci ayarlamaktır. Daha sonra, kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Kullanıcıları Yönetme sayfasına göz atın.

• Firebase Realtime Database ve Cloud Storage Güvenlik Kurallarınızda, oturum açan 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, birden fazla kimlik doğrulama sağlayıcı kullanarak uygulamanızda oturum açmasına izin verebilirsiniz.

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

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

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

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