Autentikasi kustom di Azure Static Web Apps

Azure Static Web Apps menyediakan autentikasi terkelola yang menggunakan pendaftaran penyedia yang dikelola oleh Azure. Untuk memungkinkan fleksibilitas yang lebih terhadap pendaftaran, Anda dapat mengganti default dengan pendaftaran kustom.

• Autentikasi kustom juga memungkinkan Anda mengonfigurasi penyedia kustom yang mendukung OpenID Connect. Konfigurasi ini memungkinkan pendaftaran beberapa penyedia eksternal.

• Menggunakan pendaftaran kustom apa pun akan menonaktifkan semua penyedia yang telah dikonfigurasi sebelumnya.

Catatan

Autentikasi kustom hanya tersedia dalam paket Azure Static Web Apps Standard.

Mengonfigurasi penyedia identitas kustom

Penyedia identitas kustom dikonfigurasi di bagian auth dari file konfigurasi.

Untuk menghindari menempatkan rahasia dalam kontrol sumber, konfigurasi memeriksa pengaturan aplikasi untuk mencari nama yang cocok dalam file konfigurasi. Anda juga dapat memilih untuk menyimpan rahasia Anda di Azure Key Vault.

Azure Active Directory

Untuk membuat pendaftaran, mulailah dengan membuat pengaturan aplikasi berikut:

Nama Pengaturan	Nilai
AZURE_CLIENT_ID	ID Aplikasi (klien) pendaftaran aplikasi Azure Active Directory.
AZURE_CLIENT_SECRET	Rahasia klien pendaftaran Aplikasi Azure Active Directory.

Selanjutnya, gunakan sampel berikut untuk mengonfigurasi penyedia di file konfigurasi.

Penyedia Azure Active Directory tersedia dalam dua versi yang berbeda. Versi 1 secara eksplisit mendefinisikan userDetailsClaim, yang memungkinkan payload agar menampilkan informasi pengguna. Sebaliknya, versi 2 menampilkan informasi pengguna secara default, dan ditunjuk oleh v2.0 di URL openIdIssuer.

Versi 1 Azure Active Directory

{
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "userDetailsClaim": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/<TENANT_ID>",
          "clientIdSettingName": "AZURE_CLIENT_ID",
          "clientSecretSettingName": "AZURE_CLIENT_SECRET"
        }
      }
    }
  }
}

Pastikan untuk mengganti <TENANT_ID> dengan ID penyewa Azure Active Directory Anda.

Versi 2 Azure Active Directory

{
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/<TENANT_ID>/v2.0",
          "clientIdSettingName": "AZURE_CLIENT_ID",
          "clientSecretSettingName": "AZURE_CLIENT_SECRET"
        }
      }
    }
  }
}

Pastikan untuk mengganti <TENANT_ID> dengan ID penyewa Azure Active Directory Anda.

Untuk informasi selengkapnya tentang cara mengonfigurasi Azure Active Directory, lihat dokumentasi Autentikasi/Otorisasi App Service aktif menggunakan pendaftaran yang ada.

Untuk mengonfigurasi akun mana yang dapat masuk, lihat Mengubah akun yang didukung oleh aplikasi dan Membatasi aplikasi Azure AD Anda ke sekumpulan pengguna di penyewa Azure AD.

Catatan

Sementara bagian konfigurasi untuk Azure Active Directory adalah azureActiveDirectory, platform memberikan alias pada konfigurasi tersebut ke aad dalam URL untuk masuk, keluar dan membersihkan informasi pengguna. Lihat bagian autentikasi dan otorisasi untuk informasi selengkapnya.

Apple

Untuk membuat pendaftaran, mulailah dengan membuat pengaturan aplikasi berikut:

Nama Pengaturan	Nilai
APPLE_CLIENT_ID	ID klien Apple.
APPLE_CLIENT_SECRET	Rahasia klien Apple.

Selanjutnya, gunakan sampel berikut untuk mengonfigurasi penyedia di file konfigurasi.

{
  "auth": {
    "identityProviders": {
      "apple": {
        "registration": {
          "clientIdSettingName": "APPLE_CLIENT_ID",
          "clientSecretSettingName": "APPLE_CLIENT_SECRET"
        }
      }
    }
  }
}

