Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Auth0 förenklar processen att upprätta användaridentitet i din webbapp. Den tillhandahåller säkra och anpassningsbara autentiserings- och auktoriseringsfunktioner genom dess API. Använd det och du behöver inte oroa dig för att bygga ditt eget autentiseringssystem från grunden.

Att integrera med Auth0 gör det enkelt att inkludera pålitlig autentisering i din React-applikation och garanterar säker åtkomst till din app.

Följande steg förklarar vad som krävs för att integrera Auth0 i en React-applikation.

Vad är Auth0?

Auth0 är en webbtjänst som tillhandahåller ett säkert API att hantera användarautentisering och auktorisering i dina appar.

Det ger ett anpassningsbart autentiseringssystem som du enkelt kan integrera i din React-applikation. När du ansluter Auth0 till din app, hanterar den resten av autentiseringsbelastningen.

Hur fungerar Auth0?

Auth0 tillhandahåller en universell inloggningsfunktion som implementerar autentiseringsflödet. Varje gång en användare vill logga in, omdirigerar API: et dem till en Auth0-inloggningssida, de autentiseras och framgångsrik autentiseringsdata skickas sedan till din app.

instagram viewer

Du kan anpassa autentiseringsarbetsflödet för din app genom att definiera olika inloggningsmetoder. Den universella inloggningen tillhandahåller ett användarnamn och lösenord som primär autentisering, men du kan lägg även till andra alternativ som social inloggning, via en leverantör som Google, och multi-factor autentisering.

Fördelen med att använda denna typ av autentisering är att du inte behöver vara bekant med identitet protokoll som OAuth 2.0 eller OpenID Connect, som vanligtvis används för att skapa säker autentisering system.

Skapa ett nytt projekt på Auth0 Developer Console

För att komma igång måste du först registrera dig för en Auth0 konto. När du har registrerat dig, navigera till din instrumentpanel och klicka Skapa applikation för att konfigurera inställningarna för autentiseringsprojektet.

Auth0 tillhandahåller olika autentiseringskonfigurationer beroende på vilken typ av applikation du bygger. För den här handledningen, fyll i ditt programnamn, välj Webbapplikationer för en sida, klicka sedan på Spara.

Välj sedan Reagera från listan över tekniker som stöds av Auth0.

Konfigurera programmets URI: er

När du har skapat din applikation och konfigurerat de nödvändiga inställningarna klickar du på applikationens instrumentpanel inställningar för att ställa in de nödvändiga URI-egenskaperna.

Ställ in följande egenskaper:

  • Tillåtna återuppringningsadresser. Den URL som Auth0-servern kommer att anropa efter att en användare har autentiserat sig.
  • Tillåtna utloggningsadresser. Webbadressen som Auth0 kommer att omdirigera användaren till när de loggar ut.
  • Tillåtet webbursprung. Den tillåtna URL som en auktoriseringsbegäran kan komma från.

För lokal utveckling kan du använda http://localhost: 3000 URL. Men när du har skickat din kod till produktion måste du ange dina domänadresser.

När du är klar med att fylla i webbadresserna, fortsätt och klicka Spara ändringar längst ned på inställningssidan.

Ställ in dina föredragna leverantörer av social inloggning

På Auth0:s vänstra menypanel för applikationspanel klickar du på Autentisering, välj sedan Socials. Klicka sedan på Skapa anslutning knappen på inställningssidan för sociala anslutningar.

Slutligen, välj och lägg till din föredragna sociala inloggningsleverantör.

Konfigurera Auth0 i din React-app

Integrera Auth0-autentiseringstjänsten i din React-applikation genom att bygga inloggnings- och framgångskomponenterna.

1. Skapa en React-applikation och ställ in en ENV-fil

Skapa en React-applikation, öppna sedan projektmappen i din kodredigerare. Därefter skapar du en ENV-fil i rotkatalogen i din projektmapp som innehåller dina miljövariabler: ditt domännamn och klient-ID. Logga in på ditt Auth0-konto, i programmets instrumentpanel, kopiera domännamnet och klient-ID och spara dem i din ENV-fil enligt följande:

