KUIDAS - kindlustage oma ReactJS kasutajaliides Azure AD B2C-ga

Paar kuud tagasi tutvustati mind ReactJSi maailmas. Kliendi nõue veebipõhise esipaneeli loomiseks. Kõik minu arendamispäevad kulutati taustaprogrammide arendamiseks, kasutades Microsoft ASP.NET Web API ja C #. Ja te ei saa oma klientidele öelda ei, eks? kui sa pead seda tegema, siis pead seda ka tegema. Nii et astuge uude kasutajaliidese rakenduste loomise valdkonda.

Minu kliendil oli juba WEB API ja veebiliides. See nõue oli luua teine ​​eraldi alammoodul, kasutades ReactJS-i selle veebiliidesega suhtlemiseks. Nagu tavaliselt, on turbeprobleemid tabelisse pandud ja jep, et neil on juba Azure AD B2C häälestamine kasutajahalduseks. Väljakutseks oli ReactJS-i kasutamine autentimiseks ja autoriseerimiseks Azure AD B2C-ga suhtlemiseks.

Usu mind, Azure AD ja Azure AD B2C ühendamiseks frontend-tehnoloogiatega oli vähe õpetusi. Kuid kõik olid tükid siin ja seal. Ma ei leidnud täielikku samm-sammulist õpetust, mis teid juhendaks. Nii et mõelnud, miks mitte kirjutada üks.

Olen siin teinud mõned oletused, et te juba:

  1. Kui teil on ReactJS-i kogemusi ja te ei tea, kuidas Azure AD B2C-d ühendada.
  2. Kas teil on Azure'i konto. Kas teil seda pole? Klõpsake sellel lingil: https://azure.microsoft.com/en-us/ ja klõpsake suurel rasvarohelisel nupul, mille pealkiri on "Start Free>"
  3. Kas teil on kasutajatega täielikult töötav Azure AD B2C kataloog. Kui teil on Azure'i konto ja peate looma Azure AD B2C konto, siis otsige seda linki: https://bit.ly/2U8X9Ft

Alustame uhiuue ReactJS projekti loomisega

  • Kui kasutate Windowsi, käivitage käsuviip või terminal muude platvormide (nt Mac või Linux) jaoks.
  • Minge oma töökataloogi.
  • Tippige järgmine käsk ja vajutage ENTER, et luua ReactJS-i projekt.
$ loo-reageeri-rakendus rjaadb2c
  • Liikuge nüüd loodud projekti kataloogi, sisestades,
$ cd rjaadb2c
  • Avage oma lemmikkoodiredaktor (hakkan kasutama VS-koodi) ja avage eelmises etapis loodud kataloog.
  • Teie toimetaja peaks välja nägema selline
Äsja loodud ReactJS-i projekt VS-koodis

VS-koodil on see kena väike funktsioon nimega terminaliaken. See avab terminali koodiredaktori sees. See on väga mugav funktsioon. Klõpsake menüüribal Terminal> Uus terminal.

  • Nüüd terminali aknas tüüp
npm dollari algus

See käivitab projekti ReactJS. Ja see peaks välja nägema selline.

Teie ReactJS rakendus töötab ja töötab jaotises http: // localhost: 3000

Kõik hea minna, valmistagem nüüd meie Azure AD B2C keskkond.

Azure AD B2C keskkonna ettevalmistamine

Selles jaotises valmistame ette meie Azure AD B2C keskkonna autentimiseks ja autoriseerimiseks.

  • Nüüd logige sisse Azure'i portaali, klõpsates sellel lingil: https://portal.azure.com
  • Klõpsake menüüribal nuppu Filter ja vahetage oma B2C kataloogi
Filtreerimisnupp, et lülituda B2C kataloogi
  • Nüüd klõpsake külgriba menüüs silti Kõik teenused.
  • Tippige otsingukasti Kõik teenused teenuse „Ad b2c”.
  • Klõpsake sildil Azure AD B2C
Azure AD B2C
  • Klõpsake Azure AD B2C-teras rakenduste siltil.
  • Klõpsake jaotises Rakendused nuppu Lisa +.
  • Nüüd täitke uue Azure AD B2C rakenduse loomiseks vajalik teave, nagu allpool näidatud
