Tutorial: Mengautentikasi dan memberi otorisasi pengguna secara end-to-end di Azure App Service

Dalam tutorial, Anda belajar:

Autentikasi dalam prosedur ini disediakan di lapisan platform hosting oleh Azure App Service. Anda harus menyebarkan aplikasi frontend dan backend dan mengonfigurasi autentikasi agar aplikasi web ini berhasil digunakan.

Mendapatkan profil pengguna

Aplikasi frontend dikonfigurasi untuk menggunakan API backend dengan aman. Aplikasi frontend menyediakan rincian masuk Microsoft untuk pengguna, lalu memungkinkan pengguna untuk mendapatkan profil palsu mereka dari backend. Tutorial ini menggunakan profil palsu untuk menyederhanakan langkah-langkah untuk menyelesaikan skenario.

Sebelum kode sumber Anda dijalankan di frontend, App Service menyuntikkan yang diautentikasi accessToken dari header App Service x-ms-token-aad-access-token . Kode sumber frontend kemudian mengakses dan mengirim accessToken ke server backend sebagai bearerToken untuk mengakses API backend dengan aman. Server backend memvalidasi bearerToken sebelum diteruskan ke kode sumber backend Anda. Setelah kode sumber backend Anda menerima bearerToken, kode tersebut dapat digunakan.

Dalam artikel berikutnya dalam seri ini, bearerToken ditukar dengan token dengan cakupan untuk mengakses Microsoft Graph API. Microsoft Graph API mengembalikan informasi profil pengguna.

Prasyarat

Jika Anda tidak memiliki Langganan Azure, buat Akun gratis Azure sebelum memulai.

• Node.js (LTS)

• Gunakan lingkungan Bash di Azure Cloud Shell. Untuk informasi selengkapnya, lihat Mulai Cepat untuk Bash di Azure Cloud Shell.

  

• Jika Anda lebih suka menjalankan perintah referensi CLI secara lokal, instal Azure CLI. Jika Anda menjalankan Windows atau macOS, pertimbangkan untuk menjalankan Azure CLI dalam kontainer Docker. Untuk informasi lebih lanjut, lihat Cara menjalankan Azure CLI di kontainer Docker.

  • Jika Anda menggunakan instalasi lokal, masuk ke Azure CLI dengan menggunakan perintah login az. Untuk menyelesaikan proses autentikasi, ikuti langkah-langkah yang ditampilkan di terminal Anda. Untuk opsi masuk lainnya, lihat Masuk dengan Azure CLI.

  • Saat Anda diminta, instal ekstensi Azure CLI pada penggunaan pertama. Untuk informasi selengkapnya tentang ekstensi, lihat Menggunakan ekstensi dengan Azure CLI.

  • Jalankan versi az untuk menemukan versi dan pustaka dependen yang diinstal. Untuk meningkatkan ke versi terbaru, jalankan peningkatan az.

1. Kloning aplikasi sampel

1. Di Azure Cloud Shell, jalankan perintah berikut untuk mengkloning repositori sampel.

   git clone https://github.com/Azure-Samples/js-e2e-web-app-easy-auth-app-to-app
   

2. Membuat dan menyebarkan aplikasi

Buat grup sumber daya, paket aplikasi web, aplikasi web, dan sebarkan dalam satu langkah.

3. Mengonfigurasi pengaturan aplikasi

Aplikasi frontend perlu mengetahui URL aplikasi backend untuk permintaan API. Gunakan perintah Azure CLI berikut untuk mengonfigurasi pengaturan aplikasi. URL harus dalam format https://<back-end-app-name>.azurewebsites.net.

az webapp config appsettings set --resource-group myAuthResourceGroup --name <front-end-app-name> --settings BACKEND_URL="https://<back-end-app-name>.azurewebsites.net"

4. Frontend memanggil backend

Telusuri ke aplikasi frontend dan kembalikan profil palsu dari backend. Tindakan ini memvalidasi bahwa frontend berhasil meminta profil dari backend, dan backend mengembalikan profil.

