Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Auth0 zjednodušuje proces stanovení identity uživatele ve vaší webové aplikaci. Poskytuje bezpečné a přizpůsobitelné funkce ověřování a autorizace prostřednictvím svého rozhraní API. Použijte jej a nebudete se muset starat o vytvoření vlastního autentizačního systému od začátku.

Integrace s Auth0 usnadňuje zahrnutí spolehlivého ověřování do vaší aplikace React a zaručuje bezpečný přístup k vaší aplikaci.

Následující kroky vysvětlují, co je nutné k integraci Auth0 do aplikace React.

Co je Auth0?

Auth0 je webová služba, která poskytuje zabezpečené rozhraní API pro zpracování autentizace a autorizace uživatele ve vašich aplikacích.

Poskytuje přizpůsobitelný autentizační systém, který můžete snadno integrovat do své aplikace React. Jakmile připojíte Auth0 ke své aplikaci, zvládne zbytek zátěže ověřování.

Jak Auth0 funguje?

Auth0 poskytuje funkci univerzálního přihlášení, která implementuje tok ověřování. Pokaždé, když se uživatel chce přihlásit, rozhraní API jej přesměruje na přihlašovací stránku Auth0, dojde k ověření a data o úspěšné autentizaci jsou poté odeslána do vaší aplikace.

instagram viewer

Pracovní postup ověřování pro vaši aplikaci můžete přizpůsobit definováním různých metod přihlášení. Univerzální přihlášení poskytuje uživatelské jméno a heslo jako primární ověření, ale můžete přidejte také další možnosti, jako je sociální přihlášení prostřednictvím poskytovatele, jako je Google, a vícefaktorové autentizace.

Výhodou použití tohoto typu autentizace je, že nemusíte znát identitu protokoly jako OAuth 2.0 nebo OpenID Connect, které se běžně používají k vytvoření zabezpečeného ověřování systémy.

Vytvořte nový projekt na Auth0 Developer Console

Chcete-li začít, musíte se nejprve zaregistrovat Auth0 účet. Po registraci přejděte na svůj řídicí panel a klikněte Vytvořit aplikaci pro konfiguraci nastavení projektu ověřování.

Auth0 poskytuje různé konfigurace ověřování v závislosti na typu aplikace, kterou vytváříte. Pro tento tutoriál vyplňte název aplikace, vyberte Jednostránkové webové aplikacea poté klikněte na Uložit.

Dále vyberte Reagovat ze seznamu technologií podporovaných Auth0.

Nakonfigurujte identifikátory URI aplikace

Po vytvoření aplikace a konfiguraci požadovaných nastavení klikněte na řídicím panelu aplikace na Nastavení pro nastavení požadovaných vlastností URI.

Nastavte následující vlastnosti:

  • Povolené adresy URL zpětného volání. Adresa URL, kterou server Auth0 zavolá po ověření uživatele.
  • Povolené adresy URL pro odhlášení. Adresa URL, na kterou Auth0 přesměruje uživatele, když se odhlásí.
  • Povolené webové zdroje. Povolená adresa URL, ze které může pocházet požadavek na autorizaci.

Pro místní rozvoj můžete použít http://localhost: 3000 URL. Jakmile však kód pošlete do produkce, budete muset zadat adresy URL své domény.

Až budete s vyplňováním adres URL hotovi, pokračujte a klikněte Uložit změny ve spodní části stránky nastavení.

Nastavte si preferované poskytovatele sociálního přihlášení

V levém podokně nabídky na řídicím panelu aplikace Auth0 klikněte na Autentizacea poté vyberte Socials. Dále klikněte na Vytvořit připojení na stránce nastavení sociálních připojení.

Nakonec vyberte a přidejte svého preferovaného poskytovatele sociálního přihlášení.

Nakonfigurujte Auth0 do aplikace React

Integrujte autentizační službu Auth0 do své aplikace React vytvořením komponent přihlášení a úspěchu.

1. Vytvořte aplikaci React a nastavte soubor ENV

