KAKO - Osigurati svoju ReactJS sučelje Azure AD B2C

Prije nekoliko mjeseci uvedena sam u svijet ReactJS-a. Zahtjev klijenta za izradu web frontenda. Svi moji dani programeri potrošeni su na razvoju sigurnosnih sustava pomoću Microsoftovog ASP.NET Web API-ja i C #. I svojim klijentima ne možete reći ne, zar ne? ako to moraš učiniti moraš to i učiniti. Stoga uđite u novo područje stvaranja sučelja aplikacija.

Moj klijent već je imao WEB API i web frontend. Ovaj je zahtjev bio stvoriti još jedan zasebni pod-modul pomoću ReactJS-a za interakciju s tim web API-jem. Kao i obično, sigurnosna pitanja unose se u tablicu i da, već imaju postavku Azure AD B2C za upravljanje korisnicima. Izazov je bio koristiti ReactJS za interakciju s Azure AD B2C za autentifikaciju i autorizaciju.

Vjerujte mi, bilo je nekoliko tutorijala o povezivanju Azure AD i Azure AD B2C s pročelnim tehnologijama. Ali svi su bili tu i tamo. Nisam mogao pronaći potpuni vodič kroz korak po korak koji vas vodi kroz. Pa pomisli zašto ne napisati jedan.

Ovdje sam već nekoliko pretpostavki zaključio da:

  1. Imate iskustva na ReactJS-u i ne znate kako povezati Azure AD B2C.
  2. Imati račun Azure. Nemate ga? Kliknite ovu vezu: https://azure.microsoft.com/en-us/ i kliknite na veliki masno zeleni gumb na kojem piše "Start Free>"
  3. Imati u potpunosti funkcionalan Azure AD B2C direktorij s korisnicima. Ako imate račun Azure i morate stvoriti Azure AD B2C račun, pogledajte ovu vezu: https://bit.ly/2U8X9Ft

Započnimo s stvaranjem potpuno novog ReactJS projekta

  • Ako ste u sustavu Windows, pokrenite naredbeni redak ili terminal za ostale platforme kao što su Mac ili Linux.
  • Uđite u svoj radni imenik.
  • Upišite sljedeću naredbu i pritisnite ENTER da biste stvorili projekt ReactJS.
$ create-react-app rjaadb2c
  • Sada idite do novostvorenog direktorija projekta tako da upišete,
$ cd rjaadb2c
  • Otvorite svoj omiljeni uređivač koda (koristit ću VS kod) i otvorite direktorij koji ste stvorili u prethodnom koraku.
  • Vaš urednik trebao bi izgledati ovako
Novo kreirani projekt ReactJS u VS kodu

VS Code ima tu lijepu malu značajku koja se zove terminal prozor. Ovo će otvoriti terminal unutar uređivača koda. To je vrlo korisna značajka. Kliknite na Terminal> New Terminalin traku izbornika.

  • Sada u vrsti prozora terminala
$ npm start

Ovo će izvršiti projekt ReactJS. I trebalo bi izgledati ovako.

Vaša ReactJS aplikacija radi i radi pod http: // localhost: 3000

Sve u redu, pripremimo sada Azure AD B2C okruženje.

Priprema Azure AD B2C okruženja

U ovom ćemo dijelu pripremiti naše Azure AD B2C okruženje za provjeru autentičnosti i autorizacije.

  • Sada se prijavite na Azure Portal klikom na ovu vezu: https://portal.azure.com
  • Kliknite gumb Filter na traci izbornika i prebacite se na B2C direktorij
Gumb za filtriranje prebacuje se na B2C Directory
  • Sada kliknite na oznaku Sve usluge u izborniku bočne trake.
  • U okvir za pretraživanje Sve usluge upišite "Ad b2c".
  • Kliknite na Azure AD B2C naljepnicu
Azure AD B2C
  • U lopatici Azure AD B2C kliknite na oznaku Applications.
  • U programskoj lopatici kliknite gumb Dodaj +.
  • Sada ispunite podatke potrebne za stvaranje nove Azure AD B2C aplikacije, kao što je prikazano u nastavku
