Az Auth0 leegyszerűsíti a felhasználói identitás létrehozásának folyamatát a webalkalmazásban. Biztonságos és testreszabható hitelesítési és engedélyezési funkciókat biztosít az API-ján keresztül. Használja, és nem kell aggódnia saját hitelesítési rendszerének a semmiből való kiépítése miatt.

Az Auth0-val való integráció megkönnyíti a megbízható hitelesítés beépítését a React alkalmazásba, és garantálja az alkalmazás biztonságos elérését.

A következő lépések elmagyarázzák, mi szükséges az Auth0 React alkalmazásba való integrálásához.

Mi az Auth0?

Az Auth0 egy webszolgáltatás, amely biztonságos API-t biztosít a kezeléshez felhasználói hitelesítés és engedélyezés az alkalmazásaiban.

Testreszabható hitelesítési rendszert biztosít, amelyet könnyen integrálhat a React alkalmazásba. Miután csatlakoztatta az Auth0-t az alkalmazáshoz, az kezeli a hitelesítési munkaterhelés többi részét.

Hogyan működik az Auth0?

Az Auth0 egy univerzális bejelentkezési funkciót biztosít, amely megvalósítja a hitelesítési folyamatot. Minden alkalommal, amikor egy felhasználó be akar jelentkezni, az API átirányítja őt egy Auth0 bejelentkezési oldalra, hitelesítést kap, és a sikeres hitelesítési hasznos adatok elküldésre kerülnek az alkalmazásba.

Különböző bejelentkezési módok meghatározásával testreszabhatja az alkalmazás hitelesítési munkafolyamatát. Az Általános bejelentkezés elsődleges hitelesítésként felhasználónevet és jelszót biztosít, de ezt megteheti további lehetőségeket is hozzáadhat, például közösségi bejelentkezést egy olyan szolgáltatón keresztül, mint a Google, és többtényezős hitelesítés.

Az ilyen típusú hitelesítés használatának előnye, hogy nem kell ismernie az identitást protokollok, például az OAuth 2.0 vagy az OpenID Connect, amelyeket gyakran használnak a biztonságos hitelesítés létrehozására rendszerek.

Hozzon létre egy új projektet az Auth0 fejlesztői konzolon

A kezdéshez először regisztrálnia kell egy Auth0 fiókot. A regisztráció után lépjen az irányítópultra, és kattintson a gombra Alkalmazás létrehozása a hitelesítési projekt beállításainak konfigurálásához.

Az Auth0 különböző hitelesítési konfigurációkat biztosít az építendő alkalmazás típusától függően. Ehhez az oktatóanyaghoz írja be az alkalmazás nevét, majd válassza ki Egyoldalas webalkalmazások, majd kattintson a gombra Megment.

Ezután válassza ki Reagál az Auth0 által támogatott technológiák listájából.

Konfigurálja az alkalmazás URI-it

Az alkalmazás létrehozása és a szükséges beállítások konfigurálása után az alkalmazás irányítópultján kattintson a gombra Beállítások fület a szükséges URI tulajdonságok beállításához.

Állítsa be a következő tulajdonságokat:

• Engedélyezett visszahívási URL-ek. Az az URL, amelyet az Auth0 szerver hív meg a felhasználó hitelesítése után.
• Engedélyezett kijelentkezési URL-ek. Az az URL, amelyre az Auth0 átirányítja a felhasználót, amikor kijelentkezik.
• Engedélyezett webes eredet. Az engedélyezett URL, ahonnan az engedélyezési kérés származhat.

Helyi fejlesztéshez használhatja http://localhost: 3000 URL. A kód éles verzióba való eljuttatása után azonban meg kell adnia a domain URL-címeit.

Miután befejezte az URL-ek kitöltését, lépjen tovább, és kattintson a gombra Változtatások mentése a beállítások oldal alján.

Állítsa be preferált közösségi bejelentkezési szolgáltatóit

Az Auth0 alkalmazás irányítópultjának bal oldali menüjében kattintson a gombra Hitelesítés, majd válassza ki Szociális. Ezután kattintson a Kapcsolat létrehozása gombot a közösségi kapcsolatok beállítási oldalán.

Végül válassza ki és adja hozzá a kívánt közösségi bejelentkezési szolgáltatót.

Konfigurálja az Auth0-t a React alkalmazásba

Integrálja az Auth0 hitelesítési szolgáltatást a React alkalmazásba a bejelentkezési és sikerkomponensek felépítésével.

1. Hozzon létre egy React alkalmazást, és állítson be egy ENV fájlt

Hozzon létre egy React alkalmazást, majd nyissa meg a projekt mappát a kódszerkesztőben. Ezután a projektmappa gyökérkönyvtárában hozzon létre egy ENV-fájlt a környezeti változók tárolására: a tartománynév és az ügyfél-azonosító. Jelentkezzen be Auth0-fiókjába, az alkalmazás irányítópultján, másolja ki a domain nevet és az ügyfél-azonosítót, és mentse el az ENV fájlba az alábbiak szerint:

