Memasukkan pengguna dalam sampel aplikasi satu halaman JavaScript vanili

  • Artikel

Panduan cara penggunaan ini menggunakan sampel Aplikasi halaman tunggal (SPA) JavaScript vanilla untuk menunjukkan cara menambahkan autentikasi ke SPA. SPA memungkinkan pengguna untuk masuk dan keluar dengan menggunakan ID Microsoft Entra mereka sendiri untuk penyewa pelanggan. Sampel menggunakan Pustaka Autentikasi Microsoft untuk JavaScript (MSAL.js) untuk menangani autentikasi.

Prasyarat

  • Meskipun IDE apa pun yang mendukung aplikasi JS vanili dapat digunakan, Visual Studio Code direkomendasikan untuk panduan ini. Ini dapat diunduh dari halaman Unduhan .
  • Node.js.
  • id Microsoft Entra untuk penyewa pelanggan. Jika Anda belum memilikinya, daftar untuk uji coba gratis.

Mendaftarkan SPA di pusat admin Microsoft Entra

Untuk memungkinkan aplikasi Anda memasukkan pengguna dengan Microsoft Entra, ID Microsoft Entra untuk pelanggan harus mengetahui aplikasi yang Anda buat. Pendaftaran aplikasi menetapkan hubungan kepercayaan antara aplikasi dan Microsoft Entra. Saat Anda mendaftarkan aplikasi, ID Eksternal menghasilkan pengidentifikasi unik yang dikenal sebagai ID Aplikasi (klien), nilai yang digunakan untuk mengidentifikasi aplikasi Anda saat membuat permintaan autentikasi.

Langkah-langkah berikut menunjukkan cara mendaftarkan aplikasi Anda di pusat admin Microsoft Entra:

  1. Masuk ke pusat admin Microsoft Entra setidaknya sebagai Pengembang Aplikasi.

  2. Jika Anda memiliki akses ke beberapa penyewa, gunakan filter Direktori + langganan di menu atas untuk beralih ke penyewa pelanggan Anda.

  3. Telusuriaplikasi>identitas>Pendaftaran aplikasi.

  4. Pilih + Pendaftaran baru.

  5. Di halaman Daftarkan aplikasi yang muncul;

    1. Masukkan Nama aplikasi yang bermakna yang ditampilkan kepada pengguna aplikasi, misalnya ciam-client-app.
    2. Di bawah Jenis akun yang didukung, pilih Hanya akun dalam direktori organisasi ini.

  6. Pilih Daftar.

  7. Panel Gambaran Umum aplikasi ditampilkan setelah pendaftaran berhasil. Catat ID Aplikasi (klien) yang akan digunakan dalam kode sumber aplikasi Anda.

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:3000/redirect
  4. Pilih Konfigurasikan untuk menyimpan perubahan Anda.
  5. Kembali ke halaman Konfigurasi platform , di aplikasi Halaman tunggal baru yang telah muncul, pilih Tambahkan URI, lalu masukkan http://localhost:3000/
  6. Pilih Simpan untuk menyimpan perubahan Anda, dan pastikan kedua URI tercantum.

Memberikan izin API

  1. Dari halaman Pendaftaran aplikasi, pilih aplikasi yang Anda buat (seperti ciam-client-app) untuk membuka halaman Ringkasannya.

  2. Di bagian Kelola, pilih Izin API.

  3. Di bagian Izin yang dikonfigurasi, pilih Tambahkan izin.

  4. Pilih tab API Microsoft .

  5. Di bagian Api Microsoft yang umum digunakan , pilih Microsoft Graph.

  6. Pilih opsi Izin yang didelegasikan .

  7. Di bawah bagian Pilih izin , cari dan pilih izin openid dan offline_access .

  8. Pilih tombol Tambahkan izin akses.

  9. Pada titik ini, Anda telah menetapkan izin dengan benar. Namun, karena penyewa adalah penyewa pelanggan, pengguna konsumen itu sendiri tidak dapat menyetujui izin ini. Anda sebagai admin harus menyetujui izin ini atas nama semua pengguna di penyewa:

    1. Pilih Berikan persetujuan admin untuk <nama> penyewa Anda, lalu pilih Ya.
    2. Pilih Refresh, lalu verifikasi bahwa Diberikan untuk <nama> penyewa Anda muncul di bawah Status untuk kedua cakupan.

Membuat alur pengguna

