KĀ - nostipriniet savu ReactJS interfeisu ar Azure AD B2C

Pēc pāris mēnešiem es tiku iepazīstināts ar ReactJS pasauli. Klienta prasība izveidot tīmekļa priekšskatījumu. Visas manas izstrādātāju dienas tika pavadītas, lai attīstītu aizmugures sistēmas, izmantojot Microsoft ASP.NET Web API un C #. Un jūs nevarat pateikt nē saviem klientiem, vai ne? ja jums tas jādara, jums tas jādara. Tāpēc sāciet jaunu lietojumprogrammu veidošanas jomu.

Manam klientam jau bija WEB API un tīmekļa lietojumprogramma. Šī prasība bija izveidot citu atsevišķu apakšmoduli, izmantojot ReactJS, lai mijiedarbotos ar šo Web API. Kā parasti, drošības problēmas tiek ievietotas tabulā un jā, tām jau ir Azure AD B2C iestatīšana lietotāju pārvaldībai. Izaicinājums bija izmantot ReactJS, lai mijiedarbotos ar Azure AD B2C autentificēšanai un autorizācijai.

Uzticieties man, bija maz mācību par to, kā savienot Azure AD un Azure AD B2C ar frontend tehnoloģijām. Bet visi šeit un tur bija gabaliņi. Es nevarēju atrast pilnīgu apmācību, kas jums palīdzētu. Tāpēc domāja, kāpēc nerakstīt vienu.

Es šeit izdarīju dažus pieņēmumus, ka jūs jau:

  1. Jums ir pieredze ar ReactJS, un jūs nezināt, kā savienot Azure AD B2C.
  2. Ir Azure konts. Vai jums tāda nav? Noklikšķiniet uz šīs saites: https://azure.microsoft.com/en-us/ un noklikšķiniet uz lielās tauku zaļās pogas “Start Free>”.
  3. Lietojiet lietotājiem pilnībā funkcionējošu Azure AD B2C direktoriju. Ja jums ir Azure konts un jums ir jāizveido Azure AD B2C konts, apskatiet šo saiti: https://bit.ly/2U8X9Ft

Sāksim izveidot pilnīgi jaunu ReactJS projektu

  • Ja atrodaties sistēmā Windows, aktivizējiet komandu uzvedni vai citu platformu, piemēram, Mac vai Linux, terminālu.
  • Dodieties uz savu darba direktoriju.
  • Ievadiet šo komandu un nospiediet ENTER, lai izveidotu ReactJS projektu.
$ izveidot-reaģēt-lietotne rjaadb2c
  • Tagad dodieties uz jaunizveidoto projektu direktoriju, ierakstot,
$ cd rjaadb2c
  • Atveriet savu iecienītāko kodu redaktoru (es izmantošu VS Code) un atveriet direktoriju, kuru esat izveidojis iepriekšējā solī.
  • Redaktoram vajadzētu izskatīties šādi
Jaunizveidots ReactJS projekts VS Code

VS Code ir šī jauka mazā funkcija, ko sauc par termināla logu. Tas atvērs terminālu koda redaktora iekšpusē. Tā ir ļoti ērta funkcija. Noklikšķiniet uz izvēlnes joslas Terminālis> Jauns terminālis.

  • Tagad termināla logā ierakstiet
Sākums USD npm

Tas izpildīs ReactJS projektu. Un tam vajadzētu izskatīties šādi.

Jūsu lietotne ReactJS darbojas un darbojas sadaļā http: // localhost: 3000

Viss labi, gatavojamies tagad sagatavot mūsu Azure AD B2C vidi.

Azure AD B2C vides sagatavošana

Šajā sadaļā mēs sagatavosim Azure AD B2C vidi autentifikācijai un autorizācijai.

  • Tagad piesakieties Azure portālā, noklikšķinot uz šīs saites: https://portal.azure.com
  • Izvēlnes joslā noklikšķiniet uz pogas Filtrs un pārslēdzieties uz savu B2C direktoriju
Filtrēšanas poga, lai pārslēgtos uz B2C direktoriju
  • Tagad sānjoslas izvēlnē noklikšķiniet uz etiķetes Visi pakalpojumi.
  • Meklēšanas lodziņā Visi pakalpojumi ierakstiet “Ad b2c”.
  • Noklikšķiniet uz Azure AD B2C etiķetes
Debeszils AD B2C
  • Asmenī Azure AD B2C noklikšķiniet uz etiķetes Lietojumprogrammas.
  • Programmā asmens noklikšķiniet uz pogas Pievienot +.
  • Tagad aizpildiet nepieciešamo informāciju, lai izveidotu jaunu Azure AD B2C lietojumprogrammu, kā parādīts zemāk