Kreirajte novu aplikaciju
  1. Kao što vidite, jasno je. Dajte jedinstvenom "Name" svojoj aplikaciji.
  2. A zatim odaberite Da u "Web App / Web API" jer stvaramo web aplikaciju.
  3. I ostavite Da kao zadanu za "Dopusti implicitni tok"
  4. Upišite "Odgovor URL" u ovom slučaju to je naša lokalna adresa domaćina. Unesite "api" ili bilo koji identifikator po vašem izboru u "App ID URI (izborno)".

Pomoću ove URI-e, dozvolit ćete vašem programu da pristupi određenim značajkama u vašoj mapi. Kao primjer, to može biti čitanje podataka o korisničkom profilu.

To sam posebno označio jer ako niste dali identifikator na ovoj lokaciji, nećete vidjeti nijednu opseg pod "Objavljeni rasponi". Nisam siguran je li greška ili ne, ali bez toga, ovdje nećete dobiti zadane domete, niti možete stvoriti nove.

  • Sada kliknite gumb Stvori da biste stvorili novu aplikaciju.
Aplikacija je uspješno stvorena
  • Sada kliknite na etiketu Korisnički tokovi (pravila) na alati Azure AD B2C - Aplikacije.
  • Kliknite + Novi gumb protoka korisnika.
Novi tijek korisnika
  • Na lopatici Stvori korisnički tok na kartici Preporučeno kliknite vezu "Prijavi se i prijavi se".
Stvorite korisnički tok
  • U blade Stvorite obavezno ispunite obrazac prema slici ispod. Dali ste sve upute i informacije koje su vam potrebne u samom oštricu.
Protok za prijavu i prijavu korisnika
  • Sada ste uspješno stvorili prijavu i prijavu u tok korisnika. Klikom na gumb Pokreni korisnički tok moći ćete testirati taj tijek.
Korisnički tijek je stvoren

Ovo je sve što trebate na kraju Azure AD B2C. Napravimo popis za provjeru.

  1. Azure račun []
  2. Azure AD B2C najmoprimac []
  3. Azure AD B2C aplikacija []
  4. Korisnički tijek za prijavu i prijavu []

Izvrsno, sad je postavljanje obavljeno. Vratimo se našoj reakcijskoj aplikaciji i napravimo neko kodiranje.

Instaliranje knjižnice

Vratite se svojoj aplikaciji ReactJS. U terminal upišite sljedeću naredbu za instaliranje knjižnice. Ne zaboravite da smo koristili VSCode prozor terminala.

$ npm instalirajte reakct-azure-adb2c --save
reakct-azure-adb2c je knjižnica koja će vam pomoći da dobijete funkcionalnost ili Azure AD B2C na vašu ReactJS aplikaciju. Klikom ovdje dobit ćete kratku dokumentaciju kako ga koristiti u svojoj ReactJS aplikaciji.

Sada ste uspješno instalirali knjižnicu. U aplikaciji ReactJS kliknite datoteku index.js, pri vrhu datoteke dodajte sljedeći redak koda.

Nakon uvoza dodajte ovu liniju koda za inicijalizaciju.

Sada morate zamijeniti stavke označene sa "<>" iz vrijednosti na vašem Azure AD B2C aplikaciji.

Vratite se na portal Azure i uzmite sljedeće informacije.

Da biste uhvatili vrijednost za najmoprimca, vratite se na direktorij Azure AD B2C. U pregledu, kopirajte vrijednost u polje "Naziv domene".

Naziv domene je vaš stanar.

Sada, da biste preuzeli applicationId, kliknite na oznaku Applications i kopirajte id novostvorene aplikacije, u ovom slučaju "ReactJS AADB2C" i zamijenite vrijednost u polju aplikatoinId.

ID aplikacije

Sada kliknite na etiketu Korisnički tokovi (politike) i kopirajte naziv pravila i zamijenite vrijednost u polju signInPolicy.

Pravila prijave

Sad je polje polja opsega. Ovaj niz dat će potrebna dopuštenja vašoj aplikaciji. Ova će dopuštenja omogućiti vašoj ReactJS aplikaciji pristup funkcionalnosti na Azure AD B2C.

