إعداد التسجيل وتسجيل الدخول باستخدام حساب Twitter باستخدام Microsoft Azure Active Directory B2C

قبل أن تبدأ استخدم اختر نوع النهجالمحدد لاختيار نوع النهج التي تقوم بإعدادها. يوفر Azure Active Directory B2C طريقتين لتحديد كيفية تفاعل المستخدمين مع تطبيقاتك: من خلال تدفقات محددة مسبقا للمستخدمين أو من خلال سياسات مخصصة قابلة للتكوين بشكل كامل. تختلف الخطوات المطلوبة في هذه المقالة لكل أسلوب.

إشعار

في Azure Active Directory B2C، تم تصميم النُهج المخصصة بشكل أساسي لمعالجة السيناريوهات المعقدة. بالنسبة إلى معظم السيناريوهات، نوصي باستخدام تدفقات المستخدم المضمنة. إذا لم تقم بذلك، تعرف على حزمة بادئ النهج المخصصة في البدء باستخدام النهج المخصصة في Active Directory B2C.

المتطلبات الأساسية

إنشاء تطبيق

لتمكين تسجيل الدخول للمستخدمين الذين لديهم حساب Twitter في Microsoft Azure Active Directory B2C، تحتاج إلى إنشاء تطبيق Twitter. إذا لم يكن لديك حساب Twitter بالفعل، فيمكنك الاشتراك في https://twitter.com/signup. تحتاج أيضاً إلى التقدم للحصول على حساب مطور. لمزيد من المعلومات، راجع طلب الوصول.

  1. سجّل الدخول إلى Twitter Developer Portal باستخدام بيانات اعتماد حساب Twitter الخاص بك.
  2. اختر زر إنشاء مشروع +.
  3. ضمن علامة التبويب اسم المشروع، أدخل اسما مفضلا لمشروعك، ثم حدد الزر التالي.
  4. ضمن علامة التبويب استخدام حالة الأحرف، حدد حالة الاستخدام المفضلة لديك، ثم حدد التالي.
  5. ضمن علامة التبويب وصف المشروع، أدخل وصف المشروع، ثم حدد الزر التالي.
  6. ضمن علامة التبويب اسم التطبيق، أدخل اسما لتطبيقك، مثل azureadb2c، ثم حدد الزر التالي.
  7. ضمن علامة التبويب الرموز المميزة للمفاتيح&، انسخ قيمة مفتاح API ومفتاح API السري. ستستخدم هذه للتكوين لاحقا.
  8. حدد إعدادات التطبيق لفتح إعدادات التطبيق.
  9. في الجزء السفلي من الصفحة، ضمن إعدادات مصادقة المستخدم، حدد إعداد.
  10. ضمن نوع التطبيق، حدد نوع التطبيق المناسب مثل Web App.
  11. ضمن معلومات التطبيق:
    1. بالنسبة إلى عنوان URL لرد الاتصال/إعادة التوجيه، أدخل https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/your-policy-id/oauth1/authresp. إذا كنت تستخدم مجالاً مخصصاً، أدخل https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. استخدم جميع الأحرف الصغيرة عند إدخال اسم المستأجر ومعرف تدفق المستخدم حتى إذا تم تعريفهما بأحرف كبيرة في Microsoft Azure Active Directory B2C. استبدال:
      • your-tenant-name باسم اسم المستأجر الخاص بك.
      • your-domain-name مع المجال المخصص لك.
      • your-policy-id بمعرف تدفق المستخدم الخاص بك. على سبيل المثال، b2c_1a_signup_signin_twitter.
    2. في Website URL أدخل https://your-tenant.b2clogin.com. استبدال your-tenant باسم مستأجرك. على سبيل المثال، https://contosob2c.b2clogin.com. إذا كنت تستخدم مجالاً مخصصاً، أدخل https://your-domain-name.
    3. (اختياري) أدخل عنوان URL لشروط الخدمة، على سبيل المثال http://www.contoso.com/tos. عنوان URL للسياسة هو صفحة تحتفظ بها لتوفير الشروط والأحكام لتطبيقك.
    4. (اختياري) أدخل عنوان URL لنهج الخصوصية، على سبيل المثال http://www.contoso.com/privacy. عنوان URL للنهج هو صفحة تحتفظ بها لتوفير معلومات الخصوصية لتطبيقك.
  12. حدد حفظ.
  1. سجّل الدخول إلى Twitter Developer Portal باستخدام بيانات اعتماد حساب Twitter الخاص بك.
  2. اختر زر إنشاء مشروع +.
  3. ضمن علامة التبويب اسم المشروع، أدخل اسما مفضلا لمشروعك، ثم حدد الزر التالي.
  4. ضمن علامة التبويب استخدام حالة الأحرف، حدد حالة الاستخدام المفضلة لديك، ثم حدد التالي.
  5. ضمن علامة التبويب وصف المشروع، أدخل وصف المشروع، ثم حدد الزر التالي.
  6. ضمن علامة التبويب اسم التطبيق، أدخل اسما لتطبيقك، مثل azureadb2c، ثم حدد الزر التالي.
  7. ضمن علامة تبويب الرموز المميزة & للمفاتيح، انسخ قيمة مفتاح واجهة برمجة التطبيقات و مفتاح واجهة برمجة التطبيقات السري في وقت لاحق. يمكنك استخدام كلاهما لتكوين Twitter كموفر هوية في مستأجر متاجرة عمل-مستهلك Azure AD.
  8. حدد إعدادات التطبيق لفتح إعدادات التطبيق.
  9. في الجزء السفلي من الصفحة، ضمن إعدادات مصادقة المستخدم، حدد إعداد.
  10. ضمن نوع التطبيق، حدد نوع التطبيق المناسب مثل Web App.
  11. ضمن معلومات التطبيق:
    1. بالنسبة إلى عنوان URL لرد الاتصال/إعادة التوجيه، أدخل https://your-tenant.b2clogin.com/your-tenant-name.onmicrosoft.com/your-user-flow-name/oauth1/authresp. إذا كنت تستخدم مجالاً مخصصاً، أدخل https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. استخدم جميع الأحرف الصغيرة عند إدخال اسم المستأجر ومعرف تدفق المستخدم حتى إذا تم تعريفهما بأحرف كبيرة في Microsoft Azure Active Directory B2C. استبدال:
      • your-tenant-name باسم اسم المستأجر الخاص بك.
      • your-domain-name مع المجال المخصص لك.
      • your-user-flow-name بمعرف تدفق المستخدم الخاص بك. على سبيل المثال، b2c_1_signup_signin_twitter.
    2. في Website URL أدخل https://your-tenant.b2clogin.com. استبدال your-tenant باسم مستأجرك. على سبيل المثال، https://contosob2c.b2clogin.com. إذا كنت تستخدم مجالاً مخصصاً، أدخل https://your-domain-name.
    3. أدخل عنوان URL لـ Terms of service، على سبيل المثال http://www.contoso.com/tos. عنوان URL للسياسة هو صفحة تحتفظ بها لتوفير الشروط والأحكام لتطبيقك.
    4. أدخل عنوان URL لـ Privacy policy مثل http://www.contoso.com/privacy. عنوان URL للنهج هو صفحة تحتفظ بها لتوفير معلومات الخصوصية لتطبيقك.
  12. حدد حفظ.