Izveidojiet jaunu lietojumprogrammu
  1. Kā redzat, tas ir skaidrs. Piešķiriet savam pieteikumam unikālu “Vārdu”.
  2. Pēc tam atlasiet Jā, lai “Web App / Web API”, jo mēs veidojam tīmekļa lietojumprogrammu.
  3. Un atstājiet Jā kā noklusējuma iestatījumu “Atļaut netiešu plūsmu”
  4. Ierakstiet “Atbildēt URL”. Šajā gadījumā tā ir mūsu vietējā resursdatora adrese. Ievadiet “api” vai jebkuru jūsu izvēlētu identifikatoru “App ID URI (pēc izvēles)”.

Izmantojot šo URI, jūs atļausit lietojumprogrammai piekļūt noteiktām jūsu direktorijas funkcijām. Piemēram, tas varētu būt lietotāja profila informācijas lasīšana.

Es to esmu īpaši atzīmējis, jo, ja šajā vietā nenorādījāt identifikatoru, sadaļā “Publicētie tvērumi” neredzēsit nevienu tvērumu. Es neesmu pārliecināts, vai tā ir kļūda, bet bez tās jūs šeit neiegūsit noklusējuma tvērumus, kā arī nevar izveidot jaunu.

  • Tagad noklikšķiniet uz pogas Izveidot, lai izveidotu jauno lietojumprogrammu.
Lietojumprogramma ir veiksmīgi izveidota
  • Tagad noklikšķiniet uz etiķetes Lietotāju plūsmas (politikas), kas atrodas Azure AD B2C - lietojumprogrammas.
  • Noklikšķiniet uz pogas + Jauna lietotāja plūsma.
Jauna lietotāju plūsma
  • Asmeņa Izveidot lietotāja plūsmu cilnē Ieteiktie noklikšķiniet uz saites “Pierakstīties un pierakstīties”.
Izveidojiet lietotāju plūsmu
  • Lāpstiņā Izveidot pārliecinieties, ka esat aizpildījis veidlapu, kā parādīts zemāk redzamajā attēlā. Jūs esat devis visas instrukcijas un nepieciešamo informāciju pašā asmeņā.
Pierakstīšanās un pierakstīšanās lietotāju plūsma
  • Tagad jūs esat veiksmīgi izveidojis Sing up and pierakstīšanās lietotāju plūsmu. Noklikšķinot uz pogas Palaist lietotāja plūsmu, jūs varēsit pārbaudīt šo plūsmu.
Lietotāju plūsma ir izveidota

Tas ir viss, kas jums nepieciešams Azure AD B2C galā. Darīsim kontrolsarakstu.

  1. Debeszils konts []
  2. Azure AD B2C nomnieks []
  3. Azure AD B2C lietojumprogramma []
  4. Lietotāju plūsma, lai reģistrētos un pierakstītos []

Lieliski, tagad iestatīšana ir pabeigta. Atgriezīsimies pie mūsu reaģēšanas pieteikuma un nedaudz kodēsim.

Bibliotēkas instalēšana

Tagad atgriezieties pie savas ReactJS lietojumprogrammas. Terminālī ierakstiet šo komandu bibliotēkas instalēšanai. Atcerieties, ka mēs izmantojām VSCode termināla logu.

USD npm instalējiet react-debeszils-adb2c - saglabājiet
react-azure-adb2c ir bibliotēka, kas palīdzēs jums iegūt funkcionalitāti vai Azure AD B2C savai ReactJS lietojumprogrammai. Noklikšķinot šeit, jūs iegūsit īsu dokumentāciju par to, kā to izmantot savā ReactJS lietojumprogrammā.

Tagad esat veiksmīgi instalējis bibliotēku. Savā ReactJS lietojumprogrammā noklikšķiniet uz faila index.js, faila augšdaļā pievienojiet šo koda rindu.

Pēc importēšanas pievienojiet šo koda rindu, lai sāktu.

Tagad vienumi, kas apzīmēti ar “<>”, ir jāaizstāj no jūsu Azure AD B2C lietojumprogrammas vērtībām.

Tagad dodieties atpakaļ uz Azure portālu un satveriet šādu informāciju.

Lai iegūtu īrnieka vērtību, dodieties atpakaļ uz savu Azure AD B2C direktoriju. Kopsavilkumā kopējiet vērtību laukā “Domēna vārds”.

Domēna vārds ir jūsu īrnieks.

Tagad, lai satvertu applicationId, noklikšķiniet uz etiķetes Applications un nokopējiet ID no jaunizveidotās lietojumprogrammas, šajā gadījumā - “ReactJS AADB2C”, un aizstājiet laukā Lietojumprogramma norādīto vērtību.

Pieteikuma ID

Tagad noklikšķiniet uz etiķetes Lietotāju plūsmas (politikas) un nokopējiet politikas nosaukumu un aizvietojiet vērtību signInPolicy laukā.

Pierakstīšanās politika

Tagad jomu masīva lauks. Šis masīvs piešķirs jūsu lietojumprogrammai nepieciešamās atļaujas. Šīs atļaujas ļaus jūsu ReactJS lietojumprogrammai piekļūt Azure AD B2C funkcionalitātei.

