BAGAIMANA - Selamatkan bahagian hadapan ReactJS anda dengan Azure AD B2C

Beberapa bulan kemudian saya diperkenalkan ke dunia ReactJS. Keperluan pelanggan untuk membina frontend web. Semua hari pembangun saya dibelanjakan untuk membangun sistem backend menggunakan Microsoft ASP.NET Web API dan C #. Dan anda tidak boleh mengatakan tidak kepada pelanggan anda, bukan? jika anda perlu melakukannya, anda perlu melakukannya. Oleh itu, masuk ke dalam aplikasi baru untuk membina aplikasi frontend.

Pelanggan saya sudah mempunyai API WEB dan frontend web. Keperluan ini adalah untuk membuat satu lagi sub-modul berasingan menggunakan ReactJS untuk berinteraksi dengan API Web tersebut. Seperti kebimbangan keselamatan biasa yang dimasukkan ke dalam jadual dan yep mereka sudah mempunyai persediaan Azure AD B2C untuk pengurusan pengguna. Cabarannya ialah menggunakan ReactJS untuk berinteraksi dengan Azure AD B2C untuk pengesahan dan kebenaran.

Percayalah, terdapat beberapa tutorial tentang cara menghubungkan Azure AD dan Azure AD B2C dengan teknologi frontend. Tetapi semua adalah bit dan potongan di sana sini. Saya tidak dapat mencari tutorial langkah demi langkah yang memandu anda. Jadi fikir mengapa tidak menulis satu.

Saya telah membuat beberapa anggapan di sini, bahawa anda sudah:

  1. Mempunyai pengalaman di ReactJS dan anda tidak tahu bagaimana untuk menyambung Azure AD B2C.
  2. Mempunyai akaun Azure. Tidak ada? Klik pada pautan ini: https://azure.microsoft.com/en-us/ dan klik pada butang hijau besar lemak yang mengatakan "Start Free>"
  3. Mempunyai direktori Azure AD B2C berfungsi sepenuhnya dengan pengguna. Sekiranya anda mempunyai akaun Azure dan perlu membuat akaun Azure AD B2C, lihat pada pautan ini: https://bit.ly/2U8X9Ft

Mari kita mulakan dengan mewujudkan Projek ReactJS yang baru

  • Jika anda berada di Windows, balikan arahan arahan anda atau terminal untuk platform lain seperti Mac atau Linux.
  • Masuk ke dalam direktori kerja anda.
  • Taip arahan berikut dan tekan ENTER untuk membuat projek ReactJS.
$ create-react-app rjaadb2c
  • Sekarang navigasi ke direktori projek yang baru dibuat dengan menaip,
$ cd rjaadb2c
  • Buka editor kod kegemaran anda (saya akan menggunakan Kod VS) dan buka direktori yang telah anda buat dalam langkah sebelumnya.
  • Editor anda sepatutnya kelihatan seperti ini
Projek baru ReactJS dalam Kod VS

Kod VS mempunyai ciri kecil yang bagus yang dipanggil tetingkap terminal. Ini akan membuka terminal di dalam editor kod. Ia adalah ciri yang sangat berguna. Klik Terminal> Terminal Baru dalam bar menu.

  • Sekarang dalam jenis tetingkap terminal
$ npm bermula

Ini akan melaksanakan projek ReactJS. Dan sepatutnya kelihatan seperti ini.

Aplikasi ReactJS anda disiarkan dan berjalan di bawah http: // localhost: 3000

Semua yang baik untuk pergi, mari kita persediaan persekitaran Azure AD B2C kami sekarang.

Menyediakan Azure AD B2C Environment

Dalam bahagian ini, kami akan menyediakan persekitaran Azure AD B2C kami untuk pengesahan dan kebenaran.

  • Sekarang log masuk ke Portal Azure dengan mengklik pada pautan ini: https://portal.azure.com
  • Klik pada butang Penapis dalam bar menu dan beralih ke Direktori B2C anda
Butang penapis untuk beralih ke Direktori B2C
  • Sekarang klik pada label Semua Perkhidmatan dalam menu bar sisi.
  • Taip "Iklan b2c" dalam kotak carian Semua Perkhidmatan.
  • Klik pada label Azure AD B2C
Azure AD B2C
  • Dalam bilah Azure AD B2C, klik pada label Aplikasi.
  • Dalam Aplikasi bilah, klik Tambah + butang.
  • Sekarang isi maklumat yang diperlukan untuk membuat Aplikasi Azure AD B2C baru, seperti yang ditunjukkan di bawah