REACT_APP_AUTH0_DOMAIN= ditt domännamn 
REACT_APP_AUTH0_CLIENT_ID= ditt klient-ID

2. Installera de nödvändiga paketen

Kör det här kommandot på din terminal för att installera de nödvändiga beroenden:

npm installera @auth0/auth0-react

3. Slå in din appkomponent med Auth0-leverantör

Auth0-leverantör använder React Context. Detta låter dig komma åt alla dess egenskaper från app-komponenten. Auth0-leverantören tar tre parametrar: klientdomänen, klient-ID och omdirigerings-URI.

Öppna filen index.js, ta bort mallen React-koden och lägg till koden nedan:

importera Reagera från'reagera';
importera ReactDOM från'reagera-dom/klient';
importera App från'./App';
importera{Auth0Provider} från'@auth0/auth0-react';
konst root = ReactDOM.createRoot(dokumentera.getElementById('rot'));
root.render(
 domän = {process.env. REACT_APP_AUTH0_DOMAIN}
 clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
 redirectUri = {fönster.location.origin}
 >

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

4. Skapa en inloggningssidakomponent

Skapa en ny mapp i /src-katalogen i din React-applikation och döp den till sidor. Skapa två filer i den här mappen: Login.js och Success.js.

Öppna filen login.js och lägg till koden nedan. Inloggningssidans komponent kommer att återge en inloggningsknapp.

importera Reagera från'reagera'
importera { useAuth0 } från'@auth0/auth0-react';
konst Logga in = () => {
konst { loginWithRedirect, isAuthenticated } = useAuth0();


lämna tillbaka (är autentiserad || (
exporterastandard Logga in

Som standard tillhandahåller Auth0 en e-postadress och ett lösenord som autentiseringsmetod. Dessutom, beroende på vilka sociala inloggningsleverantörer du valt, kommer Auth0 också att visa leverantörens inloggningsalternativ.

5. Skapa en framgångssidakomponent

Den här komponenten återger två huvudfunktioner: en autentiserad användarprofil och en utloggningsknapp.

Lägg till koden nedan i filen Success.js:

importera Reagera från'reagera'
importera { useAuth0 } från'@auth0/auth0-react'
konst Framgång = () => {
konst { user, logout, isAuthenticated } = useAuth0(); 


lämna tillbaka ( är autentiserat && ( 




Användarprofil</h1> 
{Användarnamn}
{user.name}</h2> 





{user.email}</p> 


exporterastandard Framgång

När du har loggat in och blivit autentiserad av Auth0, omdirigerar Auth0 dig tillbaka till din app och skickar in nyttolastdata till din app som innehåller användarinformationen. Du kan använda denna data i din app för att skapa anpassade användarprofiler och hantera användarsessioner. Användaregenskapen från UseAuth-kroken låter dig komma åt specifika användardata.

UseAuth0-kroken tillhandahåller också en egenskap som kallas isAuthenticated, som låter dig rendera komponenterna villkorligt. Om en användare är autentiserad kommer koden att återge deras profildetaljer och visa en utloggningsknappkomponent.

Omvänt, om de inte är det, kommer du att rendera inloggningsknappkomponenten. Det betyder att du inte behöver ange rutterna baserat på en användares autentiseringsstatus eftersom den här egenskapen automatiskt hanterar denna process. Auth0 definierar både inloggnings- och utloggningslogiken, vilket gör det lättare för dig att implementera autentiseringsfunktionen.

Är Auth0-autentiseringstjänsten värd att testa?

Auth0 tillhandahåller färdiga lösningar som hanterar din apps autentiseringskrav. Dessutom erbjuder Auth0-tjänsten stöd för webb-, mobil- och inhemska utvecklingsplattformar som gör att du enkelt kan integrera autentiseringssystemet med en teknikstack som du föredrar.