Bagikan melalui


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

Azure App Service menyediakan layanan hosting web yang sangat dapat diskalakan dan melakukan patch sendiri. 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 antarmuka depan. Layanan autentikasi dan otorisasi App Service mendukung semua jenis runtime bahasa. Anda dapat mempelajari cara menerapkannya ke bahasa pilihan Anda dengan mengikuti tutorial ini.

Azure App Service menyediakan layanan hosting web yang sangat dapat diskalakan dan di-patch sendiri menggunakan sistem operasi Linux. 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 antarmuka depan. Layanan autentikasi dan otorisasi App Service mendukung semua jenis runtime bahasa. Anda dapat mempelajari cara menerapkannya ke bahasa pilihan Anda dengan mengikuti tutorial ini.

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

Diagram konseptual menunjukkan alur autentikasi dari pengguna web ke aplikasi front-end ke aplikasi back-end.

Setelah Anda menyelesaikan skenario ini, lanjutkan ke tutorial 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.

Di tutorial ini, Anda akan:

  • 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

Prasyarat

Jika Anda tidak memiliki akun Azure, buat akun gratis sebelum memulai.

Mendapatkan profil pengguna

Aplikasi front-end dikonfigurasi untuk menggunakan API back-end dengan aman. Aplikasi front-end menyediakan 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 berjalan di frontend, App Service menyuntikkan diautentikasi accessToken dari header App Service x-ms-token-aad-access-token. Kode sumber front-end kemudian mengakses dan mengirim accessToken ke server back-end. Server front-end mengirimkan token sebagai bearerToken untuk mengakses API back-end dengan aman. Server back-end memvalidasi bearerToken sebelum meneruskannya ke kode sumber back-end Anda. Setelah kode sumber back-end Anda menerima bearerToken, kode tersebut dapat digunakan.

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

Buat klon sampel aplikasi

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

Membuat dan menyebarkan aplikasi

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

  1. Ubah ke frontend direktori aplikasi web.

    cd js-e2e-web-app-easy-auth-app-to-app/frontend
    
  2. Buat dan sebarkan aplikasi web front-end dengan perintah az webapp up . 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:24LTS"
    
  3. Ubah ke backend direktori aplikasi web.

    cd ../backend
    
  4. Sebarkan aplikasi web back-end ke grup sumber daya dan paket aplikasi yang sama. Nama aplikasi web harus unik secara global. Ganti <back-end-app-name> dengan string huruf dan angka yang unik.

    az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --os-type Windows --location "West Europe" --runtime "NODE:24LTS"
    
  1. Ubah ke frontend direktori aplikasi web.

    cd frontend
    
  2. Buat dan sebarkan aplikasi web front-end dengan perintah az webapp up . Nama aplikasi web harus unik secara global. Ganti <front-end-app-name> dengan string huruf dan 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:24-lts"
    
  3. Ubah ke backend direktori aplikasi web.

    cd ../backend
    
  4. Sebarkan aplikasi web back-end ke grup sumber daya dan paket aplikasi yang sama. Nama aplikasi web harus unik secara global. Ganti <back-end-app-name> dengan string huruf dan angka yang unik.

    az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --sku FREE --location "West Europe" --runtime "NODE:24-lts"
    

Mengonfigurasi pengaturan aplikasi

Aplikasi front-end perlu mengetahui URL aplikasi back-end untuk permintaan API. Gunakan perintah Azure CLI berikut untuk mengonfigurasi pengaturan aplikasi. URL harus 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"

Ujung depan memanggil ujung belakang

Akses aplikasi front-end dan kembalikan profil palsu dari back end. Tindakan ini memvalidasi bahwa front-end berhasil meminta profil dari back-end, dan back-end mengembalikan profil.

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

    Cuplikan layar browser web memperlihatkan aplikasi front-end setelah berhasil menyelesaikan autentikasi.

  2. Pilih tautan Dapatkan profil pengguna .

  3. Lihat profil palsu yang dikembalikan dari aplikasi web server belakang.

    Cuplikan layar browser dengan profil palsu yang dikembalikan dari server.

    Nilai withAuthenticationfalse menunjukkan autentikasi belum disiapkan.

Melakukan konfigurasi autentikasi

Di bagian ini, aktifkan autentikasi dan otorisasi untuk dua aplikasi web. Tutorial ini menggunakan Microsoft Entra ID sebagai penyedia identitas.

Anda juga mengonfigurasi aplikasi front end 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 back-end

  1. Di portal Microsoft Azure, cari dan pilih Grup sumber daya.

  2. Di Grup sumber daya, temukan dan pilih grup sumber daya Anda. Di Gambaran Umum, pilih aplikasi back-end Anda.

  3. Di menu kiri aplikasi back-end Anda, pilihAutentikasi>, lalu pilih Tambahkan IdP.

  4. Di halaman Tambahkan idP , untuk Penyedia identitas, pilih Microsoft untuk masuk menggunakan identitas Microsoft dan Microsoft Entra.

  5. Pilih nilai untuk Kedaluwarsa rahasia klien.

    Cuplikan layar menu kiri aplikasi back-end memperlihatkan Autentikasi/Otorisasi dipilih dan pengaturan dipilih di menu kanan.

  6. Untuk nilai lainnya, terima pengaturan default dan pilih Tambahkan.

  7. Halaman Autentikasi terbuka. Salin ID klien aplikasi Microsoft Entra ke Notepad. Anda memerlukan nilai ini nanti.

    Cuplikan layar jendela Pengaturan Microsoft Entra memperlihatkan Aplikasi Microsoft Entra, dan jendela Aplikasi Microsoft Entra memperlihatkan ID klien untuk disalin.