Vytvořte aplikaci Reacta poté otevřete složku projektu v editoru kódu. Dále v kořenovém adresáři vaší projektové složky vytvořte soubor ENV, který bude obsahovat vaše proměnné prostředí: název vaší domény a ID klienta. Přihlaste se ke svému účtu Auth0, na řídicím panelu aplikace zkopírujte název domény a ID klienta a uložte je do souboru ENV následovně:

REACT_APP_AUTH0_DOMAIN= název vaší domény 
REACT_APP_AUTH0_CLIENT_ID= vaše ID klienta

2. Nainstalujte požadované balíčky

Spusťte tento příkaz na svém terminálu a nainstalujte požadované závislosti:

npm install @auth0/auth0-react

3. Zabalte komponentu aplikace poskytovatelem Auth0

Poskytovatel Auth0 používá React Context. To vám umožní přistupovat ke všem jeho vlastnostem z komponenty App. Poskytovatel Auth0 přebírá tři parametry: doménu klienta, ID klienta a URI přesměrování.

Otevřete soubor index.js, odstraňte kód React šablony a přidejte kód níže:

import Reagovat z'reagovat';
import ReactDOM z'react-dom/client';
import Aplikace z'./Aplikace';
import{Auth0Provider} z'@auth0/auth0-react';
konst root = ReactDOM.createRoot(dokument.getElementById('vykořenit'));
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. Vytvořte komponentu přihlašovací stránky

Vytvořte novou složku v adresáři /src vaší aplikace React a pojmenujte ji jako stránky. V této složce vytvořte dva soubory: Login.js a Success.js.

Otevřete soubor login.js a přidejte níže uvedený kód. Komponenta přihlašovací stránky vykreslí přihlašovací tlačítko.

import Reagovat z'reagovat'
import { useAuth0 } z'@auth0/auth0-react';
konst Přihlášení = () => {
konst { loginWithRedirect, isAuthenticated } = useAuth0();


vrátit se (isAuthenticated || (
vývoznívýchozí Přihlásit se

Ve výchozím nastavení poskytuje Auth0 jako metodu ověření e-mail a heslo. Navíc v závislosti na vybraných poskytovatelích sociálního přihlášení Auth0 zobrazí také možnost přihlášení poskytovatele.

5. Vytvořte komponentu úspěšné stránky

Tato komponenta vykreslí dvě hlavní funkce: profil ověřeného uživatele a tlačítko pro odhlášení.

Do souboru Success.js přidejte níže uvedený kód:

import Reagovat z'reagovat'
import { useAuth0 } z'@auth0/auth0-react'
konst Úspěch = () => {
konst { user, logout, isAuthenticated } = useAuth0(); 


vrátit se ( isAuthenticated && ( 




Uživatelský profil</h1> 
{user.name}
{user.name}</h2> 





{user.email}</p> 


vývoznívýchozí Úspěch

Jakmile se přihlásíte a získáte ověření pomocí Auth0, Auth0 vás přesměruje zpět do vaší aplikace a odešle do vaší aplikace data o užitečné zátěži obsahující údaje o uživateli. Tato data můžete použít ve své aplikaci k vytváření vlastních uživatelských profilů a správě uživatelských relací. Vlastnost User z háku UseAuth umožňuje přístup ke konkrétním uživatelským datům.

Háček UseAuth0 také poskytuje vlastnost nazvanou isAuthenticated, která umožňuje podmíněně vykreslovat komponenty. Pokud je uživatel ověřen, kód vykreslí podrobnosti o jeho profilu a zobrazí komponentu tlačítka pro odhlášení.

Naopak, pokud nejsou, vykreslíte komponentu přihlašovacího tlačítka. To znamená, že nemusíte zadávat trasy na základě stavu ověření uživatele, protože tato vlastnost tento proces spravuje automaticky. Auth0 definuje logiku přihlášení i odhlášení, což vám usnadňuje implementaci funkce ověřování.

Vyplatí se ověřovací služba Auth0 vyzkoušet?

Auth0 poskytuje hotová řešení, která zvládnou požadavky vaší aplikace na ověření. Služba Auth0 navíc nabízí podporu pro webové, mobilní a nativní vývojové platformy, což vám umožní snadno integrovat autentizační systém s technologickým zásobníkem podle vašich preferencí.