Untuk informasi selengkapnya tentang cara mengonfigurasi Apple sebagai penyedia autentikasi, lihat dokumentasi Autentikasi/Otorisasi App Service.

Facebook

Untuk membuat pendaftaran, mulailah dengan membuat pengaturan aplikasi berikut:

Nama Pengaturan	Nilai
FACEBOOK_APP_ID	ID aplikasi Facebook.
FACEBOOK_APP_SECRET	Rahasia aplikasi Facebook.

Selanjutnya, gunakan sampel berikut untuk mengonfigurasi penyedia di file konfigurasi.

{
  "auth": {
    "identityProviders": {
      "facebook": {
        "registration": {
          "appIdSettingName": "FACEBOOK_APP_ID",
          "appSecretSettingName": "FACEBOOK_APP_SECRET"
        }
      }
    }
  }
}

Untuk informasi selengkapnya tentang cara mengonfigurasi Facebook sebagai penyedia autentikasi, lihat dokumentasi Autentikasi/Otorisasi App Service.

GitHub

Untuk membuat pendaftaran, mulailah dengan membuat pengaturan aplikasi berikut:

Nama Pengaturan	Nilai
GITHUB_CLIENT_ID	ID klien GitHub.
GITHUB_CLIENT_SECRET	Rahasia klien GitHub.

Selanjutnya, gunakan sampel berikut untuk mengonfigurasi penyedia di file konfigurasi.

{
  "auth": {
    "identityProviders": {
      "github": {
        "registration": {
          "clientIdSettingName": "GITHUB_CLIENT_ID",
          "clientSecretSettingName": "GITHUB_CLIENT_SECRET"
        }
      }
    }
  }
}

Google

Untuk membuat pendaftaran, mulailah dengan membuat pengaturan aplikasi berikut:

Nama Pengaturan	Nilai
GOOGLE_CLIENT_ID	ID klien Google.
GOOGLE_CLIENT_SECRET	Rahasia klien Google.

Selanjutnya, gunakan sampel berikut untuk mengonfigurasi penyedia di file konfigurasi.

{
  "auth": {
    "identityProviders": {
      "google": {
        "registration": {
          "clientIdSettingName": "GOOGLE_CLIENT_ID",
          "clientSecretSettingName": "GOOGLE_CLIENT_SECRET"
        }
      }
    }
  }
}

Untuk informasi selengkapnya tentang cara mengonfigurasi Google sebagai penyedia autentikasi, lihat dokumentasi Autentikasi/Otorisasi App Service.

Twitter

Untuk membuat pendaftaran, mulailah dengan membuat pengaturan aplikasi berikut:

Nama Pengaturan	Nilai
TWITTER_CONSUMER_KEY	Kunci pelanggan Twitter.
TWITTER_CONSUMER_SECRET	Rahasia pelanggan Twitter.

Selanjutnya, gunakan sampel berikut untuk mengonfigurasi penyedia di file konfigurasi.

{
  "auth": {
    "identityProviders": {
      "twitter": {
        "registration": {
          "consumerKeySettingName": "TWITTER_CONSUMER_KEY",
          "consumerSecretSettingName": "TWITTER_CONSUMER_SECRET"
        }
      }
    }
  }
}

Untuk informasi selengkapnya tentang cara mengonfigurasi Twitter sebagai penyedia autentikasi, lihat dokumentasi Autentikasi/Otorisasi App Service.

OpenID Connect

Anda dapat mengonfigurasi Azure Static Web Apps untuk menggunakan penyedia autentikasi kustom yang mematuhi spesifikasi OpenID Connect (OIDC). Langkah-langkah berikut diperlukan untuk menggunakan penyedia OIDC kustom.

• Satu atau beberapa penyedia OIDC diperbolehkan.
• Setiap penyedia harus memiliki nama unik dalam konfigurasi.
• Hanya satu penyedia yang dapat berfungsi sebagai target pengalihan default.

Daftarkan aplikasi Anda dengan IdP

Anda diharuskan mendaftarkan detail aplikasi Anda dengan IdP. Tanyakan kepada penyedia mengenai langkah-langkah yang diperlukan untuk menghasilkan ID klien dan rahasia klien untuk aplikasi Anda.

