المصادقة باستخدام Microsoft مع JavaScript، المصادقة باستخدام Microsoft مع JavaScript

يمكنك السماح للمستخدمين بالمصادقة مع Firebase باستخدام موفري OAuth مثل Microsoft Azure Active Directory من خلال دمج تسجيل دخول OAuth العام في تطبيقك باستخدام Firebase SDK لتنفيذ تدفق تسجيل الدخول الشامل.

قبل ان تبدأ

لتسجيل دخول المستخدمين باستخدام حسابات Microsoft (Azure Active Directory وحسابات Microsoft الشخصية)، يجب عليك أولاً تمكين Microsoft كموفر تسجيل دخول لمشروع Firebase الخاص بك:

1. أضف Firebase إلى مشروع JavaScript الخاص بك .
2. في وحدة تحكم Firebase ، افتح قسم المصادقة .
3. في علامة التبويب طريقة تسجيل الدخول ، قم بتمكين موفر Microsoft .
4. أضف معرف العميل وسر العميل من وحدة تحكم المطور الخاصة بهذا الموفر إلى تكوين الموفر:
   1. لتسجيل عميل Microsoft OAuth، اتبع الإرشادات الموجودة في Quickstart: قم بتسجيل تطبيق باستخدام نقطة نهاية Azure Active Directory v2.0 . لاحظ أن نقطة النهاية هذه تدعم تسجيل الدخول باستخدام حسابات Microsoft الشخصية بالإضافة إلى حسابات Azure Active Directory. تعرف على المزيد حول Azure Active Directory v2.0.
   2. عند تسجيل التطبيقات مع هؤلاء الموفرين، تأكد من تسجيل النطاق *.firebaseapp.com لمشروعك باعتباره مجال إعادة التوجيه لتطبيقك.
5. انقر فوق حفظ .

تعامل مع تدفق تسجيل الدخول باستخدام Firebase SDK

إذا كنت تقوم بإنشاء تطبيق ويب، فإن أسهل طريقة لمصادقة المستخدمين لديك باستخدام Firebase باستخدام حسابات Microsoft الخاصة بهم هي التعامل مع تدفق تسجيل الدخول بالكامل باستخدام Firebase JavaScript SDK.

للتعامل مع تدفق تسجيل الدخول باستخدام Firebase JavaScript SDK، اتبع الخطوات التالية:

1. قم بإنشاء مثيل لـ OAuthProvider باستخدام معرف الموفر microsoft.com .

   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. اختياري : حدد معلمات OAuth المخصصة الإضافية التي تريد إرسالها مع طلب OAuth.

   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، راجع وثائق Microsoft OAuth . لاحظ أنه لا يمكنك تمرير المعلمات المطلوبة لـ Firebase باستخدام setCustomParameters() . هذه المعلمات هي Client_id و response_type و redirect_uri والحالة والنطاق و response_mode .

   للسماح فقط للمستخدمين من مستأجر Azure AD معين بتسجيل الدخول إلى التطبيق، يمكن استخدام إما اسم المجال المألوف لمستأجر Azure AD أو معرف GUID الخاص بالمستأجر. يمكن القيام بذلك عن طريق تحديد حقل "المستأجر" في كائن المعلمات المخصصة.

   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. اختياري : حدد نطاقات OAuth 2.0 الإضافية خارج ملف التعريف الأساسي الذي تريد طلبه من موفر المصادقة.

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

   لمعرفة المزيد، راجع أذونات Microsoft ووثائق الموافقة .