1. Buka aplikasi web frontend di browser, https://<front-end-app-name>.azurewebsites.net.

   

2. Pilih tautan Get user's profile.

3. Lihat profil palsu yang dikembalikan dari aplikasi web backend.

   

   Nilai withAuthentication false menunjukkan autentikasi belum disiapkan.

5. Mengonfigurasi autentikasi

Dalam langkah ini, Anda mengaktifkan autentikasi dan otorisasi untuk dua aplikasi web. Tutorial ini menggunakan ID Microsoft Entra sebagai IdP.

Anda juga mengonfigurasi aplikasi frontend untuk:

• Memberikan akses aplikasi frontend ke aplikasi backend
• Mengonfigurasi App Service untuk mengembalikan token yang dapat digunakan
• Gunakan token dalam kode Anda.

Untuk informasi selengkapnya, lihat Mengonfigurasi autentikasi Microsoft Entra untuk aplikasi App Services Anda.

Mengaktifkan autentikasi dan otorisasi untuk aplikasi backend

1. Pada menu portal Microsoft Azure, pilih Grup sumber daya atau cari dan pilih Grup sumber daya dari halaman mana pun.

2. Di Grup sumber saya, temukan dan pilih grup sumber daya Anda. Di Gambaran Umum, pilih aplikasi backend Anda.

3. Di menu kiri aplikasi backend Anda, pilih Autentikasi, lalu pilih Tambahkan IdP.

4. Di halaman Tambahkan idP , pilih Microsoft sebagai Penyedia identitas untuk masuk ke Identitas Microsoft dan Microsoft Entra.

5. Terima pengaturan default dan pilih Tambahkan.

   

6. Halaman Autentikasi terbuka. Salin ID Klien aplikasi Microsoft Entra ke notepad. Anda memerlukan nilai ini nanti.

   

Jika Anda berhenti di sini, Anda memiliki aplikasi mandiri yang sudah diamankan oleh autentikasi dan otorisasi App Service. Bagian yang tersisa menunjukkan kepada Anda cara mengamankan solusi multi-aplikasi dengan "mengalirkan" pengguna yang diautentikasi dari frontend ke backend.

Mengaktifkan autentikasi dan otorisasi untuk aplikasi frontend

1. Pada menu portal Microsoft Azure, pilih Grup sumber daya atau cari dan pilih Grup sumber daya dari halaman mana pun.

2. Di Grup sumber saya, temukan dan pilih grup sumber daya Anda. Di Gambaran Umum, pilih halaman manajemen aplikasi frontend Anda.

3. Di menu kiri aplikasi frontend Anda, pilih Autentikasi, lalu pilih Tambahkan IdP.

4. Di halaman Tambahkan idP , pilih Microsoft sebagai Penyedia identitas untuk masuk ke Identitas Microsoft dan Microsoft Entra.

5. Terima pengaturan default dan pilih Tambahkan.

6. Halaman Autentikasi terbuka. Salin ID Klien aplikasi Microsoft Entra ke notepad. Anda memerlukan nilai ini nanti.

Memberikan akses aplikasi frontend ke backend

Kini setelah Anda mengaktifkan autentikasi dan otorisasi ke kedua aplikasi Anda, masing-masing didukung oleh aplikasi AD. Untuk menyelesaikan autentikasi, Anda perlu melakukan tiga hal:

• Memberikan akses aplikasi frontend ke aplikasi backend
• Mengonfigurasi App Service untuk mengembalikan token yang dapat digunakan
• Gunakan token dalam kode Anda.

Dalam langkah ini, Anda memberikan akses aplikasi frontend ke aplikasi backend atas nama pengguna. (Secara teknis, Anda memberikan frontend Aplikasi AD izin untuk mengakses aplikasi AD backend atas nama pengguna.)

1. Di halaman Autentikasi untuk aplikasi frontend, pilih nama aplikasi frontend Anda di bawah Penyedia identitas. Pendaftaran aplikasi ini secara otomatis dibuat untuk Anda. Pilih Izin API di menu sebelah kiri.

