قم بتكوين خيارات المصادقة في تطبيق أحادي الصفحة باستخدام Azure AD B2C

توضح هذه المقالة كيفية تخصيص تجربة مصادقةAzure Active Directory B2C (Azure AD B2C) وتحسينها لتطبيقك أحادي الصفحة (SPA).

قبل أن تبدأ، تعرف على المقالة التالية:تكوين المصادقة في نموذج تطبيق ويب.

استخدام مجال مخصص

باستخدام custom domain، يمكنك وضع علامة تجارية كاملة على عنوان URL للمصادقة. من منظور المستخدم، يظل المستخدمون في المجال الخاص بك أثناء عملية المصادقة، بدلاً من إعادة توجيههم إلى اسم مجال Microsoft Azure Active Directory B2C b2clogin.com.

لإزالة كافة الإشارات إلى "b2c" في عنوان URL، يمكنك أيضاً استبدال اسم مستأجر B2C الخاص بك، contoso.onmicrosoft.com، في عنوان URL لطلب المصادقة مع معرف المستأجر GUID. على سبيل المثال، يمكنك تغيير https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ إلى https://account.contosobank.co.uk/<tenant ID GUID>/.

لاستخدام مجال مخصص ومعرف المستأجر الخاص بك في عنوان URL للمصادقة، اتبع الإرشادات الموجودة في تمكين المجالات المخصصة. ابحث عن كائن تكوين مكتبة مصادقة Microsoft (MSAL) وقم بتغيير المراجعوالسلطات المعروفة لاستخدام اسم المجال المخصص ومعرف المستأجر.

تُظهر شفرة JavaScript التالية كائن تكوين MSAL قبل التغيير:

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

تُظهر شفرة JavaScript التالية كائن تكوين MSA بعد التغيير:

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.domain.com"],
      ...
    },
  ...
}

ملء اسم تسجيل الدخول مسبقًا

أثناء قيام المستخدم بتسجيل الدخول، قد يستهدف تطبيقك مستخدماً معيناً. عندما يستهدف أحد التطبيقات مستخدماً، يمكنه تحديد معلمة طلب البحث login_hint في طلب التفويض باسم تسجيل دخول المستخدم. يملأ Microsoft Azure Active Directory B2C اسم تسجيل الدخول تلقائياً، ويحتاج المستخدم إلى توفير كلمة المرور فقط.

لملء اسم تسجيل الدخول مسبقاً، قم بما يلي:

1. لو كنت تستخدم نهجًا مخصصًا، فأضف مطالبة الإدخال المطلوبة، كما هو موضح في إعداد تسجيل الدخول المباشر.

2. قم بإنشاء كائن لتخزين login_hint، وقم بتمرير هذا الكائن إلىأسلوب MSAL loginPopup().

   let loginRequest = {
       loginHint: "bob@contoso.com"
   }
   
   myMSALObj.loginPopup(loginRequest);
   

قم بتحديد موفر الهوية مسبقاً

إذا قمت بتكوين رحلة «sign-in» لتطبيقك من أجل تضمين الحسابات الاجتماعية، مثل Facebook أو LinkedIn أو Google، يمكنك تحديد المعلمة domain_hint. توفر معلمة الاستعلام تلميح إلى Azure AD B2C حول موفر الهوية الاجتماعية التي يجب استخدامها لـ «sign-in». على سبيل المثال، إذا حدد التطبيق domain_hint=facebook.com، ينتقل تدفق تسجيل الدخول مباشرة إلى صفحة تسجيل الدخول إلى Facebook.

لإعادة توجيه المستخدمين إلى موفر هوية خارجي، قم بما يلي:

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

2. قم بإنشاء كائن لتخزينextraQueryParameters، وقم بتمرير هذا الكائن إلى أسلوب MSAL loginPopup().

   let loginRequest = {
        extraQueryParameters: {domain_hint: 'facebook.com'}
   }
   
   myMSALObj.loginPopup(loginRequest);
   

تحديد اللغة لواجهة المستخدم

يتيح تخصيص اللغة في Microsoft Azure Active Directory B2C تدفق المستخدم لاستيعاب مجموعة متنوعة من اللغات لتناسب احتياجات عملائك. لمزيد من المعلومات، راجع تخصيص اللغة.

لتعيين اللغة المفضلة، قم بما يلي:

1. تكوين تخصيص اللغة.

2. قم بإنشاء كائن لتخزين extraQueryParameters، وقم بتمرير هذا الكائن إلى أسلوب MSAL loginPopup.

   let loginRequest = {
        extraQueryParameters: {ui_locales: 'en-us'}
   }
   
   myMSALObj.loginPopup(loginRequest);
   

تمرير معلمة سلسلة استعلام مخصصة