REACT_APP_AUTH0_DOMAIN= az Ön domain neve 
REACT_APP_AUTH0_CLIENT_ID= az Ön ügyfél-azonosítója

2. Telepítse a szükséges csomagokat

Futtassa ezt a parancsot a terminálon a szükséges függőségek telepítéséhez:

npm install @auth0/auth0-react

3. Csomagolja be az alkalmazáskomponenst az Auth0 szolgáltatóval

Az Auth0 szolgáltató a React Contextet használja. Ez lehetővé teszi az összes tulajdonság elérését az App komponensen belül. Az Auth0 szolgáltató három paramétert vesz fel: az ügyféltartományt, az ügyfél-azonosítót és az átirányítási URI-t.

Nyissa meg az index.js fájlt, törölje a sablon React kódját, és adja hozzá az alábbi kódot:

import Reagál tól től'reagál';
import ReactDOM tól től'react-dom/client';
import App tól től'./Alkalmazás';
import{Auth0Provider} tól től"@auth0/auth0-react";
const root = ReactDOM.createRoot(dokumentum.getElementById('gyökér'));
root.render(
 domain = {process.env. REACT_APP_AUTH0_DOMAIN}
 clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
 redirectUri = {ablak.location.origin}
 >

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

4. Hozzon létre egy bejelentkezési oldal összetevőt

Hozzon létre egy új mappát a React alkalmazás /src könyvtárában, és nevezze el lapoknak. Ebben a mappában hozzon létre két fájlt: Login.js és Success.js.

Nyissa meg a login.js fájlt, és adja hozzá az alábbi kódot. A bejelentkezési oldal komponense megjelenít egy bejelentkezési gombot.

import Reagál tól től'reagál'
import { useAuth0 } tól től"@auth0/auth0-react";
const Bejelentkezés = () => {
const { loginWithRedirect, isAuthenticated } = useAuth0();
Visszatérés (hitelesített || (
 loginWithRedirect()}> Bejelentkezés</button>
 ))
}
exportalapértelmezett Belépés

Alapértelmezés szerint az Auth0 egy e-mailt és egy jelszót biztosít hitelesítési módszerként. Ezenkívül a kiválasztott közösségi bejelentkezési szolgáltatóktól függően az Auth0 megjeleníti a szolgáltató bejelentkezési lehetőségét is.

5. Hozzon létre egy sikeroldal-komponenst

Ez az összetevő két fő funkciót jelenít meg: egy hitelesített felhasználói profilt és egy kijelentkezési gombot.

Adja hozzá az alábbi kódot a Success.js fájlhoz:

import Reagál tól től'reagál'
import { useAuth0 } tól től"@auth0/auth0-react"
const Siker = () => {
const { user, logout, isAuthenticated } = useAuth0(); 
Visszatérés ( hitelesített && ( 



Felhasználói profil</h1> 

{felhasználó.név}</h2> 



{user.email}</p> 
 logout()}> Kijelentkezés</button> 
 </div>
 ))
}
exportalapértelmezett Siker

Miután bejelentkezett, és az Auth0 hitelesítette, az Auth0 visszairányítja Önt az alkalmazáshoz, és elküldi a felhasználói adatokat tartalmazó hasznos adatokat az alkalmazásnak. Ezeket az adatokat az alkalmazáson belül egyéni felhasználói profilok létrehozására és felhasználói munkamenetek kezelésére használhatja. A UseAuth hook User tulajdonsága lehetővé teszi bizonyos felhasználói adatok elérését.

A UseAuth0 hook egy isAuthenticated nevű tulajdonságot is biztosít, amely lehetővé teszi az összetevők feltételes megjelenítését. Ha a felhasználó hitelesítve van, a kód megjeleníti a profiladatait, és megjelenít egy kijelentkezési gomb komponenst.

Ellenkező esetben, ha nem, akkor a bejelentkezési gomb komponenst fogja megjeleníteni. Ez azt jelenti, hogy nem kell megadnia az útvonalakat a felhasználó hitelesítési állapota alapján, mivel ez a tulajdonság automatikusan kezeli ezt a folyamatot. Az Auth0 meghatározza a bejelentkezési és kijelentkezési logikát is, megkönnyítve a hitelesítési funkciók megvalósítását.

Megéri kipróbálni az Auth0 hitelesítési szolgáltatást?

Az Auth0 olyan kész megoldásokat kínál, amelyek kezelik az alkalmazás hitelesítési követelményeit. Ezenkívül az Auth0 szolgáltatás támogatja a webes, mobil- és natív fejlesztői platformokat, lehetővé téve a hitelesítési rendszer egyszerű integrálását az Ön által preferált technológiai köteggel.