Buat aplikasi baru
  1. Seperti yang anda lihat jelas. Beri "Nama" unik untuk permohonan anda.
  2. Dan kemudian pilih Ya untuk "Web App / API Web" kerana kami membuat aplikasi web.
  3. Dan biarkan Ya sebagai lalai untuk "Benarkan arus tersirat"
  4. Taipkan "URL Balas" dalam kes ini ialah alamat hos tempatan kami. Taipkan "api" atau sebarang pengenal pasti pilihan anda kepada "Apl ID URI (pilihan)".

Menggunakan URI ini, anda akan membenarkan kebenaran untuk aplikasi anda untuk mengakses ciri-ciri tertentu dalam direktori anda. Sebagai contoh, ini boleh membaca maklumat profil pengguna.

Saya telah menandakan ini secara khusus kerana jika anda tidak memberikan pengenal di lokasi ini, anda tidak akan melihat sebarang skop di bawah "Skop yang diterbitkan". Saya tidak pasti bug atau tidak tetapi tanpa itu, anda tidak akan mendapat skop lalai di sini dan tidak boleh membuat yang baru.

  • Sekarang klik Buat butang untuk membuat aplikasi baru.
Permohonan berjaya dibuat
  • Sekarang klik pada label aliran Pengguna (dasar) dalam Azure AD B2C - Aplikasi bilah.
  • Klik pada + Butang aliran pengguna baru.
Aliran pengguna baru
  • Dalam Bilah Alir Pengguna Buat di bawah tab Disyorkan klik pada pautan "Daftar dan log masuk".
Buat aliran pengguna
  • Dalam bilah Buat pastikan anda mengisi borang seperti gambar di bawah. Anda telah memberikan semua arahan dan maklumat yang anda perlukan dalam bilah itu sendiri.
Aliran pengguna pendaftaran dan log masuk
  • Sekarang anda berjaya membuat Sing menyanyi dan log masuk aliran pengguna. Dengan mengklik butang aliran pengguna, anda akan dapat menguji aliran ini.
Aliran pengguna dibuat

Ini semua yang anda perlukan pada akhir Azure AD B2C. Mari buat senarai semak.

  1. Akaun Azure []
  2. Azure AD B2C Penyewa []
  3. Azure AD B2C Application []
  4. Aliran pengguna untuk mendaftar dan log masuk []

Cemerlang, sekarang persediaan selesai. Mari kita kembali ke permohonan reaksi kami dan lakukan beberapa pengekodan.

Memasang perpustakaan

Sekarang, kembali ke aplikasi ReactJS anda. Dalam terminal jenis perintah berikut untuk memasang perpustakaan. Ingat, kami menggunakan tetingkap terminal VSCode.

$ npm memasang reaksi-azure-adb2c --save
react-azure-adb2c adalah sebuah perpustakaan yang akan membantu anda untuk mendapatkan fungsi atau Azure AD B2C untuk aplikasi ReactJS anda. Dengan mengklik di sini, anda akan mendapat dokumentasi ringkas bagaimana untuk menggunakannya dalam aplikasi ReactJS anda.

Sekarang anda telah berjaya memasang pustaka. Dalam aplikasi ReactJS anda, klik pada file index.js, di bahagian atas fail menambah baris berikut kod.

Tambah baris kod ini selepas import untuk dimulakan.

Kini anda perlu menggantikan item yang ditandakan dalam "<>" daripada nilai-nilai di Aplikasi Azure AD B2C anda.

Sekarang kembali ke portal Azure dan dapatkan maklumat berikut.

Untuk meraih nilai untuk penyewa, kembali ke direktori Azure AD B2C anda. Di bawah gambaran keseluruhan, salin nilai dalam medan "Nama domain".

Nama domain adalah penyewa anda.

Sekarang, untuk merebut aplikasiId, klik pada label Aplikasi, dan salin id dari aplikasi yang baru diwujudkan, dalam kes ini, "ReactJS AADB2C" dan gantikan nilai di bidang aplikasinya.

Id Permohonan

Sekarang klik pada label Aliran pengguna (polis) dan salin nama dasar dan ganti nilai pada medan signInPolicy.

Dasar daftar masuk

