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

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

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

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

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

  • أنشئ نسخة إدارة واجهة برمجة تطبيقات (API).

    إشعار

    حاليا، المكون الإضافي غير مدعوم في مستويات 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 ، في علامة التبويب أساسيات ، أدخل تفاصيل المشروع وتفاصيل تطبيق الويب وإعدادات إعداد WordPress.

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

    تنبيه

    تجنب استخدام اسم مستخدم WordPress admin الافتراضي، وأنشئ كلمة مرور قوية. لمعرفة المزيد، راجع أفضل ممارسات كلمات مرور ووردبريس.

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

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

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

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

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

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

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

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

  1. في بوابة Azure، انتقل إلى تسجيلات التطبيقات، ثم اختر + تسجيل جديد.

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

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

  4. في قائمة الشريط الجانبي، تحت إدارة البرنامج، اختر المصادقة>+ إضافة منصة. إذا لم تر هذا الإعداد، اختر خيار التبديل إلى التجربة القديمة.

  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. حدد + إضافة نظام أساسي مرة أخرى. حدد تطبيق أحادي الصفحة مرة أخرى.

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

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

  11. في قائمة الشريط الجانبي، ضمن إدارة، حدد تكوين> الرمز المميز + إضافة مطالبة اختيارية.

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

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

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

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

  15. في قائمة الشريط الجانبي، تحت إدارة المعلومات، اختر الشهادات والأسرار>+ سر العميل الجديد.

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

  17. في قائمة الشريط الجانبي، تحت إدارة البرنامج، اختر عرض واجهة برمجة تطبيقات (API). لاحظ معرف التطبيق الافتراضي URI. اختياريا، أضف مناظير مخصصة إذا لزم الأمر.

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

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

  1. في المدخل، انتقل إلى خدمة تطبيق WordPress.

  2. في قائمة الشريط الجانبي، تحت الإعدادات، اختر إضافة مزود الهوية للمصادقة>.

  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 المصدر (الرابط ينتهي ب /v2.0).

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

  6. ضمن عمليات التحقق الإضافية، حدد القيم المناسبة للبيئة الخاصة بك، أو استخدم القيم الافتراضية.

  7. قم بتكوين القيم المطلوبة للإعدادات المتبقية، أو استخدم القيم الافتراضية. حدد إضافة.

    إشعار

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

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

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

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

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

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

  3. في صفحة إضافة مزود الهوية، اختر معرف Microsoft Entra ID.

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

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

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

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

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

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

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

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

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

  2. في قائمة الشريط الجانبي، تحت بوابة المطورين، اختر نظرة عامة على البوابة.

  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.

هام

نوصي بتحميل النسق المتوفر في مستودع المكون الإضافي. القالب مبني على قالب Twenty Twenty Four وتم تخصيصه لدعم وظيفة بوابة المطورين في 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. في موقع إدارة ووردبريس، في قائمة الشريط الجانبي، اختر إضافة> إضافةجديدة.

  2. حدد تحميل المكون الإضافي. اختر الملف لرفع ملف مضغوط لإضافة مطوري بوابة إدارة واجهة برمجة التطبيقات (apim-devportal.zip) التي قمت بتحميلها سابقا. حدد تثبيت الآن.

  3. بعد التثبيت الناجح، حدد تنشيط المكون الإضافي.

  4. في قائمة الشريط الجانبي، اختر Azure API Management Developer Portal.

  5. في صفحة إعدادات APIM ، أدخل الإعدادات التالية واختر حفظ التغييرات:

    • اسم خدمة APIM - اسم مثيل APIM
    • تمكين إنشاء صفحات افتراضية وإنشاء قائمة تنقل

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

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

  1. في موقع إدارة ووردبريس، في قائمة الشريط الجانبي، اختر سمات المظهر>.

  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.

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

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

إشعار

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Last updated on