باستخدام النُهج المخصصة، يمكنك تمرير معلمة سلسلة طلب بحث مخصصة. من الأمثلة الجيدة على حالة الاستخدام عندما تريد تغيير محتوى الصفحة ديناميكياً.

لتمرير معلمة سلسلة طلب بحث مخصصة، قم بما يلي:

1. تكوينعنصر ContentDefinitionParameters.

2. قم بإنشاء كائن لتخزين extraQueryParameters، وقم بتمرير هذا الكائن إلى أسلوب MSAL loginPopup.

   let loginRequest = {
        extraQueryParameters: {campaignId: 'germany-promotion'}
   }
   
   myMSALObj.loginPopup(loginRequest);
   

تمرير تلميح الرمز المميز للمعرف

يمكن لتطبيق الطرف المعتمد إرسال رمز ويب JSON وارد (JWT) كجزء من طلب تفويض OAuth2. الرمز المميز الوارد هو تلميح حول المستخدم أو طلب التفويض. يتحقق Microsoft Azure Active Directory B2C من صحة الرمز المميز ثم يستخرج المطالبة.

لتضمين تلميح رمز مميز للمعرف في طلب المصادقة، قم بما يلي:

1. في سياستك المخصصة، حدد ملف تعريف تقني تلميح رمز مميز للمعرف.

2. قم بإنشاء كائن لتخزين extraQueryParameters، وقم بتمرير هذا الكائن إلى أسلوب MSAL loginPopup.

   let loginRequest = {
        extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
   }
   
   myMSALObj.loginPopup(loginRequest);
   

تأمين إعادة توجيه تسجيل خروجك

بعد تسجيل الخروج، تتم إعادة توجيه المستخدم إلى URI المحدد في المعلمة post_logout_redirect_uri، بغض النظر عن عناوين URL الخاصة بالرد التي تم تحديدها للتطبيق. ومع ذلك، إذا تم تمرير id_token_hint صالح وتم تشغيل الرمز المميز لمعرف الطلب في طلبات تسجيل الخروج ، يتحقق Azure AD B2C من أن قيمة post_logout_redirect_uri تطابق أحد عناوين URI لإعادة التوجيه المهيأة للتطبيق قبل تنفيذ إعادة توجيه. إذا لم يتم تكوين عنوان URL مطابق للرد للتطبيق، فسوف يتم عرض رسالة خطأ ولن تتم إعادة توجيه المستخدم.

لدعم إعادة توجيه تسجيل الخروج الآمن URI، تتبع الخطوات التالية:

1. قم بإنشاء متغير ممكن الوصول إليه عالميًّا لتخزين ملفid_token.

   let id_token = "";
   

2. في دالة MSALhandleResponse، قم بتحليل من الكائن إلىid_tokenauthenticationResultid_tokenالمتغير.

   function handleResponse(response) {
       if (response !== null) {
           setAccount(response.account);
           id_token = response.idToken;
       } else {
           selectAccount();
       }
   }
   

3. في signOutالوظيفة، أضفid_token_hintالمعلمة إلىكائن logoutRequest.

   function signOut() {
       const logoutRequest = {
           postLogoutRedirectUri: msalConfig.auth.redirectUri,
           //set id_token_hint to the id_token value
           idTokenHint : id_token,
           mainWindowRedirectUri: msalConfig.auth.redirectUri
       };
       myMSALObj.logoutPopup(logoutRequest);
   }
   

في المثال أعلاه، سيكون post_logout_redirect_uri الذي تم تمريره في طلب تسجيل الخروج بالتنسيقhttps://your-app.com/:. . يجب إضافة عنوان URL هذا إلى عناوين URL للرد على تسجيل التطبيق.

تفعيل الخروج الفردي

يستخدم تسجيل الخروج الفردي في Azure AD B2C تسجيل خروج القناة الأمامية OpenId Connect لإجراء طلبات تسجيل الخروج لجميع التطبيقات التي قام المستخدم بتسجيل الدخول إليها عبر Azure AD B2C.

يتم إجراء طلبات الخروج هذه من صفحة تسجيل الخروج Azure AD B2C، في إطار Iframe المخفي. تُنشئ إطارات Iframes طلبات HTTP لجميع نقاط نهاية تسجيل خروج القناة الأمامية المسجلة للتطبيقات التي سجلها Azure AD B2C خلال تسجيل الدخول.

لا بد أن تقوم نقطة نهاية تسجيل الخروج الخاصة بك لكل تطبيق باستدعاء. يجب عليك أيضاً تكوينMSAL بشكل صريح للتشغيل داخل إطار Iframe في هذا السيناريو من خلال الإعداد allowRedirectInIframeإلىtrue.

يتم تعيين نموذج التعليمات البرمجية التالي allowRedirectInIframeإلىtrue:

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

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

قم بالتعرف على المزيد حول خيارات تكوين MSAL.js.