قم بتكوين Twitter كموفر هوية

  1. سجّل الدخول إلى مدخل Azure بصفتك المسؤول العام عن مستأجر Azure AD B2C.
  2. إذا كان لديك حق الوصول إلى عدة مستأجرين، فحدد رمز الإعدادات في القائمة العلوية للتبديل إلى مستأجر Azure AD B2C من قائمة Directories + subscriptions.
  3. اختر All services في الزاوية العلوية اليسرى من مدخل Microsoft Azure، ثم ابحث عن Azure AD B2C وحدده.
  4. حدد Identity providers ثم حدد Twitter.
  5. أدخل اسمًا. على سبيل المثال، Twitter.
  6. في Client ID أدخل API Key لتطبيق Twitter الذي أنشأته مسبقاً.
  7. في Client secret أدخل API key secret الذي سجلته.
  8. حدد حفظ.

أضف موفر هوية Twitter إلى تدفق المستخدم

في هذه المرحلة، تم إعداد موفر هوية Twitter، لكنه غير متاح بعد في أي من صفحات تسجيل الدخول. لإضافة موفر هوية Twitter إلى تدفق المستخدم:

  1. في مستأجر Azure AD B2C، حدّد User flows.
  2. حدد تدفق المستخدم الذي تريد إضافة موفر هوية Twitter.
  3. ضمن Social identity providers حدد Twitter.
  4. حدد حفظ.

اختبار تدفق المستخدم

  1. لاختبار سياستك، حدّد "Run user flow".
  2. للتطبيق، حدد تطبيق الويب المسمى testapp1 الذي قمت بتسجيله مسبقًا. عنوان URL الرد يجب أن يعرض https://jwt.ms.
  3. حدّد الزر تشغيل تدفق المستخدم.
  4. من صفحة الاشتراك أو تسجيل الدخول، حدد Twitter لتسجيل الدخول باستخدام حساب Twitter.

إنشاء مفتاح نهج