Looge uus rakendus
  1. Nagu näete, on see selge. Andke oma rakendusele kordumatu nimi.
  2. Ja siis valige „Veebirakendus / veebi API” jaoks Jah, kuna loome veebirakendust.
  3. Ja jätke vaikseks voo lubamiseks jah väärtuseks Jah
  4. Sisestage „Vasta URL” - sel juhul on see meie kohaliku hostiaadress. Tippige „api” või mõni teie valitud identifikaator „App ID URI (valikuline)”.

Selle URI abil saate oma rakendusel luba oma kataloogis teatud funktsioonidele juurde pääseda. Näiteks võib see olla kasutaja profiili teabe lugemine.

Olen selle spetsiaalselt märkinud, sest kui te ei andnud selles asukohas tunnust, ei näe te jaotises „Avaldatud ulatused” ühtegi ulatust. Ma pole kindel, kas see on viga või mitte, kuid ilma selleta ei kuvata siin vaikimisi ulatusi ega saa ka uusi luua.

  • Nüüd klõpsake uue rakenduse loomiseks nuppu Loo.
Rakendus on edukalt loodud
  • Nüüd klõpsake Azure AD B2C - Applications (Rakenduste) jaotises silti Kasutajavood (poliisid).
  • Klõpsake nuppu + Uus kasutajavoog.
Uus kasutajavoog
  • Klõpsake vahekaardi Soovituslik jaotises Loo kasutajavoog linki „Registreeruge ja logige sisse”.
Kasutajate voo loomine
  • Tera loomise loendis veenduge, et täitke vorm vastavalt allolevale pildile. Olete andnud kõik vajalikud juhised ja teabe tera sisse.
Registreerumise ja sisselogimise kasutajate voog
  • Nüüd olete edukalt loonud liitumise ja sisselogimise kasutajate voo. Kui klõpsate nupul Käita kasutajavoolu, saate seda voolu testida.
Kasutajavoog on loodud

See on kõik, mida vajate Azure AD B2C otsas. Teeme kontrollnimekirja.

  1. Azure'i konto []
  2. Azure AD B2C üürnik []
  3. Azure AD B2C rakendus []
  4. Kasutajate voog registreerumiseks ja sisselogimiseks []

Suurepärane, nüüd on seadistamine tehtud. Läheme tagasi meie reageerimisrakendusse ja teeme natuke kodeerimist.

Raamatukogu installimine

Nüüd minge tagasi oma ReactJS rakenduse juurde. Tippige terminali teegi installimiseks järgmine käsk. Pidage meeles, et kasutasime VSCode terminaliakent.

$ npm installige reagect-azure-adb2c - salvestage
react-azure-adb2c on teek, mis aitab teil funktsionaalsust või Azure AD B2C oma ReactJS-i rakendusse saada. Siin klikkides saate lühikese dokumentatsiooni selle kasutamise kohta oma ReactJS-i rakenduses.

Nüüd olete teegi edukalt installinud. Klõpsake oma ReactJS-i rakenduses faili index.js, lisage faili ülaossa järgmine koodirea.

Alustamiseks lisage see koodirida pärast importimist.

Nüüd peate asendama “<>” märgitud üksused oma Azure AD B2C rakenduse väärtustest.

Nüüd minge tagasi Azure'i portaali ja hankige järgmine teave.

Üürniku väärtuse leidmiseks minge tagasi oma Azure AD B2C kataloogi. Kopeeri väärtus jaotises „Domeeninimi” väljale.

Domeeninimi on teie üürnik.

Nüüd rakenduseId haaramiseks klõpsake sildil Rakendused ja kopeerige äsjaloodud rakendusest, antud juhul “ReactJS AADB2C”, id ja asendage väljal applikatoinId olev väärtus.

Rakenduse ID

Nüüd klõpsake siltil Kasutajavood (poliitikad) ja kopeerige poliitika nimi ja asendage väljal signInPolicy olev väärtus.

Sisselogimisreeglid

Nüüd ulatuste massiivi väli. See massiiv annab teie rakendusele vajalikud õigused. Need õigused võimaldavad teie ReactJS-i rakendusel juurde pääseda Azure AD B2C funktsioonidele.

