Auth0 pojednostavljuje postupak utvrđivanja korisničkog identiteta u vašoj web-aplikaciji. Omogućuje sigurne i prilagodljive značajke provjere autentičnosti i autorizacije putem svog API-ja. Koristite ga i nećete se morati brinuti o izgradnji vlastitog sustava provjere autentičnosti od nule.

Integracija s Auth0 olakšava uključivanje pouzdane autentifikacije u vašu React aplikaciju i jamči siguran pristup vašoj aplikaciji.

Sljedeći koraci objašnjavaju što je potrebno za integraciju Auth0 u React aplikaciju.

Što je Auth0?

Auth0 je web usluga koja pruža siguran API za rukovanje provjera autentičnosti i autorizacija korisnika u vašim aplikacijama.

Omogućuje prilagodljiv sustav provjere autentičnosti koji možete jednostavno integrirati u svoju React aplikaciju. Nakon što povežete Auth0 sa svojom aplikacijom, ona preuzima ostatak posla autentifikacije.

Kako radi Auth0?

Auth0 pruža značajku univerzalne prijave koja implementira tijek provjere autentičnosti. Svaki put kada se korisnik želi prijaviti, API ga preusmjerava na stranicu za prijavu Auth0, on se autentificira, a korisni podaci o uspješnoj autentifikaciji zatim se šalju vašoj aplikaciji.

Tijek rada provjere autentičnosti za svoju aplikaciju možete prilagoditi definiranjem različitih metoda prijave. Univerzalna prijava pruža korisničko ime i lozinku kao primarnu provjeru autentičnosti, ali možete dodajte i druge opcije kao što je prijava putem društvenih mreža, putem pružatelja usluga kao što je Google, i multi-factor ovjera.

Prednost korištenja ove vrste provjere autentičnosti je ta što ne morate biti upoznati s identitetom protokoli poput OAuth 2.0 ili OpenID Connect, koji se obično koriste za stvaranje sigurne autentifikacije sustava.

Stvorite novi projekt na konzoli za razvojne programere Auth0

Da biste započeli, prvo ćete se morati prijaviti za Auth0 račun. Nakon prijave, idite na nadzornu ploču i kliknite Stvori aplikaciju za konfiguriranje postavki projekta provjere autentičnosti.

Auth0 pruža različite konfiguracije provjere autentičnosti ovisno o vrsti aplikacije koju gradite. Za ovaj vodič unesite naziv svoje aplikacije, odaberite Web aplikacije na jednoj stranici, zatim kliknite na Uštedjeti.

Zatim odaberite Reagirati s popisa tehnologija koje podržava Auth0.

Konfigurirajte URI-je aplikacije

Nakon što izradite aplikaciju i konfigurirate potrebne postavke, na nadzornoj ploči aplikacije kliknite na postavke za postavljanje potrebnih URI svojstava.

Postavite sljedeća svojstva:

• Dopušteni URL-ovi povratnog poziva. URL koji će Auth0 poslužitelj pozvati nakon autentifikacije korisnika.
• Dopušteni URL-ovi za odjavu. URL na koji će Auth0 preusmjeriti korisnika kada se odjavi.
• Dopušteno web podrijetlo. Dopušteni URL s kojeg može doći zahtjev za autorizacijom.

Za lokalni razvoj, možete koristiti http://localhost: 3000 URL. Međutim, nakon što gurnete svoj kod u proizvodnju, morat ćete dati URL-ove svoje domene.

Nakon što završite s ispunjavanjem URL-ova, samo naprijed i kliknite Spremi promjene na dnu stranice postavki.

Postavite svoje željene pružatelje usluga prijave putem društvenih mreža

Na lijevom oknu izbornika nadzorne ploče aplikacije Auth0 kliknite na Ovjera, zatim odaberite Društvene. Zatim kliknite na Stvori vezu gumb na stranici postavki društvenih veza.

Na kraju odaberite i dodajte željenog pružatelja usluge prijave na društvene mreže.

Konfigurirajte Auth0 u svojoj aplikaciji React

Integrirajte uslugu autentifikacije Auth0 u svoju React aplikaciju izgradnjom komponenti za prijavu i uspješnost.

1. Napravite React aplikaciju i postavite ENV datoteku