تحتاج إلى تخزين المفتاح السري الذي قمت بتسجيله مسبقاً لتطبيق Twitter في مستأجر متاجرة عمل-مستهلك Azure AD.

  1. سجل الدخول إلى مدخل Azure.
  2. إذا كان لديك حق الوصول إلى عدة مستأجرين، فحدد رمز الإعدادات في القائمة العلوية للتبديل إلى مستأجر Azure AD B2C من قائمة Directories + subscriptions.
  3. في مدخل Microsoft Azure، ابحث عن Azure AD B2C وحددها.
  4. في القائمة اليسرى ضمن نهج، حدد إطار عمل تجربة الهوية.
  5. حدد Policy Keys ثم حدد Add.
  6. بالنسبة للخيارات، اختر Manual .
  7. أدخِل اسمًا لمفتاح النهج. على سبيل المثال، TwitterSecret. تتم إضافة البادئة B2C_1A_ تلقائيًا إلى اسم مفتاحك.
  8. بالنسبة إلى البيانات السرية، أدخل قيمة مفتاح واجهة برمجة التطبيقات السرية التي سجلتها مسبقا.
  9. بالنسبة إلى Key usage، حدد Signature.
  10. انقر فوق إنشاء.

قم بتكوين Twitter كموفر هوية

لتمكين المستخدمين من تسجيل الدخول باستخدام حساب Twitter، تحتاج إلى تعريف الحساب كموفر مطالبات يمكن لـ Microsoft Azure Active Directory B2C التواصل معه من خلال نقطة نهاية. توفر نقطة النهاية مجموعة من المطالبات التي يتم استخدامها عن طريق Azure AD B2C للتحقق من مصادقة مستخدمٍ معينٍ.

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

  1. افتح TrustFrameworkExtensions.xml.

  2. ابحث عن عنصر ClaimsProviders. إذا لم يكن موجودًا، فقم بإضافته تحت عنصر الجذر.

  3. قم بإضافة ClaimsProvider جديد على النحو التالي:

    <ClaimsProvider>
      <Domain>twitter.com</Domain>
      <DisplayName>Twitter</DisplayName>
      <TechnicalProfiles>
        <TechnicalProfile Id="Twitter-OAuth1">
          <DisplayName>Twitter</DisplayName>
          <Protocol Name="OAuth1" />
          <Metadata>
            <Item Key="ProviderName">Twitter</Item>
            <Item Key="authorization_endpoint">https://api.twitter.com/oauth/authenticate</Item>
            <Item Key="access_token_endpoint">https://api.twitter.com/oauth/access_token</Item>
            <Item Key="request_token_endpoint">https://api.twitter.com/oauth/request_token</Item>
            <Item Key="ClaimsEndpoint">https://api.twitter.com/1.1/account/verify_credentials.json?include_email=true</Item>
            <Item Key="ClaimsResponseFormat">json</Item>
            <Item Key="client_id">Your Twitter application API key</Item>
          </Metadata>
          <CryptographicKeys>
            <Key Id="client_secret" StorageReferenceId="B2C_1A_TwitterSecret" />
          </CryptographicKeys>
          <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="issuerUserId" PartnerClaimType="user_id" />
            <OutputClaim ClaimTypeReferenceId="displayName" PartnerClaimType="screen_name" />
            <OutputClaim ClaimTypeReferenceId="email" />
            <OutputClaim ClaimTypeReferenceId="identityProvider" DefaultValue="twitter.com" />
            <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" />
          </OutputClaims>
          <OutputClaimsTransformations>
            <OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName" />
            <OutputClaimsTransformation ReferenceId="CreateUserPrincipalName" />
            <OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId" />
            <OutputClaimsTransformation ReferenceId="CreateSubjectClaimFromAlternativeSecurityId" />
          </OutputClaimsTransformations>
          <UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
        </TechnicalProfile>
      </TechnicalProfiles>
    </ClaimsProvider>
    
  4. استبدل قيمة client_id مفتاح API الذي سجلته مسبقاً.

  5. احفظ الملف.

إضافة الرحلة الخاصة بالمستخدم

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

  1. من حزمة البداية، افتح المَلف TrustFrameworkBase.xml.
  2. ابحث عن المحتويات الكاملة لعنصر UserJourney الذي يتضمن Id="SignUpOrSignIn" وانسخها.
  3. افتح TrustFrameworkExtensions.xml وابحث عن عنصر UserJourneys. إذا لم يكن العنصر موجودًا، فأضف عنصرًا.
  4. الصق المحتوى الكامل لعنصر UserJourney الذي نسخته كعنصر تابع لعنصر UserJourneys.
  5. أعِد تسمية المعرف الخاص بالرحلة. على سبيل المثال، Id="CustomSignUpSignIn".

إضافة موفر الهوية إلى الرحلة

