WordPress'te API Management geliştirici portalını özelleştirme

ŞUNLAR IÇIN GEÇERLIDIR: Geliştirici | Temel | Standart | Premium

Bu makalede, WordPress'te API Management geliştirici portalını özelleştirmek için açık kaynak geliştirici portalı eklentisinin (önizleme) nasıl yapılandırileceği gösterilmektedir. Eklentiyle, herhangi bir WordPress sitesini geliştirici portalına dönüştürün. Yerelleştirme, daraltılabilir ve genişletilebilir menüler, özel stil sayfaları, dosya indirmeleri ve daha fazlası gibi özellikleri özelleştirmek ve geliştirici portalınıza eklemek için WordPress'teki site özelliklerinden yararlanın.

Bu makalede, Azure Uygulaması Hizmetinde bir WordPress sitesi oluşturacak ve WordPress sitesinde geliştirici portalı eklentisini yapılandıracaksınız. Microsoft Entra Id, WordPress sitesinde ve geliştirici portalında kimlik doğrulaması için yapılandırılır.

Önkoşullar

• Api Management örneği. Gerekirse bir örnek oluşturun.

  Not

  Eklenti şu anda API Management v2 katmanlarında desteklenmemektedir.

• Geliştirici portalını etkinleştirin ve yayımlayın. Adımlar için bkz . Öğretici: Geliştirici portalına erişme ve portalı özelleştirme.
• Azure aboneliğinizle ilişkilendirilmiş bir Microsoft Entra kiracısında uygulama kaydı oluşturma izinleri.
• Geliştirici portalı için yükleme dosyaları WordPress eklentisi ve eklenti deposundan özelleştirilmiş WordPress teması. Depodaki dist klasöründen aşağıdaki zip dosyalarını indirin:
  • apim-devportal.zip - Eklenti dosyası
  • twentytwentyfour.zip - Tema dosyası

1. Adım: App Service'te WordPress oluşturma

Bu senaryo için, Azure Uygulaması Hizmetinde barındırılan yönetilen bir WordPress sitesi oluşturursunuz. Aşağıdakiler kısa adımlardır:

1. Azure portalında adresine https://portal.azure.com/#create/WordPress.WordPressgidin.

2. App Service'te WordPress Oluştur sayfasının Temel Bilgiler sekmesinde proje ayrıntılarınızı girin.

   WordPress yönetici kullanıcı adını ve parolasını güvenli bir yere kaydedin. Bu kimlik bilgileri, WordPress yönetici sitesinde oturum açmak ve eklentiyi sonraki bir adımda yüklemek için gereklidir.

3. Eklentiler sekmesinde:

   1. Azure İletişim Hizmetleri, Azure CDN ve Azure Blob Depolama ile E-posta için önerilen varsayılan değerleri seçin.
   2. Sanal ağ'da Yeni değerini veya mevcut bir sanal ağı seçin.

4. Dağıtım sekmesinde Hazırlama yuvası ekle'yi seçili durumdan çıkarın.

5. Son doğrulamayı çalıştırmak için Gözden geçir + oluştur'u seçin.

6. App Service dağıtımlarını tamamlamak için Oluştur'u seçin.

Uygulama hizmetinin dağıtılması birkaç dakika sürebilir.

2. Adım: Yeni bir Microsoft Entra uygulama kaydı oluşturma

Bu adımda yeni bir Microsoft Entra uygulaması oluşturun. Sonraki adımlarda, bu uygulamayı uygulama hizmetinizde ve API Management örneğinizdeki geliştirici portalında kimlik doğrulaması için bir kimlik sağlayıcısı olarak yapılandıracaksınız.

1. Azure portalında Uygulama kayıtları>+ Yeni kayıt'a gidin.

2. Yeni uygulama adını girin ve Desteklenen hesap türleri bölümünde Yalnızca bu kuruluş dizinindeki Hesaplar'ı seçin. Kaydet'i seçin.

3. Genel Bakış sayfasında Uygulama (istemci) Kimliği ve Dizin (kiracı) Kimliğini kopyalayıp güvenli bir şekilde depolayın. API Management örneğinizde ve uygulama hizmetinizde kimlik doğrulamasını yapılandırmak için sonraki adımlarda bu değerlere ihtiyacınız vardır.

4. Soldaki menüde, Yönet'in altında Kimlik Doğrulaması>+ Platform ekle'yi seçin.

5. Platformları yapılandır sayfasında Web'i seçin.

