Sebelumnya

Berikutnya

Latihan - Mengonfigurasi penyedia dan akses autentikasi

Selesai

Aplikasi web daftar belanja Anda harus mengamankan akses ke beberapa rute dan menonaktifkan penyedia autentikasi tertentu. Dalam latihan ini, Anda akan memperbarui konfigurasi perutean aplikasi web untuk mencapai hasil tersebut.

Dalam latihan ini, Anda akan menyelesaikan langkah berikut:

1. Tambahkan aturan ke konfigurasi perutean untuk menonaktifkan beberapa penyedia autentikasi.
2. Amankan daftar produk agar hanya pengguna yang diautentikasi yang dapat mengaksesnya.
3. Sebarkan aplikasi yang diperbarui.
4. Uji apakah pembatasan berhasil.

Menonaktifkan penyedia autentikasi

Kami akan memperbarui konfigurasi perutean aplikasi kami untuk menonaktifkan penyedia autentikasi Microsoft Entra.

1. Buka proyek di Visual Studio Code.

2. Buka file berikut.

   angular-app/staticwebapp.config.json
   

   react-app/staticwebapp.config.json
   

   svelte-app/staticwebapp.config.json
   

   vue-app/staticwebapp.config.json
   

3. Di root objek JSON, tambahkan konfigurasi perutean berikut.

   "routes": [
     {
       "route": "/.auth/login/aad",
       "statusCode": 404
     }
   ]
   

   Dengan menambahkan aturan perutean ini, kami mencegah pengguna mengakses penyedia autentikasi Microsoft Entra.

Mengamankan akses daftar produk

Selanjutnya, kami ingin mengamankan daftar produk sehingga hanya yang diautentikasi yang dapat mengakses API. Untuk itu, kami akan menambahkan aturan perutean lain di file konfigurasi staticwebapp.config.json.

1. Tambahkan aturan berikut di bagian atas array routes.

   {
     "route": "/api/products/*",
     "allowedRoles": ["authenticated"]
   },
   

2. File staticwebapp.config.json Anda yang telah selesai akan terlihat seperti berikut:

   {
     "routes": [
       {
         "route": "/api/products/*",
         "allowedRoles": ["authenticated"]
       },
       {
         "route": "/.auth/login/aad",
         "statusCode": 404
       }
     ],
     "navigationFallback": {
       "rewrite": "/index.html",
       "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
     }
   }
   

Menyebarkan perubahan Anda

Sebelum menguji hasil konfigurasi ini, kita akan menyebarkan ulang aplikasi kita.

1. Di Visual Studio Code, buka palet perintah dengan menekan F1.

2. Masuk dan pilih Git: Commit All.

3. Masukkan Secure access sebagai pesan penerapan, dan tekan Enter.

4. Buka palet perintah dengan menekan F1.

5. Masuk dan pilih Git: Push, dan tekan Enter.

Setelah Anda mendorong perubahan, tunggu hingga proses build dan penerapan berjalan. Perubahan akan terlihat di aplikasi yang Anda sebarkan setelah itu.

Menguji pembatasan baru

Setelah aplikasi disebarkan ulang, Anda dapat menguji apakah pembatasan baru berhasil.

1. Di jendela Penjelajah Visual Studio Code, kembali ke bagian Static Web Apps, klik kanan my-static-web-app-and-authn, lalu pilih Jelajahi Situs untuk melihat aplikasi di browser Anda.

2. Jika tidak masuk, Anda akan melihat pesan Tidak sah, bukan daftar produk.

3. Pilih ID Microsoft Entra di daftar penyedia autentikasi untuk masuk.

   Anda akan melihat halaman kesalahan 404 seperti berikut:

   

4. Tekan tombol kembali di browser Anda untuk kembali ke aplikasi Anda.

5. Pilih GitHub di daftar penyedia autentikasi untuk masuk.

6. Masukkan kredensial GitHub Anda, jika diminta, lalu pilih Berikan Izin di halaman persetujuan Azure.

Anda sekarang masuk dan akan melihat daftar produk.

Langkah berikutnya

Selamat. Anda telah menerapkan alur kerja autentikasi lengkap di Static Web Apps!

Lanjutkan