Baca dalam bahasa Inggris

Bagikan melalui

Menyesuaikan portal pengembang API Management di WordPress

  • Artikel
  • 10/01/2025

BERLAKU UNTUK: Pengembang | Dasar | Standar | Premi

Artikel ini menunjukkan cara mengonfigurasi plugin portal pengembang sumber terbuka (pratinjau) untuk menyesuaikan portal pengembang API Management di WordPress. Dengan plugin, ubah situs WordPress apa pun menjadi portal pengembang. Manfaatkan kemampuan situs di WordPress untuk menyesuaikan dan menambahkan fitur ke portal pengembang Anda termasuk pelokalan, menu yang dapat diciutkan dan dapat diperluas, lembar gaya kustom, unduhan file, dan banyak lagi.

Dalam artikel ini, Anda membuat situs WordPress di Azure App Service dan mengonfigurasi plugin portal pengembang di situs WordPress. ID Microsoft Entra dikonfigurasi untuk autentikasi ke situs WordPress dan portal pengembang.

Prasyarat

  • Sebuah instans API Management. Jika diperlukan, buat instans.

    Catatan

    Saat ini, plugin tidak didukung di tingkat API Management v2.

  • Aktifkan dan terbitkan portal pengembang. Untuk langkah-langkahnya, lihat Tutorial: Mengakses dan menyesuaikan portal pengembang.
  • Izin untuk membuat pendaftaran aplikasi di penyewa Microsoft Entra yang terkait dengan langganan Azure Anda.
  • File penginstalan untuk portal pengembang WordPress plugin dan tema WordPress yang disesuaikan dari repositori plugin. Unduh file zip berikut dari folder dist di repositori:
    • apim-devportal.zip - File plugin
    • twentytwentyfour.zip - File tema

Langkah 1: Buat WordPress di App Service

Untuk skenario ini, Anda membuat situs WordPress terkelola yang dihosting di Azure App Service. Berikut ini adalah langkah-langkah singkat:

  1. Di portal Azure, navigasikan ke https://portal.azure.com/#create/WordPress.WordPress.

  2. Pada halaman Buat WordPress di App Service , di tab Dasar , masukkan detail proyek Anda, detail Aplikasi Web, dan pengaturan penyiapan WordPress.

    Simpan nama pengguna dan kata sandi admin WordPress di tempat yang aman. Kredensial ini diperlukan untuk masuk ke situs admin WordPress dan menginstal plugin di langkah selanjutnya.

    Perhatian

    Hindari menggunakan nama pengguna WordPress admin default, dan buat kata sandi yang kuat. Pelajari selengkapnya tentang praktik terbaik kata sandi WordPress

  3. Pada tab Add-in :

    1. Pilih nilai default yang direkomendasikan untuk Email dengan Azure Communication Services, Azure CDN, dan Azure Blob Storage.
    2. Di Jaringan virtual, pilih Nilai baru atau jaringan virtual yang sudah ada.

  4. Pada tab Penyebaran , biarkan Tambahkan slot penahapan tidak dipilih.

  5. Pilih Tinjau + buat untuk menjalankan validasi akhir.

  6. Pilih Buat untuk menyelesaikan penyebaran layanan aplikasi.

Diperlukan waktu beberapa menit agar layanan aplikasi dapat disebarkan.

Langkah 2: Membuat pendaftaran aplikasi Microsoft Entra baru

