Melindungi API serverless dengan Azure API Management dan Azure AD B2C untuk penggunaan pada SPA

2025-06-22

BERLAKU UNTUK: Semua tingkat API Management

Penting

Berlaku mulai 1 Mei 2025, Azure AD B2C tidak akan lagi tersedia untuk dibeli untuk pelanggan baru. Pelajari lebih lanjut di FAQ kami.

Skenario ini menunjukkan cara mengonfigurasi instans Azure API Management untuk melindungi API. Kami menggunakan alur Azure AD B2C SPA (Auth Code + PKCE) untuk memperoleh token, bersama API Management untuk mengamankan backend Azure Functions menggunakan EasyAuth.

Untuk gambaran umum konseptual otorisasi API, lihat Autentikasi dan otorisasi ke API di API Management.

Tujuan

Kita akan melihat bagaimana API Management dapat digunakan dalam skenario yang disederhanakan dengan Azure Functions dan Azure AD B2C. Anda akan membuat aplikasi JavaScript (JS) yang memanggil sebuah API untuk login pengguna dengan Azure AD B2C. Kemudian Anda akan menggunakan fitur kebijakan validate-jwt, CORS, dan Rate Limit By Key API Management untuk melindungi API Backend.

Untuk pertahanan secara mendalam, kita kemudian menggunakan EasyAuth untuk memvalidasi token lagi di dalam API back-end dan memastikan bahwa manajemen API adalah satu-satunya layanan yang dapat memanggil backend Azure Functions.

Apa yang akan Anda pelajari

Penyiapan Aplikasi Satu Halaman dan API backend di Azure Active Directory B2C
Pembuatan Backend API Azure Functions
Mengimpor API Azure Functions ke Azure API Management
Mengamankan API di Azure API Management
Memanggil Titik Akhir Otorisasi Azure Active Directory B2C melalui Pustaka platform identitas Microsoft (MSAL.js)
Menyimpan Aplikasi Halaman Tunggal HTML / Vanilla JS dan menyajikannya dari Titik Akhir Azure Blob Storage

Prasyarat

Untuk mengikuti langkah-langkah dalam artikel ini, Anda harus memiliki:

Akun Penyimpanan Tujuan Umum V2 Azure (StorageV2) untuk menghosting aplikasi front-end Single Page JS.
Instans Azure API Management (Tingkat apa pun berfungsi, termasuk 'Konsumsi,' namun fitur tertentu yang berlaku untuk skenario penuh tidak tersedia di tingkat ini (batas demi kunci tarif dan IP Virtual khusus), pembatasan ini dipanggil di bawah ini dalam artikel jika sesuai).
Aplikasi Azure Function yang kosong (yang menjalankan runtime .NET Core V3.1, dalam Paket Konsumsi) untuk meng-host API yang dipanggil
Penyewa Azure AD B2C, yang ditautkan ke langganan.

Meskipun dalam praktiknya Anda akan menggunakan sumber daya di wilayah yang sama dalam beban kerja produksi, untuk artikel panduan ini, wilayah penyebaran tidak penting.

Gambaran Umum

Berikut adalah ilustrasi komponen yang digunakan dan alur di antaranya setelah proses ini selesai.

Berikut ini gambaran umum singkat langkah-langkahnya:

Buat Panggilan Azure AD B2C (Frontend, API Management) dan Aplikasi API dengan cakupan dan berikan Akses API
Buat kebijakan pendaftaran dan masuk untuk memungkinkan pengguna masuk dengan Azure AD B2C
Konfigurasikan API Management dengan ID dan kunci Klien Azure AD B2C yang baru untuk Mengaktifkan otorisasi pengguna OAuth2 di Konsol Pengembang
Bangun API Fungsi
Konfigurasikan API Fungsi untuk mengaktifkan EasyAuth dengan ID dan Kunci Klien Azure AD B2C yang baru dan mengunci akses ke APIM VIP.
Susun Definisi API di API Management
Mengkonfigurasi OAuth2 untuk konfigurasi API Management
Siapkan kebijakan CORS dan tambahkan kebijakan validate-jwt untuk memvalidasi token OAuth untuk setiap permintaan masuk
Bangun aplikasi pemanggil untuk menggunakan API
Unggah Sampel JS SPA
Mengonfigurasi Contoh Aplikasi Klien JS dengan ID dan kunci Klien Azure AD B2C baru
Uji Aplikasi Klien

Petunjuk

