Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Auth0 forenkler processen med at etablere brugeridentitet i din webapp. Det giver sikre og tilpasselige godkendelses- og autorisationsfunktioner gennem sin API. Brug det, og du behøver ikke at bekymre dig om at bygge dit eget autentificeringssystem fra bunden.

Integration med Auth0 gør det nemt at inkludere pålidelig godkendelse i din React-applikation og garanterer sikker adgang til din app.

De følgende trin forklarer, hvad der er nødvendigt for at integrere Auth0 i en React-applikation.

Hvad er Auth0?

Auth0 er en webservice, der giver en sikker API at håndtere brugergodkendelse og autorisation i dine apps.

Det giver et tilpasseligt autentificeringssystem, som du nemt kan integrere i din React-applikation. Når du har tilsluttet Auth0 til din app, håndterer den resten af ​​godkendelsesarbejdet.

Hvordan virker Auth0?

Auth0 giver en Universal Login-funktion, der implementerer godkendelsesflowet. Hver gang en bruger ønsker at logge ind, omdirigerer API'en dem til en Auth0-loginside, de bliver godkendt, og vellykket godkendelsesdata sendes derefter til din app.

instagram viewer

Du kan tilpasse godkendelsesworkflowet for din app ved at definere forskellige login-metoder. Universal Login giver et brugernavn og en adgangskode som den primære godkendelse, men du kan også tilføje andre muligheder såsom socialt login, via en udbyder som Google, og multi-factor Godkendelse.

Fordelen ved at bruge denne type godkendelse er, at du ikke behøver at være fortrolig med identitet protokoller som OAuth 2.0 eller OpenID Connect, som almindeligvis bruges til at skabe sikker godkendelse systemer.

Opret et nyt projekt på Auth0 Developer Console

For at komme i gang skal du først tilmelde dig en Auth0 konto. Når du har tilmeldt dig, skal du navigere til dit dashboard og klikke Opret applikation for at konfigurere godkendelsesprojektets indstillinger.

Auth0 giver forskellige godkendelseskonfigurationer afhængigt af den type applikation, du bygger. For denne øvelse skal du udfylde dit programnavn, vælge Enkeltsides webapplikationer, og klik derefter på Gemme.

Vælg derefter Reagere fra listen over teknologier, der understøttes af Auth0.

Konfigurer applikationens URI'er

Når du har oprettet din applikation og konfigureret de nødvendige indstillinger, skal du på applikationens dashboard klikke på Indstillinger fanen for at konfigurere de nødvendige URI-egenskaber.

Indstil følgende egenskaber:

  • Tilladte tilbagekalds-URL'er. URL'en, som Auth0-serveren vil kalde, efter at en bruger godkender.
  • Tilladte logout-URL'er. Den URL, som Auth0 omdirigerer brugeren til, når de logger ud.
  • Tilladte web-oprindelse. Den tilladte URL, som en godkendelsesanmodning kan komme fra.

Til lokal udvikling kan du bruge http://localhost: 3000 URL. Men når du har skubbet din kode til produktion, skal du angive dine domæne-URL'er.

Når du er færdig med at udfylde webadresserne, skal du gå videre og klikke Gem ændringer nederst på indstillingssiden.

Indstil dine foretrukne sociale login-udbydere

På Auth0's applikationsdashboards venstre menurude skal du klikke på Godkendelse, og vælg derefter Socials. Klik derefter på Opret forbindelse knappen på siden med indstillinger for sociale forbindelser.

Til sidst skal du vælge og tilføje din foretrukne sociale login-udbyder.

Konfigurer Auth0 i din React-app

Integrer Auth0-godkendelsestjenesten i din React-applikation ved at bygge login- og succeskomponenterne.

1. Opret en React-applikation og opsæt en ENV-fil

Opret en React-applikation, og åbn derefter projektmappen i din kodeeditor. Derefter skal du i rodmappen i din projektmappe oprette en ENV-fil til at indeholde dine miljøvariabler: dit domænenavn og klient-id. Log ind på din Auth0-konto, i applikationens dashboard, kopier domænenavnet og klient-id'et og gem dem i din ENV-fil som følger:

REACT_APP_AUTH0_DOMAIN= dit domænenavn 
REACT_APP_AUTH0_CLIENT_ID= dit klient-id

2. Installer de nødvendige pakker

Kør denne kommando på din terminal for at installere de nødvendige afhængigheder:

npm installer @auth0/auth0-react

3. Indpak din appkomponent med Auth0-udbyder

Auth0-udbyder bruger React Context. Dette giver dig adgang til alle dens egenskaber fra app-komponenten. Auth0-udbyderen tager tre parametre: klientdomænet, klient-id'et og omdirigerings-URI'en.

Åbn filen index.js, slet skabelonen React-koden, og tilføj koden nedenfor:

importere Reagere fra'reagere';
importere ReactDOM fra'reager-dom/klient';
importere App fra'./App';
importere{Auth0Provider} fra'@auth0/auth0-react';
konst root = ReactDOM.createRoot(dokument.getElementById('rod'));
root.render(
 domæne = {process.env. REACT_APP_AUTH0_DOMAIN}
 clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
 redirectUri = {vindue.location.origin}
 >

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

4. Opret en loginsidekomponent

Opret en ny mappe i mappen /src i din React-applikation, og navngiv den sider. Inde i denne mappe skal du oprette to filer: Login.js og Success.js.

Åbn filen login.js og tilføj koden nedenfor. Login-sidekomponenten vil gengive en login-knap.

importere Reagere fra'reagere'
importere { useAuth0 } fra'@auth0/auth0-react';
konst Log ind = () => {
konst { loginWithRedirect, isAuthenticated } = useAuth0();


Vend tilbage (er Authenticated || (
eksportStandard Log på

Som standard giver Auth0 en e-mail og adgangskode som godkendelsesmetode. Afhængigt af de sociale login-udbydere, du har valgt, vil Auth0 desuden også vise udbyderens login-mulighed.

5. Opret en successidekomponent

Denne komponent vil gengive to hovedfunktioner: en godkendt brugers profil og en log-out-knap.

Tilføj koden nedenfor i filen Success.js:

importere Reagere fra'reagere'
importere { useAuth0 } fra'@auth0/auth0-react'
konst Succes = () => {
konst { user, logout, isAuthenticated } = useAuth0(); 


Vend tilbage ( er Authenticated && ( 




Brugerprofil</h1> 
{bruger.navn}
{bruger.navn}</h2> 





{user.email}</p> 


eksportStandard Succes

Når du logger ind og er blevet godkendt af Auth0, omdirigerer Auth0 dig tilbage til din app og sender nyttelastdata til din app, der indeholder brugeroplysningerne. Du kan bruge disse data i din app til at bygge brugerdefinerede brugerprofiler og administrere brugersessioner. Brugeregenskaben fra UseAuth-hook giver dig adgang til specifikke brugerdata.

UseAuth0-krogen giver også en egenskab kaldet isAuthenticated, som giver dig mulighed for at gengive komponenterne betinget. Hvis en bruger er godkendt, vil koden gengive deres profildetaljer og vise en logout-knapkomponent.

Omvendt, hvis de ikke er det, vil du gengive login-knap-komponenten. Det betyder, at du ikke behøver at angive ruterne baseret på en brugers godkendelsesstatus, da denne egenskab automatisk administrerer denne proces. Auth0 definerer både login- og logoutlogikken, hvilket gør det nemmere for dig at implementere godkendelsesfunktionaliteten.

Er Auth0 Authentication Service værd at prøve?

Auth0 leverer out-of-the-box løsninger, der håndterer din apps godkendelseskrav. Derudover tilbyder Auth0-tjenesten support til web-, mobil- og native udviklingsplatforme, så du nemt kan integrere autentificeringssystemet med en teknologistak efter dine præferencer.