Dalam langkah ini, buat aplikasi Microsoft Entra baru. Pada langkah selanjutnya, Anda mengonfigurasi aplikasi ini sebagai penyedia identitas untuk autentikasi ke layanan aplikasi Anda dan ke portal pengembang di instans API Management Anda.

  1. Di portal Azure, navigasikan ke Pendaftaran aplikasi>+ Pendaftaran baru.

  2. Berikan nama aplikasi baru, dan di Jenis akun yang didukung, pilih Akun hanya di direktori organisasi ini. Pilih Daftarkan.

  3. Pada halaman Gambaran Umum, salin dan simpan Id Aplikasi (klien) dan Id Direktori (penyewa) dengan aman. Anda memerlukan nilai-nilai ini di langkah-langkah selanjutnya untuk mengonfigurasi autentikasi ke instans API Management dan layanan aplikasi Anda. Cuplikan layar halaman Gambaran Umum pendaftaran aplikasi di portal.

  4. Di menu sebelah kiri, di bawah Kelola, pilih Autentikasi>+ Tambahkan platform.

  5. Pada halaman Konfigurasi platform , pilih Web.

  6. Pada halaman Konfigurasi web , masukkan URI pengalihan berikut, ganti nama layanan aplikasi Anda, dan pilih Konfigurasikan:

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

  7. Pilih + Tambahkan platform lagi. Pilih Aplikasi halaman tunggal.

  8. Pada halaman Konfigurasikan aplikasi satu halaman, masukkan URI pengalihan berikut, ganti nama instans API Management Anda, dan pilih Konfigurasikan:

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

  9. Pilih + Tambahkan platform lagi. Pilih Aplikasi satu halaman lagi.

  10. Pada halaman Konfigurasikan aplikasi satu halaman, masukkan URI pengalihan berikut, ganti nama instans API Management Anda, dan pilih Konfigurasikan:

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

  11. Di menu sebelah kiri, di bawah Kelola, pilih Konfigurasi> token+ Tambahkan klaim opsional.

  12. Pada halaman Tambahkan klaim opsional, pilih ID lalu pilih klaim berikut: email, family_name, given_name, onprem_sid, preferred_username, upn. Pilih Tambahkan.

  13. Saat diminta, pilih Aktifkan email Microsoft Graph, izin profil. Pilih Tambahkan.

  14. Di menu sebelah kiri, di bawah Kelola pilih izin API dan konfirmasikan bahwa izin Microsoft Graph berikut ini ada: email, profil, User.Read.

    Cuplikan layar izin API di portal.

  15. Di menu sebelah kiri, di bawah Kelola, pilih Sertifikat & rahasia>+ Rahasia klien baru.

  16. Konfigurasikan pengaturan untuk rahasia dan pilih Tambahkan. Salin dan simpan nilai rahasia dengan aman segera setelah dibuat. Anda memerlukan nilai ini di langkah-langkah selanjutnya untuk menambahkan aplikasi ke instans API Management dan layanan aplikasi Anda untuk autentikasi.

  17. Di menu sebelah kiri, di bawah Kelola, pilih Ekspos API. Perhatikan URI ID Aplikasi default. Secara opsional tambahkan cakupan kustom jika diperlukan.

Langkah 3: Mengaktifkan autentikasi ke layanan aplikasi

Dalam langkah ini, tambahkan pendaftaran aplikasi Microsoft Entra sebagai idP untuk autentikasi ke layanan aplikasi WordPress.

  1. Di portal, navigasikan ke layanan aplikasi WordPress.
  2. Di menu sebelah kiri, di bawah Pengaturan, pilih Autentikasi>Tambahkan IdP.
  3. Pada tab Dasar , di Penyedia identitas, pilih Microsoft.
  4. Di bawah Pendaftaran aplikasi, pilih Berikan detail pendaftaran aplikasi yang sudah ada.
    1. Masukkan Id Aplikasi (klien) dan Rahasia klien dari pendaftaran aplikasi yang Anda buat di langkah sebelumnya.
    2. Di URL Penerbit, masukkan salah satu nilai berikut untuk titik akhir autentikasi: https://login.microsoftonline.com/<tenant-id> atau https://sts.windows.net/<tenantid>. Ganti <tenant-id> dengan Id Direktori (penyewa) dari pendaftaran aplikasi.

      Penting

      Jangan gunakan titik akhir versi 2.0 untuk URL penerbit (URL berakhiran /v2.0).

  5. Di Audiens token yang diizinkan, masukkan URI ID Aplikasi dari pendaftaran aplikasi. Contoh: api://<app-id>.
  6. Di bawah Pemeriksaan tambahan, pilih nilai yang sesuai untuk lingkungan Anda, atau gunakan nilai default.
  7. Konfigurasikan nilai yang Anda inginkan untuk pengaturan yang tersisa, atau gunakan nilai default. Pilih Tambahkan.

    Catatan

    Jika Anda ingin mengizinkan pengguna tamu serta pengguna yang masuk untuk mengakses portal pengembang di WordPress, Anda dapat mengaktifkan akses yang tidak diautentikasi. Di Batasi akses, pilih Izinkan akses yang tidak diajarkan. Pelajari lebih lanjut

IdP ditambahkan ke layanan aplikasi.

Langkah 4: Aktifkan autentikasi ke portal pengembang API Management