Kami akan mengumpulkan sejumlah informasi dan kunci, dll. saat kita meninjau dokumen ini, Anda mungkin merasa berguna untuk membuka editor teks untuk menyimpan item-item konfigurasi ini secara sementara.

ID KLIEN BACKEND B2C: KUNCI RAHASIA KLIEN BACKEND B2C: URI CAKUPAN API BACKEND B2C: ID KLIEN FRONTEND B2C: URI TITIK AKHIR ALUR PENGGUNA B2C: TITIK AKHIR OPENID TERKENAL B2C: NAMA KEBIJAKAN B2C: FRONTENDAPP_SIGNUPANDSIGNIN URL FUNGSI: URL DASAR APIM API API: URL TITIK AKHIR UTAMA PENYIMPANAN:

Mengonfigurasi aplikasi backend

Buka bilah Azure AD B2C di portal dan lakukan langkah-langkah berikut.

Pilih tab Pendaftaran Aplikasi
Pilih tombol 'Pendaftaran Baru'.
Pilih 'Web' dari kotak pilihan URI Pengalihan.
Sekarang atur Nama Tampilan, pilih sesuatu yang unik dan relevan dengan layanan yang sedang dibuat. Dalam contoh ini, kita akan menggunakan nama "Aplikasi Backend".
Gunakan tempat penampung untuk URL balasan, seperti 'https://jwt.ms' (situs decoding token milik Microsoft), kita akan memperbarui URL tersebut nanti.
Pastikan Anda telah memilih opsi "Akun di penyedia identitas atau direktori organisasi apa pun (untuk mengautentikasi pengguna dengan alur pengguna)"
Untuk sampel ini, hapus centang pada kotak "Beri persetujuan admin", karena kita tidak akan memerlukan offline_access hari ini.
Pilih 'Daftar'.
Catat ID Klien Aplikasi Backend untuk digunakan nanti (ditampilkan di bawah 'ID Aplikasi (klien)').
Pilih tab Sertifikat dan Rahasia (di bawah Kelola) lalu pilih 'Rahasia Klien Baru' untuk menghasilkan kunci autentikasi (Terima pengaturan default dan pilih 'Tambahkan').
Setelah mengklik 'Tambahkan,' salin kunci (di bawah 'nilai') di tempat yang aman untuk digunakan nanti sebagai 'Rahasia klien backend' - perhatikan bahwa dialog ini adalah SATU-SATUNYA kesempatan Anda harus menyalin kunci ini.
Sekarang pilih Tab Mengekspos API (Di Bawah Kelola).
Anda akan diminta untuk mengatur URI AppID, memilih dan merekam nilai default.
Buat dan beri nama cakupan "Hello" untuk Api Fungsi Anda, Anda dapat menggunakan frasa 'Hello' untuk semua opsi yang dapat dimasukkan, merekam URI Nilai Cakupan Penuh yang diisi, lalu pilih 'Tambahkan Cakupan.'
Kembali ke root panel Azure AD B2C dengan memilih breadcrumb 'Azure AD B2C' (petunjuk navigasi) di kiri atas halaman portal.

Catatan

Cakupan Azure AD B2C adalah izin efektif dalam API Anda yang dapat diminta aksesnya oleh aplikasi lain melalui bilah akses API dari aplikasinya, secara efektif Anda baru saja membuat izin aplikasi untuk API yang Anda panggil.

Mengonfigurasi aplikasi frontend

Pilih tab Pendaftaran Aplikasi
Pilih tombol 'Pendaftaran Baru'.
Pilih 'Aplikasi Satu Halaman (SPA)' dari kotak pilihan URI Pengalihan.
Sekarang atur Nama Tampilan dan URI AppID, pilih sesuatu yang unik dan relevan dengan aplikasi Frontend yang akan menggunakan pendaftaran aplikasi Azure Active Directory B2C ini. Dalam contoh ini, Anda dapat menggunakan "Aplikasi Frontend"
Sesuai pendaftaran aplikasi pertama, biarkan pilihan jenis akun yang didukung menjadi default (mengautentikasi pengguna dengan alur pengguna)
Gunakan tempat penampung untuk URL balasan, seperti 'https://jwt.ms' (situs decoding token milik Microsoft), kita akan memperbarui URL tersebut nanti.
Biarkan kotak persetujuan admin tercentang
Pilih 'Daftar.'
Catat ID Klien Aplikasi Backend untuk digunakan nanti (ditampilkan di bawah 'ID Aplikasi (klien)').
Beralih ke tab Izin API.
Berikan akses ke aplikasi backend dengan mengklik 'Tambahkan izin,' lalu 'API Saya,' pilih 'Aplikasi Backend,' pilih 'Izin', pilih cakupan yang Anda buat di bagian sebelumnya, dan pilih 'Tambahkan izin'
Pilih 'Berikan persetujuan admin untuk {tenant} dan pilih 'Ya' dari dialog popup. Popup ini menyetujui "Aplikasi Frontend" untuk menggunakan izin "hello" yang didefinisikan dalam "Aplikasi Backend" yang dibuat sebelumnya.
Semua Izin sekarang akan ditampilkan untuk aplikasi sebagai tanda centang hijau di bawah kolom status

