Mengautentikasi aplikasi JavaScript ke layanan Azure selama pengembangan lokal menggunakan akun pengembang

Saat Anda membuat aplikasi cloud, pengembang perlu men-debug dan menguji aplikasi di stasiun kerja lokal mereka. Saat aplikasi dijalankan di stasiun kerja pengembang selama pengembangan lokal, aplikasi masih harus mengautentikasi ke setiap layanan Azure yang digunakan oleh aplikasi. Artikel ini membahas cara menggunakan kredensial Azure pengembang untuk mengautentikasi aplikasi ke Azure selama pengembangan lokal.

Agar aplikasi dapat mengautentikasi ke Azure selama pengembangan lokal menggunakan kredensial Azure pengembang, pengembang harus masuk ke Azure dari ekstensi Visual Studio Code Azure Tools, Azure CLI, atau Azure PowerShell. Azure SDK untuk JavaScript dapat mendeteksi bahwa pengembang masuk dari salah satu alat ini lalu mendapatkan kredensial yang diperlukan dari cache kredensial untuk mengautentikasi aplikasi ke Azure sebagai pengguna yang masuk.

Pendekatan ini paling mudah disiapkan untuk tim pengembangan karena memanfaatkan akun Azure pengembang yang ada. Namun, akun pengembang kemungkinan akan memiliki lebih banyak izin daripada yang diperlukan oleh aplikasi, oleh karena itu melebihi izin yang dijalankan aplikasi dalam produksi. Sebagai alternatif, Anda dapat membuat perwakilan layanan aplikasi untuk digunakan selama pengembangan lokal, yang dapat dilingkupkan agar hanya memiliki akses yang diperlukan oleh aplikasi.

1 - Membuat grup Microsoft Entra untuk pengembangan lokal

Karena hampir selalu ada beberapa pengembang yang mengerjakan aplikasi, disarankan untuk terlebih dahulu membuat grup Microsoft Entra untuk merangkum peran (izin) yang dibutuhkan aplikasi dalam pengembangan lokal. Ini menawarkan keuntungan berikut.

• Setiap pengembang diyakinkan untuk memiliki peran yang sama yang ditetapkan karena peran ditetapkan di tingkat grup.
• Jika peran baru diperlukan untuk aplikasi, peran tersebut hanya perlu ditambahkan ke grup Microsoft Entra untuk aplikasi tersebut.
• Jika pengembang baru bergabung dengan tim, mereka hanya harus ditambahkan ke grup Microsoft Entra yang benar untuk mendapatkan izin yang benar untuk bekerja di aplikasi.

Jika Anda memiliki grup Microsoft Entra yang sudah ada untuk tim pengembangan, Anda dapat menggunakan grup tersebut. Jika tidak, selesaikan langkah-langkah berikut untuk membuat grup Microsoft Entra.

Portal Azure

Petunjuk	Cuplikan layar
Navigasi ke halaman ID Microsoft Entra di portal Azure dengan mengetik ID Microsoft Entra ke dalam kotak pencarian di bagian atas halaman lalu pilih ID Microsoft Entra dari bawah layanan.
Pada halaman ID Microsoft Entra, pilih Grup dari menu sebelah kiri.
Pada halaman Semua grup, pilih Grup baru.
Pada halaman Grup Baru: Jenis grup → Keamanan. Nama grup → Nama untuk grup keamanan, biasanya dibuat dari nama aplikasi. Sangat membantu untuk menyertakan string seperti local-dev dalam nama grup untuk menunjukkan tujuan grup. Deskripsi grup → Deskripsi tujuan grup. Pilih link Tidak ada anggota yang dipilih di bawah Anggota untuk menambahkan anggota ke grup.
Pada kotak dialog Tambahkan anggota : Gunakan kotak pencarian untuk memfilter daftar nama pengguna dalam daftar. Pilih satu atau beberapa pengguna untuk pengembangan lokal untuk aplikasi ini. Saat Anda memilih objek, objek berpindah ke daftar Item terpilih di bagian bawah dialog. Setelah selesai, pilih tombol Pilih .
Pada halaman Grup baru, pilih Buat untuk membuat grup. Grup akan dibuat dan Anda akan dibawa kembali ke halaman Semua grup. Mungkin perlu waktu hingga 30 detik agar grup muncul dan Anda mungkin perlu me-refresh halaman karena penembolokan di portal Microsoft Azure.