Konfigurasikan pendaftaran aplikasi Microsoft Entra yang sama dengan penyedia identitas untuk portal pengembang API Management.

  1. Di portal, navigasikan ke instans API Management Anda.

  2. Di menu sebelah kiri, di bawah Portal pengembang, pilih Identitas>+ Tambahkan.

  3. Pada halaman Tambahkan idP , pilih Azure Active Directory (MICROSOFT Entra ID).

  4. Masukkan nilai Id Klien, Rahasia klien, dan Penyewa Masuk dari pendaftaran aplikasi yang Anda buat di langkah sebelumnya. Penyewa Signin adalah Id Direktori (penyewa) dari pendaftaran aplikasi.

  5. Di Pustaka klien, pilih MSAL.

  6. Terima nilai default untuk pengaturan yang tersisa dan pilih Tambahkan.

  7. Terbitkan ulang portal pengembang untuk menerapkan perubahan.

  8. Uji autentikasi dengan masuk ke portal pengembang di URL berikut, mengganti nama instans API Management Anda: https://<apim-instance-name>.developer.azure-api.net/signin. Pilih tombol Azure Active Directory (MICROSOFT Entra ID) di bagian bawah untuk masuk.

    Saat membukanya untuk pertama kalinya, Anda mungkin diminta untuk menyetujui izin tertentu.

Langkah 5: Mengonfigurasi pengaturan portal pengembang di API Management

Perbarui pengaturan portal pengembang di instans API Management untuk mengaktifkan CORS dan menyertakan situs layanan aplikasi sebagai asal portal.

  1. Di Portal Microsoft Azure, navigasikan ke instans API Management Anda.
  2. Di menu sebelah kiri, di bawah Portal pengembang, pilih Gambaran umum portal.
  3. Pada tab Gambaran umum portal, pilih Aktifkan CORS.
  4. Di menu sebelah kiri, di bawah Portal pengembang, pilih Pengaturan portal.
  5. Pada tab Konfigurasi portal yang dihost sendiri, masukkan nama host WordPress Anda di situs App Service sebagai asal portal, mengganti nama layanan aplikasi Anda di URL berikut: https://<yourapp-service-name>.azurewebsites.net
  6. Terbitkan ulang portal pengembang untuk menerapkan perubahan.

Selain itu cors , perbarui konfigurasi kebijakan di instans API Management untuk menambahkan situs layanan aplikasi sebagai asal yang diizinkan. Nilai ini diperlukan untuk memungkinkan panggilan dari konsol pengujian portal pengembang di situs WordPress.

Tambahkan nilai berikut origin dalam konfigurasi kebijakan Anda cors :

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

Pelajari selengkapnya tentang cara mengatur atau mengedit kebijakan.

Langkah 6: Navigasikan ke situs admin WordPress dan unggah tema yang dikustomisasi

Dalam langkah ini, Anda mengunggah tema yang disesuaikan untuk portal pengembang API Management ke situs admin WordPress.

Penting

Kami menyarankan agar Anda mengunggah tema yang disediakan dalam repositori plugin. Tema ini didasarkan pada tema Dua Puluh Dua Puluh Empat dan disesuaikan untuk mendukung fungsionalitas portal pengembang di WordPress. Jika Anda memilih untuk menggunakan tema yang berbeda, beberapa fungsionalitas mungkin tidak berfungsi seperti yang diharapkan atau memerlukan penyesuaian tambahan.

  1. Buka situs web admin WordPress di URL berikut, mengganti nama layanan aplikasi Anda: http://<app-service-name>.azurewebsites.net/wp-admin

    Saat membukanya untuk pertama kalinya, Anda mungkin diminta untuk menyetujui izin tertentu.

  2. Masuk ke situs admin WordPress menggunakan nama pengguna dan kata sandi yang Anda masukkan saat membuat WordPress di App Service.

  3. Di menu sebelah kiri, pilih Tema Tampilan>lalu Tambahkan Tema Baru.

  4. Pilih Unggah Tema. Pilih Pilih File untuk mengunggah file zip tema portal pengembang API Management yang Anda unduh sebelumnya. Pilih Instal Sekarang.

  5. Di layar berikutnya, pilih Ganti aktif dengan yang diunggah.

  6. Jika diminta, pilih Aktifkan.

Catatan

Jika situs WordPress Anda menyertakan plug-in penembolokan, hapus cache setelah mengaktifkan tema untuk memastikan bahwa perubahan berlaku.

