Mulai cepat: Memasukkan pengguna dan mendapatkan token akses di JavaScript SPA menggunakan alur kode autentikasi dengan PKCE

Selamat Datang! Ini mungkin bukan halaman yang Anda inginkan. Sementara kami bekerja memperbaikinya, tautan ini akan membawa Anda ke artikel yang tepat:

Mulai cepat: Memasukkan pengguna di aplikasi satu halaman (SPA) melalui alur kode otorisasi dengan Proof Key for Code Exchange (PKCE) menggunakan JavaScript

Kami mohon maaf atas ketidaknyamanan ini dan menghargai kesabaran Anda selama kami menyelesaikan masalah ini.

Dalam panduan cepat ini, Anda mengunduh dan menjalankan sampel kode yang menunjukkan bagaimana aplikasi halaman tunggal (SPA) JavaScript dapat mendaftar pengguna masuk dan memanggil Microsoft Graph menggunakan alur otorisasi kode dengan Proof Key for Code Exchange (PKCE). Sampel kode menunjukkan cara mendapatkan token akses untuk memanggil Microsoft Graph API atau API web apa pun.

Lihat Cara kerja sampel untuk melihat ilustrasi.

Prasyarat

• Langganan Azure - Membuat langganan Azure secara gratis
• Node.js
• Visual Studio Code atau editor kode lainnya

Langkah 1: Konfigurasikan aplikasi di portal Microsoft Azure

Agar sampel kode dalam panduan cepat ini berfungsi, tambahkan URI Pengalihan dari http://localhost:3000/.

Buat perubahan ini untuk saya

Aplikasi Anda dikonfigurasi dengan atribut ini.

Langkah 2: Unduh proyek

Menjalankan proyek dengan server web menggunakan Node.js

Unduh sampel kode

Catatan

Enter_the_Supported_Account_Info_Here

Langkah 3: Aplikasi Anda dikonfigurasi dan siap dijalankan

Kami telah menyusun proyek Anda berdasarkan spesifikasi aplikasi Anda.

Menjalankan proyek dengan server web menggunakan Node.js.

1. Untuk memulai server, jalankan perintah berikut dari direktori proyek:

   npm install
   npm start
   

2. Pergi ke http://localhost:3000/.

3. Pilih Masuk untuk memulai proses masuk, lalu panggil Microsoft Graph API.

   Pertama kali masuk, Anda diminta memberikan persetujuan guna mengizinkan aplikasi mengakses profil dan memasukkan Anda. Setelah Anda berhasil masuk, informasi profil pengguna Anda akan ditampilkan di halaman.

Informasi selengkapnya

Cara kerja sampel

MSAL.js

Pustaka MSAL.js mengautentikasi pengguna dan meminta token-token yang digunakan untuk mengakses API yang dilindungi oleh platform identitas Microsoft >. File index.html berisi referensi ke pustaka:

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.0/js/msal-browser.js" integrity=
"sha384-r7Qxfs6PYHyfoBR6zG62DGzptfLBxnREThAlcJyEfzJ4dq5rqExc1Xj3TPFE/9TH" crossorigin="anonymous"></script>

Atau, jika Anda telah menginstal Node.js, Anda dapat mengunduh versi terbaru menggunakan Node.js Package Manager (npm):

npm install @azure/msal-browser

Langkah berikutnya

Untuk panduan langkah demi langkah terperinci tentang membangun aplikasi alur kode autentikasi menggunakan React, lihat tutorial berikut:

Tutorial: Masuk pengguna aplikasi halaman tunggal (SPA) React