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

Artikel
12/31/2023

Azure App Service menyediakan layanan hosting web yang sangat dapat diskalakan dan dapat melakukan patch sendiri. Selain itu, App Service memiliki dukungan bawaan untuk autentikasi dan otorisasi pengguna. Tutorial ini menunjukkan cara mengamankan aplikasi Anda dengan autentikasi dan otorisasi App Service. Ini menggunakan Express.js dengan frontend tampilan sebagai contoh. Autentikasi dan otorisasi App Service mendukung semua runtime bahasa, dan Anda dapat mempelajari cara menerapkannya ke bahasa pilihan Anda dengan mengikuti tutorial.

Azure App Service menyediakan layanan hosting web yang sangat dapat diskalakan dan melakukan patch mandiri menggunakan sistem operasi Linux. Selain itu, App Service memiliki dukungan bawaan untuk autentikasi dan otorisasi pengguna. Tutorial ini menunjukkan cara mengamankan aplikasi Anda dengan autentikasi dan otorisasi App Service. Ini menggunakan Express.js dengan tampilan. Autentikasi dan otorisasi App Service mendukung semua runtime bahasa, dan Anda dapat mempelajari cara menerapkannya ke bahasa pilihan Anda dengan mengikuti tutorial.

Dalam tutorial, Anda belajar:

Mengaktifkan autentikasi dan otorisasi bawaan
Mengamankan aplikasi terhadap permintaan yang tidak diautentikasi
Menggunakan ID Microsoft Entra sebagai penyedia identitas
Mengakses aplikasi jarak jauh atas nama pengguna yang masuk
Panggilan layanan-ke-layanan yang aman dengan autentikasi token
Menggunakan token akses dari kode server
Menggunakan token akses dari kode klien (browser)

Tip

Setelah menyelesaikan skenario ini, lanjutkan ke prosedur berikutnya untuk mempelajari cara menyambungkan ke layanan Azure sebagai pengguna yang diautentikasi. Skenario umum termasuk mengakses Azure Storage atau database sebagai pengguna yang memiliki kemampuan atau akses tertentu ke tabel atau file tertentu.

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.

Conceptual diagram show the authentication flow from the web user to the frontend app to the backend app.

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

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.

Ubah menjadi direktori aplikasi web frontend.

cd js-e2e-web-app-easy-auth-app-to-app/frontend

Buat dan sebarkan aplikasi web frontend dengan az webapp up. Karena nama aplikasi web harus unik secara global, ganti <front-end-app-name> dengan nama yang unik.

az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --os-type Windows --location "West Europe" --runtime "NODE:16LTS"

Ubah menjadi direktori aplikasi web backend.
```
cd ../backend
```
Sebarkan aplikasi web backend ke grup sumber daya dan paket aplikasi yang sama. Karena nama aplikasi web harus unik secara global, ganti <back-end-app-name> dengan sekumpulan inisial atau angka yang unik.
```
az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --os-type Windows --location "West Europe" --runtime "NODE:16LTS"
```

Ubah menjadi direktori aplikasi web frontend.
```
cd frontend
```
Buat dan sebarkan aplikasi web frontend dengan az webapp up. Karena nama aplikasi web harus unik secara global, ganti <front-end-app-name> dengan sekumpulan inisial atau angka yang unik.
```
az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --location "West Europe" --os-type Linux --runtime "NODE:16-lts"
```
Ubah menjadi direktori aplikasi web backend.
```
cd ../backend
```
Sebarkan aplikasi web backend ke grup sumber daya dan paket aplikasi yang sama. Karena nama aplikasi web harus unik secara global, ganti <back-end-app-name> dengan sekumpulan inisial atau angka yang unik.
```
az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --sku FREE --location "West Europe" --runtime "NODE:16-lts"
```

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.

Buka aplikasi web frontend di browser, https://<front-end-app-name>.azurewebsites.net.
Pilih tautan Get user's profile.
Lihat profil palsu yang dikembalikan dari aplikasi web backend.

Nilai withAuthenticationfalse 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

Pada menu portal Microsoft Azure, pilih Grup sumber daya atau cari dan pilih Grup sumber daya dari halaman mana pun.
Di Grup sumber saya, temukan dan pilih grup sumber daya Anda. Di Gambaran Umum, pilih aplikasi backend Anda.
Di menu kiri aplikasi backend Anda, pilih Autentikasi, lalu pilih Tambahkan IdP.
Di halaman Tambahkan idP , pilih Microsoft sebagai Penyedia identitas untuk masuk ke Identitas Microsoft dan Microsoft Entra.
Terima pengaturan default dan pilih Tambahkan.
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