2. Pilih Tambahkan izin, kemudian pilih My APIs><back-end-app-name>.

3. Di halaman Minta izin API untuk aplikasi backend, pilih Izin yang didelegasikan dan user_impersonation, lalu pilih Tambahkan izin.

   

Mengonfigurasi App Service untuk mengembalikan token akses yang dapat digunakan

Aplikasi frontend sekarang memiliki izin yang diperlukan untuk mengakses aplikasi backend sebagai pengguna yang masuk. Dalam langkah ini, Anda mengonfigurasi autentikasi dan otorisasi App Service untuk memberi Anda token akses yang dapat digunakan untuk mengakses backend. Untuk langkah ini, Anda memerlukan ID klien backend, yang Anda salin dari Aktifkan autentikasi dan otorisasi untuk aplikasi backend.

Di Cloud Shell, jalankan perintah berikut pada aplikasi frontend untuk menambahkan scope parameter ke pengaturan identityProviders.azureActiveDirectory.login.loginParametersautentikasi . Ganti <front-end-app-name> dan <back-end-client-id>.

az extension add --name authV2
authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid offline_access api://<back-end-client-id>/user_impersonation"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <front-end-app-name> --body "$authSettings"

Perintah secara efektif menambahkan loginParameters properti dengan cakupan kustom tambahan. Berikut adalah penjelasan tentang cakupan yang diminta:

• openid diminta oleh App Service secara default sudah. Untuk mengetahui informasinya, lihat Cakupan OpenID Connect.
• offline_access disertakan di sini untuk kenyamanan (jika Anda ingin merefresh token).
• api://<back-end-client-id>/user_impersonation adalah API yang diekspos dalam pendaftaran aplikasi backend Anda. Ini adalah cakupan yang memberi Anda token JWT yang menyertakan aplikasi backend sebagai audiens token.

Aplikasi Anda kini telah dikonfigurasi. Frontend sekarang siap untuk mengakses backend dengan token akses yang tepat.

Untuk informasi tentang cara mengonfigurasi token akses untuk penyedia lain, lihat Merefresh token penyedia identitas.

6. Mengonfigurasi App Service backend untuk menerima token hanya dari App Service frontend

Anda juga harus mengonfigurasi App Service backend untuk hanya menerima token dari App Service frontend. Tidak melakukan ini dapat mengakibatkan "kesalahan 403: Terlarang" ketika Anda meneruskan token dari frontend ke backend.

Anda dapat mengatur ini melalui proses Azure CLI yang sama dengan yang Anda gunakan di langkah sebelumnya.

1. appId Dapatkan App Service frontend (Anda bisa mendapatkan ini di bilah "Autentikasi" dari Frontend App Service).

2. Jalankan Azure CLI berikut, ganti <back-end-app-name> dan <front-end-app-id>.

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.defaultAuthorizationPolicy.allowedApplications += ["<front-end-app-id>"]')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