Selle teabe saamiseks:

  1. Klõpsake siltidel Rakendused.
  2. Klõpsake oma rakendusel „ReactJS AADB2C“.
  3. Klõpsake silti Avaldatud ulatused
  4. Haarake väärtus kasutaja FUNL SCOPE VALUE veerus user_impersonation ulatuse jaoks.
  5. Asendage ulatuste massiivi väärtus (pidage meeles, et see on massiiv, iga ulatuse jaoks peate selle massiivi lisama)
Külastage seda linki, et saada ulatuse täielikku üksikasjalikku dokumentatsiooni.

Suurepärane, oleme peaaegu valmis. Nüüd peaks teie lähtestamiskood välja nägema selline.

Veel üks asi, mida lisada. Asendame vaikekoodi ReactDOM.render () sellega.

Pärast kõiki neid muudatusi peaks teie fail index.js välja nägema selline.

Peaaegu kohal. Teeme katsesõidu. Tippige oma terminaliaknas järgmine käsk.

npm dollari algus

Te peaksite seda ekraani nägema.

Azure AD B2C sisselogimiskuva.

Nüüd kasutage Azure'i portaali jaoks oma sisselogimisandmeid või võite luua uue konto, klõpsates nupul „Liitu kohe”. Kas mäletate? oleme loonud kasutajavoo nii sisselogimiseks kui ka registreerumiseks. Lahe, kas pole.

Registreerumisekraan.

Pärast uue konto loomist või olemasoleva konto kasutamist saate rakendusse sisse logida. Kuid te ei pruugi näha ReactJS-i vaikelehte. See võib juhtuda ebapiisavate rakenduse lubade tõttu.

Chrome'i arendaja tööriistad. Rakenduse seansi salvestus.

Selle parandamiseks

  1. Minge tagasi Azure'i portaali
  2. Minge Azure AD B2C kataloogi
  3. Klõpsake silti Applications (Rakendused)
  4. Klõpsake äsja loodud rakendusel („ReactJS AADB2C”).
  5. Klõpsake API juurdepääsu siltil
  6. Klõpsake nuppu + Lisa
  7. Valige rippmenüüst Vali API 4. sammus rakendus.
  8. Valige „Juurdepääs sellele rakendusele sisselogitud kasutaja nimel ...”
  9. Klõpsake nuppu OK
Rakendusele vajalike lubade andmine.

Läheme tagasi meie ReactJS-i rakendusse ja värskendame või taaskäivitage see.

Palju õnne !!! Sa oled valmis.

ReactJS App

Haarakem mõni teave Azure AD B2C-st ja kuvame selle react logo all.

Minge tagasi terminali ja installige järgmine pakett.

$ npm installida jwt-decode --save
See pakett võimaldab teil Azure AD B2C-st JWT-tooni dekodeerida ja sellesse sisu haarata.

Nüüd peate külastama tagasi Azure'i portaali ja laskma Azure AD B2C-l seda teavet teile saata. Selleks

  1. Minge tagasi Azure'i portaali.
  2. Minge oma Azure B2C kataloogi.
  3. Klõpsake silti Kasutajavood (poliisid).
  4. Klõpsake loodud sisselogimisreegleid.
  5. Klõpsake linki Taotluse nõuded
  6. Valige väljad, mida vajate, sel juhul olen valinud linn, riik / piirkond, e-posti aadressid, kuvatav nimi, eesnimi (sellest saab eesnimi), perekonnanimi (see on perekonnanimi).
  7. Klõpsake nuppu Salvesta.
Rakenduse nõuete lubamine.

Minge tagasi oma ReactJS-i rakendusse ja klõpsake src-kataloogis. Lisage uus fail. Pange sellele nimi Auth.js. Kopeerige ja kleepige järgmine kood faili.

Nüüd avage App.js ja asendage selle koodiga.

Oleme kõik valmis. Võimaldab meie ReactJS rakendust uuesti käivitada.

npm dollari algus

Teile kuvatakse Microsofti sisselogimiskuva, pärast edukat sisselogimist peaksite seda ekraani nägema.

Oleme korjanud teavet Azure AD B2C-st

Ja haarake kood siit.

Head päeva.