Mulai cepat: Memasukkan pengguna di aplikasi satu halaman (SPA) dan memanggil Microsoft Graph API menggunakan Blazor WebAssembly

Mulai cepat ini menggunakan contoh aplikasi halaman tunggal (SPA) Blazor WebAssembly (WASM) untuk menunjukkan kepada Anda cara memasukkan pengguna dengan menggunakan alur kode otorisasi dengan Proof Key for Code Exchange (PKCE) dan memanggil Microsoft Graph API. Sampel menggunakan Microsoft.Authentication.WebAssembly.MSAL untuk menangani autentikasi.

Prasyarat

• Akun Azure dengan langganan aktif. Jika Anda belum memiliki akun, Buat akun secara gratis.
• .NET SDK
• Visual Studio 2022 atau Visual Studio Code

Mendaftarkan pengidentifikasi aplikasi dan rekaman

Untuk menyelesaikan pendaftaran, beri nama aplikasi, tentukan jenis akun yang didukung, dan tambahkan URI pengalihan. Setelah terdaftar, panel Gambaran Umum aplikasi menampilkan pengidentifikasi yang diperlukan dalam kode sumber aplikasi.

1. Masuk ke Pusat Admin Microsoft Entra.

2. Jika Anda memiliki akses ke beberapa penyewa, gunakan ikon Pengaturan di menu atas untuk beralih ke penyewa tempat Anda ingin mendaftarkan aplikasi dari menu Direktori + langganan.

3. Telusuri ke Aplikasi> Identitas>Pendaftaran aplikasi, pilih Pendaftaran baru.

4. Masukkan Nama untuk aplikasi, seperti identity-client-spa.

5. Untuk Jenis akun yang didukung, pilih Hanya akun dalam direktori organisasi ini. Untuk informasi tentang jenis akun yang berbeda, pilih opsi Bantu saya memilih .

6. Pilih Daftarkan.

   

7. Panel Gambaran Umum aplikasi ditampilkan saat pendaftaran selesai. Rekam ID Direktori (penyewa) dan ID Aplikasi (klien) yang akan digunakan dalam kode sumber aplikasi Anda.

   

   Catatan

   Jenis akun yang didukung dapat diubah dengan merujuk ke Ubah akun yang didukung oleh aplikasi.

Menambahkan URI pengalihan platform

Untuk menentukan jenis aplikasi ke pendaftaran aplikasi Anda, ikuti langkah-langkah berikut:

1. Di bagian Kelola, pilih Autentikasi.
2. Pada halaman Konfigurasi platform , pilih Tambahkan platform, lalu pilih opsi SPA .
3. Untuk URI Pengalihan masukkan http://localhost:5000/authentication/login-callback.
4. Pilih Konfigurasikan untuk menyimpan perubahan Anda.

Mengkloning atau mengunduh aplikasi sampel

Untuk mendapatkan aplikasi sampel, Anda dapat mengkloningnya dari GitHub atau mengunduhnya sebagai file .zip.

• Untuk mengkloning sampel, buka prompt perintah dan navigasi ke tempat Anda ingin membuat proyek, dan masukkan perintah berikut:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet
  

• Unduh file .zip. Ekstrak ke jalur file di mana panjang nama kurang dari 260 karakter.

Mengonfigurasi proyek

1. Di IDE Anda, buka folder proyek, ms-identity-docs-code-dotnet/spa-blazor-wasm, yang berisi sampel.

2. Buka wwwroot/appsettings.json dan perbarui nilai berikut dengan informasi yang direkam sebelumnya di pusat admin.

   {
     "AzureAd": {
       "Authority": "https://login.microsoftonline.com/<Enter the tenant ID obtained from the Microsoft Entra admin center>",
       "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
       "ValidateAuthority": true
     }
   }
   

   • Authority - Otoritas adalah URL yang menunjukkan direktori tempat MSAL dapat meminta token. Ganti Enter_the_Tenant_Info_Here dengan nilai ID Direktori (penyewa) yang direkam sebelumnya.
   • ClientId - Pengidentifikasi aplikasi, juga disebut sebagai klien. Ganti teks dalam tanda kutip dengan nilai ID Aplikasi (klien) yang direkam sebelumnya.

Jalankan aplikasi dan masuk

Jalankan proyek dengan server web dengan menggunakan .NET:

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

   dotnet run
   

2. http Salin URL yang muncul di terminal, misalnya, http://localhost:5000, dan tempelkan ke browser. Sebaiknya gunakan sesi browser privat atau penyamaran.

3. Ikuti langkah-langkah dan masukkan detail yang diperlukan untuk masuk dengan akun Microsoft Anda. Anda akan dimintai alamat email sehingga kode akses satu kali dapat dikirimkan kepada Anda. Masukkan kode saat diminta.

4. Aplikasi akan meminta izin untuk mempertahankan akses ke data yang telah Anda akses, dan untuk memasukkan Anda dan membaca profil Anda. Pilih Terima. Cuplikan layar berikut muncul, menunjukkan bahwa Anda telah masuk ke aplikasi dan telah mengakses detail profil Anda dari Microsoft Graph API.

   

Keluar dari aplikasi

1. Temukan tombol Keluar di sudut kanan atas halaman, dan pilih tombol Keluar .
2. Anda akan diminta untuk memilih akun untuk keluar. Pilih akun yang Anda gunakan untuk masuk.

Pesan muncul yang menunjukkan bahwa Anda telah keluar. Anda sekarang dapat menutup jendela browser.

Lihat juga

• Mulai cepat: Melindungi API web ASP.NET Core dengan platform identitas Microsoft.

• Pelajari selengkapnya dengan membangun React SPA dari awal dengan seri berikut - Tutorial: Memasukkan pengguna dan memanggil Microsoft Graph