4. قم بالمصادقة مع Firebase باستخدام كائن موفر OAuth. يمكنك مطالبة المستخدمين بتسجيل الدخول باستخدام حسابات Microsoft الخاصة بهم إما عن طريق فتح نافذة منبثقة أو عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول. طريقة إعادة التوجيه مفضلة على الأجهزة المحمولة.

   • لتسجيل الدخول باستخدام نافذة منبثقة، اتصل بـ signInWithPopup :

   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

   • لتسجيل الدخول عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول، اتصل بـ signInWithRedirect :

   اتبع أفضل الممارسات عند استخدام signInWithRedirect ، أو linkWithRedirect ، أو reauthenticateWithRedirect .

   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

   بعد أن يكمل المستخدم تسجيل الدخول ويعود إلى الصفحة، يمكنك الحصول على نتيجة تسجيل الدخول عن طريق استدعاء getRedirectResult .

   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

   عند الانتهاء بنجاح، يمكن استرداد رمز وصول OAuth المرتبط بالموفر من كائن firebase.auth.UserCredential الذي تم إرجاعه.

   باستخدام رمز وصول OAuth، يمكنك الاتصال بـ Microsoft Graph API .

   على سبيل المثال، للحصول على معلومات الملف الشخصي الأساسية، يمكن استدعاء REST API التالي:

   curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me
   

   على عكس موفري الخدمة الآخرين الذين تدعمهم Firebase Auth، لا توفر Microsoft عنوان URL للصورة وبدلاً من ذلك، يجب طلب البيانات الثنائية لصورة الملف الشخصي عبر Microsoft Graph API .

   بالإضافة إلى رمز وصول OAuth، يمكن أيضًا استرداد رمز معرف OAuth للمستخدم من كائن firebase.auth.UserCredential . المطالبة sub في الرمز المميز للمعرف خاصة بالتطبيق ولن تتطابق مع معرف المستخدم الموحد الذي تستخدمه Firebase Auth ويمكن الوصول إليه عبر user.providerData[0].uid . يجب استخدام حقل مطالبة oid بدلاً من ذلك. عند استخدام مستأجر Azure AD لتسجيل الدخول، ستكون مطالبة oid متطابقة تمامًا. ومع ذلك، بالنسبة لحالة غير المستأجر، يكون حقل oid مبطنًا. بالنسبة للمعرف الموحد 4b2eabcdefghijkl ، سيكون oid الشكل 00000000-0000-0000-4b2e-abcdefghijkl .

5. بينما تركز الأمثلة المذكورة أعلاه على تدفقات تسجيل الدخول، لديك أيضًا القدرة على ربط موفر خدمة Microsoft بمستخدم حالي باستخدام linkWithPopup / linkWithRedirect . على سبيل المثال، يمكنك ربط عدة موفري خدمات بنفس المستخدم مما يسمح لهم بتسجيل الدخول باستخدام أي منهما.

   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. يمكن استخدام نفس النمط مع reauthenticateWithPopup / reauthenticateWithRedirect والذي يمكن استخدامه لاسترداد بيانات اعتماد جديدة للعمليات الحساسة التي تتطلب تسجيل دخول مؤخرًا.

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

قم بالمصادقة باستخدام Firebase في ملحق Chrome

إذا كنت تقوم بإنشاء تطبيق ملحق لـ Chrome، فراجع دليل المستندات خارج الشاشة .

الخطوات التالية

بعد قيام المستخدم بتسجيل الدخول لأول مرة، يتم إنشاء حساب مستخدم جديد وربطه ببيانات الاعتماد - أي اسم المستخدم وكلمة المرور أو رقم الهاتف أو معلومات موفر المصادقة - التي قام المستخدم بتسجيل الدخول بها. يتم تخزين هذا الحساب الجديد كجزء من مشروع Firebase الخاص بك، ويمكن استخدامه لتحديد المستخدم عبر كل تطبيق في مشروعك، بغض النظر عن كيفية تسجيل دخول المستخدم.

• في تطبيقاتك، الطريقة الموصى بها لمعرفة حالة المصادقة للمستخدم هي تعيين مراقب على كائن Auth . يمكنك بعد ذلك الحصول على معلومات الملف الشخصي الأساسية للمستخدم من كائن User . راجع إدارة المستخدمين .

• في قاعدة بيانات Firebase Realtime وقواعد أمان التخزين السحابي، يمكنك الحصول على معرف المستخدم الفريد للمستخدم الذي قام بتسجيل الدخول من متغير auth ، واستخدامه للتحكم في البيانات التي يمكن للمستخدم الوصول إليها.

يمكنك السماح للمستخدمين بتسجيل الدخول إلى تطبيقك باستخدام موفري مصادقة متعددين عن طريق ربط بيانات اعتماد موفر المصادقة بحساب مستخدم موجود.

لتسجيل خروج مستخدم، اتصل signOut :

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