Langkah 7: Instal plugin portal pengembang

  1. Di situs admin WordPress, di menu sebelah kiri, pilih Plugin Tambahkan>Plugin Baru.
  2. Pilih Unggah Plugin. Pilih Pilih File untuk mengunggah file zip plugin portal pengembang API Management (apim-devportal.zip) yang Anda unduh sebelumnya. Pilih Instal Sekarang.
  3. Setelah penginstalan berhasil, pilih Aktifkan Plugin.
  4. Di menu sebelah kiri, pilih Portal Pengembang Azure API Management.
  5. Pada halaman Pengaturan APIM, masukkan pengaturan berikut dan pilih Simpan Perubahan:
    • Nama layanan APIM - Nama instans API Management Anda
    • Aktifkan buat halaman default dan buat menu navigasi

Langkah 8: Menambahkan lembar gaya kustom

Tambahkan lembar gaya kustom untuk portal pengembang API Management.

  1. Di situs admin WordPress, di menu sebelah kiri, pilih Tema Penampilan>.

  2. Pilih Kustomisasi lalu navigasi ke Gaya.

  3. Pilih ikon pensil (Edit Gaya).

  4. Di panel Gaya, pilih Lainnya (tiga titik) >CSS Tambahan.

  5. Di CSS Tambahan, masukkan CSS berikut:

    .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. Simpan perubahan. Pilih Simpan lagi untuk menyimpan perubahan ke tema.

  7. Keluar dari situs admin WordPress.

Langkah 9: Masuk ke portal pengembang API Management yang disebarkan di WordPress

Akses situs WordPress untuk melihat portal pengembang API Management baru Anda yang disebarkan di WordPress dan dihosting di App Service.

  1. Di jendela browser baru, navigasikan ke situs WordPress Anda, mengganti nama layanan aplikasi Anda di URL berikut: https://<yourapp-service-name>.azurewebsites.net.
  2. Saat diminta, masuk menggunakan kredensial ID Microsoft Entra untuk akun pengembang. Jika akses yang tidak diatomatiskan ke portal pengembang diaktifkan, pilih Masuk di halaman beranda portal pengembang.

Catatan

Anda hanya dapat masuk ke portal pengembang di WordPress menggunakan kredensial MICROSOFT Entra ID. Autentikasi dasar tidak didukung.

Anda sekarang dapat menggunakan fitur berikut dari portal pengembang API Management:

  • Masuk ke portal
  • Lihat daftar API
  • Buka halaman detail API dan lihat daftar operasi
  • Menguji API menggunakan kunci API yang valid
  • Lihat daftar produk
  • Berlangganan produk dan menghasilkan kunci langganan
  • Navigasi ke tab Profil dengan detail akun dan langganan
  • Keluar dari portal

Cuplikan layar berikut menunjukkan halaman sampel portal pengembang API Management yang dihosting di WordPress.

Cuplikan layar portal pengembang yang dihosting di WordPress.

Pemecahan Masalah

Saya tidak melihat halaman portal pengembang terbaru di situs WordPress

Jika Anda tidak melihat halaman portal pengembang terbaru ketika Anda mengunjungi situs WordPress, periksa apakah plugin portal pengembang diinstal, diaktifkan, dan dikonfigurasi di situs admin WordPress. Lihat Menginstal plugin portal pengembang untuk langkah-langkahnya.

Anda mungkin juga perlu menghapus cache di situs WordPress Anda atau di CDN, jika cache dikonfigurasi. Atau, Anda mungkin perlu menghapus cache di browser Anda.

Saya mengalami masalah saat masuk atau keluar dari portal pengembang

Jika Anda mengalami masalah saat masuk atau keluar dari portal pengembang, hapus cache browser, atau lihat situs portal pengembang dalam sesi browser terpisah (menggunakan mode penjelajahan penyamaran atau privat).

Saya tidak melihat tombol masuk di bilah navigasi portal pengembang

Jika Anda menggunakan tema kustom yang berbeda dari yang disediakan dalam repositori plugin, Anda mungkin perlu menambahkan fungsionalitas masuk ke bilah navigasi secara manual. Pada halaman Beranda, tambahkan blok kode pendek berikut: [SignInButton]. Pelajari lebih lanjut dalam dokumentasi WordPress.

Anda juga dapat masuk atau keluar secara manual dengan memasukkan URL berikut di browser Anda:

  • Tandatangan: https://<app-service-name>.azurewebsites.net/.auth/login/aad
  • Keluar: https://<app-service-name>.azurewebsites.net/.auth/logout

Konten terkait