6. Web'i Yapılandır sayfasında, uygulama hizmetinizin adını değiştirerek aşağıdaki yeniden yönlendirme URI'sini girin ve Yapılandır'ı seçin:

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

7. + Platform ekle'yi yeniden seçin. Tek sayfalı uygulama'ya tıklayın.

8. Tek sayfalı uygulamayı yapılandır sayfasında, API Management örneğinizin adını değiştirerek aşağıdaki yeniden yönlendirme URI'sini girin ve Yapılandır'ı seçin:

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

9. + Platform ekle'yi yeniden seçin. Tek sayfalı uygulama agaain'i seçin.

10. Tek sayfalı uygulamayı yapılandır sayfasında, API Management örneğinizin adını değiştirerek aşağıdaki yeniden yönlendirme URI'sini girin ve Yapılandır'ı seçin:

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

11. Soldaki menüde, Yönet'in altında Belirteç yapılandırması>+ İsteğe bağlı talep ekle'yi seçin.

12. İsteğe bağlı talep ekle sayfasında Kimlik'i seçin ve ardından şu talepleri seçin: e-posta, family_name, given_name, onprem_sid, preferred_username, upn. Ekle'yi seçin.

13. İstendiğinde Microsoft Graph e-postası, profil iznini aç'ı seçin. Ekle'yi seçin.

14. Soldaki menüde, Seç API izinlerini yönet'in altında aşağıdaki Microsoft Graph izinlerinin mevcut olduğunu onaylayın: e-posta, profil, User.Read.

    

15. Soldaki menüde, Yönet'in altında Sertifikalar & gizli diziler>+ Yeni istemci gizli dizisi'ni seçin.

16. Gizli dizi ayarlarını yapılandırın ve Ekle'yi seçin. Gizli anahtarın Değerini oluşturulduktan hemen sonra kopyalayın ve güvenli bir şekilde depolayın. Uygulamayı kimlik doğrulaması için API Management örneğinize ve app service'e eklemek için sonraki adımlarda bu değere ihtiyacınız vardır.

17. Soldaki menüde, Yönet'in altında Api'yi kullanıma sunma'yı seçin. Varsayılan Uygulama Kimliği URI'sine dikkat edin. İsteğe bağlı olarak gerekirse özel kapsamlar ekleyin.

3. Adım: Uygulama hizmetinde kimlik doğrulamasını etkinleştirme

Bu adımda, WordPress uygulama hizmetine kimlik doğrulaması için kimlik sağlayıcısı olarak Microsoft Entra uygulama kaydını ekleyin.

1. Portalda WordPress uygulama hizmetine gidin.
2. Soldaki menüde, Ayarlar'ın altında Kimlik Doğrulaması Kimlik sağlayıcısı> ekle'yi seçin.
3. Temel Bilgiler sekmesinde, Kimlik sağlayıcısı'nda Microsoft'u seçin.
4. Uygulama kaydı'nın altında Mevcut bir uygulama kaydının ayrıntılarını belirtin'i seçin.
   1. Önceki adımda oluşturduğunuz uygulama kaydından Uygulama (istemci) Kimliğini ve İstemci gizli dizisini girin.
   2. Veren URL'si bölümünde, kimlik doğrulama uç noktası için aşağıdaki değerlerden birini girin: https://login.microsoftonline.com/<tenant-id> veya https://sts.windows.net/<tenantid>. değerini, uygulama kaydındaki Dizin (kiracı) Kimliği ile değiştirin<tenant-id>.

      Önemli

      Veren URL'si (ILE biten /v2.0URL) için sürüm 2.0 uç noktasını kullanmayın.

5. İzin verilen belirteç hedef kitleleri bölümünde uygulama kaydından Uygulama Kimliği URI'sini girin. Örnek: api://<app-id>.
6. Ek denetimler'in altında ortamınıza uygun değerleri seçin veya varsayılan değerleri kullanın.
7. Kalan ayarlar için istediğiniz değerleri yapılandırın veya varsayılan değerleri kullanın. Ekle'yi seçin.

   Not

   Konuk kullanıcıların yanı sıra oturum açmış kullanıcıların WordPress'teki geliştirici portalına erişmesine izin vermek istiyorsanız, kimliği doğrulanmamış erişimi etkinleştirebilirsiniz. Erişimi kısıtla bölümünde Kimliği doğrulanmamış erişime izin ver'i seçin. Daha fazla bilgi edinin

Kimlik sağlayıcısı uygulama hizmetine eklenir.

4. Adım: API Management geliştirici portalında kimlik doğrulamasını etkinleştirme