Pada menu portal Microsoft Azure, pilih Grup sumber daya atau cari dan pilih Grup sumber daya dari halaman mana pun.
Di Grup sumber saya, temukan dan pilih grup sumber daya Anda. Di Gambaran Umum, pilih halaman manajemen aplikasi frontend Anda.
Di menu kiri aplikasi frontend Anda, pilih Autentikasi, lalu pilih Tambahkan IdP.
Di halaman Tambahkan idP , pilih Microsoft sebagai Penyedia identitas untuk masuk ke Identitas Microsoft dan Microsoft Entra.
Terima pengaturan default dan pilih Tambahkan.
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.

Tip

Jika Anda mengalami kesalahan dan mengonfigurasi ulang pengaturan autentikasi/otorisasi aplikasi, token dalam toko token mungkin tidak diregenerasi dari pengaturan baru. Untuk memastikan token diregenerasi, Anda harus keluar dan masuk kembali ke aplikasi Anda. Cara mudah untuk melakukannya adalah dengan menggunakan browser Anda dalam mode privat, serta menutup dan membuka kembali browser dalam mode privat setelah mengubah pengaturan di aplikasi 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.)

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.
Pilih Tambahkan izin, kemudian pilih My APIs><back-end-app-name>.
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.

Tip

Untuk melihat api://<back-end-client-id>/user_impersonation cakupan di portal Azure, buka halaman Autentikasi untuk aplikasi backend, klik tautan di bawah Penyedia identitas, lalu klik Ekspos API di menu sebelah kiri.
Untuk mengonfigurasi cakupan yang diperlukan menggunakan antarmuka web sebagai gantinya, lihat langkah Microsoft di Refresh token autentikasi.
Beberapa cakupan memerlukan persetujuan admin atau pengguna. Persyaratan ini menyebabkan halaman permintaan persetujuan ditampilkan ketika pengguna masuk ke aplikasi frontend di browser. Untuk menghindari halaman persetujuan ini, tambahkan pendaftaran aplikasi frontend sebagai aplikasi klien resmi di halaman Mengekspos API dengan mengklik Tambahkan aplikasi klien dan berikan ID klien dari pendaftaran aplikasi frontend.

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. 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:

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'];
```

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

Gunakan situs web frontend di browser. URL dalam format https://<front-end-app-name>.azurewebsites.net/.
Browser meminta autentikasi Anda ke aplikasi web. Selesaikan autentikasi.
Setelah autentikasi selesai, aplikasi frontend mengembalikan halaman beranda aplikasi.
Pilih Get user's profile. Ini meneruskan autentikasi Anda di token pembawa ke backend.
Ujung belakang merespons dengan nama profil berkode keras palsu : John Doe.

Nilai withAuthenticationtrue menunjukkan autentikasi telah disiapkan .

9. Bersihkan sumber daya

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

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
```
Gunakan ID Klien aplikasi autentikasi, yang sebelumnya Anda temukan dan catat di Enable authentication and authorization bagian untuk aplikasi backend dan frontend.

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?

Di portal Azure untuk aplikasi web, pilih Alat Pengembangan -> Alat Tingkat Lanjut, lalu pilih Buka ->. Ini membuka tab atau jendela browser baru.
Di tab browser baru, pilih Telusuri Direktori -> Situs wwwroot.
Verifikasi bahwa berikut ini ada di direktori:
- package.json
- node_modules.tar.gz
- /src/index.js
Verifikasi properti package.json name sama dengan nama web, baik frontend atau backend.
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.

Di portal Azure untuk aplikasi web, pilih Alat Pengembangan -> Alat Tingkat Lanjut, lalu pilih Buka ->. Ini membuka tab atau jendela browser baru.
Di tab browser baru, pilih Telusuri Direktori -> Log Penyebaran.
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.

Langkah berikutnya

Apa yang Anda pelajari:

Mengaktifkan autentikasi dan otorisasi bawaan
Mengamankan aplikasi terhadap permintaan yang tidak diautentikasi
Menggunakan ID Microsoft Entra sebagai penyedia identitas
Mengakses aplikasi jarak jauh atas nama pengguna yang masuk
Panggilan layanan-ke-layanan yang aman dengan autentikasi token
Menggunakan token akses dari kode server
Menggunakan token akses dari kode klien (browser)

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

Membuat aplikasi n-tingkat yang aman di Azure App Service