Setelah aplikasi terdaftar dengan penyedia identitas, buat rahasia aplikasi berikut di pengaturan aplikasi Static Web App:

Nama Pengaturan	Nilai
MY_PROVIDER_CLIENT_ID	ID klien yang dihasilkan oleh penyedia autentikasi untuk aplikasi web statik Anda.
MY_PROVIDER_CLIENT_SECRET	Rahasia klien yang dihasilkan oleh pendaftaran kustom penyedia autentikasi untuk aplikasi web statik Anda.

Jika Anda mendaftarkan penyedia tambahan, masing-masing penyedia tersebut memerlukan ID klien terkait dan penyimpanan rahasia klien dalam pengaturan aplikasi.

Penting

Rahasia aplikasi adalah info masuk keamanan sensitif. Jangan membagikan rahasia ini dengan siapa pun, mendistribusikannya dalam aplikasi klien, atau memeriksa kontrol sumber.

Setelah Anda memiliki info masuk pendaftaran, gunakan langkah-langkah berikut untuk membuat pendaftaran kustom.

1. Anda memerlukan metadata OpenID Connect untuk penyedia. Informasi ini sering diekspos melalui dokumen metadata konfigurasi, yang merupakan URL Penerbit penyedia yang diakhiri dengan /.well-known/openid-configuration. Kumpulkan URL konfigurasi ini.

2. Tambahkan bagian auth dari file konfigurasi dengan blok konfigurasi untuk penyedia OIDC, dan definisi penyedia Anda.

   {
     "auth": {
       "identityProviders": {
         "customOpenIdConnectProviders": {
           "myProvider": {
             "registration": {
               "clientIdSettingName": "MY_PROVIDER_CLIENT_ID",
               "clientCredential": {
                 "clientSecretSettingName": "MY_PROVIDER_CLIENT_SECRET"
               },
               "openIdConnectConfiguration": {
                 "wellKnownOpenIdConfiguration": "https://<PROVIDER_ISSUER_URL>/.well-known/openid-configuration"
               }
             },
             "login": {
               "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
               "scopes": [],
               "loginParameterNames": []
             }
           }
         }
       }
     }
   }
   

• Nama penyedia, myProvider dalam contoh ini, adalah pengidentifikasi unik yang digunakan oleh Azure Static Web Apps.
• Pastikan untuk mengganti <PROVIDER_ISSUER_URL> dengan jalur ke URL Pengeluar Sertifikat dari penyedia.
• Objek login memungkinkan Anda menyediakan nilai untuk: cakupan kustom, parameter login, atau klaim kustom.

Panggilan balik autentikasi

Penyedia identitas memerlukan URL pengalihan untuk menyelesaikan permintaan masuk atau keluar. Sebagian besar penyedia mengharuskan Anda menambahkan URL panggilan balik ke daftar izin. Titik akhir berikut ini tersedia sebagai tujuan pengalihan.

Jenis	Pola URL
Masuk	https://<YOUR_SITE>/.auth/login/<PROVIDER_NAME_IN_CONFIG>/callback
Keluar	https://<YOUR_SITE>/.auth/logout/<PROVIDER_NAME_IN_CONFIG>/callback

Jika Anda menggunakan Azure Active Directory, gunakan aad sebagai nilai untuk tempat penampung <PROVIDER_NAME_IN_CONFIG>.

Catatan

URL ini disediakan oleh Azure Static Web Apps untuk menerima respons dari penyedia autentikasi, Anda tidak perlu membuat halaman di rute ini.

Rincian masuk, keluar, dan pengguna

Untuk menggunakan penyedia identitas kustom, gunakan pola URL berikut.

Tindakan	Pola
Masuk	/.auth/login/<PROVIDER_NAME_IN_CONFIG>
Keluar	/.auth/logout
Detail pengguna	/.auth/me
Menghapus detail pengguna secara menyeluruh	/.auth/purge/<PROVIDER_NAME_IN_CONFIG>

Jika Anda menggunakan Azure Active Directory, gunakan aad sebagai nilai untuk tempat penampung <PROVIDER_NAME_IN_CONFIG>.

Langkah berikutnya

Mengatur peran pengguna secara terprogram