Jika berhenti di sini, Anda memiliki aplikasi yang berdiri sendiri yang diamankan oleh autentikasi dan otorisasi App Service. Bagian yang tersisa menunjukkan kepada Anda cara mengamankan solusi aplikasi multi dengan mengalihkan pengguna yang telah diautentikasi dari antarmuka depan ke sistem belakang.

Mengaktifkan autentikasi dan otorisasi untuk aplikasi front-end

  1. Di portal Microsoft Azure, cari dan pilih Grup sumber daya.

  2. Di Grup sumber daya, temukan dan pilih grup sumber daya Anda. Di Gambaran Umum, pilih aplikasi front-end Anda.

  3. Di menu kiri aplikasi front-end Anda, pilihAutentikasi>, lalu pilih Tambahkan IdP.

  4. Di halaman Tambahkan idP , untuk Penyedia identitas, pilih Microsoft untuk masuk menggunakan identitas Microsoft dan Microsoft Entra.

  5. Pilih nilai untuk Kedaluwarsa rahasia klien. Untuk nilai lainnya, 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 front-end ke aplikasi back-end

Anda mengaktifkan autentikasi dan otorisasi ke kedua aplikasi Anda. Untuk menyelesaikan autentikasi, Anda perlu melakukan tiga hal:

  • Mengekspos aplikasi backend sebagai API dengan menentukan cakupan
  • Memberikan akses aplikasi frontend ke aplikasi backend
  • Mengonfigurasi App Service untuk mengembalikan token yang dapat digunakan
  • Gunakan token dalam kode Anda

Nota

Sebelum Anda dapat memberikan akses aplikasi frontend ke backend, Anda harus mengekspos API backend dengan mengatur URI ID Aplikasi dan mendefinisikan setidaknya satu cakupan. Ini memungkinkan backend dapat dipilih di bawah "API Saya" saat menetapkan izin API.

Petunjuk / Saran

Jika Anda mengalami kesalahan dan mengonfigurasi ulang pengaturan autentikasi/otorisasi aplikasi Anda, token di penyimpanan token mungkin tidak dibuat ulang dari pengaturan baru. Untuk memastikan token Anda regenerasi, Anda perlu keluar dan masuk kembali ke aplikasi Anda. Salah satu pendekatannya adalah menggunakan browser Anda dalam mode privat. Tutup dan buka kembali browser dalam mode privat setelah mengubah pengaturan di aplikasi Anda.

Di bagian ini, Anda memberikan akses aplikasi front-end ke aplikasi back-end atas nama pengguna. Secara teknis, Anda memberikan izin kepada aplikasi AD front end untuk mengakses aplikasi AD back end atas nama pengguna.

  1. Di halaman Autentikasi untuk aplikasi front-end, di bawah Penyedia identitas, pilih nama aplikasi front-end Anda. Pendaftaran aplikasi ini secara otomatis dibuat untuk Anda.

  2. Pilih Kelola>izin API di menu sebelah kiri.

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

  4. Di halaman Minta izin API untuk aplikasi back-end, pilih Izin yang didelegasikan dan user_impersonation, lalu pilih Tambahkan izin.

    Cuplikan layar halaman Permintaan izin API menampilkan izin Terdelegasi, user_impersonation, dan tombol Tambahkan izin yang dipilih.

Mengonfigurasi App Service untuk mengembalikan token akses yang dapat digunakan

Aplikasi front-end sekarang memiliki izin yang diperlukan untuk mengakses aplikasi back-end sebagai pengguna yang sudah masuk. Di bagian ini, konfigurasikan autentikasi dan otorisasi App Service untuk memberi Anda token akses yang dapat digunakan untuk mengakses back end. Untuk langkah ini, Anda memerlukan ID klien back end, yang Anda salin dari Aktifkan autentikasi dan otorisasi untuk aplikasi back-end.

Di Cloud Shell, jalankan perintah berikut pada aplikasi front-end 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 tersebut menambahkan properti loginParameters dengan cakupan kustom tambahan. Berikut adalah penjelasan tentang cakupan yang diminta:

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

Petunjuk / Saran

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

Aplikasi Anda kini telah dikonfigurasi. Ujung depan sekarang siap untuk mengakses ujung belakang dengan token akses yang tepat.

Untuk informasi tentang cara mengonfigurasi token akses untuk penyedia lain, lihat bagian Penyegaran token dari penyedia identitas.

Mengonfigurasi App Service backend untuk menerima token hanya dari App Service front-end

