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

يمكنك السماح للمستخدمين بالمصادقة باستخدام Firebase من خلال مقدّمي خدمات OAuth، مثل Microsoft Azure Active Directory، وذلك من خلال دمج ميزة تسجيل الدخول العامة باستخدام OAuth في تطبيقك باستخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase لتنفيذ عملية تسجيل الدخول من البداية إلى النهاية.

قبل البدء

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

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

التعامل مع مسار تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase

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

لمعالجة عملية تسجيل الدخول باستخدام حزمة تطوير البرامج Firebase JavaScript SDK، اتّبِع الخطوات التالية:

  1. أنشئ مثيلًا من OAuthProvider باستخدام معرّف مقدّم الخدمة microsoft.com.

    Web

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

    Web

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  2. اختياري: حدِّد مَعلمات OAuth مخصّصة إضافية تريد إرسالها مع طلب OAuth.

    Web

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

    Web

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

    لمعرفة المَعلمات التي تتيحها Microsoft، يُرجى الاطّلاع على مستندات Microsoft OAuth. يُرجى العِلم أنّه لا يمكنك تمرير المَعلمات المطلوبة من Firebase باستخدام setCustomParameters(). هذه المَعلمات هي client_id وresponse_type وredirect_uri وstate وscope وresponse_mode.

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

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

    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'
    });
  3. اختياري: حدِّد نطاقات OAuth 2.0 الإضافية التي تريد طلبها من موفِّر المصادقة، والتي تتعدى الملف الشخصي الأساسي.

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

    لمزيد من المعلومات، يُرجى الرجوع إلى مستندات أذونات Microsoft والموافقة.

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

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

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

    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.
      });
    • لتسجيل الدخول من خلال إعادة التوجيه إلى صفحة تسجيل الدخول، يُرجى الاتصال على signInWithRedirect:

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

    Web

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

    Web

    firebase.auth().signInWithRedirect(provider);

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

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

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

    عند اكتمال العملية بنجاح، يمكن استرداد رمز الوصول OAuth المرتبط بمقدّم الخدمة من firebase.auth.UserCredential object المعروض.

    باستخدام رمز الوصول 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

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

    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.
        });
  6. يمكن استخدام النمط نفسه مع reauthenticateWithPopup/reauthenticateWithRedirect الذي يمكن استخدامه ل retrieving fresh credentials for sensitive operations that require recent login.

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

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

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

إذا كنت بصدد إنشاء تطبيق إضافة Chrome، اطّلِع على دليل "المستندات التي لا تظهر على الشاشة".

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

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

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

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

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

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

Web

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

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

Web

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