Lai satvertu šo informāciju:

  1. Noklikšķiniet uz etiķetes Lietojumprogrammas.
  2. Noklikšķiniet uz savas lietojumprogrammas “ReactJS AADB2C”.
  3. Noklikšķiniet uz etiķetes Publicētie tvērumi
  4. Saņemiet vērtību kolonnā PILNAS DARBĪBAS VĒRTĪBA, lai izmantotu lietotāja uzdošanos.
  5. Aizstāt vērtību skalu masīvā (atcerieties, ka tas ir masīvs, katrai tvērumam jums šajā masīvā jāpievieno elements)
Apmeklējiet šo saiti, lai iegūtu pilnīgu detalizētu dokumentāciju par tvērumiem.

Lieliski, mēs gandrīz esam pabeiguši. Jūsu sākotnējam kodam vajadzētu izskatīties šādi.

Jāpiebilst vēl viena lieta. Aizstāsim noklusējuma ReactDOM.render () kodu ar šo.

Pēc visām šīm izmaiņām jūsu index.js failam vajadzētu izskatīties šādi.

Gandrīz klāt. Veiksim testa braucienu. Termināļa logā ierakstiet un izpildiet šo komandu.

Sākums USD npm

Jums vajadzētu redzēt šo ekrānu.

Azure AD B2C pieteikšanās ekrāns.

Tagad izmantojiet savu pieteikuminformāciju Azure portālā vai arī varat izveidot jaunu kontu, noklikšķinot uz “Reģistrēties tūlīt”. Atceries? mēs esam izveidojuši lietotāju plūsmu gan pierakstīšanās, gan reģistrēšanās gadījumā. Forši tas nav.

Pierakstīšanās ekrāns.

Pēc jauna konta izveides vai esoša konta izmantošanas varat pieteikties lietojumprogrammā. Bet, iespējams, jūs neredzēsit noklusējuma ReactJS lapu. Tas varētu notikt nepietiekamu lietojumprogrammu atļauju dēļ.

Chrome izstrādātāju rīki. Lietojumprogrammu sesijas glabāšana.

Lai to labotu,

  1. Dodieties atpakaļ uz Azure portālu
  2. Dodieties uz Azure AD B2C direktoriju
  3. Noklikšķiniet uz etiķetes Lietojumprogrammas
  4. Noklikšķiniet uz lietojumprogrammas (“ReactJS AADB2C”), kuru tikko izveidojāt.
  5. Noklikšķiniet uz API piekļuves etiķetes
  6. Noklikšķiniet uz + Pievienot
  7. Nolaižamajā izvēlnē API atlasiet lietojumprogrammu 4. darbībā.
  8. Atlasiet “Piekļūt šai lietotnei pierakstītā lietotāja vārdā…”
  9. Noklikšķiniet uz Labi
Piešķirot pieteikumam nepieciešamās atļaujas.

Atgriezīsimies pie mūsu ReactJS lietojumprogrammas un atsvaidzināsim vai palaidīsim to vēlreiz.

Apsveicam !!! Tu esi pabeidzis.

Lietotne ReactJS

Noņemsim daļu informācijas no Azure AD B2C un parādīsim to zem react logo.

Dodieties atpakaļ uz termināli un instalējiet šo pakotni.

$ npm instalēt jwt-decode - save
Šī pakete ļaus atšifrēt JWT pilnvaru no Azure AD B2C un satvert tajā esošo informāciju.

Tagad jums jāapmeklē atpakaļ Azure portāls un jāļauj Azure AD B2C nosūtīt jums šo informāciju. Lai to izdarītu,

  1. Dodieties atpakaļ uz Azure portālu.
  2. Atveriet savu Azure B2C direktoriju.
  3. Noklikšķiniet uz etiķetes Lietotāju plūsmas (politikas).
  4. Noklikšķiniet uz izveidotās pierakstīšanās politikas.
  5. Noklikšķiniet uz saites Lietojumprogrammu pretenzijas
  6. Atlasiet nepieciešamos laukus, šajā gadījumā esmu izvēlējies Pilsēta, Valsts / Reģions, E-pasta adreses, Parādāmais vārds, Vārds (tas būs Vārds), Uzvārds (tas būs Uzvārds).
  7. Noklikšķiniet uz Saglabāt.
Iespējot lietojumprogrammu pretenzijas.

Dodieties atpakaļ uz savu ReactJS lietojumprogrammu un noklikšķiniet uz src direktoriju. Pievienojiet jaunu failu. Nosauciet to kā Auth.js. Kopējiet un ielīmējiet failā šo kodu.

Tagad atveriet App.js un nomainiet to ar šo kodu.

Mēs visi esam izdarījuši. Ļaujiet atkārtot mūsu ReactJS lietojumprogrammu.

Sākums USD npm

Jums tiks piedāvāts Microsoft pieteikšanās ekrāns, pēc veiksmīgas pieteikšanās jums vajadzētu redzēt šo ekrānu.

Mēs esam ieguvuši informāciju no Azure AD B2C

Un paķeriet kodu no šejienes.

Jauku dienu.