Auth0 zjednodušuje proces vytvárania identity používateľa vo vašej webovej aplikácii. Poskytuje bezpečné a prispôsobiteľné funkcie autentifikácie a autorizácie prostredníctvom svojho API. Použite ho a nebudete sa musieť starať o budovanie vlastného autentifikačného systému od začiatku.

Integrácia s Auth0 uľahčuje zahrnutie spoľahlivej autentifikácie do vašej aplikácie React a zaručuje bezpečný prístup k vašej aplikácii.

Nasledujúce kroky vysvetľujú, čo je potrebné na integráciu Auth0 do aplikácie React.

Čo je Auth0?

Auth0 je webová služba, ktorá poskytuje bezpečné rozhranie API autentifikáciu a autorizáciu používateľa vo vašich aplikáciách.

Poskytuje prispôsobiteľný autentifikačný systém, ktorý môžete jednoducho integrovať do svojej aplikácie React. Po pripojení Auth0 k vašej aplikácii zvládne zvyšok overovacej záťaže.

Ako funguje Auth0?

Auth0 poskytuje funkciu univerzálneho prihlásenia, ktorá implementuje tok autentifikácie. Zakaždým, keď sa chce používateľ prihlásiť, rozhranie API ho presmeruje na prihlasovaciu stránku Auth0, overí sa a údaje o úspešnom overení sa potom odošlú do vašej aplikácie.

Pracovný postup overovania pre svoju aplikáciu môžete prispôsobiť definovaním rôznych spôsobov prihlásenia. Univerzálne prihlásenie poskytuje používateľské meno a heslo ako primárne overenie, ale môžete pridajte aj ďalšie možnosti, ako napríklad sociálne prihlásenie prostredníctvom poskytovateľa, ako je Google, a viacfaktorové Overenie.

Výhodou použitia tohto typu autentifikácie je, že nemusíte poznať identitu protokoly ako OAuth 2.0 alebo OpenID Connect, ktoré sa bežne používajú na vytvorenie bezpečnej autentifikácie systémov.

Vytvorte nový projekt v Konzole pre vývojárov Auth0

Ak chcete začať, musíte sa najprv zaregistrovať Auth0 účtu. Po registrácii prejdite na svoj informačný panel a kliknite Vytvoriť aplikáciu na konfiguráciu nastavení autentifikačného projektu.

Auth0 poskytuje rôzne konfigurácie autentifikácie v závislosti od typu aplikácie, ktorú vytvárate. Pre tento tutoriál vyplňte názov vašej aplikácie, vyberte Jednostránkové webové aplikácie, potom kliknite na Uložiť.

Ďalej vyberte Reagovať zo zoznamu technológií podporovaných Auth0.

Nakonfigurujte identifikátory URI aplikácie

Po vytvorení aplikácie a konfigurácii požadovaných nastavení kliknite na hlavnom paneli vašej aplikácie na nastavenie na nastavenie požadovaných vlastností URI.

Nastavte nasledujúce vlastnosti:

• Povolené adresy URL spätného volania. Adresa URL, ktorú server Auth0 zavolá po overení používateľa.
• Povolené adresy URL na odhlásenie. Adresa URL, na ktorú Auth0 presmeruje používateľa, keď sa odhlási.
• Povolené webové zdroje. Povolená adresa URL, z ktorej môže pochádzať žiadosť o autorizáciu.

Pre miestny rozvoj môžete použiť http://localhost: 3000 URL. Keď však pošlete svoj kód do produkcie, budete musieť poskytnúť adresy URL svojej domény.

Po vyplnení adries URL pokračujte a kliknite Uložiť zmeny v spodnej časti stránky s nastaveniami.

Nastavte si preferovaných poskytovateľov prihlásenia do sociálnych sietí

Na ľavom paneli ponuky aplikácie Auth0 kliknite na Overeniea potom vyberte Socials. Ďalej kliknite na Vytvoriť pripojenie na stránke nastavení sociálnych spojení.

Nakoniec vyberte a pridajte svojho preferovaného poskytovateľa sociálneho prihlásenia.

Nakonfigurujte Auth0 vo svojej aplikácii React

Integrujte autentifikačnú službu Auth0 do svojej aplikácie React vytvorením komponentov prihlásenia a úspechu.

1. Vytvorte aplikáciu React a nastavte súbor ENV