الآن بعد أن أصبحت لديك رحلة مستخدم، أضف موفر الهوية الجديد إلى رحلة المستخدم. تضيف أولاً الزر الخاص بتسجيل الدخول، ثم تربط الزر بإجراءٍ ما. الإجراء هو ملف التعريف الفني الذي قمت بإنشائه مسبقًا.

  1. ابحث عن عنصر خطوة التنسيق الذي يتضمن Type="CombinedSignInAndSignUp"، أو Type="ClaimsProviderSelection" في الرحلة. عادةَ ما تكون الخطوة الأولى للتزامن. يحتوي عنصر ClaimsProviderSelections على قائمة موفري الهوية التي يمكن للمستخدم تسجيل الدخول من خلالها. يتحكم ترتيب العناصر في ترتيب أزرار تسجيل الدخول التي يتم عرضها للمستخدم. أضف عنصر XML ClaimsProviderSelection. تعيين قيمة TargetClaimsExchangeId إلى اسم مألوف.

  2. في خطوة التنسيق التالية، أضف عنصر ClaimsExchange . قم بتعيين المعرف إلى قيمة معرف تبادل المطالبات الهدف. وقم بتحديث قيمة TechnicalProfileReferenceId لمعرف ملف التعريف الفني الذي أنشأته مسبقاً.

يوضح XML التالي أول خطوتين للتنسيق لرحلة المستخدم من خلال موفر الهوية:

<OrchestrationStep Order="1" Type="CombinedSignInAndSignUp" ContentDefinitionReferenceId="api.signuporsignin">
  <ClaimsProviderSelections>
    ...
    <ClaimsProviderSelection TargetClaimsExchangeId="TwitterExchange" />
  </ClaimsProviderSelections>
  ...
</OrchestrationStep>

<OrchestrationStep Order="2" Type="ClaimsExchange">
  ...
  <ClaimsExchanges>
    <ClaimsExchange Id="TwitterExchange" TechnicalProfileReferenceId="Twitter-OAuth1" />
  </ClaimsExchanges>
</OrchestrationStep>

تكوين نهج جهة الاعتماد

يحدد نهج جهة الاعتماد، على سبيل المثال SignUpSignIn.xml، رحلة المستخدم التي سيقوم Azure AD B2C بتنفيذها. ابحث عن العنصر DefaultUserJourney ضمن جهة الاعتماد. قم بتحديث ReferenceId ليطابق معرّف رحلة المستخدم، الذي أضفت فيه موفر الهوية.

في المثال التالي، بالنسبة إلى CustomSignUpSignInرحلة المستخدم، تم تعيين ReferenceId إلى CustomSignUpSignIn:

<RelyingParty>
  <DefaultUserJourney ReferenceId="CustomSignUpSignIn" />
  ...
</RelyingParty>

تحميل النهج المخصص

  1. سجل الدخول إلى مدخل Azure.
  2. حدد مرشح «الدليل+الاشتراك»في القائمة العلوية، ثم حدد الدليل الذي يحتوي على مستأجر Azure AD B2C.
  3. في مدخل Microsoft Azure، ابحث عن Azure AD B2C وحددها.
  4. ضمن Policies، حدد Identity Experience Framework.
  5. حدّد Upload Custom Policy، ثم قم بتحميل ملفي النهج اللذين قمت بتغييرهما بالترتيب التالي: نهج التوسيع، على سبيل المثال TrustFrameworkExtensions.xml، ثم نهج جهة الاعتماد، مثل SignUpSignIn.xml.

اختبار النهج المخصص لديك

  1. حدد نهج جهة الاعتماد، على سبيل المثالB2C_1A_signup_signin.
  2. للوصول إلى التطبيق، حدّد تطبيق الويب الذي قمت بتسجيله مسبقاً. عنوان URL الرد يجب أن يعرض https://jwt.ms.
  3. حدّدالتشغيل الآن الزر.
  4. من صفحة الاشتراك أو تسجيل الدخول، حدد Twitter لتسجيل الدخول باستخدام حساب Twitter.

إذا نجحت عملية تسجيل الدخول، فستتم إعادة توجيه المستعرض الخاص بك إلى، https://jwt.ms، والذي يعرض محتويات الرمز المميز الذي تم إرجاعه بواسطة Azure AD B2C.

تلميح

إذا كنت تواجه خطأ unauthorized في أثناء اختبار موفر الهوية هذا، فتأكد من استخدام مفتاح واجهة برمجة تطبيقات Twitter الصحيح ومفتاح API السري، أو حاول التقدم بطلب للحصول على وصول مرتفع. نوصي أيضًا بإلقاء نظرة على بنية مشاريع Twitter، إذا قمت بتسجيل تطبيقك قبل توفر الميزة.