Memasukkan pengguna dalam sampel aplikasi web Node.js

Panduan cara menggunakan sampel Node.js aplikasi web untuk menunjukkan kepada Anda cara menambahkan autentikasi ke aplikasi web. Aplikasi sampel memungkinkan pengguna untuk masuk dan keluar. Aplikasi web sampel menggunakan Microsoft Authentication Library for Node (MSAL Node) untuk Node untuk menangani autentikasi.

Dalam artikel ini, Anda melakukan tugas-tugas berikut:

• Daftarkan aplikasi web di pusat admin Microsoft Entra.

• Buat alur pengguna masuk dan keluar di pusat admin Microsoft Entra.

• Kaitkan aplikasi web Anda dengan alur pengguna.

• Perbarui sampel Node.js aplikasi web menggunakan ID Microsoft Entra Anda sendiri untuk detail penyewa pelanggan.

• Jalankan dan uji sampel aplikasi web.

Prasyarat

• Node.js.

• Visual Studio Code, atau editor kode lainnya.

• ID Microsoft Entra untuk penyewa pelanggan. Jika Anda belum memilikinya, daftar untuk uji coba gratis.

Mendaftarkan aplikasi web

Untuk memungkinkan aplikasi Anda memasukkan pengguna dengan Microsoft Entra, ID Microsoft Entra untuk pelanggan harus mengetahui aplikasi yang Anda buat. Pendaftaran aplikasi membangun 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, ikuti langkah-langkah berikut:

1. Di bagian Kelola, pilih Autentikasi.
2. Pada halaman Konfigurasi platform , pilih Tambahkan platform, lalu pilih opsi Web .
3. Untuk URI Pengalihan masukkan http://localhost:3000/auth/redirect
4. Pilih Konfigurasikan untuk menyimpan perubahan Anda.
5. Pada halaman Konfigurasi platform , di bawah Web, pilih Tambahkan URI, lalu masukkan http://localhost:3000/
6. Pilih Simpan untuk menyimpan perubahan Anda, dan pastikan kedua URI tercantum.

Menambahkan rahasia klien aplikasi

Buat rahasia klien untuk aplikasi terdaftar. Aplikasi ini menggunakan rahasia klien untuk membuktikan identitasnya ketika meminta token.

1. Dari halaman Pendaftaran aplikasi, pilih aplikasi yang Anda buat (seperti ciam-client-app) untuk membuka halaman Gambaran Umum.
2. Di bagian Kelola, pilih Sertifikat & rahasia.
3. Pilih Rahasia klien baru.
4. Dalam kotak Deskripsi , masukkan deskripsi untuk rahasia klien (misalnya, rahasia klien aplikasi ciam).
5. Di bawah Kedaluwarsa, pilih durasi yang rahasianya valid (sesuai aturan keamanan organisasi Anda), lalu pilih Tambahkan.
6. Rekam Nilai rahasia. Anda akan menggunakan nilai ini untuk konfigurasi pada langkah selanjutnya.

Catatan

Nilai rahasia tidak akan ditampilkan lagi, dan tidak dapat diambil dengan cara apa pun, setelah Anda menavigasi jauh dari halaman Sertifikat dan rahasia , jadi pastikan Anda merekamnya.
Untuk keamanan yang ditingkatkan, pertimbangkan untuk menggunakan sertifikat alih-alih rahasia klien.

Memberikan izin API

Karena aplikasi ini memasukkan pengguna, tambahkan izin yang didelegasikan:

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

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 untuk 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. Telusuri > ke IdentitasEksternal Identitas>Alur pengguna.

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 akses 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 mereka 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 aplikasi web 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 bar 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 contoh aplikasi web

Untuk mendapatkan kode sampel aplikasi web, Anda bisa melakukan salah satu tugas berikut:

• Unduh file .zip atau kloning aplikasi web sampel dari GitHub dengan menjalankan perintah berikut:

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

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

Menginstal dependensi proyek

1. Buka jendela konsol, dan ubah ke direktori yang berisi aplikasi sampel Node.js:

       cd 1-Authentication\5-sign-in-express\App
   

2. Jalankan perintah berikut untuk menginstal dependensi aplikasi:

       npm install && npm update
   

Mengonfigurasi contoh aplikasi web

1. Di editor kode Anda, buka file App\authConfig.js .

2. Temukan tempat penampung:

   1. Enter_the_Application_Id_Here dan ganti dengan ID Aplikasi (klien) aplikasi yang Anda daftarkan sebelumnya.

   2. Enter_the_Tenant_Subdomain_Here dan ganti dengan subdomain Direktori (penyewa). Misalnya, jika domain utama penyewa Anda adalah contoso.onmicrosoft.com, gunakan contoso. Jika Anda tidak memiliki nama penyewa, pelajari cara membaca detail penyewa Anda.

   3. Enter_the_Client_Secret_Here dan ganti dengan nilai rahasia aplikasi yang Anda salin sebelumnya.

Menjalankan dan menguji sampel aplikasi web

Sekarang Anda dapat menguji sampel Node.js aplikasi web. Anda perlu memulai server Node.js dan mengaksesnya melalui browser Anda di http://localhost:3000.

1. Di terminal Anda, jalankan perintah berikut:

       npm start 
   

2. Buka browser Anda, lalu buka http://localhost:3000. Anda akan melihat halaman yang mirip dengan cuplikan layar berikut:

   

3. Setelah halaman selesai dimuat, pilih Tautan masuk . Anda diminta untuk masuk.

4. Pada halaman masuk, ketik alamat Email Anda, pilih Berikutnya, ketik Kata Sandi Anda, lalu pilih Masuk. Jika Anda tidak memiliki akun, pilih Tidak ada akun? Buat satu tautan, yang memulai alur pendaftaran.

5. Jika Anda memilih opsi pendaftaran, setelah mengisi email, kode sandi satu kali, kata sandi baru, dan detail akun lainnya, Anda menyelesaikan seluruh alur pendaftaran. Anda melihat halaman yang mirip dengan cuplikan layar berikut. Anda akan melihat halaman serupa jika Anda memilih opsi masuk.

   

6. Pilih Keluar untuk mengeluarkan pengguna dari aplikasi web atau pilih Lihat klaim token ID untuk melihat klaim token ID yang dikembalikan oleh Microsoft Entra.

Cara kerjanya

Saat pengguna memilih tautan Masuk, aplikasi memulai permintaan autentikasi dan mengalihkan pengguna ke ID Microsoft Entra untuk pelanggan. Pada halaman masuk atau pendaftaran yang muncul, setelah pengguna berhasil masuk atau membuat akun, Microsoft Entra ID untuk pelanggan mengembalikan token ID ke aplikasi. Aplikasi memvalidasi token ID, membaca klaim, dan mengembalikan halaman aman kepada pengguna.

Saat pengguna memilih tautan Keluar, aplikasi menghapus sesinya, mengalihkan pengguna ke ID Microsoft Entra untuk pelanggan keluar titik akhir untuk memberi tahu bahwa pengguna telah keluar.

Jika Anda ingin membuat aplikasi yang mirip dengan sampel yang telah Anda jalankan, selesaikan langkah-langkah dalam artikel Memasukkan pengguna di aplikasi web Node.js Anda sendiri .

Langkah berikutnya

Anda mungkin ingin:

• Aktifkan reset kata sandi

• Mengkustomisasi merek default

• Mengonfigurasi rincian masuk dengan Google

• Memasukkan pengguna di aplikasi web Node.js Anda