Anda juga harus mengonfigurasi App Service pada back-end agar hanya menerima token dari App Service pada front-end. Tidak melakukan konfigurasi ini menghasilkan kesalahan 403: Terlarang saat Anda meneruskan token dari ujung depan ke ujung belakang.

Anda dapat menerapkan pendekatan ini dengan menggunakan proses Azure CLI yang sama dengan yang Anda gunakan di langkah sebelumnya.

  1. Dapatkan appId dari App Service front-end. Anda dapat memperoleh nilai ini di halaman Autentikasi, pada App Service front-end.

  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"

Antarmuka memanggil backend yang telah diautentikasi

Aplikasi front-end 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 front-end:

  1. Gunakan header yang disuntikkan oleh App Service front-end untuk mendapatkan accessToken pengguna secara programatis.

    // ./src/server.js
    const accessToken = req.headers['x-ms-token-aad-access-token'];
    
  2. Gunakan accessToken di Authentication header sebagai nilai bearerToken.

    // ./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 back-end bearerToken dengan token baru dengan cakupan layanan Azure hilir, seperti Microsoft Graph.

Back end mengembalikan profil ke ujung depan

Jika permintaan dari ujung depan tidak diotorisasi, App Service back-end menolak permintaan dengan kode kesalahan HTTP 401 sebelum permintaan mencapai kode aplikasi Anda. Ketika kode back-end diakses, karena menyertakan token otorisasi, gunakan ekstrak bearerToken untuk memperoleh accessToken.

Lihat kode sumber aplikasi back-end:

// ./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
    }
}

Telusuri ke aplikasi

  1. Gunakan situs web antarmuka depan di browser. URL-nya adalah https://<front-end-app-name>.azurewebsites.net/.

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

    Cuplikan layar pop-up autentikasi browser yang meminta izin.

  3. Setelah autentikasi selesai, aplikasi front-end mengembalikan halaman beranda aplikasi.

    Cuplikan layar browser web memperlihatkan aplikasi frontend setelah berhasil menyelesaikan autentikasi.

  4. Pilih Dapatkan profil pengguna. Tindakan ini mengirimkan autentikasi Anda di token bearer ke backend.

  5. Backend merespons dengan nama profil palsu yang diprogram secara tetap: .

    Cuplikan layar browser web memperlihatkan aplikasi front-end setelah berhasil mendapatkan profil palsu dari aplikasi back-end.

    Nilai withAuthenticationtrue menunjukkan bahwa autentikasi disiapkan sekarang.

Membersihkan 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 untuk bagian Enable authentication and authorization 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 --id <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 front-end dan back-end serta mengonfigurasi autentikasi agar masing-masing dapat menggunakannya.

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

Aplikasi-aplikasi front-end dan back-end sama-sama memiliki /debug jalur untuk membantu men-debug autentikasi ketika aplikasi ini tidak mengembalikan profil palsu. Rute debug front-end menyediakan bagian penting untuk memvalidasi:

  • Variabel lingkungan:

    • BACKEND_URL dikonfigurasi dengan benar sesuai 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.

  • Aplikasi front-end memiliki cakupan untuk token user_impersonation. Jika cakupan Anda tidak menyertakan nilai ini, itu bisa menjadi masalah waktu. Verifikasi parameter aplikasi login front-end 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 Microsoft Azure untuk aplikasi web, pilih Alat> PengembanganAlat Tingkat Lanjut, lalu pilih Buka. Tindakan ini membuka tab atau jendela browser baru.

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

  3. Verifikasi bahwa berikut ini ada di direktori:

    • package.json
    • node_modules.tar.gz
    • /src/index.js
  4. Verifikasi properti package.jsonname sama dengan nama web, baik frontend atau backend.

  5. Jika Anda mengubah kode sumber, dan perlu menyebarkan ulang, gunakan perintah 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 Microsoft Azure untuk aplikasi web, pilih Alat> PengembanganAlat Tingkat Lanjut, lalu pilih Buka. Tindakan 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 front-end dapat berbicara dengan aplikasi back-end?

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

  • Aplikasi web back-end mengembalikan kesalahan apa pun ke aplikasi front-end jika kondisi tersebut tercapai. Jika tidak tercapai, aplikasi front-end melaporkan kode status HTTP beserta pesan.

    • 401: Pengguna tidak lulus autentikasi dengan benar. Pesan ini dapat menunjukkan cakupan tidak diatur dengan benar.
    • 404: URL ke server tidak cocok dengan rute yang dimiliki server
  • Gunakan log streaming aplikasi back-end untuk memantau ketika Anda melakukan permintaan front-end untuk profil pengguna. Ada informasi debug dalam kode sumber dengan console.log, yang membantu menentukan di mana kegagalan terjadi.

Apa yang terjadi ketika token front-end 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, kami tidak merekomendasikan pendekatan ini. Saat ini, kami merekomendasikan pola Backend-for-Frontend.

Jika diterapkan ke contoh dalam tutorial ini, kode browser pada aplikasi front-end akan melakukan panggilan API dalam sesi terautentikasi ke kode servernya sebagai perantara. Kode server pada aplikasi front-end kemudian 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 dilindungi oleh sesi yang diautentikasi.

Langkah selanjutnya

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