Edit

Mengautentikasi dan mengotorisasi Static Web Apps

  • Bagaimana

Peringatan

Karena perubahan kebijakan API X (sebelumnya Twitter) kami tidak dapat terus mendukungnya sebagai bagian dari penyedia yang telah dikonfigurasi sebelumnya untuk aplikasi Anda. Jika Anda ingin terus menggunakan X (sebelumnya Twitter) untuk autentikasi/otorisasi dengan aplikasi Anda, perbarui konfigurasi aplikasi Anda untuk mendaftarkan penyedia kustom.

Azure Static Web Apps memberikan pengalaman autentikasi yang disederhanakan, di mana tidak ada tindakan atau konfigurasi lain yang diperlukan untuk menggunakan GitHub dan ID Microsoft Entra untuk autentikasi.

Dalam artikel ini, pelajari tentang perilaku default, cara menyiapkan masuk dan keluar, cara memblokir penyedia autentikasi, dan banyak lagi.

Anda dapat mendaftarkan penyedia kustom, yang menonaktifkan semua penyedia yang telah dikonfigurasi sebelumnya.

Prasyarat

Ketahui default dan sumber daya berikut untuk autentikasi dan otorisasi dengan Azure Static Web Apps.

Default:

  • Setiap pengguna dapat mengautentikasi dengan penyedia yang telah dikonfigurasi sebelumnya
    • GitHub
    • Microsoft Entra ID
    • Untuk membatasi penyedia autentikasi, blokir akses dengan aturan rute kustom
  • Setelah masuk, pengguna termasuk dalam anonymous peran dan authenticated . Untuk informasi selengkapnya tentang peran, lihat Mengelola peran

Sumber Daya:

  • Tentukan aturan dalam file staticwebapp.config.json bagi pengguna yang berwenang untuk mendapatkan akses ke rute terbatas
  • Menetapkan peran kustom pengguna menggunakan sistem undangan bawaan
  • Menetapkan peran kustom pengguna secara terprogram saat masuk dengan fungsi API
  • Pahami bahwa autentikasi dan otorisasi secara signifikan tumpang tindih dengan konsep perutean, yang dirinci dalam panduan konfigurasi Aplikasi
  • Batasi masuk ke penyewa Microsoft Entra tertentu dengan mengonfigurasi penyedia Microsoft Entra kustom. Penyedia Microsoft Entra yang telah dikonfigurasi sebelumnya memungkinkan akun Microsoft apa pun untuk masuk.

Menyiapkan rincian masuk

Azure Static Web Apps menggunakan folder sistem /.auth untuk menyediakan akses ke API terkait otorisasi. Daripada mengekspos salah satu rute di bawah /.auth folder langsung ke pengguna akhir, buat aturan perutean untuk URL yang ramah.

Gunakan tabel berikut ini untuk menemukan rute khusus penyedia.

Penyedia otorisasi Rute masuk
Microsoft Entra ID /.auth/login/aad
GitHub /.auth/login/github

Misalnya, untuk masuk dengan GitHub, Anda dapat menyertakan sesuatu yang mirip dengan tautan berikut.

<a href="/.auth/login/github">Login</a>

Jika Anda memilih untuk mendukung lebih dari satu penyedia, ekspos tautan khusus penyedia untuk masing-masing di situs web Anda. Gunakan aturan rute untuk memetakan penyedia default ke rute yang ramah seperti /login.

{
  "route": "/login",
  "redirect": "/.auth/login/github"
}

Menyiapkan pengalihan pasca-masuk

Kembalikan pengguna ke halaman tertentu setelah mereka masuk dengan menyediakan URL yang sepenuhnya memenuhi syarat dalam post_login_redirect_uri parameter string kueri, seperti dalam contoh berikut.

<a href="/.auth/login/github?post_login_redirect_uri=https://zealous-water.azurestaticapps.net/success">Login</a>

You can also redirect unauthenticated users back to the referring page after they sign in. To configure this behavior, create a response override rule that sets post_login_redirect_uri to .referrer, like in the following example.

{
  "responseOverrides": {
    "401": {
      "redirect": "/.auth/login/github?post_login_redirect_uri=.referrer",
      "statusCode": 302
    }
  }
}

Menyiapkan keluar

Rute mengeluarkan /.auth/logout pengguna dari situs web. Anda bisa menambahkan tautan ke navigasi situs Anda untuk memungkinkan pengguna keluar, seperti dalam contoh berikut.

<a href="/.auth/logout">Log out</a>

Gunakan aturan rute untuk memetakan rute yang ramah seperti /logout.

{
  "route": "/logout",
  "redirect": "/.auth/logout"
}

Menyiapkan pengalihan pasca-keluar

Untuk mengembalikan pengguna ke halaman tertentu setelah mereka keluar, berikan URL dalam post_logout_redirect_uri parameter string kueri.

Memblokir penyedia autentikasi

Anda mungkin ingin membatasi aplikasi agar tidak menggunakan penyedia autentikasi, karena semua penyedia autentikasi diaktifkan. Misalnya, aplikasi Anda mungkin ingin menstandarkan hanya pada penyedia yang mengekspos alamat email.

Untuk memblokir penyedia, Anda dapat membuat aturan rute untuk mengembalikan kode status 404 untuk permintaan ke rute khusus penyedia yang diblokir. Misalnya, untuk membatasi Twitter sebagai penyedia, tambahkan aturan rute berikut.

{
  "route": "/.auth/login/twitter",
  "statusCode": 404
}

Menghapus data pribadi

Saat Anda memberikan persetujuan untuk aplikasi sebagai pengguna akhir, aplikasi memiliki akses ke alamat email atau nama pengguna Anda, tergantung pada penyedia identitas. Setelah informasi ini disediakan, pemilik aplikasi dapat memutuskan cara mengelola data pribadi.

Pengguna akhir perlu menghubungi administrator aplikasi web individual untuk mencabut informasi ini dari sistem mereka.

Untuk menghapus data pribadi dari platform Azure Static Web Apps, dan mencegah platform memberikan informasi ini tentang permintaan di masa mendatang, kirimkan permintaan menggunakan URL berikut:

https://identity.azurestaticapps.net/.auth/purge/<AUTHENTICATION_PROVIDER_NAME>

To prevent the platform from providing this information on future requests to individual apps, submit a request using the following URL:

https://<WEB_APP_DOMAIN_NAME>/.auth/purge/<AUTHENTICATION_PROVIDER_NAME>

If you're using Microsoft Entra ID, use aad as the value for the <AUTHENTICATION_PROVIDER_NAME> placeholder.

Tip

For information about general restrictions and limitations, see Quotas.

Langkah selanjutnya

Menggunakan rute untuk mengatur peran yang diizinkan untuk mengontrol akses halaman