Microsoft'u JavaScript ile Kullanarak Kimlik Doğrulama,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 Girişini uygulamanıza entegre ederek Microsoft Azure Active Directory gibi OAuth sağlayıcılarını kullanarak kullanıcılarınızın Firebase ile kimlik doğrulaması yapmasına izin verebilirsiniz.

Sen başlamadan önce

Microsoft hesaplarını (Azure Active Directory ve kişisel Microsoft hesapları) kullanarak kullanıcıların oturum açmasını sağlamak için öncelikle 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 Kimlik Doğrulama bölümünü açın.
3. Oturum açma yöntemi sekmesinde Microsoft sağlayıcısını etkinleştirin.
4. Bu sağlayıcının geliştirici konsolundan İstemci Kimliğini ve İstemci Sırrını sağlayıcı yapılandırmasına ekleyin:
   1. Bir Microsoft OAuth istemcisini kaydetmek için Hızlı Başlangıç ​​bölümündeki yönergeleri izleyin: Azure Active Directory v2.0 uç noktasıyla bir uygulamayı kaydetme . Bu uç noktanın, Azure Active Directory hesaplarının yanı sıra Microsoft kişisel hesaplarını kullanarak oturum açmayı desteklediğini unutmayın. Azure Active Directory v2.0 hakkında daha fazla bilgi edinin .
   2. Uygulamaları bu sağlayıcılara kaydederken projeniz için *.firebaseapp.com alan adı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 ile yönetin

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

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

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

   Web modular API

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

   Web namespaced API

   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 modular 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 namespaced API

   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 belgelerine bakın. Firebase için gerekli parametreleri setCustomParameters() ile iletemeyeceğinizi unutmayın. Bu parametreler client_id , answer_type , yönlendirme_uri , durum , kapsam ve Response_mode'dur .

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

   Web modular 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 namespaced 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'
   });
   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ını belirtin.

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

   Daha fazla bilgi edinmek için Microsoft izinleri ve onay belgelerine bakın.

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 yönlendirerek kullanıcılarınızdan Microsoft Hesaplarıyla oturum açmalarını isteyebilirsiniz. Mobil cihazlarda yönlendirme yöntemi tercih edilmektedir.

   • Açılır pencereyle oturum açmak için signInWithPopup çağırın:

   Web modular 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 namespaced API

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

   Web modular API

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

   Web namespaced API

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

   Kullanıcı oturum açmayı tamamlayıp sayfaya döndükten sonra getRedirectResult çağırarak oturum açma sonucunu alabilirsiniz.

   Web modular 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 namespaced API

   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

   Başarılı bir şekilde tamamlandığında, sağlayıcıyla ilişkili OAuth erişim belirteci, döndürülen firebase.auth.UserCredential nesnesinden alınabilir.

   OAuth erişim belirtecini kullanarak Microsoft Graph API'sini ç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 bir fotoğraf URL'si sağlamaz ve bunun yerine profil fotoğrafına ilişkin ikili verilerin Microsoft Graph API aracılığıyla talep edilmesi gerekir.

   OAuth erişim jetonuna ek olarak kullanıcının OAuth ID jetonu da firebase.auth.UserCredential nesnesinden alınabilir. Kimlik belirtecindeki sub talep uygulamaya özeldir ve Firebase Auth tarafından kullanılan ve user.providerData[0].uid aracılığıyla erişilebilen birleştirilmiş kullanıcı tanımlayıcısıyla eşleşmeyecektir. Bunun yerine oid talep alanı kullanılmalıdır. Oturum açmak için bir Azure AD kiracısı kullanıldığında, oid talebi tam eşleşme olacaktır. Ancak kiracı olmayan durumda, oid alanı dolguludur. Birleştirilmiş kimlik 4b2eabcdefghijkl için oid , 00000000-0000-0000-4b2e-abcdefghijkl biçimine sahip olacaktır.

5. Yukarıdaki örnekler oturum açma akışlarına odaklansa da, linkWithPopup / linkWithRedirect kullanarak bir Microsoft sağlayıcısını mevcut bir kullanıcıya bağlama olanağınız da vardır. Örneğin, birden fazla sağlayıcıyı aynı kullanıcıya bağlayarak onların ikisinden biriyle oturum açmasına olanak tanıyabilirsiniz.

   Web modular 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 namespaced API

   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ı model, yakın zamanda oturum açmayı gerektiren hassas işlemler için yeni kimlik bilgileri almak amacıyla kullanılabilen reauthenticateWithPopup / reauthenticateWithRedirect ile birlikte kullanılabilir.

   Web modular 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 namespaced API

   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ısında Firebase ile kimlik doğrulama

Bir Chrome uzantısı uygulaması oluşturuyorsanız Chrome uzantı kimliğinizi eklemeniz gerekir:

1. Projenizi Firebase konsolunda açın.
2. Kimlik Doğrulama bölümünde Oturum açma yöntemi sayfasını açın.
3. Yetkili Etki Alanları listesine aşağıdakine benzer bir URI ekleyin:

   chrome-extension://CHROME_EXTENSION_ID

Chrome uzantıları HTTP yönlendirmelerini kullanamadığından Chrome uzantıları için yalnızca açılır pencere işlemleri ( signInWithPopup , linkWithPopup ve reauthenticateWithPopup ) 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. Açılan yöntemler yalnızca Manifest V2 kullanan uzantılarda kullanılabilir. Daha yeni olan Manifest V3, yalnızca açılır pencere işlemlerini hiçbir şekilde gerçekleştiremeyen hizmet çalışanları biçimindeki arka plan komut dosyalarına izin verir.

Chrome uzantınızın manifest dosyasında https://apis.google.com URL'sini content_security_policy izin verilenler listesine eklediğinizden emin olun.

Sonraki adımlar

Bir kullanıcı ilk kez oturum açtıktan sonra, yeni bir kullanıcı hesabı oluşturulur ve oturum açan kullanıcının kimlik bilgileriyle (yani kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) ilişkilendirilir. Bu yeni hesap, Firebase projenizin bir parçası olarak depolanır ve kullanıcının nasıl oturum açtığına bakılmaksızın projenizdeki her uygulamada bir 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 Doğrulama nesnesine bir gözlemci ayarlamaktır. Daha sonra kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Bkz . Kullanıcıları Yönetme .

• Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama Güvenliği Kurallarınızda , oturum açan kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve bunu, kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.

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

Bir kullanıcının oturumunu kapatmak için signOut 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