Azure CLI

Perintah az ad group create digunakan untuk membuat grup di ID Microsoft Entra. Parameter --display-name dan --main-nickname dihitung. Nama yang diberikan ke grup harus didasarkan pada nama aplikasi. Akan sangat berguna untuk menyertakan frasa seperti 'local-dev' dalam nama grup untuk menunjukkan tujuan grup.

az ad group create \
    --display-name MyDisplay \
    --mail-nickname MyDisplay  \
    --description <group-description>

Untuk menambahkan anggota ke grup, Anda memerlukan ID objek pengguna Azure. Gunakan daftar pengguna az ad untuk mencantumkan perwakilan layanan yang tersedia. Perintah parameter --filter menerima filter gaya OData dan dapat digunakan untuk memfilter daftar pada nama tampilan pengguna seperti yang ditunjukkan. Parameter --query mengembalikan kolom yang ditentukan.

az ad user list \
    --filter "startswith(displayName, 'Bob')" \
    --query "[].{objectId:objectId, displayName:displayName}" \
    --output table

Perintah az ad group member add kemudian dapat digunakan untuk menambahkan anggota ke grup.

az ad group member add \
    --group <group-name> \
    --member-id <object-id>

2 - Menetapkan peran ke grup Microsoft Entra

Selanjutnya, Anda perlu menentukan peran (izin) apa yang dibutuhkan aplikasi Anda pada sumber daya apa dan menetapkan peran tersebut ke aplikasi Anda. Dalam contoh ini, peran ditetapkan ke grup Microsoft Entra yang dibuat di langkah 1. Peran dapat diberi peran di sumber daya, grup sumber daya, atau cakupan langganan. Contoh ini menunjukkan cara menetapkan peran di cakupan grup sumber daya karena sebagian besar aplikasi mengelompokkan semua sumber daya Azure mereka ke dalam satu grup sumber daya.

Portal Azure

Petunjuk	Cuplikan layar
Temukan grup sumber daya untuk aplikasi Anda dengan mencari nama grup sumber daya menggunakan kotak pencarian di bagian atas portal Microsoft Azure. Navigasi ke grup sumber daya Anda dengan memilih nama grup sumber daya di bawah judul Grup Sumber Daya dalam kotak dialog.
Pada halaman untuk grup sumber daya, pilih Kontrol akses (IAM) dari menu sebelah kiri.
Pada halaman Kontrol akses (IAM): Pilih tab Penetapan peran. Pilih + Tambahkan dari menu atas lalu Tambahkan penetapan peran dari menu drop-down yang dihasilkan.
Halaman Tambahkan penetapan peran mencantumkan semua peran yang dapat ditetapkan untuk grup sumber daya. Gunakan kotak pencarian untuk memfilter daftar ke ukuran yang lebih mudah dikelola. Contoh ini menunjukkan cara memfilter peran Blob Penyimpanan. Pilih peran yang ingin ditetapkan. Pilih Berikutnya untuk masuk ke layar berikutnya.
Halaman Tambahkan penetapan peran berikutnya memungkinkan Anda menentukan pengguna yang akan ditetapkan perannya. Pilih Pengguna, grup, atau perwakilan layanan di bawah Tetapkan akses ke. Pilih + Pilih anggota di bawah Anggota Kotak dialog terbuka di sisi kanan portal Azure.
Dalam dialog Pilih anggota: Kotak teks Pilih dapat digunakan untuk memfilter daftar pengguna dan grup di langganan Anda. Jika diperlukan, ketik beberapa karakter pertama dari grup Microsoft Entra pengembangan lokal yang Anda buat untuk aplikasi. Pilih grup Microsoft Entra pengembangan lokal yang terkait dengan aplikasi Anda. Pilih Pilih di bagian bawah dialog untuk melanjutkan.
Grup Microsoft Entra ditampilkan seperti yang dipilih pada layar Tambahkan penetapan peran. Pilih Tinjau + tetapkan untuk masuk ke halaman akhir lalu Tinjau + tetapkan lagi untuk menyelesaikan proses.