API Management geliştirici portalı için kimlik sağlayıcısıyla aynı Microsoft Entra uygulama kaydını yapılandırın.

1. Portalda API Management örneğine gidin.

2. Soldaki menüde, Geliştirici portalı altında Kimlikler>+ Ekle'yi seçin.

3. Kimlik sağlayıcısı ekle sayfasında Azure Active Directory (Microsoft Entra Id) öğesini seçin.

4. Önceki adımda oluşturduğunuz uygulama kaydından İstemci Kimliği, İstemci gizli anahtarı ve Oturum açma kiracısı değerlerini girin. Oturum açma kiracısı, uygulama kaydındaki Dizin (kiracı) kimliğidir.

5. İstemci kitaplığı'nda MSAL'yi seçin.

6. Kalan ayarlar için varsayılan değerleri kabul edin ve Ekle'yi seçin.

7. Değişiklikleri uygulamak için geliştirici portalını yeniden yayımlayın.

8. Aşağıdaki URL'de geliştirici portalında oturum açarak, API Management örneğinizin adını değiştirerek kimlik doğrulamasını test edin: https://<apim-instance-name>.developer.azure-api.net/signin. Oturum açmak için alttaki Azure Active Directory (Microsoft Entra Id) düğmesini seçin.

   İlk kez açtığınızda, belirli izinlere onay vermeniz istenebilir.

5. Adım: API Management'ta geliştirici portalı ayarlarını yapılandırma

CORS'yi etkinleştirmek ve app service sitesini portal başlangıcı olarak eklemek için API Management örneğindeki geliştirici portalının ayarlarını güncelleştirin.

1. Azure portalında API Management örneğine gidin.
2. Soldaki menüde, Geliştirici portalı altında Portala genel bakış'ı seçin.
3. Portala genel bakış sekmesinde CORS'yi etkinleştir'i seçin.
4. Soldaki menüde, Geliştirici portalı altında Portal ayarları'nı seçin.
5. Şirket içinde barındırılan portal yapılandırma sekmesinde, App Service sitesindeki WordPress'inizin ana bilgisayar adını portal kaynağı olarak girin ve aşağıdaki URL'ye uygulama hizmetinizin adını yazın: https://<yourapp-service-name>.azurewebsites.net
6. Değişiklikleri uygulamak için geliştirici portalını yeniden yayımlayın.

Ayrıca API Management örneğindeki ilke yapılandırmasını güncelleştirerek cors app service sitesini izin verilen bir kaynak olarak ekleyin. Bu değer, WordPress sitesindeki geliştirici portalının test konsolundan gelen çağrılara izin vermek için gereklidir.

İlke yapılandırmanıza cors aşağıdaki origin değeri ekleyin:

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

İlkeleri ayarlama veya düzenleme hakkında daha fazla bilgi edinin.

6. Adım: WordPress yönetici sitesine gidin ve özelleştirilmiş temayı karşıya yükleyin

Bu adımda, API Management geliştirici portalı için özelleştirilmiş temayı WordPress yönetici sitesine yüklersiniz.

1. Uygulama hizmetinizin adını değiştirerek aşağıdaki URL'de WordPress yönetici web sitesini açın: http://<app-service-name>.azurewebsites.net/wp-admin

   İlk kez açtığınızda, belirli izinlere onay vermeniz istenebilir.

2. App Service'te WordPress oluştururken girdiğiniz kullanıcı adını ve parolayı kullanarak WordPress yönetici sitesinde oturum açın.

3. Sol menüde Görünüm>Temaları'nı ve ardından Yeni Tema Ekle'yi seçin.

4. Temayı Karşıya Yükle'yi seçin. Daha önce indirdiğiniz API Management geliştirici portalı tema zip dosyasını karşıya yüklemek için Dosya Seç'i seçin. Şimdi Yükle'yi seçin.

5. Sonraki ekranda Etkin olanı karşıya yüklenmiş olarak değiştir'i seçin.

6. İstenirse Etkinleştir'i seçin.

7. Adım: Geliştirici portalı eklentisini yükleme

1. WordPress yönetici sitesinin sol menüsünde Eklentiler>Yeni Eklenti Ekle'yi seçin.
2. Eklentiyi Karşıya Yükle'yi seçin. Daha önce indirdiğiniz API Management geliştirici portalı eklentisi zip dosyasını (apim-devportal.zip) karşıya yüklemek için Dosya Seç'i seçin. Şimdi Yükle'yi seçin.
3. Yükleme başarılı olduktan sonra Eklentiyi Etkinleştir'i seçin.
4. Soldaki menüde Azure API Management Geliştirici Portalı'nı seçin.
5. APIM Ayarları sayfasında aşağıdaki ayarları girin ve Değişiklikleri Kaydet'i seçin:
   • APIM hizmet adı - API Management örneğinizin adı
   • Varsayılan sayfalar oluştur'u ve Gezinti menüsü oluştur'u etkinleştirme