Napravite React aplikaciju, zatim otvorite mapu projekta u uređivaču koda. Zatim, u korijenskom direktoriju vaše projektne mape, stvorite ENV datoteku za držanje varijabli vaše okoline: naziv vaše domene i ID klijenta. Prijavite se na svoj Auth0 račun, na nadzornoj ploči aplikacije kopirajte naziv domene i ID klijenta i spremite ih u svoju ENV datoteku na sljedeći način:

REACT_APP_AUTH0_DOMAIN= naziv vaše domene 
REACT_APP_AUTH0_CLIENT_ID= vaš ID klijenta

2. Instalirajte potrebne pakete

Pokrenite ovu naredbu na svom terminalu da instalirate potrebne ovisnosti:

npm instalirajte @auth0/auth0-react

3. Omotajte svoju komponentu aplikacije s Auth0 Providerom

Auth0 pružatelj koristi React Context. To vam omogućuje pristup svim njegovim svojstvima unutar komponente aplikacije. Auth0 Provider uzima tri parametra: domenu klijenta, ID klijenta i URI za preusmjeravanje.

Otvorite datoteku index.js, izbrišite predložak React koda i dodajte kod ispod:

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

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

4. Stvorite komponentu stranice za prijavu

Napravite novu mapu u /src direktoriju vaše React aplikacije i nazovite je stranice. Unutar ove mape stvorite dvije datoteke: Login.js i Success.js.

Otvorite datoteku login.js i dodajte kod u nastavku. Komponenta stranice za prijavu prikazat će gumb za prijavu.

uvoz Reagirati iz'reagirati'
uvoz {useAuth0} iz'@auth0/auth0-react';
konst Prijava = () => {
konst { loginWithRedirect, isAuthenticated } = useAuth0();
povratak (je Autentificiran || (
 loginWithRedirect()}> Prijava</button>
 ))
}
izvozzadano Prijaviti se

Prema zadanim postavkama, Auth0 daje e-poštu i lozinku kao metodu provjere autentičnosti. Osim toga, ovisno o davateljima društvenih prijava koje ste odabrali, Auth0 će prikazati i opciju prijave davatelja.

5. Napravite komponentu uspješne stranice

Ova komponenta će prikazati dvije glavne značajke: autentificirani korisnički profil i gumb za odjavu.

U datoteku Success.js dodajte kod u nastavku:

uvoz Reagirati iz'reagirati'
uvoz {useAuth0} iz'@auth0/auth0-react'
konst Uspjeh = () => {
konst { korisnik, odjava, isAuthenticated } = useAuth0(); 
povratak ( je autentificiran && ( 



Korisnički profil</h1> 

{user.name}</h2> 



{user.email}</p> 
 odjava()}> Odjava</button> 
 </div>
 ))
}
izvozzadano Uspjeh

Nakon što se prijavite i dobijete autentifikaciju od strane Auth0, Auth0 vas preusmjerava natrag na vašu aplikaciju i šalje podatke o sadržaju u vašu aplikaciju koji sadrže podatke o korisniku. Možete koristiti te podatke unutar svoje aplikacije za izradu prilagođenih korisničkih profila i upravljanje korisničkim sesijama. Svojstvo User iz kuke UseAuth omogućuje vam pristup određenim korisničkim podacima.

UseAuth0 kuka također pruža svojstvo pod nazivom isAuthenticated, koje vam omogućuje uvjetno prikazivanje komponenti. Ako je korisnik autentificiran, kod će prikazati detalje njegovog profila i prikazati komponentu gumba za odjavu.

Suprotno tome, ako nisu, renderirat ćete komponentu gumba za prijavu. To znači da ne morate specificirati rute na temelju statusa provjere autentičnosti korisnika jer ovo svojstvo automatski upravlja ovim procesom. Auth0 definira logiku prijave i odjave, što vam olakšava implementaciju funkcije provjere autentičnosti.

Isplati li se isprobati uslugu autentifikacije Auth0?

Auth0 pruža gotova rješenja koja se bave zahtjevima provjere autentičnosti vaše aplikacije. Osim toga, usluga Auth0 nudi podršku za web, mobilne i izvorne razvojne platforme omogućujući vam jednostavnu integraciju sustava provjere autentičnosti s hrpom tehnologija po vašem izboru.