authSettings=$(az webapp auth show -g myAuthResourceGroup  -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.jwtClaimChecks += { "allowedClientApplications": ["<front-end-app-id>"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

7. Frontend memanggil backend yang diautentikasi

Aplikasi frontend perlu meneruskan autentikasi pengguna dengan cakupan yang benar user_impersonation ke backend. Langkah-langkah berikut meninjau kode yang disediakan dalam sampel untuk fungsionalitas ini.

Lihat kode sumber aplikasi frontend:

1. Gunakan header yang disuntikkan x-ms-token-aad-access-token App Service frontend untuk mendapatkan accessToken pengguna secara terprogram.

   // ./src/server.js
   const accessToken = req.headers['x-ms-token-aad-access-token'];
   

2. Gunakan accessToken di Authentication header sebagai bearerToken nilai .

   // ./src/remoteProfile.js
   // Get profile from backend
   const response = await fetch(remoteUrl, {
       cache: "no-store", // no caching -- for demo purposes only
       method: 'GET',
       headers: {
           'Authorization': `Bearer ${accessToken}`
       }
   });
   if (response.ok) {
       const { profile } = await response.json();
       console.log(`profile: ${profile}`);
   } else {
       // error handling
   }
   

   Tutorial ini mengembalikan profil palsu untuk menyederhanakan skenario. Tutorial berikutnya dalam seri ini menunjukkan cara menukar bearerToken backend dengan token baru dengan cakupan layanan Azure hilir, seperti Microsoft Graph.

7. Backend mengembalikan profil ke frontend

Jika permintaan dari frontend tidak diotorisasi, layanan Aplikasi backend menolak permintaan dengan kode kesalahan HTTP 401 sebelum permintaan mencapai kode aplikasi Anda. Ketika kode backend tercapai (karena menyertakan token resmi), ekstrak bearerToken untuk mendapatkan accessToken.

Lihat kode sumber aplikasi backend:

// ./src/server.js
const bearerToken = req.headers['Authorization'] || req.headers['authorization'];

if (bearerToken) {
    const accessToken = bearerToken.split(' ')[1];
    console.log(`backend server.js accessToken: ${!!accessToken ? 'found' : 'not found'}`);

    // TODO: get profile from Graph API
    // provided in next article in this series
    // return await getProfileFromMicrosoftGraph(accessToken)

    // return fake profile for this tutorial
    return {
        "displayName": "John Doe",
        "withAuthentication": !!accessToken ? true : false
    }
}

8. Telusuri ke aplikasi

1. Gunakan situs web frontend di browser. URL dalam format https://<front-end-app-name>.azurewebsites.net/.

2. Browser meminta autentikasi Anda ke aplikasi web. Selesaikan autentikasi.

   

3. Setelah autentikasi selesai, aplikasi frontend mengembalikan halaman beranda aplikasi.

   

4. Pilih Get user's profile. Ini meneruskan autentikasi Anda di token pembawa ke backend.

5. Ujung belakang merespons dengan nama profil berkode keras palsu : John Doe.

   

   Nilai withAuthentication true menunjukkan autentikasi telah disiapkan .

9. Bersihkan sumber daya

Di langkah-langkah sebelumnya, Anda membuat sumber daya Azure dalam grup sumber daya.

1. Hapus grup sumber daya dengan menjalankan perintah berikut di Cloud Shell. Perintah ini mungkin perlu waktu beberapa saat untuk dijalankan.

   az group delete --name myAuthResourceGroup
   

2. Gunakan ID Klien aplikasi autentikasi, yang sebelumnya Anda temukan dan catat di Enable authentication and authorization bagian untuk aplikasi backend dan frontend.

3. Hapus pendaftaran aplikasi untuk aplikasi frontend dan backend.

   # delete app - do this for both frontend and backend client ids
   az ad app delete <client-id>
   

Tanya jawab umum

Bagaimana cara menguji autentikasi ini pada mesin pengembangan lokal saya?

Autentikasi dalam prosedur ini disediakan di lapisan platform hosting oleh Azure App Service. Tidak ada emulator yang setara. Anda harus menyebarkan aplikasi frontend dan backend serta autentikasi konfigurasi untuk masing-masing untuk menggunakan autentikasi.

Aplikasi ini tidak menampilkan profil palsu , bagaimana cara men-debugnya?

Aplikasi frontend dan backend keduanya memiliki /debug rute untuk membantu men-debug autentikasi ketika aplikasi ini tidak mengembalikan profil palsu . Rute debug frontend menyediakan bagian penting untuk memvalidasi:

• Variabel lingkungan:
  • dikonfigurasi BACKEND_URL dengan benar sebagai https://<back-end-app-name>.azurewebsites.net. Jangan sertakan garis miring berikutnya atau rute.
• Header HTTP:
  • Header x-ms-token-* disuntikkan.
• Nama profil Microsoft Graph untuk pengguna yang masuk ditampilkan.
• Cakupan aplikasi frontend untuk token memiliki user_impersonation. Jika cakupan Anda tidak menyertakan ini, itu bisa menjadi masalah waktu. Verifikasi parameter aplikasi login frontend Anda di sumber daya Azure. Tunggu beberapa menit untuk replikasi autentikasi.

Apakah kode sumber aplikasi disebarkan dengan benar ke setiap aplikasi web?

1. Di portal Azure untuk aplikasi web, pilih Alat Pengembangan -> Alat Tingkat Lanjut, lalu pilih Buka ->. Ini membuka tab atau jendela browser baru.

2. Di tab browser baru, pilih Telusuri Direktori -> Situs wwwroot.

3. Verifikasi bahwa berikut ini ada di direktori:

   • package.json
   • node_modules.tar.gz
   • /src/index.js

4. Verifikasi properti package.json name sama dengan nama web, baik frontend atau backend.

5. Jika Anda mengubah kode sumber, dan perlu menyebarkan ulang, gunakan az webapp up dari direktori yang memiliki file package.json untuk aplikasi tersebut.

Apakah aplikasi dimulai dengan benar

Kedua aplikasi web harus mengembalikan sesuatu saat halaman beranda diminta. Jika Anda tidak dapat menjangkau /debug aplikasi web, aplikasi tidak dimulai dengan benar. Tinjau log kesalahan untuk aplikasi web tersebut.

1. Di portal Azure untuk aplikasi web, pilih Alat Pengembangan -> Alat Tingkat Lanjut, lalu pilih Buka ->. Ini membuka tab atau jendela browser baru.
2. Di tab browser baru, pilih Telusuri Direktori -> Log Penyebaran.
3. Tinjau setiap log untuk menemukan masalah yang dilaporkan.

Apakah aplikasi frontend dapat berbicara dengan aplikasi backend?

Karena aplikasi frontend memanggil aplikasi backend dari kode sumber server, ini bukan sesuatu yang dapat Anda lihat di lalu lintas jaringan browser. Gunakan daftar berikut untuk menentukan keberhasilan permintaan profil backend:

• Aplikasi web backend mengembalikan kesalahan apa pun ke aplikasi frontend jika tercapai. Jika tidak tercapai, aplikasi frontend melaporkan kode status dan pesan.
  • 401: Pengguna tidak lulus autentikasi dengan benar. Ini dapat menunjukkan cakupan tidak diatur dengan benar.
  • 404: URL ke server tidak cocok dengan rute yang dimiliki server
• Gunakan log streaming aplikasi backend untuk menonton saat Anda membuat permintaan frontend untuk profil pengguna. Ada informasi debug dalam kode console.log sumber yang membantu menentukan di mana kegagalan terjadi.

Apa yang terjadi ketika token frontend kedaluwarsa?

Token akses Anda kedaluwarsa setelah beberapa waktu. Untuk informasi tentang cara merefresh token akses Anda tanpa mengharuskan pengguna untuk melakukan otorisasi ulang dengan aplikasi Anda, lihat Merefresh token penyedia identitas.

Jika saya memiliki aplikasi berbasis browser di aplikasi front-end, dapatkah aplikasi tersebut berbicara dengan ujung belakang secara langsung?

Pendekatan ini mengharuskan kode server untuk meneruskan token akses ke kode JavaScript yang berjalan di browser klien. Karena tidak ada cara untuk melindungi token akses di browser, itu bukan pendekatan yang disarankan. Saat ini, pola Backend-for-Frontend direkomendasikan. Jika diterapkan pada contoh dalam tutorial ini, kode browser pada aplikasi front-end akan melakukan panggilan API dalam sesi terautentikasi ke kode servernya sebagai perantara, dan kode server pada aplikasi front-end pada gilirannya akan melakukan panggilan API ke aplikasi back-end dengan menggunakan x-ms-token-aad-access-token nilai header sebagai token pembawa. Semua panggilan dari kode browser Anda ke kode server akan dilindungi oleh sesi yang diautentikasi.

Langkah berikutnya

Apa yang Anda pelajari:

Lanjutkan ke tutorial berikutnya untuk mempelajari cara menggunakan identitas pengguna ini untuk mengakses layanan Azure.