Kembali ke akar dari bilah B2C dengan memilih penunjuk navigasi Azure AD B2C.
Beralih ke tab 'Alur Pengguna' (di bawah 'Kebijakan').
Pilih "Alur pengguna baru"
Pilih jenis alur pengguna 'Daftar dan masuk', dan pilih 'Direkomendasikan' lalu 'Buat'
Beri nama kebijakan dan catat untuk nanti. Untuk contoh ini, Anda dapat menggunakan "Frontendapp_signupandsignin", perhatikan bahwa ini akan diawali dengan "B2C_1_" untuk membuat "B2C_1_Frontendapp_signupandsignin"
Di bawah 'Penyedia identitas' dan "Akun lokal", periksa 'Pendaftaran email' (atau 'Pendaftaran ID Pengguna' tergantung pada konfigurasi penyewa B2C Anda) dan pilih OK. Konfigurasi ini dibuat karena kita akan mendaftarkan akun B2C lokal, dan tidak merujuk ke penyedia identitas lain (seperti penyedia identitas sosial) untuk menggunakan akun media sosial pengguna yang sudah ada.
Biarkan MFA dan pengaturan akses bersyarat di defaultnya.
Di bagian 'Atribut dan klaim Pengguna', pilih 'Tampilkan Lainnya...' lalu pilih opsi klaim yang Anda inginkan untuk dimasukkan pengguna dan telah kembali dalam token. Periksa setidaknya 'Nama Tampilan' dan 'Alamat Email' untuk dikumpulkan, dengan 'Nama Tampilan' dan 'Alamat Email' untuk kembali (perhatikan dengan cermat fakta bahwa Anda mengumpulkan alamat email, tunggal, dan meminta untuk mengembalikan alamat email, beberapa), dan pilih 'OK,' lalu pilih 'Buat.'
Pilih alur pengguna yang Anda buat dalam daftar, lalu pilih tombol 'Jalankan alur pengguna'.
Tindakan ini membuka bilah alur pengguna yang dijalankan, memilih aplikasi frontend, menyalin titik akhir alur pengguna dan menyimpannya untuk nanti.
Salin dan simpan tautan di bagian atas, merekam sebagai 'titik akhir konfigurasi openid terkenal' untuk digunakan nanti.

Catatan

Kebijakan B2C memungkinkan Anda untuk mengekspos titik akhir login Azure AD B2C untuk dapat mengambil komponen data yang berbeda dan pengguna masuk dengan cara yang berbeda.

Dalam kasus ini kita mengonfigurasi alur pendaftaran atau masuk (kebijakan). Ini juga mengekspos titik akhir konfigurasi yang dikenal, pada kedua kasus tersebut kebijakan yang kita buat diidentifikasi dalam URL oleh parameter string kueri "p=".

Setelah ini selesai, Anda sekarang memiliki platform identitas Bisnis ke Konsumen fungsional yang akan memasukkan pengguna ke beberapa aplikasi.

Membangun fungsi API

Silakan kembali ke penyewa Microsoft Entra standar Anda di portal Azure agar kami dapat mengonfigurasi kembali item dalam langganan Anda.
Buka bilah Aplikasi Fungsi portal Microsoft Azure, buka aplikasi fungsi kosong Anda, lalu pilih 'Functions', pilih 'Tambahkan'.
Di flyout yang muncul, pilih 'Kembangkan di portal', di bagian 'pilih templat' lalu pilih 'pemicu HTTP,' di bawah Detail templat beri nama 'hello' dengan tingkat otorisasi 'Function,' lalu pilih Tambahkan.
Beralih ke bilah Kode + Uji dan salin-tempel kode sampel dari bawah di atas kode yang ada yang muncul.

Pilih Simpan.


using System.Net;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Primitives;