Azure CLI

Perwakilan layanan aplikasi diberi peran di Azure menggunakan perintah az role assignment create.

az role assignment create --assignee "{appId}" \
    --scope /subscriptions/"{subscriptionName}" \
    --role "{roleName}" \
    --resource-group "{resourceGroupName}"

Untuk mendapatkan nama peran yang dapat ditetapkan oleh perwakilan layanan, gunakan perintah az role definition list.

az role definition list --query "sort_by([].{roleName:roleName, description:description}, &roleName)" --output table

Misalnya, untuk mengizinkan perwakilan layanan aplikasi dengan appId 00000000-0000-0000-0000-000000000000 baca, tulis, dan hapus akses ke kontainer blob Azure Storage dan data ke semua akun penyimpanan dalam grup sumber daya msdocs-sdk-auth-example , Anda akan menetapkan perwakilan layanan aplikasi ke peran Kontributor Data Blob Penyimpanan menggunakan perintah berikut.

az role assignment create --assignee "00000000-0000-0000-0000-000000000000" \
    --scope /subscriptions/"Storage Blob Data Subscriber" \
    --role "Storage Blob Data Contributor" \
    --resource-group "msdocs-sdk-auth-example"

Untuk informasi tentang menetapkan izin di tingkat sumber daya atau langganan menggunakan Azure CLI, lihat artikel Menetapkan peran Azure menggunakan Azure CLI.

3 - Masuk ke Azure menggunakan Visual Studio Code, Azure CLI, atau Azure PowerShell

Azure PowerShell

Buka terminal di stasiun kerja pengembang Anda dan masuk ke Azure dari Azure PowerShell.

Connect-AzAccount

4 - Menerapkan DefaultAzureCredential di aplikasi Anda

Untuk mengautentikasi objek klien Azure SDK ke Azure, aplikasi Anda harus menggunakan DefaultAzureCredential kelas dari @azure/identity paket. Dalam skenario ini, DefaultAzureCredential secara berurutan akan memeriksa untuk melihat apakah pengembang telah masuk ke Azure menggunakan ekstensi alat Azure Visual Studio Code, Azure CLI, atau Azure PowerShell. Jika pengembang masuk ke Azure menggunakan salah satu alat ini, kredensial yang digunakan untuk masuk ke alat akan digunakan oleh aplikasi untuk mengautentikasi ke Azure.

Mulailah dengan menambahkan paket @azure/identitas ke aplikasi Anda.

npm install @azure/identity

Selanjutnya, untuk kode JavaScript apa pun yang membuat objek klien Azure SDK di aplikasi, Anda harus:

1. DefaultAzureCredential Impor kelas dari @azure/identity modul.
2. Buat objek DefaultAzureCredential.
3. Teruskan DefaultAzureCredential objek ke konstruktor objek klien Azure SDK.

Contoh ini ditampilkan di segmen kode berikut.

import { BlobServiceClient } from '@azure/storage-blob';
import { DefaultAzureCredential } from '@azure/identity';

// Acquire a credential object
const tokenCredential = DefaultAzureCredential();

const blobServiceClient = BlobServiceClient(
        `https://${accountName}.blob.core.windows.net`,
        tokenCredential
);

DefaultAzureCredential akan secara otomatis mendeteksi mekanisme autentikasi yang dikonfigurasi untuk aplikasi dan mendapatkan token yang diperlukan untuk mengautentikasi aplikasi ke Azure. Jika aplikasi menggunakan lebih dari satu klien SDK, objek kredensial yang sama dapat digunakan dengan setiap objek klien SDK.