8. Adım: Özel stil sayfası ekleme

API Management geliştirici portalı için özel bir stil sayfası ekleyin.

1. WordPress yönetici sitesinde, soldaki menüde Görünüm>Temaları'nı seçin.

2. Özelleştir'i seçin ve stiller'e gidin.

3. Kalem simgesini seçin (Stilleri Düzenle).

4. Stiller bölmesinde Diğer (üç nokta) Ek CSS'yi >seçin.

5. Ek CSS'de aşağıdaki CSS'yi girin:

   .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. Değişiklikleri kaydedin . Değişiklikleri temada kaydetmek için Yeniden Kaydet'i seçin.

7. WordPress yönetici sitesinde oturumu kapatın .

9. Adım: WordPress'te dağıtılan API Management geliştirici portalında oturum açın

WordPress'te dağıtılan ve App Service'te barındırılan yeni API Management geliştirici portalınızı görmek için WordPress sitesine erişin.

1. Yeni bir tarayıcı penceresinde, aşağıdaki URL'de uygulama hizmetinizin adını değiştirerek WordPress sitenize gidin: https://<yourapp-service-name>.azurewebsites.net.
2. İstendiğinde, geliştirici hesabı için Microsoft Entra Id kimlik bilgilerini kullanarak oturum açın. Geliştirici portalına kimliği doğrulanmamış erişim etkinleştirildiyse, geliştirici portalının giriş sayfasında Oturum aç'ı seçin.

Artık API Management geliştirici portalının aşağıdaki özelliklerini kullanabilirsiniz:

• Portalda oturum açın
• Bkz. API'lerin listesi
• API ayrıntıları sayfasına gidin ve işlemlerin listesine bakın
• Geçerli API anahtarlarını kullanarak API'yi test edin
• Ürün listesine bakın
• Bir ürüne abone olma ve abonelik anahtarları oluşturma
• Hesap ve abonelik ayrıntılarını içeren Profil sekmesine gidin
• Portal oturumunu kapatma

Aşağıdaki ekran görüntüsünde, WordPress'te barındırılan API Management geliştirici portalının örnek sayfası gösterilmektedir.

Sorun giderme

WordPress sitesinde en son geliştirici portalı sayfalarını görmüyorum

WordPress sitesini ziyaret ettiğinizde en son geliştirici portalı sayfalarını görmüyorsanız, geliştirici portalı eklentisinin WordPress yönetici sitesinde yüklü, etkinleştirilmiş ve yapılandırılmış olup olmadığını denetleyin. Adımlar için bkz . Geliştirici portalı eklentisini yükleme.

Ayrıca, yapılandırılmışsa WordPress sitenizde veya CDN'de önbelleği temizlemeniz gerekebilir. Alternatif olarak, tarayıcınızdaki önbelleği temizlemeniz gerekebilir.

Geliştirici portalında oturum açarken veya oturumu açarken sorun yaşıyorum

Geliştirici portalında oturum açma veya kapatma sorunları yaşıyorsanız tarayıcı önbelleğini temizleyin veya geliştirici portalı sitesini ayrı bir tarayıcı oturumunda (gizli veya özel gözatma modunu kullanarak) görüntüleyin.

Geliştirici portalı gezinti çubuğunda oturum açma düğmesi görmüyorum

Eklenti deposunda sağlanandan farklı bir özel tema kullanıyorsanız, oturum açma işlevini gezinti çubuğuna el ile eklemeniz gerekebilir. Giriş sayfasında aşağıdaki kısa kod bloğunu ekleyin: [SignInButton]. WordPress belgelerinde daha fazla bilgi edinin.

Ayrıca tarayıcınıza aşağıdaki URL'leri girerek el ile oturum açabilir veya oturumu kapatabilirsiniz:

• Oturum Aç: https://<app-service-name>.azurewebsites.net/.auth/login/aad
• Oturumu kapat: https://<app-service-name>.azurewebsites.net/.auth/logout

İlgili içerik

• Azure Uygulaması Hizmetinde WordPress sitesi oluşturma
• Geliştirici portalını özelleştirme
• Azure API Management'ta Microsoft Entra Id kullanarak geliştirici hesaplarını yetkilendirir.