Ikuti langkah-langkah ini untuk membuat alur pengguna yang dapat digunakan pelanggan untuk masuk atau mendaftar aplikasi.

  1. Masuk ke pusat admin Microsoft Entra sebagai setidaknya Administrator Alur Pengguna ID Eksternal.

  2. Jika Anda memiliki akses ke beberapa penyewa, gunakan filter Direktori + langganan di menu atas untuk beralih ke penyewa pelanggan Anda.

  3. Telusurike Alur penggunaIdentitas Eksternal Identitas Identitas>.>

  4. Pilih + Alur pengguna baru.

  5. Pada halaman Buat :

    1. Masukkan Nama untuk alur pengguna, seperti SignInSignUpSample.

    2. Di daftar Penyedia identitas, pilih Akun Email. IdP ini memungkinkan pengguna untuk masuk atau mendaftar menggunakan alamat email mereka.

      Catatan

      Penyedia identitas tambahan akan dicantumkan di sini hanya setelah Anda menyiapkan federasi dengan mereka. Misalnya, jika menyiapkan federasi dengan Google atau Facebook, Anda akan dapat memilih idP tambahan tersebut di sini.

    3. Di bawah akun Email, Anda dapat memilih salah satu dari dua opsi. Untuk tutorial ini, pilih Email dengan kata sandi.

      • Email dengan kata sandi: Memungkinkan pengguna baru untuk mendaftar dan masuk menggunakan alamat email sebagai nama masuk dan kata sandi sebagai kredensial faktor pertama mereka.

      • Email kode akses satu kali: Memungkinkan pengguna baru untuk mendaftar dan masuk menggunakan alamat email sebagai nama masuk dan kode akses satu kali email sebagai kredensial faktor pertama mereka.

        Catatan

        Email kode sandi satu kali harus diaktifkan di tingkat penyewa (Semua Penyedia> Identitas Email Kode akses satu kali) agar opsi ini tersedia di tingkat alur pengguna.

    4. Di bawah Atribut pengguna, pilih atribut yang ingin Anda kumpulkan dari pengguna saat mendaftar. Dengan memilih Tampilkan lainnya, Anda dapat memilih atribut dan klaim untuk Negara/Wilayah, Nama Tampilan, dan Kode Pos. PilihOK. (Pengguna hanya dimintai atribut saat mendaftar untuk pertama kalinya.)

  6. Pilih Buat. Alur pengguna baru muncul di daftar Alur pengguna. Jika perlu, refresh halaman.

Untuk mengaktifkan pengaturan ulang kata sandi mandiri, gunakan langkah-langkah dalam artikel Mengaktifkan pengaturan ulang kata sandi mandiri .

Mengaitkan SPA dengan alur pengguna

Meskipun banyak aplikasi dapat dikaitkan dengan alur pengguna Anda, satu aplikasi hanya dapat dikaitkan dengan satu alur pengguna. Alur pengguna memungkinkan konfigurasi pengalaman pengguna untuk aplikasi tertentu. Misalnya, Anda dapat mengonfigurasi alur pengguna yang mengharuskan pengguna untuk masuk atau mendaftar dengan nomor telepon atau alamat email.

  1. Pada menu bilah samping, pilih Identitas.

  2. Pilih External Identities, lalu Alur pengguna.

  3. Di halaman Alur pengguna , pilih Nama alur pengguna yang Anda buat sebelumnya, misalnya, SignInSignUpSample.

  4. Di bawah Gunakan, pilih Aplikasi.

  5. Pilih Tambahkan Aplikasi.

  6. Pilih aplikasi dari daftar seperti ciam-client-app atau gunakan kotak pencarian untuk menemukan aplikasi, lalu pilih.

  7. Pilih tombol Pilih.

Mengkloning atau mengunduh sampel SPA

Untuk mendapatkan sampel SPA, Anda bisa memilih salah satu opsi berikut:

  • Kloning repositori menggunakan Git:

        git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Unduh sampel

Jika Anda memilih untuk mengunduh .zip file, ekstrak file aplikasi sampel ke folder di mana panjang total jalur adalah 260 karakter atau lebih sedikit.

Menginstal dependensi proyek

  1. Buka jendela terminal di direktori akar proyek sampel, dan masukkan cuplikan berikut untuk menavigasi ke folder proyek:

        cd 1-Authentication\0-sign-in-vanillajs\App

  2. Pasang dependensi proyek:

        npm install

Mengonfigurasi spa sampel

  1. Buka authConfig.js.
  2. Temukan Enter_the_Tenant_Name_Here dan ganti dengan nama penyewa Anda.
  3. Di Otoritas, temukan Enter_the_Tenant_Subdomain_Here dan ganti dengan subdomain penyewa Anda. Misalnya, jika domain utama penyewa Anda adalah caseyjensen@onmicrosoft.com, nilai yang harus Anda masukkan adalah casyjensen.
  4. Simpan file.

Jalankan proyek Anda dan masuk

  1. Buka terminal baru dan jalankan perintah berikut untuk memulai server web ekspres Anda.

    npm start

  2. Buka browser web dan navigasi ke http://localhost:3000/.

  3. Masuk dengan akun yang terdaftar di penyewa pelanggan.

  4. Setelah masuk, nama tampilan ditampilkan di samping tombol Keluar seperti yang ditunjukkan pada cuplikan layar berikut.

  5. SPA sekarang akan menampilkan tombol yang mengatakan Minta Informasi Profil. Pilih untuk menampilkan data profil.

    Cuplikan layar masuk ke JS SPA vanili.

Keluar dari aplikasi

  1. Untuk keluar dari aplikasi, pilih Keluar di bilah navigasi.
  2. Jendela muncul yang meminta akun mana yang akan keluar.
  3. Setelah berhasil keluar, jendela akhir muncul menyarankan Anda untuk menutup semua jendela browser.

Langkah berikutnya

Mengaktifkan pengaturan ulang kata sandi mandiri