Sekarang bidang pelbagai skop. Arahan ini akan memberikan keizinan yang diperlukan untuk permohonan anda. Kebenaran ini akan membolehkan aplikasi ReactJS anda mengakses fungsi di Azure AD B2C.

Untuk mendapatkan maklumat ini:

  1. Klik pada label Aplikasi.
  2. Klik pada aplikasi anda "ReactJS AADB2C".
  3. Klik pada Label skop yang diterbitkan
  4. Dapatkan nilai pada lajur VALUE SKOPE untuk skema user_impersonation.
  5. Gantikan nilai pada array skop (Ingat ini adalah array, untuk setiap skop yang anda perlukan untuk menambah elemen dalam array ini)
Lawati pautan ini untuk mendapatkan dokumentasi lengkap mengenai skop.

Cemerlang, kita hampir selesai. Sekarang, kod permulaan anda sepatutnya kelihatan seperti ini.

Satu lagi perkara yang perlu ditambah. Mari kita ganti kod ReactDOM.render () dengan default ini.

Selepas semua perubahan ini, fail index.js anda sepatutnya kelihatan seperti ini.

Hampir sampai. Mari kita laksanakan ujian. Dalam jenis tetingkap terminal anda dan laksanakan perintah berikut.

$ npm bermula

Anda perlu melihat skrin ini.

Skrin log masuk Azure AD B2C.

Sekarang gunakan butiran log masuk anda untuk portal Azure atau anda boleh membuat akaun baru dengan mengklik pada "Daftar sekarang". Ingat? kami telah membuat aliran pengguna untuk kedua-dua log masuk dan pendaftaran. Kerana tidak.

Skrin pendaftaran.

Selepas membuat akaun baru atau menggunakan akaun sedia ada, anda boleh log masuk ke aplikasi tersebut. Tetapi, anda mungkin tidak melihat halaman ReactJS lalai. Ini mungkin berlaku disebabkan oleh keizinan aplikasi yang tidak mencukupi.

Alat pemaju Chrome. Penyimpanan sesi permohonan.

Untuk menyelesaikannya,

  1. Kembali ke Portal Azure
  2. Pergi ke direktori Azure AD B2C
  3. Klik pada label Aplikasi
  4. Klik pada aplikasi ("ReactJS AADB2C"). Anda baru saja membuat.
  5. Klik pada label akses API
  6. Klik + Tambah
  7. Pilih aplikasi dalam langkah 4 dari drop API Pilih.
  8. Pilih "Akses aplikasi ini bagi pihak pengguna yang dilog masuk ..."
  9. Klik OK
Memberi keizinan yang diperlukan oleh aplikasi anda.

Mari 'kembali ke aplikasi ReactJS kami dan muat semula atau leraskan.

Tahniah !!! Anda sudah selesai.

ReactJS App

Mari ambil beberapa maklumat dari Azure AD B2C dan paparkannya di bawah logo bereaksi.

Kembali ke terminal dan pasangkan pakej berikut.

$ npm memasang jwt-decode --save
Pakej ini akan membolehkan anda menyahkod Token JWT dari Azure AD B2C dan merebut maklumat di dalamnya.

Kini anda perlu melawat kembali ke portal Azure dan biarkan Azure AD B2C menghantar maklumat ini kepada anda. Untuk membuat ini,

  1. Kembali ke portal Azure.
  2. Pergi ke Direktori Azure B2C anda.
  3. Klik pada label Aliran pengguna (dasar).
  4. Klik pada dasar log masuk yang telah anda buat.
  5. Klik pada pautan tuntutan Permohonan
  6. Pilih medan yang anda perlukan, dalam hal ini saya telah memilih Bandar, Negara / Wilayah, Alamat E-mel, Nama Paparan, Nama Berikan (ini akan menjadi Nama Pertama), Nama Keluarga (ini akan menjadi Nama Akhir).
  7. Klik Simpan.
Mendayakan tuntutan permohonan.

Kembali ke aplikasi ReactJS anda dan klik direktori src. Tambah fail baru. Namakannya sebagai Auth.js. Salin dan tampal kod berikut di dalam fail.

Sekarang buka App.js dan gantikan dengan kod ini.

Kita semua selesai. Mari kita ulangi permohonan ReactJS kami.

$ npm bermula

Anda akan diminta dengan skrin log masuk Microsoft, selepas log masuk yang berjaya anda akan melihat skrin ini.

Kami telah mengambil maklumat daripada Azure AD B2C

Dan ambil kod dari sini.

Semoga hari anda indah.