Mengautentikasi ke sumber daya Azure dari aplikasi JavaScript lokal

  • Artikel

Aplikasi yang berjalan di luar Azure (misalnya lokal atau di pusat data pihak ketiga) harus menggunakan perwakilan layanan aplikasi untuk mengautentikasi ke Azure saat mengakses sumber daya Azure. Objek perwakilan layanan aplikasi dibuat menggunakan proses pendaftaran aplikasi di Azure. Saat perwakilan layanan aplikasi dibuat, ID klien dan rahasia klien dibuat untuk aplikasi Anda. Anda menyimpan ID klien, rahasia klien, dan ID penyewa Anda dalam variabel lingkungan sehingga Azure SDK untuk JavaScript menggunakan variabel lingkungan untuk mengautentikasi aplikasi Anda ke Azure saat runtime.

Pendaftaran aplikasi yang berbeda harus dibuat untuk setiap lingkungan (seperti pengujian, tahap, produksi) tempat aplikasi berjalan. Hal ini memungkinkan izin sumber daya khusus lingkungan dikonfigurasi untuk setiap perwakilan layanan dan memastikan aplikasi yang disebarkan ke satu lingkungan tidak berbicara dengan sumber daya Azure yang merupakan bagian dari lingkungan lain.

1 - Mendaftarkan aplikasi di Azure

Aplikasi dapat didaftarkan dengan Azure menggunakan portal Microsoft Azure atau Azure CLI.

Masuk ke portal Azure dan ikuti langkah-langkah berikut.

Petunjuk Cuplikan layar
Di portal Azure:
  1. Masukkan pendaftaran aplikasi di bilah pencarian di bagian atas portal Azure.
  2. Pilih item berlabel Pendaftaran aplikasi pada judul Layanan pada menu yang muncul di bawah bilah pencarian.
 A screenshot showing how to use the top search bar in the Azure portal to find and navigate to the App registrations page.
Pada halaman Pendaftaran aplikasi, pilih + Pendaftaran baru. A screenshot showing the location of the New registration button in the App registrations page.
Pada halaman Daftarkan aplikasi, isi formulir sebagai berikut.
  1. Nama → Masukkan nama untuk pendaftaran aplikasi di Azure. Disarankan nama ini termasuk nama aplikasi dan lingkungan (uji, prod) untuk pendaftaran aplikasi.
  2. Jenis akun yang didukung → Hanya akun dalam direktori organisasi ini.
Pilih Daftar untuk mendaftarkan aplikasi Anda dan membuat perwakilan layanan aplikasi.		 A screenshot to fill out Register by giving the app a name and specifying supported account types as accounts in this organizational directory only.
Pada halaman Pendaftaran aplikasi untuk aplikasi Anda:
  1. ID Aplikasi (klien) → Ini adalah ID aplikasi yang akan digunakan aplikasi Anda untuk mengakses Azure selama pengembangan lokal. Salin nilai ini ke lokasi sementara di editor teks karena Anda akan membutuhkannya di langkah mendatang.
  2. ID Direktori (penyewa) → Nilai ini juga akan diperlukan oleh aplikasi Anda saat diautentikasi ke Azure. Salin nilai ini ke lokasi sementara di editor teks. Nilai ini juga akan dibutuhkan di langkah mendatang.
  3. Mandat klien → Anda harus mengatur mandat klien untuk aplikasi sebelum aplikasi Anda dapat mengautentikasi ke Azure dan menggunakan layanan Azure. Pilih Tambahkan sertifikat atau rahasia untuk menambahkan mandat untuk aplikasi Anda.
 A screenshot of the App registration after completion. This screenshot shows the application and tenant IDs, which will be needed in a future step.
Pada halaman Sertifikat & rahasia, pilih + Rahasia klien baru. A screenshot showing the location of the link to use to create a new client secret on the certificates and secrets page.
Dialog Tambahkan rahasia klien akan muncul dari sisi kanan halaman. Dalam dialog ini:
  1. Deskripsi → Masukkan nilai Saat Ini.
  2. Kedaluwarsa → Pilih nilai 24 bulan.
Pilih Buat untuk menambahkan rahasia.

PENTING: Atur pengingat di kalender Anda sebelum tanggal kedaluwarsa rahasia. Dengan cara ini, Anda dapat menambahkan rahasia baru sebelum dan memperbarui aplikasi sebelum kedaluwarsa rahasia ini dan menghindari gangguan layanan di aplikasi Anda.		 A screenshot showing the page where a new client secret is added for the application service principal created by the app registration process.
Halaman Sertifikat & rahasia memperlihatkan nilai rahasia klien.

Salin nilai ini ke lokasi sementara di editor teks karena Anda membutuhkannya di langkah mendatang.

