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

   Öğrenin hakkında daha fazla bilgi edinin. yükselt içe aktarılmalıdır.

   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ı: Eklemek istediğiniz ek özel OAuth parametrelerini belirtin OAuth isteğiyle gönderir.

   Web

   Öğrenin hakkında daha fazla bilgi edinin. yükselt içe aktarılmalıdır.

   provider.setCustomParameters({
     // Force re-consent.
     prompt: 'consent',
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   auth_msft_provider_params.js

   Web

   provider.setCustomParameters({
     // Force re-consent.
     prompt: 'consent',
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   microsoft-oauth.js

   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

   Öğrenin hakkında daha fazla bilgi edinin. yükselt içe aktarılmalıdır.

   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ı: 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

   Öğrenin hakkında daha fazla bilgi edinin. yükselt içe aktarılmalıdır.

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

   Web

   Öğrenin hakkında daha fazla bilgi edinin. yükselt içe aktarılmalıdır.

   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 geri döndüğünde oturum açma sonucunu getRedirectResult çağırarak devre dışı bırakabilirsiniz.

   Web

   Öğrenin hakkında daha fazla bilgi edinin. yükselt içe aktarılmalıdır.

   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 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

   Öğrenin hakkında daha fazla bilgi edinin. yükselt içe aktarılmalıdır.

   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ı 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

   Öğrenin hakkında daha fazla bilgi edinin. yükselt içe aktarılmalıdır.

   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

farklı kimlik bilgileriyle var olan hesap hatalarını ele alma

Firebase konsolunda E-posta adresi başına bir hesap ayarını etkinleştirdiyseniz Kullanıcı, Microsoft gibi bir e-posta adresiyle bir sağlayıcıda oturum açmaya çalıştığında başka bir Firebase kullanıcısının sağlayıcısı (Google gibi) için mevcutsa auth/account-exists-with-different-credential, AuthCredential nesnesi (Microsoft kimlik bilgisi). Oturum açma işlemini kullanıcının ilk olarak mevcut sağlayıcı (Google) ile oturum açması ve ardından eski AuthCredential (Microsoft kimlik bilgisi).

Pop-up modu

signInWithPopup kullanıyorsanız Aşağıdakine benzer bir kodla auth/account-exists-with-different-credential hata örnek:

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) {
  // ...
}

Yönlendirme modu

Bu hata, yönlendirme modunda benzer bir şekilde ele alınır. Beklemedeki hesabın kimlik bilgisi sayfa yönlendirmeleri arasında önbelleğe alınmalıdır (örneğin, oturum depolaması kullanılarak).

Gelişmiş: Oturum açma akışını manuel olarak yönetme

Google, Facebook ve Google gibi Firebase tarafından desteklenen diğer OAuth sağlayıcılarının aksine, ve Twitter'da oturum açın. Burada doğrudan OAuth erişim jetonuyla oturum açabilirsiniz Firebase Auth, Firebase için aynı işlevi desteklemez. Microsoft gibi belirli sağlayıcılara ait Microsoft OAuth erişim jetonlarının kitlesini doğrulamak için kullanılacak Auth sunucusu. Bu kritik bir güvenlik gereksinimidir ve uygulamalar, Microsoft OAuth erişim jetonu alındığı durumlarda bu saldırıların tekrarlanmasını bir proje (saldırgan) başka bir projede (kurban) oturum açmak için kullanılabilir. Bunun yerine, Firebase Auth, tüm OAuth akışını yönetme ve OAuth istemci kimliğini ve sırrını kullanarak yetkilendirme kodu değişimi Firebase konsolunda yapılandırıldı. Yetkilendirme kodu yalnızca belirli bir istemci kimliği/gizli anahtarla bağlantılı olarak başka bir projede kullanılamaz.

Bu sağlayıcıların desteklenmeyen ortamlarda kullanılması gerekiyorsa ve üçüncü taraf OAuth kitaplığı ve Firebase özel kimlik doğrulaması belirlenecekti. Birincisi, sağlayıcıyla kimlik doğrulamak için gereklidir İkincisi ise sağlayıcının kimlik bilgilerini özel bir jetonla değiştirir.

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.

Microsoft ile oturum açma işlemi için yönlendirme alan adını özelleştirme

Firebase, proje oluşturulurken projeniz için benzersiz bir alt alan sağlar: https://my-app-12345.firebaseapp.com

Bu, OAuth'ta oturum açmak için yönlendirme mekanizması olarak da kullanılır. Bu alan adının desteklenen tüm OAuth sağlayıcıları için izin verilir. Ancak bu, kullanıcıların Microsoft'ta oturum açarken dikkate almanız gereken noktalar şunlardır: https://my-app-12345.firebaseapp.com adresine gidin.

Alt alan adınızın gösterilmesini önlemek için Firebase Hosting ile özel bir alan oluşturabilirsiniz:

1. Şuradaki 1 ila 3. adımları uygulayın: Hosting için alanınızı ayarlayın. Doğrulama işlemi sırasında Hosting, özel alanınız için bir SSL sertifikası sağlar.
2. Özel alan adınızı Firebase konsolu: auth.custom.domain.com.
3. Microsoft Developer Console veya OAuth kurulum sayfasında, yönlendirme sayfasının URL'sini beyaz listeye ekleyin. Bu URL'ye özel alanınızdan erişebilirsiniz: https://auth.custom.domain.com/__/auth/handler
4. JavaScript kitaplığını başlattığınızda özel alan adınızı authDomain alanı:

   var config = {
     apiKey: '...',
     // Changed from 'my-app-12345.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://my-app-12345.firebaseio.com',
     projectId: 'my-app-12345',
     storageBucket: 'my-app-12345.appspot.com',
     messagingSenderId: '1234567890'
   };
   firebase.initializeApp(config);
   

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

Öğrenin hakkında daha fazla bilgi edinin. yükselt içe aktarılmalıdır.

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