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

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

قبل ان تبدأ

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

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

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

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

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

  1. إنشاء مثيل OAuthProvider باستخدام ID مزود microsoft.com.

    إصدار الويب 9

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

    إصدار الويب 8

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

    إصدار الويب 9

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

    إصدار الويب 8

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

    لدعم المعلمات Microsoft، راجع وثائق Microsoft أوث . ملاحظة أنه لا يمكنك تمرير المعلمات المطلوبة Firebase مع setCustomParameters() . هذه المعلمات CLIENT_ID، RESPONSE_TYPE، redirect_uri، والدولة، ونطاق response_mode.

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

    إصدار الويب 9

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

    إصدار الويب 8

    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. اختياري: حدد أوث إضافية نطاقات 2.0 وراء الشخصية الأساسية والتي ترغب في طلب من مزود المصادقة.

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

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

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

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

    إصدار الويب 9

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

    إصدار الويب 8

    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 :

    إصدار الويب 9

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

    إصدار الويب 8

    firebase.auth().signInWithRedirect(provider);

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

    إصدار الويب 9

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

    إصدار الويب 8

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

    على الانتهاء بنجاح، والحصول أوث رمز المرتبطة مزود يمكن استرجاعها من firebase.auth.UserCredential الكائن التي تم إرجاعها.

    باستخدام رمز وصول أوث، يمكنك استدعاء API مايكروسوفت الرسم البياني .

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

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

    وخلافا لغيرها من مقدمي الخدمات التي يدعمها Firebase أصيل، مايكروسوفت لا توفر URL الصور وبدلا من ذلك، البيانات الثنائية للصورة الشخصية لابد من طلب عن طريق مايكروسوفت الرسم البياني API .

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

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

    إصدار الويب 9

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

    إصدار الويب 8

    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 والتي يمكن استخدامها لاسترداد أوراق اعتماد جديدة لعمليات الحساسة التي تتطلب تسجيل الدخول مؤخرا.

    إصدار الويب 9

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

    إصدار الويب 8

    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 ، فيجب عليك إضافة معرف إضافة Chrome الخاص بك:

  1. فتح مشروعك في وحدة التحكم Firebase .
  2. في قسم مصادقة، افتح صفحة تسجيل الدخول الأسلوب.
  3. إضافة URI كما يلي إلى قائمة المصرح مجالات:
    chrome-extension://CHROME_EXTENSION_ID

عمليات المنبثقة فقط ( signInWithPopup ، linkWithPopup ، و reauthenticateWithPopup ) متاحة لملحقات كروم، وملحقات كروم لا يمكن استخدام HTTP الموجهات. يجب عليك استدعاء هذه الطرق من برنامج نصي لصفحة الخلفية بدلاً من نافذة منبثقة لإجراء المستعرض ، حيث ستلغي نافذة المصادقة المنبثقة نافذة إجراء المتصفح المنبثقة. ويمكن استخدام الأساليب المنبثقة الوحيد في التمديدات باستخدام المانيفستو V2 . الأحدث المانيفستو V3 يسمح فقط مخطوطات الخلفية في شكل عمال الخدمات، والتي لا يمكن تنفيذ العمليات المنبثقة على الإطلاق.

في الظاهر جعل ملف تمديد كروم الخاص بك من أن قمت بإضافة https://apis.google.com URL إلى content_security_policy allowlist.

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

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

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

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

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

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

إصدار الويب 9

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

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

إصدار الويب 8

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