Da biste iskoristili ove podatke:

  1. Kliknite na naljepnicu aplikacija.
  2. Kliknite na vašu aplikaciju "ReactJS AADB2C".
  3. Kliknite na Objavljenu oznaku opsega
  4. Zgrabite vrijednost u stupcu FULL SCOPE VALUE za opseg user_impersonation.
  5. Zamijenite vrijednost u rasponu scopes (Upamtite da je ovo niz, za svaki opseg morate dodati element u ovom polju)
Posjetite ovu vezu kako biste dobili detaljnu detaljnu dokumentaciju o opsezima.

Izvrsno, gotovo smo gotovi. Sada bi vaš kod za inicijalizaciju trebao izgledati ovako.

Još jedna stvar koju treba dodati. Zamijenimo zadani kod ReactDOM.render () s ovim.

Nakon svih tih promjena vaša bi datoteka index.js trebala izgledati ovako.

Skoro tamo. Napravimo probnu vožnju. U prozoru vašeg terminala izvršite sljedeću naredbu.

$ npm start

Trebali biste vidjeti ovaj ekran.

Zaslon za prijavu Azure AD B2C.

Sada koristite podatke za prijavu za portal Azure ili možete stvoriti novi račun klikom na "Registriraj se sada". Zapamtiti? stvorili smo korisnički tijek i za prijavu i za prijavu. Super nije to.

Zaslon za prijavu.

Nakon stvaranja novog računa ili korištenja postojećeg računa, možete se prijaviti u aplikaciju. No, možda nećete vidjeti zadanu stranicu ReactJS. To se može dogoditi zbog nedovoljnih dozvola aplikacija.

Alati za razvojne programere Chrome. Pohrana za sesiju aplikacije.

Da biste to riješili,

  1. Vratite se na Azure Portal
  2. Idite u mapu Azure AD B2C
  3. Kliknite na oznaku Applications
  4. Kliknite na aplikaciju ("ReactJS AADB2C") koju ste upravo kreirali.
  5. Kliknite na pristupnu oznaku API-ja
  6. Kliknite + Dodaj
  7. Odaberite aplikaciju u koraku 4 iz padajućeg izbornika Select API.
  8. Odaberite "Pristup ovoj aplikaciji u ime prijavljenog korisnika ..."
  9. Kliknite U redu
Davanje vašoj aplikaciji potrebnih dozvola.

Vratimo se na našu ReactJS aplikaciju i osvježimo je ili ponovo pokrenemo.

Čestitamo !!! Ti si gotov.

Aplikacija ReactJS

Uzmimo neke podatke iz Azure AD B2C i prikazujemo ih pod reaktivnim logotipom.

Vratite se na terminal i instalirajte sljedeći paket.

$ npm instalirajte jwt-decode --save
Ovaj će vam paket omogućiti da dekodirate JWT token iz Azure AD B2C i uhvatite podatke unutar njega.

Sada se morate vratiti na Azure portal i pustiti Azure AD B2C da vam pošalje ove podatke. Uraditi ovo,

  1. Vratite se na portal Azure.
  2. Idite u svoj direktorij B2C Azure.
  3. Kliknite oznaku Korisnički tokovi (pravila).
  4. Kliknite na pravilnik za prijavu koji ste izradili.
  5. Kliknite vezu Prijava polaganja zahtjeva
  6. Odaberite polja koja su vam potrebna, u ovom slučaju sam odabrao grad, zemlju / regiju, adrese e-pošte, prikazano ime, ime, prezime (ovo će biti ime), prezime (ovo će biti prezime).
  7. Kliknite Spremi.
Omogućivanje zahtjeva na aplikaciji.

Vratite se na svoju ReactJS aplikaciju i kliknite src direktorij. Dodajte novu datoteku. Dajte mu ime Auth.js. Kopirajte i zalijepite sljedeći kôd unutar datoteke.

Sada otvorite App.js i zamijenite ga s ovim kodom.

Svi smo gotovi. Omogućimo ponovno pokretanje naše ReactJS aplikacije.

$ npm start

Bit će vam zatraženo da se pojavite na zaslonu za prijavu u Microsoftu, a nakon uspješne prijave trebali biste vidjeti ovaj zaslon.

Informacije smo pokupili od tvrtke Azure AD B2C

I zgrabite kod odavde.

Ugodan dan.