public static async Task<IActionResult> Run(HttpRequest req, ILogger log)
{
   log.LogInformation("C# HTTP trigger function processed a request.");

   return (ActionResult)new OkObjectResult($"Hello World, time and date are {DateTime.Now.ToString()}");
}

Petunjuk

Kode fungsi skrip C# yang baru saja Anda tempel hanya mencatat baris ke log fungsi, dan mengembalikan teks "Halo Dunia" dengan beberapa data dinamis (tanggal dan waktu).

Pilih "Integrasi" dari bilah sebelah kiri, lalu pilih tautan http (req) di dalam kotak 'Pemicu'.
Dari menu dropdown 'Metode HTTP yang dipilih', hapus centang metode HTTP POST, hanya menyisakan GET yang dipilih, lalu pilih Simpan.
Beralih kembali ke tab Kode + Uji, pilih 'Dapatkan URL Fungsi,' lalu salin URL yang muncul dan simpan untuk nanti.

Catatan

Pengikatan yang baru saja Anda buat hanya memberi tahu Functions untuk merespons permintaan http GET anonim ke URL yang baru saja Anda salin (https://yourfunctionappname.azurewebsites.net/api/hello?code=secretkey). Sekarang kita memiliki API https tanpa server yang dapat diskalakan yang mampu mengembalikan payload sederhana.

Anda sekarang dapat menguji memanggil API ini dari browser web menggunakan versi URL di atas yang baru saja Anda salin dan simpan. Anda juga dapat menghapus bagian parameter string kueri "?code=secretkey" URL, dan menguji lagi, untuk membuktikan bahwa Azure Functions akan mengembalikan kesalahan 401.

Mengonfigurasi dan mengamankan API fungsi

Dua area tambahan dalam aplikasi fungsi perlu dikonfigurasi (Otorisasi dan Pembatasan Jaringan).
Pertama, Ayo kita konfigurasi Autentikasi / Otorisasi, jadi navigasikan kembali ke halaman awal fungsi aplikasi dengan menggunakan breadcrumb.
Selanjutnya pilih 'Autentikasi' (di bawah 'Pengaturan').
Pilih 'Tambahkan Penyedia Identitas'
Dari daftar menurun penyedia identitas, pilih 'Microsoft'
Untuk Pendaftaran Aplikasi, pilih ‘Berikan detail pendaftaran aplikasi yang ada’
Tempelkan ID klien pada aplikasi Backend (dari Azure AD B2C) ke dalam kotak 'ID Aplikasi (klien)' (kami merekam konfigurasi ini sebelumnya).
Salin dan tempel titik akhir konfigurasi OpenID yang dikenal luas dari kebijakan masuk dan pendaftaran ke dalam kolom URL Penerbit (kita mencatat konfigurasi ini sebelumnya).
Tempelkan rahasia klien pada aplikasi Backend ke dalam kotak yang sesuai (kami merekam konfigurasi ini sebelumnya).
Untuk 'Permintaan yang tidak diautentikasi', pilih 'HTTP 401 Tidak Sah: direkomendasikan untuk API'
Tinggalkan Store Token diaktifkan (default)
Pilih 'Simpan' (di kiri atas bilah).

Penting

Sekarang, API Fungsi Anda telah disebarkan dan akan memberikan respons 401 jika JWT yang benar tidak disediakan sebagai Authorization: Pembawa header, dan akan mengembalikan data jika permintaan yang valid diajukan. Anda menambahkan keamanan pertahanan mendalam tambahan di EasyAuth dengan mengonfigurasi opsi 'Masuk Dengan ID Microsoft Entra' untuk menangani permintaan yang tidak diaauthentikasi.

Kita masih tidak memiliki keamanan IP yang diterapkan, jika Anda memiliki kunci yang valid dan token OAuth2, siapa pun dapat memanggil ini dari mana saja - idealnya kita ingin memaksa semua permintaan untuk datang melalui API Management.

Jika Anda menggunakan tingkat Konsumsi API Management, Dasar v2, Standard v2, dan Premium v2, maka tidak ada IP Virtual Azure API Management khusus untuk mengizinkan daftar dengan pembatasan akses fungsi. Di tingkat klasik Azure API Management (khusus), VIP adalah untuk penyewa tunggal dan berlaku selama masa pakai sumber daya. Untuk tingkatan yang berjalan pada infrastruktur bersama, Anda dapat mengunci panggilan API melalui kunci fungsi rahasia bersama di bagian URI yang Anda salin di atas. Selain itu, untuk tingkatan ini - langkah 12-17 di bawah ini tidak berlaku.
Tutup bilah 'Autentikasi' dari portal App Service/ Functions.
Buka bilah portal API Management, lalu buka instans Anda.
Catat VIP Pribadi yang diperlihatkan pada tab gambaran umum.
Kembali ke bilah portal Azure Functions, lalu buka instans Anda lagi.
Pilih 'Jaringan' lalu pilih 'Konfigurasikan pembatasan akses'
Pilih 'Tambahkan Aturan,' dan masukkan VIP yang disalin pada langkah 3 di atas dalam format xx.xx.xx.xx/32.
Jika Anda ingin terus berinteraksi dengan portal fungsi, dan untuk melakukan langkah-langkah opsional di bawah ini, Anda harus menambahkan alamat IP publik atau rentang CIDR Anda sendiri di sini juga.
Setelah ada entri yang diperbolehkan dalam daftar, Azure menambahkan aturan penolakan implisit untuk memblokir semua alamat lainnya.

Anda perlu menambahkan blok alamat berformat CIDR ke panel pembatasan IP. Ketika Anda perlu menambahkan satu alamat seperti VIP API Management, Anda perlu menambahkannya dalam format xx.xx.xx.xx/32.

Catatan

Sekarang API Fungsi Anda tidak boleh dapat dipanggil dari mana pun selain melalui api management, atau alamat Anda.

Buka bilah API Management, lalu buka instans Anda.
Pilih Bilah API (di bawah API).
Dari jendela 'Tambahkan API Baru', pilih 'Aplikasi Fungsi', lalu pilih 'Penuh' dari bagian atas jendela munculan.
Klik Telusuri, pilih aplikasi fungsi tempat Anda menghosting API di dalamnya, dan klik pilih. Selanjutnya, klik pilih lagi.
Beri API nama dan deskripsi untuk penggunaan internal API Management dan tambahkan ke Produk 'tidak terbatas'.
Salin dan rekam 'URL dasar' API dan pilih 'buat'.
Pilih tab 'pengaturan', lalu di bawah langganan - matikan kotak centang 'Langganan Diperlukan' karena kami akan menggunakan OAuth JWT dalam hal ini untuk menilai batas. Perhatikan bahwa jika Anda menggunakan tingkatan konsumsi, konfigurasi ini tetap akan diperlukan dalam lingkungan produksi.

Petunjuk

Jika menggunakan tingkat konsumsi pada APIM (API Management), produk tanpa batas tidak akan tersedia sebagai fitur langsung dapat digunakan. Sebagai gantinya, navigasikan ke "Produk" di bawah "API" dan tekan "Tambahkan." Ketik "Tidak Terbatas" sebagai nama dan deskripsi produk dan pilih API yang baru saja Anda tambahkan dari callout API "+" di kiri bawah layar. Pilih kotak centang "diterbitkan". Biarkan sisanya sebagai default. Terakhir, tekan tombol "buat". Ini membuat produk "tidak terbatas" dan menetapkannya ke API Anda. Anda dapat menyesuaikan produk baru Anda nanti.

Konfigurasi dan catat pengaturan titik akhir penyimpanan yang benar

Buka bilah akun penyimpanan di portal Microsoft Azure
Pilih akun yang Anda buat dan pilih bilah 'Situs Web Statis' dari bagian Pengaturan (jika Anda tidak melihat opsi 'Situs Web Statis', periksa apakah Anda membuat akun V2).
Atur fitur hosting web statis ke 'diaktifkan,' dan atur nama dokumen indeks ke 'index.html', lalu pilih 'simpan'.
Catat isi 'Titik Akhir Utama' untuk nanti, karena lokasi ini adalah tempat situs frontend akan dihosting.

Petunjuk

Anda dapat menggunakan Azure Blob Storage + penulisan ulang CDN, atau Layanan Aplikasi Azure untuk meng-host SPA - tetapi fitur hosting Situs Web Statis Blob Storage memberi kita kontainer default untuk menyajikan konten web statis / html / js / css dari Azure Storage dan akan menyimpulkan halaman default bagi kita untuk nol pekerjaan.

Menyiapkan kebijakan CORS dan validate-jwt

Bagian berikut harus diikuti terlepas dari tingkat APIM yang digunakan. URL akun penyimpanan berasal dari akun penyimpanan yang akan Anda sediakan dari prasyarat di bagian atas artikel ini.

Beralih ke bilah manajemen API portal dan buka instans Anda.
Pilih API, lalu pilih "Semua API."
Di bagian "Pemrosesan masuk", pilih tombol tampilan kode "</>" untuk menampilkan editor kebijakan.
Edit bagian masuk dan tempelkan xml di bawah ini sehingga berbunyi seperti berikut ini.
Ganti parameter berikut dalam Kebijakan
[PrimaryStorageEndpoint} ('Titik Akhir Penyimpanan Utama' yang Anda salin di bagian sebelumnya), {b2cpolicy-well-known-openid} ('Titik akhir konfigurasi openid terkenal' yang Anda salin sebelumnya) dan {backend-api-application-client-id} (Aplikasi B2C / ID Klien untuk API backend) dengan nilai yang benar yang disimpan sebelumnya.
Jika Anda menggunakan tingkat Konsumsi API Management, anda harus menghapus kedua kebijakan rate-limit-by-key karena kebijakan ini tidak tersedia saat menggunakan tingkat Konsumsi Azure API Management.
```
<inbound>
   <cors allow-credentials="true">
         <allowed-origins>
             <origin>{PrimaryStorageEndpoint}</origin>
         </allowed-origins>
         <allowed-methods preflight-result-max-age="120">
             <method>GET</method>
         </allowed-methods>
         <allowed-headers>
             <header>*</header>
         </allowed-headers>
         <expose-headers>
             <header>*</header>
         </expose-headers>
     </cors>
   <validate-jwt header-name="Authorization" failed-validation-httpcode="401" failed-validation-error-message="Unauthorized. Access token is missing or invalid." require-expiration-time="true" require-signed-tokens="true" clock-skew="300">
      <openid-config url="{b2cpolicy-well-known-openid}" />
      <required-claims>
         <claim name="aud">
            <value>{backend-api-application-client-id}</value>
         </claim>
      </required-claims>
   </validate-jwt>
   <rate-limit-by-key calls="300" renewal-period="120" counter-key="@(context.Request.IpAddress)" />
   <rate-limit-by-key calls="15" renewal-period="60" counter-key="@(context.Request.Headers.GetValueOrDefault("Authorization","").AsJwt()?.Subject)" />
</inbound>
```
Catatan

Sekarang manajemen Azure API dapat menanggapi permintaan lintas asal dari aplikasi JavaScript SPA Anda, dan akan melakukan pembatasan, pembatasan laju, dan prevalidasi token autentikasi JWT yang diteruskan SEBELUM meneruskan permintaan ke FUNCTION API.

Selamat, Anda sekarang memiliki Azure AD B2C, API Management, dan Azure Functions yang bekerja sama untuk menerbitkan, mengamankan, DAN menggunakan API!

Petunjuk

Jika Anda menggunakan tingkat konsumsi API Management, daripada melakukan pembatasan tingkat berdasarkan subjek JWT atau Alamat IP yang masuk (Membatasi tarif panggilan menurut kebijakan kunci saat ini tidak didukung untuk tingkat "Konsumsi"), Anda dapat membatasi dengan kuota tarif panggilan, lihat di sini. Karena contoh ini adalah Aplikasi Halaman Tunggal JavaScript, kita menggunakan kunci Manajemen API hanya untuk pembatasan tingkat dan penagihan panggilan. Otorisasi dan Autentikasi aktual ditangani oleh Azure AD B2C, dan dienkapsulasi di JWT, yang divalidasi dua kali, sekali oleh API Management, dan kemudian oleh Azure Function backend.

Mengunggah sampel JAVAScript SPA ke penyimpanan statis

Masih di bilah akun penyimpanan, pilih bilah 'Kontainer' dari bagian Blob Service dan pilih kontainer $web yang muncul di panel kanan.

Simpan kode di bawah ini ke file secara lokal di mesin anda sebagai index.html dan kemudian unggah file index.html ke $web kontainer.

 <!doctype html>
 <html lang="en">
 <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
      <script type="text/javascript" src="https://alcdn.msauth.net/browser/2.11.1/js/msal-browser.min.js"></script>
 </head>
 <body>
      <div class="container-fluid">
          <div class="row">
              <div class="col-md-12">
                 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                     <div class="container-fluid">
                         <a class="navbar-brand" href="#">Azure Active Directory B2C with Azure API Management</a>
                         <div class="navbar-nav">
                             <button class="btn btn-success" id="signinbtn"  onClick="login()">Sign In</a>
                         </div>
                     </div>
                 </nav>
              </div>
          </div>
          <div class="row">
              <div class="col-md-12">
                  <div class="card" >
                     <div id="cardheader" class="card-header">
                         <div class="card-text"id="message">Please sign in to continue</div>
                     </div>
                     <div class="card-body">
                         <button class="btn btn-warning" id="callapibtn" onClick="getAPIData()">Call API</a>
                         <div id="progress" class="spinner-border" role="status">
                             <span class="visually-hidden">Loading...</span>
                         </div>
                     </div>
                  </div>
              </div>
          </div>
      </div>
      <script lang="javascript">
             // Just change the values in this config object ONLY.
             var config = {
                 msal: {
                     auth: {
                         clientId: "{CLIENTID}", // This is the client ID of your FRONTEND application that you registered with the SPA type in Azure Active Directory B2C
                         authority:  "{YOURAUTHORITYB2C}", // Formatted as https://{b2ctenantname}.b2clogin.com/tfp/{b2ctenantguid or full tenant name including onmicrosoft.com}/{signuporinpolicyname}
                         redirectUri: "{StoragePrimaryEndpoint}", // The storage hosting address of the SPA, a web-enabled v2 storage account - recorded earlier as the Primary Endpoint.
                         knownAuthorities: ["{B2CTENANTDOMAIN}"] // {b2ctenantname}.b2clogin.com
                     },
                     cache: {
                         cacheLocation: "sessionStorage",
                         storeAuthStateInCookie: false
                     }
                 },
                 api: {
                     scopes: ["{BACKENDAPISCOPE}"], // The scope that we request for the API from B2C, this should be the backend API scope, with the full URI.
                     backend: "{APIBASEURL}/hello" // The location that we'll call for the backend api, this should be hosted in API Management, suffixed with the name of the API operation (in the sample this is '/hello').
                 }
             }
             document.getElementById("callapibtn").hidden = true;
             document.getElementById("progress").hidden = true;
             const myMSALObj = new msal.PublicClientApplication(config.msal);
             myMSALObj.handleRedirectPromise().then((tokenResponse) => {
                 if(tokenResponse !== null){
                     console.log(tokenResponse.account);
                     document.getElementById("message").innerHTML = "Welcome, " + tokenResponse.account.name;
                     document.getElementById("signinbtn").hidden = true;
                     document.getElementById("callapibtn").hidden = false;
                 }}).catch((error) => {console.log("Error Signing in:" + error);
             });
             function login() {
                 try {
                     myMSALObj.loginRedirect({scopes: config.api.scopes});
                 } catch (err) {console.log(err);}
             }
             function getAPIData() {
                 document.getElementById("progress").hidden = false;
                 document.getElementById("message").innerHTML = "Calling backend ... "
                 document.getElementById("cardheader").classList.remove('bg-success','bg-warning','bg-danger');
                 myMSALObj.acquireTokenSilent({scopes: config.api.scopes, account: getAccount()}).then(tokenResponse => {
                     const headers = new Headers();
                     headers.append("Authorization", `Bearer ${tokenResponse.accessToken}`);
                     fetch(config.api.backend, {method: "GET", headers: headers})
                         .then(async (response)  => {
                             if (!response.ok)
                             {
                                 document.getElementById("message").innerHTML = "Error: " + response.status + " " + JSON.parse(await response.text()).message;
                                 document.getElementById("cardheader").classList.add('bg-warning');
                             }
                             else
                             {
                                 document.getElementById("cardheader").classList.add('bg-success');
                                 document.getElementById("message").innerHTML = await response.text();
                             }
                             }).catch(async (error) => {
                                 document.getElementById("cardheader").classList.add('bg-danger');
                                 document.getElementById("message").innerHTML = "Error: " + error;
                             });
                 }).catch(error => {console.log("Error Acquiring Token Silently: " + error);
                     return myMSALObj.acquireTokenRedirect({scopes: config.api.scopes, forceRefresh: false})
                 });
                 document.getElementById("progress").hidden = true;
          }
         function getAccount() {
             var accounts = myMSALObj.getAllAccounts();
             if (!accounts || accounts.length === 0) {
                 return null;
             } else {
                 return accounts[0];
             }
         }
     </script>
  </body>
 </html>

Telusuri ke Titik Akhir Utama Situs Web Statis yang Anda simpan sebelumnya di bagian terakhir.

Catatan

Selamat, Anda baru saja menyebarkan Aplikasi Halaman Tunggal JavaScript ke hosting konten Statis Azure Storage. Karena kita belum mengonfigurasi aplikasi JS dengan detail Azure AD B2C Anda – halaman belum akan berfungsi jika Anda membukanya.

Mengonfigurasi JavaScript SPA untuk Azure AD B2C

Sekarang kita tahu di mana semuanya: kita dapat mengkonfigurasi SPA dengan alamat API API Management yang sesuai dan ID aplikasi / klien Azure AD B2C yang benar.
Kembali ke bilah penyimpanan portal Microsoft Azure
Pilih 'Kontainer' (di bawah 'Pengaturan')
Pilih kontainer '$web' dari daftar
Pilih blob index.html dari daftar
Pilih 'Edit'
Perbarui nilai autentikasi di bagian konfigurasi MSAL agar sesuai dengan aplikasi front-end yang Anda daftarkan di B2C sebelumnya. Gunakan komentar kode untuk petunjuk tentang bagaimana nilai konfigurasi akan terlihat. Nilai otoritas harus dalam format:- https://{b2ctenantname}.b2clogin.com/tfp/{b2ctenantname}.onmicrosoft.com/{signupandsigninpolicyname}, jika Anda telah menggunakan nama sampel kami dan tenant B2C Anda disebut 'contoso', maka Anda akan mengharapkan nilai otoritas menjadi 'https://contoso.b2clogin.com/tfp/contoso.onmicrosoft.com/Frontendapp_signupandsignin'.
Atur nilai API agar sesuai dengan alamat backend Anda (Url Dasar API yang Anda rekam sebelumnya, dan nilai 'b2cScopes' dicatat sebelumnya untuk aplikasi backend).
Pilih Simpan

Mengatur URI pengalihan untuk aplikasi frontend Azure AD B2C

Buka bilah Azure AD B2C dan navigasi ke pendaftaran aplikasi untuk Aplikasi Frontend JavaScript.
Pilih 'URI Pengalihan' dan hapus tempat penampung 'https://jwt.ms' yang kami masukkan sebelumnya.
Tambahkan URI baru untuk titik akhir utama (penyimpanan) tanpa garis miring ke depan di akhir.

Catatan

Konfigurasi ini akan mengakibatkan klien aplikasi frontend menerima token akses dengan klaim yang sesuai dari Azure AD B2C. SPA akan dapat menambahkan ini sebagai token pembawa di header https dalam panggilan ke API backend.

API Management akan memvalidasi terlebih dahulu token, membatasi laju panggilan ke titik akhir berdasarkan subjek JWT yang diterbitkan oleh Azure ID (pengguna) dan berdasarkan alamat IP pemanggil (tergantung pada tingkat layanan API Management, lihat catatan di atas), sebelum meneruskan permintaan ke API Azure Function yang menerima, dengan menambahkan kunci keamanan fungsi. SPA akan menampilkan respons di browser.

Selamat, Anda telah mengonfigurasi Otorisasi Azure AD B2C, Azure API Management, Azure Functions, Azure App Service untuk bekerja dalam harmoni yang sempurna!

Sekarang kita memiliki aplikasi sederhana dengan API aman sederhana, mari kita mengujinya.

Menguji aplikasi klien

Buka sampel URL aplikasi yang Anda catat dari akun penyimpanan yang Anda buat sebelumnya.
Pilih "Masuk" di sudut kanan atas, tindakan ini akan memunculkan profil pendaftaran atau masuk Azure AD B2C Anda.
Aplikasi ini harus menyambut Anda dengan nama profil B2C Anda.
Sekarang pilih "Panggil API" dan halaman harus diperbarui dengan nilai yang dikirim kembali dari API aman Anda.
Jika Anda berulang kali memilih tombol Api Panggilan dan Anda berjalan di tingkat pengembang atau di atas API Management, Anda harus mencatat bahwa solusi Anda akan mulai membatasi tarif API dan fitur ini harus dilaporkan di aplikasi dengan pesan yang sesuai.

Dan kita sudah selesai

Langkah-langkah di atas dapat disesuaikan dan diedit untuk memungkinkan banyak penggunaan Azure AD B2C yang berbeda dengan API Management.

Pelajari selengkapnya tentang MICROSOFT Entra ID dan OAuth2.0.
Lihat informasi selengkapnya tentang API Management.
Untuk cara lain guna mengamankan layanan back-end Anda, lihat Autentikasi Sertifikat Bersama.
Buat sebuah instans layanan API Management.
Kelola API pertama Anda.

Bagikan melalui