Mengelola autentikasi di Azure Static Web Apps

2 menit

Aplikasi web daftar belanja Anda memerlukan cara untuk mengidentifikasi penggunanya secara unik, dan memberi mereka ruang pribadi untuk menyimpan produk.

Autentikasi adalah cara Anda memverifikasi identitas pengguna yang mencoba mengakses sistem informasi. Sekarang kita akan melihat autentikasi dan cara Anda dapat menerapkannya di Azure Static Web Apps.

IdP

Azure Static Web Apps menyederhanakan pengalaman autentikasi dengan mengelola autentikasi menggunakan penyedia berikut:

Microsoft Entra ID
GitHub
Twitter

Semua penyedia autentikasi diaktifkan secara default. Nanti kita akan melihat cara Anda dapat membatasi penyedia autentikasi dengan aturan rute kustom.

Folder sistem

Folder sistem /.auth menyediakan akses ke semua API terkait autentikasi. Anda dapat menggunakan titik akhir ini untuk menerapkan alur kerja autentikasi penuh di aplikasi Anda, termasuk masuk dan keluar, serta mengakses informasi pengguna.

Tabel berikut mencantumkan rute masuk khusus penyedia yang dapat Anda gunakan di aplikasi Anda.

IdP	Rute masuk
Microsoft Entra ID	`/.auth/login/aad`
GitHub	`/.auth/login/github`
Twitter	`/.auth/login/twitter`

Misalnya, untuk masuk dengan GitHub, Anda dapat menyertakan tautan masuk di aplikasi web Anda dengan cuplikan berikut:

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

Jika Anda ingin pengguna kembali ke halaman tertentu setelah masuk, Anda juga dapat memberikan URL di post_login_redirect_uri parameter string kueri. Contohnya:

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

Keluar

Rute /.auth/logout mencatat pengguna dari aplikasi web. Anda dapat menambahkan tautan ke navigasi situs Anda untuk memungkinkan pengguna keluar seperti yang diperlihatkan dalam contoh berikut.

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

Seperti halnya masuk, Anda dapat memberikan URL untuk dialihkan setelah keluar menggunakan post_logout_redirect_uri parameter string kueri:

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

Mengakses informasi pengguna

Anda dapat mengakses informasi pengguna terkait autentikasi baik melalui titik akhir akses langsung maupun header khusus dalam fungsi API.

Jika Anda mengirim permintaan GET ke rute /.auth/me, Anda akan menerima objek JSON dengan data untuk pengguna yang saat ini masuk. Permintaan dari pengguna yang tidak diautentikasi menampilkan null.

Berikut adalah contoh objek respons.

{
  "identityProvider": "github",
  "userId": "d75b260a64504067bfc5b2905e3b8182",
  "userDetails": "github-user-example",
  "userRoles": [ "anonymous", "authenticated" ]
}

Fungsi API

Semua fungsi API yang tersedia di Azure Static Web Apps memiliki akses ke informasi pengguna yang sama dengan aplikasi klien Anda. Data pengguna diteruskan ke fungsi di header HTTP x-ms-client-principal. Data diserialisasikan sebagai objek JSON dan dienkode di Base64.

Contoh fungsi berikut memperlihatkan cara membaca dan menampilkan informasi pengguna.

module.exports = async function (context, req) {
  const header = req.headers["x-ms-client-principal"];
  const encoded = Buffer.from(header, "base64");
  const decoded = encoded.toString("ascii");

  context.res = {
    body: {
      userInfo: JSON.parse(decoded)
    }
  };
};

Langkah berikutnya

Selanjutnya, kami akan menerapkan alur kerja autentikasi lengkap di aplikasi kami.

Uji pengetahuan Anda

Lanjutkan