Bagikan melalui

Menambahkan autentikasi ke situs statis Anda di Azure Static Web Apps

  • Artikel

Artikel ini adalah bagian kedua dalam seri yang menunjukkan kepada Anda cara menyebarkan situs pertama Anda ke Azure Static Web Apps. Sebelumnya, Anda membuat dan menyebarkan situs statis dengan kerangka kerja web pilihan Anda.

Dalam artikel ini, Anda menambahkan autentikasi ke situs Anda dan menjalankan situs secara lokal sebelum menyebarkan ke cloud.

Prasyarat

Tutorial ini berlanjut dari tutorial sebelumnya, dan memiliki prasyarat yang sama.

Autentikasi dan otorisasi

Azure Static Web Apps memudahkan penggunaan penyedia autentikasi umum seperti Microsoft Entra dan Google tanpa menulis kode terkait keamanan.

Catatan

Anda dapat secara opsional mendaftarkan penyedia kustom dan menetapkan peran kustom untuk kontrol yang lebih halus saat menggunakan API backend.

Dalam artikel ini, Anda mengonfigurasi situs Anda untuk menggunakan ID Microsoft Entra untuk autentikasi.

Tambahkan autentikasi

Di artikel terakhir, Anda membuat staticwebapp.config.json file. File ini mengontrol banyak fitur untuk Azure Static Web Apps, termasuk autentikasi.

  1. staticwebapp.config.json Perbarui agar sesuai dengan konfigurasi berikut.

    {
  "navigationFallback": {
    "rewrite": "/index.html"
  },
  "routes": [
    {
      "route": "/*",
      "allowedRoles": [ "authenticated" ]
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  }
}

    Bagian ini routes memungkinkan Anda membatasi akses ke peran bernama. Ada dua peran yang telah ditentukan sebelumnya: authenticated dan anonymous. Jika pengguna yang tersambung tidak memiliki peran yang diizinkan, server mengembalikan respons "401 Tidak Sah".

    Nilai di bagian responseOverrides mengonfigurasi situs Anda sehingga alih-alih pengguna yang tidak diautentikasi melihat kesalahan server, browser mereka dialihkan ke halaman masuk sebagai gantinya.

  2. Jalankan situs secara lokal.

    Untuk meluncurkan situs secara lokal, jalankan perintah CLI start Static Web Apps.

    npx swa start

    Perintah ini memulai emulator Azure Static Web Apps di http://localhost:4280.

    URL ini ditampilkan di jendela terminal Anda setelah layanan dimulai.

  3. Pilih URL untuk masuk ke situs.

    Setelah Anda membuka situs di browser Anda, halaman masuk autentikasi lokal ditampilkan.

    Cuplikan layar halaman masuk autentikasi lokal.

    Halaman masuk autentikasi lokal memberikan emulasi pengalaman autentikasi nyata tanpa perlu layanan eksternal. Anda dapat membuat ID pengguna dan memilih peran mana yang ingin Anda terapkan ke pengguna dari layar ini.

  4. Masukkan nama pengguna, lalu pilih Masuk.

    Setelah Anda mengautentikasi, situs Anda ditampilkan.

Menyebarkan situs ke Azure

Sebarkan situs Anda dengan cara yang sama seperti yang Anda lakukan di tutorial terakhir.

  1. Bangun situs Anda:

    npx swa build

  2. Sebarkan situs Anda ke aplikasi web statis:

    npx swa deploy --app-name swa-demo-site

    URL untuk situs Anda ditampilkan setelah penyebaran selesai. Pilih URL situs untuk membuka situs di browser. Halaman masuk ID Microsoft Entra standar ditampilkan:

    Cuplikan layar halaman masuk autentikasi Microsoft.

    Masuk dengan akun Microsoft Anda.

Membersihkan sumber daya (opsional)

Jika Anda tidak melanjutkan tutorial lain, hapus grup sumber daya dan sumber daya Azure:

az group delete -n swa-tutorial

Saat menghapus grup sumber daya, Anda menghapus semua sumber daya yang ada di dalamnya. Anda tidak dapat membatalkan tindakan ini.

Konten terkait