مشاركة عبر

تخصيص مدخل مطور APIM على WordPress

  • مقالة

ينطبق على: المطور | أساسي | قياسي | قسط

توضح هذه المقالة كيفية تكوين مكون إضافي لمدخل مطور مفتوح المصدر (معاينة) لتخصيص مدخل مطور APIM على WordPress. باستخدام المكون الإضافي، قم بتحويل أي موقع WordPress إلى مدخل مطور. استفد من قدرات الموقع في WordPress لتخصيص وإضافة ميزات إلى مدخل المطور بما في ذلك الترجمة والقوائم القابلة للطي والتوسيع وأوراق الأنماط المخصصة وتنزيلات الملفات والمزيد.

في هذه المقالة، يمكنك إنشاء موقع WordPress على Azure App Service وتكوين المكون الإضافي لمدخل المطور على موقع WordPress. تم تكوين معرف Microsoft Entra للمصادقة على موقع WordPress ومدخل المطور.

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

  • مثيل API Management. إذا لزم الأمر، قم بإنشاء مثيل.

    إشعار

    حاليا، المكون الإضافي غير مدعوم في مستويات API Management v2.

  • تمكين ونشر مدخل المطور. للحصول على خطوات، راجع البرنامج التعليمي: الوصول إلى مدخل المطور وتخصيصه.
  • أذونات لإنشاء تسجيل تطبيق في مستأجر Microsoft Entra المقترن باشتراك Azure الخاص بك.
  • ملفات التثبيت لمكون WordPress الإضافي لمدخل المطور ونسق WordPress المخصص من مستودع المكون الإضافي. قم بتنزيل الملفات المضغوطة التالية من مجلد dist في المستودع:
    • apim-devportal.zip - ملف المكون الإضافي
    • twentytwentyfour.zip - ملف النسق

الخطوة 1: إنشاء WordPress على App Service

لهذا السيناريو، يمكنك إنشاء موقع WordPress مدار مستضاف على Azure App Service. فيما يلي خطوات موجزة:

  1. في مدخل Microsoft Azure، انتقل إلى https://portal.azure.com/#create/WordPress.WordPress.

  2. في صفحة إنشاء WordPress على App Service ، في علامة التبويب Basics ، أدخل تفاصيل المشروع.

    سجل اسم مستخدم مسؤول WordPress وكلمة المرور في مكان آمن. بيانات الاعتماد هذه مطلوبة لتسجيل الدخول إلى موقع مسؤول WordPress وتثبيت المكون الإضافي في خطوة لاحقة.

  3. في علامة التبويب الوظائف الإضافية:

    1. حدد القيم الافتراضية الموصى بها للبريد الإلكتروني باستخدام Azure Communication Services وAzure CDN وAzure Blob Storage.
    2. في الشبكة الظاهرية، حدد إما قيمة جديدة أو شبكة ظاهرية موجودة.

  4. في علامة التبويب Deployment ، اترك Add staging slot غير محددة.

  5. حدد Review + create لتشغيل التحقق النهائي.

  6. حدد Create لإكمال نشر خدمة التطبيق.

قد يستغرق نشر خدمة التطبيق عدة دقائق.

الخطوة 2: إنشاء تسجيل تطبيق Microsoft Entra جديد