Vytvorte aplikáciu Reacta potom otvorte priečinok projektu v editore kódu. Potom v koreňovom adresári priečinka projektu vytvorte súbor ENV, ktorý bude obsahovať premenné prostredia: názov vašej domény a ID klienta. Prihláste sa do svojho účtu Auth0, na paneli aplikácie skopírujte názov domény a ID klienta a uložte ich do súboru ENV takto:

REACT_APP_AUTH0_DOMAIN= názov vašej domény 
REACT_APP_AUTH0_CLIENT_ID= vaše ID klienta

2. Nainštalujte požadované balíky

Spustite tento príkaz na svojom termináli a nainštalujte požadované závislosti:

npm install @auth0/auth0-react

3. Zabaľte komponent aplikácie s poskytovateľom Auth0

Poskytovateľ Auth0 používa kontext React. To vám umožní prístup ku všetkým jeho vlastnostiam z komponentu App. Poskytovateľ Auth0 má tri parametre: doménu klienta, ID klienta a URI presmerovania.

Otvorte súbor index.js, odstráňte kód React šablóny a pridajte kód nižšie:

importovať Reagovať od'reagovať';
importovať ReactDOM od'react-dom/client';
importovať App od'./App';
importovať{Auth0Provider} od'@auth0/auth0-react';
konšt root = ReactDOM.createRoot(dokument.getElementById('root'));
root.render(
 doména = {process.env. REACT_APP_AUTH0_DOMAIN}
 clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
 redirectUri = {okno.location.origin}
 >

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

4. Vytvorte komponent prihlasovacej stránky

Vytvorte nový priečinok v adresári /src vašej aplikácie React a pomenujte ho ako stránky. V tomto priečinku vytvorte dva súbory: Login.js a Success.js.

Otvorte súbor login.js a pridajte kód nižšie. Komponent prihlasovacej stránky vykreslí prihlasovacie tlačidlo.

importovať Reagovať od'reagovať'
importovať { useAuth0 } od'@auth0/auth0-react';
konšt Prihlásenie = () => {
konšt { loginWithRedirect, isAuthenticated } = useAuth0();
vrátiť (je overené || (
 loginWithRedirect()}> Prihlásiť sa</button>
 ))
}
exportpredvolená Prihlásiť sa

V predvolenom nastavení poskytuje Auth0 e-mail a heslo ako metódu overenia. Okrem toho, v závislosti od vybratých poskytovateľov prihlásenia do sociálnych sietí, Auth0 zobrazí aj možnosť prihlásenia poskytovateľa.

5. Vytvorte komponent stránky úspechu

Tento komponent vykreslí dve hlavné funkcie: overený používateľský profil a tlačidlo odhlásenia.

Do súboru Success.js pridajte nižšie uvedený kód:

importovať Reagovať od'reagovať'
importovať { useAuth0 } od'@auth0/auth0-react'
konšt Úspech = () => {
konšt { user, logout, isAuthenticated } = useAuth0(); 
vrátiť ( isAuthenticated && ( 



Používateľský profil</h1> 

{user.name}</h2> 



{user.email}</p> 
 logout()}> Odhlásiť sa</button> 
 </div>
 ))
}
exportpredvolená Úspech

Keď sa prihlásite a overíte pomocou Auth0, Auth0 vás presmeruje späť do vašej aplikácie a odošle do vašej aplikácie údaje o užitočnom zaťažení s údajmi o používateľovi. Tieto údaje môžete použiť vo svojej aplikácii na vytváranie vlastných používateľských profilov a spravovanie relácií používateľov. Vlastnosť User z háku UseAuth vám umožňuje prístup ku konkrétnym údajom používateľa.

Hák UseAuth0 tiež poskytuje vlastnosť s názvom isAuthenticated, ktorá vám umožňuje vykresľovať komponenty podmienene. Ak je používateľ overený, kód zobrazí podrobnosti o jeho profile a zobrazí komponent tlačidla odhlásenia.

Naopak, ak nie sú, vykreslíte komponent prihlasovacieho tlačidla. To znamená, že nemusíte špecifikovať trasy na základe stavu autentifikácie používateľa, pretože táto vlastnosť automaticky riadi tento proces. Auth0 definuje logiku prihlásenia aj odhlásenia, čo vám uľahčuje implementáciu funkcie autentifikácie.

Stojí za vyskúšanie overovacia služba Auth0?

Auth0 poskytuje hotové riešenia, ktoré zvládajú požiadavky na overenie vašej aplikácie. Okrem toho služba Auth0 ponúka podporu pre webové, mobilné a natívne vývojové platformy, čo vám umožňuje jednoducho integrovať autentifikačný systém s technologickým balíkom podľa vašich preferencií.