PENTING: Ini adalah satu-satunya waktu Anda akan melihat nilai ini. Setelah Keluar atau menyegarkan halaman ini, Anda tidak akan dapat melihat nilai ini lagi. Anda dapat menambahkan rahasia klien lain tanpa membatalkan rahasia klien ini, tetapi Anda tidak akan melihat nilai ini lagi.		 A screenshot showing the page with the generated client secret.

2 - Menetapkan peran ke perwakilan layanan aplikasi

Selanjutnya, Anda perlu menentukan peran (izin) apa yang dibutuhkan aplikasi Anda pada sumber daya apa dan menetapkan peran tersebut ke aplikasi Anda. Peran dapat diberi peran di sumber daya, grup sumber daya, atau cakupan langganan. Contoh ini akan 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.

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.		 A screenshot showing the top search box in the Azure portal to locate and navigate to the resource group you want to assign roles (permissions) to.
Pada halaman untuk grup sumber daya, pilih Kontrol akses (IAM) dari menu sebelah kiri. A screenshot of the resource group page showing the location of the Access control (IAM) menu item.
Pada halaman Kontrol akses (IAM):
  1. Pilih tab Penetapan peran.
  2. Pilih + Tambahkan dari menu atas lalu Tambahkan penetapan peran dari menu drop-down yang dihasilkan.
 A screenshot showing how to navigate to the role assignments tab and the location of the button used to add role assignments to a resource group.
Halaman Tambahkan penetapan peran mencantumkan semua peran yang dapat ditetapkan untuk grup sumber daya.
  1. Gunakan kotak pencarian untuk memfilter daftar ke ukuran yang lebih mudah dikelola. Contoh ini menunjukkan cara memfilter peran Blob Penyimpanan.
  2. Pilih peran yang ingin ditetapkan.
    Pilih Berikutnya untuk masuk ke layar berikutnya.
 A screenshot showing how to filter and select role assignments to be added to the resource group.
Halaman Tambahkan penetapan peran berikutnya memungkinkan Anda menentukan pengguna yang akan ditetapkan perannya.
  1. Pilih Pengguna, grup, atau perwakilan layanan di bawah Tetapkan akses ke.
  2. Pilih + Pilih anggota di bawah Anggota
Kotak dialog terbuka di sisi kanan portal Azure.		 A screenshot showing the radio button to select to assign a role to a Microsoft Entra group and the link used to select the group to assign the role to.
Dalam dialog Pilih anggota:
  1. Kotak teks Pilih dapat digunakan untuk memfilter daftar pengguna dan grup di langganan Anda. Jika diperlukan, ketik beberapa karakter pertama dari perwakilan layanan yang Anda buat untuk aplikasi guna memfilter daftar.
  2. Pilih perwakilan layanan yang terkait dengan aplikasi Anda.
Pilih Pilih di bagian bawah dialog untuk melanjutkan.		 A screenshot showing how to filter for and select the Microsoft Entra group for the application in the Select members dialog box.
Perwakilan layanan ditampilkan seperti yang dipilih pada layar Tambahkan penetapan peran.

Pilih Tinjau + tetapkan untuk masuk ke halaman akhir lalu Tinjau + tetapkan lagi untuk menyelesaikan proses.		 A screenshot showing the completed Add role assignment page and the location of the Review + assign button used to complete the process.

3 - Mengonfigurasi variabel lingkungan untuk aplikasi

Anda harus mengatur AZURE_CLIENT_IDvariabel lingkungan , AZURE_TENANT_ID, dan AZURE_CLIENT_SECRET untuk proses yang menjalankan aplikasi JavaScript Anda untuk membuat kredensial perwakilan layanan aplikasi tersedia untuk aplikasi Anda saat runtime. Objek DefaultAzureCredential mencari informasi perwakilan layanan dalam variabel lingkungan ini.

AZURE_CLIENT_ID=<value>
AZURE_TENANT_ID=<value>
AZURE_CLIENT_SECRET=<value>

4 - Menerapkan DefaultAzureCredential di aplikasi Anda

Untuk mengautentikasi objek klien Azure SDK ke Azure, aplikasi Anda harus menggunakan DefaultAzureCredential kelas dari paket @azure/identitas .

Pertama, tambahkan 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.

// connect-with-default-azure-credential.js
import { BlobServiceClient } from '@azure/storage-blob';
import { DefaultAzureCredential } from '@azure/identity';
import 'dotenv/config'

const accountName = process.env.AZURE_STORAGE_ACCOUNT_NAME;
if (!accountName) throw Error('Azure Storage accountName not found');

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

Ketika kode di atas membuat instans DefaultAzureCredentialAZURE_SUBSCRIPTION_IDobjek, DefaultAzureCredential membaca variabel lingkungan , , AZURE_CLIENT_IDAZURE_TENANT_ID, dan AZURE_CLIENT_SECRET untuk informasi utama layanan aplikasi untuk terhubung ke Azure.