في هذه الخطوة، أنشئ تطبيق Microsoft Entra جديدا. في الخطوات اللاحقة، يمكنك تكوين هذا التطبيق كموفر هوية للمصادقة على خدمة التطبيق الخاصة بك وإلى مدخل المطور في مثيل APIM الخاص بك.

  1. في مدخل Microsoft Azure، انتقل إلى App registrations>+ New registration.

  2. أدخل اسم التطبيق الجديد، وفي أنواع الحسابات المدعومة، حدد الحسابات في هذا الدليل التنظيمي فقط. حدد تسجيل.

  3. في صفحة نظرة عامة، انسخ معرف التطبيق (العميل) ومعرف الدليل (المستأجر) وقم بتخزينهما بأمان. تحتاج إلى هذه القيم في خطوات لاحقة لتكوين المصادقة إلى مثيل APIM وخدمة التطبيق. لقطة شاشة لصفحة نظرة عامة لتسجيل التطبيق في المدخل.

  4. في القائمة اليسرى، ضمن Manage، حدد Authentication>+ Add a platform.

  5. في صفحة تكوين الأنظمة الأساسية، حدد ويب.

  6. في صفحة Configure Web ، أدخل عنوان URI لإعادة التوجيه التالي، واستبدل اسم خدمة التطبيق، وحدد Configure:

    https://app-service-name>.azurewebsites.net/.auth/login/aad/callback

  7. حدد + إضافة نظام أساسي مرة أخرى. حدد تطبيق أحادي الصفحة.

  8. في صفحة Configure single-page application ، أدخل عنوان URI لإعادة التوجيه التالي، واستبدل اسم مثيل API Management، وحدد Configure:

    https://<apim-instance-name>.developer.azure-api.net/signin

  9. في صفحة Authentication ، ضمن Single-page application، حدد Add URI وأدخل URI التالي، واستبدل اسم مثيل APIM الخاص بك:

    https://<apim-instance-name>.developer.azure-api.net/

  10. ضمن المنح الضمنية والتدفقات المختلطة، حدد رموز المعرف المميزة وحدد حفظ.

  11. في القائمة اليسرى، ضمن Manage، حدد Token configuration> + Add optional claim.

  12. في صفحة إضافة مطالبة اختيارية، حدد معرف ثم حدد المطالبات التالية: البريد الإلكتروني، family_name، given_name، onprem_sid، preferred_username، upn. حدد إضافة.

  13. عند المطالبة، حدد تشغيل البريد الإلكتروني Microsoft Graph، إذن ملف التعريف. حدد إضافة.

  14. في القائمة اليمنى، ضمن إدارة حدد أذونات واجهة برمجة التطبيقات وتأكد من وجود أذونات Microsoft Graph التالية: البريد الإلكتروني، ملف التعريف، User.Read.

    لقطة شاشة لأذونات واجهة برمجة التطبيقات في المدخل.

  15. في القائمة اليسرى، ضمن Manage، حدد Certificates and secrets> + New client secret.

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

  17. من القائمة اليسرى، في خانة "Manage"، حدد "Authentication". لاحظ معرف التطبيق الافتراضي URI. إضافة نطاقات مخصصة اختياريا إذا لزم الأمر.

الخطوة 3: تمكين المصادقة على خدمة التطبيق

في هذه الخطوة، أضف تسجيل تطبيق Microsoft Entra كموفر هوية للمصادقة إلى خدمة تطبيق WordPress.

  1. في المدخل، انتقل إلى خدمة تطبيق WordPress.
  2. في القائمة اليسرى، ضمن Settings، حدد Authentication>Add identity provider.
  3. في علامة التبويب Basics ، في Identity provider، حدد Microsoft.
  4. ضمن تسجيل التطبيق، حدد توفير تفاصيل تسجيل تطبيق موجود.
    1. أدخل معرف التطبيق (العميل) وسر العميل من تسجيل التطبيق الذي قمت بإنشائه في الخطوة السابقة.
    2. في عنوان URL المصدر، أدخل أي من القيم التالية لنقطة نهاية المصادقة: https://login.microsoftonline.com/<tenant-id> أو https://sts.windows.net/<tenantid>. استبدل <tenant-id> بمعرف الدليل (المستأجر) من تسجيل التطبيق.

      هام

      لا تستخدم نقطة نهاية الإصدار 2.0 لعنون URL المصدر (عنوان URL ينتهي ب /v2.0).

  5. في جمهور الرمز المميز المسموح به، أدخل معرف التطبيق URI من تسجيل التطبيق. مثال:api://<app-id>.
  6. ضمن عمليات التحقق الإضافية، حدد القيم المناسبة للبيئة الخاصة بك، أو استخدم القيم الافتراضية.
  7. اقبل القيم الافتراضية للإعدادات المتبقية وحدد إضافة.

تتم إضافة موفر الهوية إلى خدمة التطبيق.

الخطوة 4: تمكين المصادقة إلى مدخل مطور APIM

تكوين نفس تسجيل تطبيق Microsoft Entra كموفر هوية لمدخل مطور APIM.

  1. في المدخل، انتقل إلى مثيل API Management.

  2. في القائمة اليسرى، ضمن مدخل المطور، حدد الهويات> + إضافة.

  3. في صفحة Add identity provider ، حدد Azure Active Directory (Microsoft Entra ID).

  4. أدخل معرف العميل وسر العميل وقيم مستأجر Signin من تسجيل التطبيق الذي قمت بإنشائه في خطوة سابقة. مستأجر Signin هو معرف الدليل (المستأجر) من تسجيل التطبيق.

  5. في مكتبة العميل، حدد MSAL.

  6. اقبل القيم الافتراضية للإعدادات المتبقية وحدد إضافة.

  7. أعد نشر مدخل المطور لتطبيق التغييرات.

  8. اختبر المصادقة عن طريق تسجيل الدخول إلى مدخل المطور في عنوان URL التالي، واستبدال اسم مثيل APIM الخاص بك: https://<apim-instance-name>.developer.azure-api.net/signin. حدد زر Azure Active Directory (Microsoft Entra ID) في الأسفل لتسجيل الدخول.

    عند فتحه للمرة الأولى، قد تتم مطالبتك بالموافقة على أذونات محددة.

