Sebelumnya

Berikutnya

Mengonfigurasi akses untuk penyedia dan peran

Selesai

Dengan memberlakukan autentikasi pengguna, aplikasi web daftar belanja Anda memerlukan cara untuk membatasi akses ke beberapa halaman bagi pengguna yang tidak masuk, dan hanya mengizinkan masuk melalui penyedia tertentu.

Kami akan melihat konfigurasi perutean dan peran di Azure Static Web Apps untuk menyempurnakan akses pengguna ke aplikasi web kami.

File konfigurasi untuk Azure Static Web Apps

Konfigurasi untuk Azure Static Web Apps didefinisikan dalam file staticwebapp.config.json, yang mengontrol pengaturan berikut:

• Perutean
• Autentikasi
• Authorization
• Aturan fallback
• Ambil alih respons HTTP
• Definisi header HTTP global
• Jenis MIME kustom

Lokasi yang direkomendasikan untuk staticwebapp.config.json adalah di folder yang ditetapkan sebagai pengaturan app_location yang kita pilih selama penyebaran. Namun, file dapat ditempatkan di lokasi mana pun dalam folder kode sumber aplikasi Anda.

Untuk kasus penggunaan kita, kita akan melihat konfigurasi perutean untuk mencapai apa yang kita inginkan.

Membatasi penyedia autentikasi

Di bagian sebelumnya, kita melihat semua penyedia autentikasi diaktifkan secara default. Kita dapat mengubahnya dengan menambahkan aturan perutean dalam konfigurasi.

Misalnya, untuk menonaktifkan masuk melalui penyedia GitHub, Anda dapat menambahkan aturan perutean seperti ini dalam file staticwebapp.config.json.

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

Kita memaksak rute /.auth/login/github yang digunakan untuk mengautentikasi dengan penyedia GitHub untuk menampilkan kesalahan 404 (tidak ditemukan) agar pengguna tidak dapat mengaksesnya. Anda dapat menambahkan aturan rute sebanyak yang kita inginkan untuk menonaktifkan semua penyedia yang tidak ingin Anda gunakan.

Rute aman dengan peran

Rute secara default dapat diakses oleh semua orang tanpa batasan apa pun. Anda dapat mengamankan rute dengan menambahkan satu atau beberapa nama peran ke dalam array allowedRoles aturan. Secara default, setiap pengguna termasuk dalam peran anonymous bawaan, dan semua pengguna yang masuk adalah anggota peran authenticatedtersebut.

Itu berarti membatasi rute hanya untuk pengguna yang diautentikasi, Anda dapat menambahkan peran authenticated bawaan ke array allowedRoles.

{
  "routes": [
    {
      "route": "/profile",
      "allowedRoles": ["authenticated"]
    }
  ]
}

Dengan konfigurasi tersebut, jika pengguna yang tidak diautentikasi mencoba mengakses rute /profile, kesalahan 401 (tidak sah) akan ditampilkan.

Anda juga dapat membatasi metode HTTP tertentu untuk rute tertentu, seperti berikut ini:

{
  "routes": [
    {
      "route": "/profile",
      "methods": ["PUT", "POST", "DELETE"],
      "allowedRoles": ["authenticated"]
    }
  ]
}

Dalam contoh ini, semua pengguna dapat mengakses metode GET di rute /profile, tetapi hanya pengguna yang diautentikasi yang dapat menggunakan PUT, POST, atau DELETE.

Gunakan kartu bebas

Anda dapat menggunakan wildcard di akhir rute untuk mencocokkan semua rute mengikuti pola dasar. Misalnya, untuk membatasi semua URL yang dimulai dengan /api ke pengguna yang diautentikasi, Anda dapat menulis:

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

Langkah berikutnya

Selanjutnya, kita akan menerapkan pembatasan akses di aplikasi kita.

Lanjutkan