Auth0 poenostavi postopek vzpostavitve identitete uporabnika v vaši spletni aplikaciji. Zagotavlja varne in prilagodljive funkcije za preverjanje pristnosti in avtorizacijo prek API-ja. Uporabite ga in ne bo vam treba skrbeti za izgradnjo lastnega sistema za preverjanje pristnosti iz nič.

Integracija z Auth0 olajša vključitev zanesljive avtentikacije v vašo aplikacijo React in zagotavlja varen dostop do vaše aplikacije.

Naslednji koraki pojasnjujejo, kaj je potrebno za integracijo Auth0 v aplikacijo React.

Kaj je Auth0?

Auth0 je spletna storitev, ki ponuja varen API za upravljanje avtentikacijo in avtorizacijo uporabnika v vaših aplikacijah.

Zagotavlja prilagodljiv sistem preverjanja pristnosti, ki ga lahko preprosto integrirate v svojo aplikacijo React. Ko Auth0 povežete s svojo aplikacijo, ta obravnava preostalo obremenitev preverjanja pristnosti.

Kako deluje Auth0?

Auth0 ponuja funkcijo univerzalne prijave, ki izvaja tok preverjanja pristnosti. Vsakič, ko se želi uporabnik prijaviti, ga API preusmeri na stran za prijavo Auth0, preveri se njegova pristnost in podatki o uspešni avtentikaciji se nato pošljejo vaši aplikaciji.

Delovni tok preverjanja pristnosti za svojo aplikacijo lahko prilagodite tako, da definirate različne načine prijave. Univerzalna prijava zagotavlja uporabniško ime in geslo kot primarno preverjanje pristnosti, vendar lahko dodajte tudi druge možnosti, kot je družabna prijava, prek ponudnika, kot je Google, in večfaktorska avtentikacija.

Prednost uporabe te vrste avtentikacije je, da vam ni treba poznati identitete protokoli, kot sta OAuth 2.0 ali OpenID Connect, ki se običajno uporabljajo za ustvarjanje varne avtentikacije sistemi.

Ustvarite nov projekt na konzoli za razvijalce Auth0

Če želite začeti, se morate najprej prijaviti za Auth0 račun. Po prijavi se pomaknite do nadzorne plošče in kliknite Ustvari aplikacijo da konfigurirate nastavitve projekta preverjanja pristnosti.

Auth0 ponuja različne konfiguracije preverjanja pristnosti, odvisno od vrste aplikacije, ki jo gradite. Za to vadnico vnesite ime svoje aplikacije in izberite Enostranske spletne aplikacije, nato kliknite na Shrani.

Nato izberite Reagiraj s seznama tehnologij, ki jih podpira Auth0.

Konfigurirajte URI-je aplikacije

Ko ustvarite aplikacijo in konfigurirate zahtevane nastavitve, na nadzorni plošči aplikacije kliknite ikono nastavitve za nastavitev zahtevanih lastnosti URI.

Nastavite naslednje lastnosti:

• Dovoljeni URL-ji za povratni klic. URL, ki ga bo strežnik Auth0 poklical, ko bo uporabnik preveril pristnost.
• Dovoljeni URL-ji za odjavo. URL, na katerega bo Auth0 preusmeril uporabnika, ko se odjavi.
• Dovoljeni spletni izvori. Dovoljeni URL, s katerega lahko prihaja zahteva za avtorizacijo.

Za lokalni razvoj lahko uporabite http://localhost: 3000 URL. Ko pa svojo kodo potisnete v proizvodnjo, boste morali zagotoviti URL-je svoje domene.

Ko končate z izpolnjevanjem URL-jev, nadaljujte in kliknite Shrani spremembe na dnu strani z nastavitvami.

Nastavite želene ponudnike socialnih prijav

Na levem podoknu menija nadzorne plošče aplikacije Auth0 kliknite Preverjanje pristnosti, nato izberite Družba. Nato kliknite na Ustvari povezavo gumb na strani z nastavitvami družbenih povezav.

Nazadnje izberite in dodajte želenega ponudnika socialne prijave.

Konfigurirajte Auth0 v svojo aplikacijo React

Integrirajte storitev preverjanja pristnosti Auth0 v svojo aplikacijo React tako, da zgradite komponente za prijavo in uspeh.

1. Ustvarite aplikacijo React in nastavite datoteko ENV

Ustvarite aplikacijo React, nato odprite mapo projekta v urejevalniku kode. Nato v korenskem imeniku mape vašega projekta ustvarite datoteko ENV, ki bo vsebovala spremenljivke vašega okolja: ime vaše domene in ID odjemalca. Prijavite se v svoj račun Auth0, na nadzorni plošči aplikacije kopirajte ime domene in ID odjemalca ter ju shranite v datoteko ENV, kot sledi:

REACT_APP_AUTH0_DOMAIN= ime vaše domene 
REACT_APP_AUTH0_CLIENT_ID= ID vaše stranke

2. Namestite zahtevane pakete

Zaženite ta ukaz na vašem terminalu, da namestite zahtevane odvisnosti:

npm namestite @auth0/auth0-react

3. Ovijte svojo komponento aplikacije s ponudnikom Auth0

Ponudnik Auth0 uporablja React Context. To vam omogoča dostop do vseh njegovih lastnosti znotraj komponente aplikacije. Ponudnik Auth0 ima tri parametre: domeno odjemalca, ID odjemalca in URI preusmeritve.

Odprite datoteko index.js, izbrišite kodo React predloge in dodajte spodnjo kodo:

uvoz Reagiraj od'reagirati';
uvoz ReactDOM od'react-dom/client';
uvoz aplikacija od'./Aplikacija';
uvoz{Auth0Provider} od'@auth0/auth0-react';
konst root = ReactDOM.createRoot(dokument.getElementById('root'));
root.render(
 domena = {process.env. REACT_APP_AUTH0_DOMAIN}
 clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
 redirectUri = {okno.location.origin}
 >

 </Auth0Provider>, document.getElementById('root')
);

4. Ustvarite komponento strani za prijavo

Ustvarite novo mapo v imeniku /src vaše aplikacije React in jo poimenujte strani. Znotraj te mape ustvarite dve datoteki: Login.js in Success.js.

Odprite datoteko login.js in dodajte spodnjo kodo. Komponenta strani za prijavo bo prikazala gumb za prijavo.

uvoz Reagiraj od'reagirati'
uvoz {useAuth0} od'@auth0/auth0-react';
konst Prijava = () => {
konst { loginWithRedirect, isAuthenticated } = useAuth0();
vrnitev (je preverjeno || (
 loginWithRedirect()}> Prijava</button>
 ))
}
izvozprivzeto Vpiši se

Auth0 privzeto zagotavlja e-pošto in geslo kot metodo preverjanja pristnosti. Poleg tega bo Auth0, odvisno od ponudnikov socialnih prijav, ki ste jih izbrali, prikazal tudi možnost prijave ponudnika.

5. Ustvarite komponento uspešne strani

Ta komponenta bo prikazala dve glavni funkciji: profil preverjenega uporabnika in gumb za odjavo.

V datoteko Success.js dodajte spodnjo kodo:

uvoz Reagiraj od'reagirati'
uvoz {useAuth0} od'@auth0/auth0-react'
konst Uspeh = () => {
konst { uporabnik, odjava, isAuthenticated } = useAuth0(); 
vrnitev ( isAuthenticated && ( 



Uporabniški profil</h1> 

{uporabniško.ime}</h2> 



{uporabnik.email}</p> 
 odjava()}> Odjava</button> 
 </div>
 ))
}
izvozprivzeto Uspeh

Ko se prijavite in vas Auth0 potrdi pristnost, vas Auth0 preusmeri nazaj v vašo aplikacijo in vaši aplikaciji pošlje podatke o koristnem tovoru, ki vsebujejo podatke o uporabniku. Te podatke lahko uporabite v svoji aplikaciji za ustvarjanje uporabniških profilov po meri in upravljanje uporabniških sej. Lastnost Uporabnik iz kljuke UseAuth vam omogoča dostop do določenih uporabniških podatkov.

Kavelj UseAuth0 ponuja tudi lastnost, imenovano isAuthenticated, ki vam omogoča pogojno upodobitev komponent. Če je uporabnik preverjen, bo koda prikazala podrobnosti njegovega profila in prikazala komponento gumba za odjavo.

Nasprotno, če niso, boste upodobili komponento gumba za prijavo. To pomeni, da vam ni treba določiti poti na podlagi statusa preverjanja pristnosti uporabnika, saj ta lastnost samodejno upravlja ta proces. Auth0 definira logiko prijave in odjave, kar vam olajša izvajanje funkcije preverjanja pristnosti.

Ali se splača poskusiti storitev za preverjanje pristnosti Auth0?

Auth0 ponuja že pripravljene rešitve, ki obravnavajo zahteve za preverjanje pristnosti vaše aplikacije. Poleg tega storitev Auth0 ponuja podporo za spletne, mobilne in izvorne razvojne platforme, kar vam omogoča enostavno integracijo sistema za preverjanje pristnosti s tehnološkim skladom po vaši želji.