الخطوة 5: تكوين إعدادات مدخل المطور في APIM

قم بتحديث إعدادات مدخل المطور في مثيل APIM لتمكين CORS وتضمين موقع خدمة التطبيق كأصل مدخل.

  1. في مدخل Azure، انتقل إلى مثيل API Management الخاص بك.
  2. في القائمة اليسرى، ضمن مدخل Developer، حدد Portal overview.
  3. في علامة التبويب نظرة عامة على المدخل، حدد تمكين CORS.
  4. في القائمة اليسرى، ضمن مدخل المطور، حدد إعدادات المدخل.
  5. في علامة تبويب تكوين المدخل المستضاف ذاتيا، أدخل اسم مضيف موقع WordPress على App Service كأصل مدخل، واستبدل اسم خدمة التطبيق في عنوان URL التالي: https://<yourapp-service-name>.azurewebsites.net
  6. أعد نشر مدخل المطور لتطبيق التغييرات.

قم أيضا بتحديث تكوين النهج cors في مثيل APIM لإضافة موقع خدمة التطبيق كأصل مسموح به. هذه القيمة مطلوبة للسماح باستدعاءات من وحدة تحكم اختبار مدخل المطور على موقع WordPress.

أضف القيمة التالية origin في تكوين النهج الخاص بك cors :

<cors ...>
    <allowed-origins>
        [...]
        <origin>https://<yourapp-service-name>.azurewebsites.net</origin>
    </allowed-origins>
</cors>

تعرف على المزيد حول كيفية تعيين النهج أو تحريرها.

الخطوة 6: انتقل إلى موقع مسؤول WordPress وقم بتحميل النسق المخصص

في هذه الخطوة، يمكنك تحميل النسق المخصص لمدخل مطور APIM إلى موقع مسؤول WordPress.

هام

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

  1. افتح موقع ويب مسؤول WordPress على عنوان URL التالي، واستبدل اسم خدمة التطبيق: http://<app-service-name>.azurewebsites.net/wp-admin

    عند فتحه للمرة الأولى، قد تتم مطالبتك بالموافقة على أذونات محددة.

  2. سجل الدخول إلى موقع مسؤول WordPress باستخدام اسم المستخدم وكلمة المرور التي أدخلتها أثناء إنشاء WordPress على App Service.

  3. في القائمة اليسرى، حدد نسق المظهر>ثم إضافة نسق جديد.

  4. حدد تحميل النسق. حدد Choose File لتحميل ملف نسق نسق مدخل API Management الذي قمت بتنزيله مسبقا. حدد تثبيت الآن.

  5. في الشاشة التالية، حدد استبدال نشط مع تحميل.

  6. إذا طلب منك ذلك، فحدد تنشيط.

إشعار

إذا تضمن موقع WordPress المكون الإضافي للتخزين المؤقت، فقم بإلغاء تحديد ذاكرة التخزين المؤقت بعد تنشيط النسق للتأكد من أن التغييرات سارية المفعول.

الخطوة 7: تثبيت المكون الإضافي لمدخل المطور

  1. في موقع مسؤول WordPress، في القائمة اليسرى، حدد المكونات>الإضافية إضافة مكون إضافي جديد.
  2. حدد تحميل المكون الإضافي. حدد Choose File لتحميل ملف مضغوط لمدخل مطور APIM (apim-devportal.zip) الذي قمت بتنزيله مسبقا. حدد تثبيت الآن.
  3. بعد التثبيت الناجح، حدد تنشيط المكون الإضافي.
  4. في القائمة اليسرى، حدد مدخل مطور إدارة واجهة برمجة تطبيقات Azure.
  5. في صفحة إعدادات APIM، أدخل الإعدادات التالية وحدد حفظ التغييرات:
    • اسم خدمة APIM - اسم مثيل APIM
    • تمكين إنشاء صفحات افتراضية وإنشاء قائمة تنقل

الخطوة 8: إضافة ورقة أنماط مخصصة

إضافة ورقة أنماط مخصصة لمدخل مطور APIM.

  1. في موقع مسؤول WordPress، في القائمة اليمنى، حدد نسق المظهر>.

  2. حدد تخصيص ثم انتقل إلى أنماط.

  3. حدد أيقونة القلم الرصاص (تحرير الأنماط).

  4. في جزء الأنماط، حدد المزيد (ثلاث نقاط) >CSS إضافية.

  5. في Additional CSS، أدخل CSS التالية:

    .apim-table {
  width: 100%;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  border-spacing: 0;
}

.apim-table th {
  background: #E6E6E6;
  font-weight: bold;
  text-align: left;
}

.apim-table th,
.apim-table td {
  padding: .7em 1em;
}

.apim-table td {
  border-top: #E6E6E6 solid 1px;
}

.apim-input,
.apim-button,
.apim-nav-link-btn {
    border-radius: .33rem;
    padding: 0.6rem 1rem;
}

.apim-button,
.apim-nav-link-btn {
    background-color: var(--wp--preset--color--contrast);
    border-color: var(--wp--preset--color--contrast);
    border-width: 0;
    color: var(--wp--preset--color--base);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all .25s ease;
}

.apim-nav-link-btn:hover {
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
}

.apim-button:hover {
    background: var(--wp--preset--color--vivid-cyan-blue);
}

.apim-button:disabled {
    background: var(--wp--preset--color--contrast-2);
    cursor: not-allowed;
}

.apim-label {
    display: block;
    margin-bottom: 0.5rem;
}

.apim-input {
    border: solid 1px var(--wp--preset--color--contrast);
}

.apim-grid {
    display: grid;
    grid-template-columns: 11em max-content;
}

.apim-link,
.apim-nav-link {
    text-align: inherit;
    font-size: inherit;
    padding: 0;
    background: none;
    border: none;
    font-weight: inherit;
    cursor: pointer;
    text-decoration: none;
    color: var(--wp--preset--color--vivid-cyan-blue);
}

.apim-nav-link {
    font-weight: 500;
}

.apim-link:hover,
.apim-nav-link:hover {
    text-decoration: underline;
}

#apim-signIn {
    display: flex;
    align-items: center;
    gap: 24px;
}

  6. احفظ التغييرات. حدد حفظ مرة أخرى لحفظ التغييرات في النسق.

  7. تسجيل الخروج من موقع مسؤول WordPress.

الخطوة 9: تسجيل الدخول إلى مدخل مطور APIM المنشور على WordPress

سجل الدخول إلى موقع WordPress لمشاهدة مدخل مطور APIM الجديد الذي تم نشره على WordPress واستضافته على App Service.

إشعار

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

  1. في نافذة مستعرض جديدة، انتقل إلى موقع WordPress، واستبدل اسم خدمة التطبيق في عنوان URL التالي: https://<yourapp-service-name>.azurewebsites.net
  2. عند المطالبة، سجل الدخول باستخدام بيانات اعتماد معرف Microsoft Entra لحساب مطور.

يمكنك الآن استخدام الميزات التالية لمدخل مطور APIM:

  • تسجيل الدخول إلى المدخل
  • راجع قائمة واجهات برمجة التطبيقات
  • انتقل إلى صفحة تفاصيل واجهة برمجة التطبيقات وشاهد قائمة العمليات
  • اختبار واجهة برمجة التطبيقات باستخدام مفاتيح واجهة برمجة التطبيقات الصالحة
  • راجع قائمة المنتجات
  • الاشتراك في منتج وإنشاء مفاتيح الاشتراك
  • انتقل إلى علامة التبويب ملف التعريف مع تفاصيل الحساب والاشتراك
  • تسجيل الخروج من المدخل

تظهر لقطة الشاشة التالية صفحة عينة من مدخل مطور APIM المستضاف على WordPress.

لقطة شاشة لمدخل المطور المستضاف على WordPress.

استكشاف الأخطاء وإصلاحها

لا أرى أحدث صفحات مدخل المطور على موقع WordPress

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

قد تحتاج أيضا إلى مسح ذاكرة التخزين المؤقت على موقع WordPress أو في CDN، إذا تم تكوين واحد. بدلا من ذلك، قد تحتاج إلى مسح ذاكرة التخزين المؤقت على المستعرض الخاص بك.

أواجه مشكلات في تسجيل الدخول أو الخروج من مدخل المطور

إذا كنت تواجه مشكلات في تسجيل الدخول أو الخروج من مدخل المطور، فمسح ذاكرة التخزين المؤقت للمستعرض، أو عرض موقع مدخل المطور في جلسة مستعرض منفصلة (باستخدام وضع التصفح المتخفي أو وضع الاستعراض الخاص).

لا أرى زر تسجيل الدخول على شريط التنقل في مدخل المطور

إذا كنت تستخدم نسقا مخصصا مختلفا عن النسق المتوفر في مستودع المكون الإضافي، فقد تحتاج إلى إضافة وظيفة تسجيل الدخول إلى شريط التنقل يدويا. في الصفحة الرئيسية، أضف كتلة الرمز المختصر التالية: [SignInButton]. تعرف على المزيد في وثائق WordPress.

يمكنك أيضا تسجيل الدخول أو تسجيل الخروج يدويا عن طريق إدخال عناوين URL التالية في المستعرض:

  • تسجيل الدخول: https://<app-service-name>.azurewebsites.net/.auth/login/aad
  • تسجيل الخروج: https://<app-service-name>.azurewebsites.net/.auth/logout

المحتوى ذو الصلة