Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Auth0 vereenvoudigt het proces van het vaststellen van de gebruikersidentiteit in uw web-app. Het biedt veilige en aanpasbare authenticatie- en autorisatiefuncties via zijn API. Gebruik het en u hoeft zich geen zorgen te maken over het helemaal opnieuw bouwen van uw eigen authenticatiesysteem.

Integratie met Auth0 maakt het eenvoudig om betrouwbare authenticatie in uw React-applicatie op te nemen en garandeert veilige toegang tot uw app.

De volgende stappen leggen uit wat er nodig is om Auth0 te integreren in een React-applicatie.

Wat is Auth0?

Auth0 is een webservice die een veilige API biedt om te verwerken authenticatie en autorisatie van de gebruiker in je apps.

Het biedt een aanpasbaar authenticatiesysteem dat u eenvoudig kunt integreren in uw React-applicatie. Nadat u Auth0 met uw app hebt verbonden, handelt het de rest van de authenticatiewerklast af.

instagram viewer

Hoe werkt Auth0?

Auth0 biedt een Universal Login-functie die de authenticatiestroom implementeert. Elke keer dat een gebruiker wil inloggen, leidt de API hem om naar een Auth0-inlogpagina, wordt hij geauthenticeerd en worden succesvolle authenticatie-payloadgegevens naar uw app verzonden.

U kunt de authenticatieworkflow voor uw app aanpassen door verschillende aanmeldingsmethoden te definiëren. De Universal Login biedt een gebruikersnaam en wachtwoord als primaire authenticatie, maar dat kan voeg ook andere opties toe zoals social login, via een provider als Google, en multifactor authenticatie.

Het voordeel van het gebruik van dit type authenticatie is dat u niet bekend hoeft te zijn met identiteit protocollen zoals OAuth 2.0 of OpenID Connect Connect, die vaak worden gebruikt om veilige authenticatie te creëren systemen.

Maak een nieuw project op Auth0 Developer Console

Om aan de slag te gaan, moet u zich eerst aanmelden voor een Auth0 rekening. Navigeer na het aanmelden naar uw dashboard en klik op Applicatie maken om de instellingen van het authenticatieproject te configureren.

Auth0 biedt verschillende authenticatieconfiguraties, afhankelijk van het type applicatie dat u aan het bouwen bent. Vul voor deze zelfstudie uw applicatienaam in, selecteer Webapplicaties met één pagina, klik dan op Redden.

Selecteer vervolgens Reageer uit de lijst met technologieën die door Auth0 worden ondersteund.

Configureer de URI's van de toepassing

Nadat u uw applicatie heeft gemaakt en de vereiste instellingen heeft geconfigureerd, klikt u op het dashboard van uw applicatie op de Instellingen tabblad om de vereiste URI-eigenschappen in te stellen.

Stel de volgende eigenschappen in:

  • Toegestane callback-URL's. De URL die de Auth0-server aanroept nadat een gebruiker zich heeft geverifieerd.
  • Toegestane uitlog-URL's. De URL waarnaar Auth0 de gebruiker zal omleiden wanneer ze uitloggen.
  • Toegestane weboorsprong. De toegestane URL waar een autorisatieverzoek vandaan kan komen.

Voor lokale ontwikkeling kunt u gebruiken http://localhost: 3000 url. Zodra u uw code echter naar productie heeft gepusht, moet u uw domein-URL's opgeven.

Als je klaar bent met het invullen van de URL's, ga je gang en klik je Wijzigingen opslaan onderaan de instellingenpagina.

Stel uw voorkeursaanbieders voor sociale aanmelding in

Klik in het linker menuvenster van het Auth0-toepassingsdashboard op Authenticatieen selecteer vervolgens Sociaal. Klik vervolgens op de Verbinding maken knop op de instellingenpagina voor sociale verbindingen.

Selecteer ten slotte uw favoriete sociale login-provider en voeg deze toe.

Configureer Auth0 in uw React-app

Integreer de Auth0-authenticatieservice in uw React-applicatie door de login- en succescomponenten te bouwen.

1. Maak een React-toepassing en stel een ENV-bestand in

Maak een React-applicatie, open vervolgens de projectmap in uw code-editor. Maak vervolgens in de hoofdmap van uw projectmap een ENV-bestand om uw omgevingsvariabelen te bevatten: uw domeinnaam en client-ID. Log in op uw Auth0-account, kopieer in het dashboard van de applicatie de domeinnaam en klant-ID en sla ze als volgt op in uw ENV-bestand:

REACT_APP_AUTH0_DOMAIN= uw domeinnaam 
REACT_APP_AUTH0_CLIENT_ID= uw klant-ID

2. Installeer de vereiste pakketten

Voer deze opdracht uit op uw terminal om de vereiste afhankelijkheden te installeren:

npm install @auth0/auth0-react

3. Verpak uw app-component met Auth0 Provider

Auth0-provider gebruikt React Context. Hierdoor hebt u toegang tot alle eigenschappen vanuit de app-component. De Auth0 Provider gebruikt drie parameters: het clientdomein, de client-ID en de omleidings-URI.

Open het bestand index.js, verwijder de sjabloon React-code en voeg de onderstaande code toe:

importeren Reageer van'Reageer';
importeren ReactDOM van'react-dom/klant';
importeren app van'./App';
importeren{Auth0Provider} van'@auth0/auth0-reageren';
const root = ReactDOM.createRoot(document.getElementById('wortel'));
root.render(
 domein = {proces.env. REACT_APP_AUTH0_DOMAIN}
 clientId = {proces.env. REACT_APP_AUTH0_CLIENT_ID}
 omleidingUri = {raam.locatie.oorsprong}
 >

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

4. Maak een inlogpaginacomponent

Maak een nieuwe map aan in de map /src van uw React-toepassing en noem deze pagina's. Maak in deze map twee bestanden aan: Login.js en Success.js.

Open het bestand login.js en voeg de onderstaande code toe. De inlogpaginacomponent zal een inlogknop weergeven.

importeren Reageer van'Reageer'
importeren {gebruikAuth0} van'@auth0/auth0-reageren';
const Inloggen = () => {
const { loginWithRedirect, isAuthenticated } = useAuth0();


opbrengst (isAuthenticated || (
exporterenstandaard Log in

Auth0 biedt standaard een e-mailadres en wachtwoord als authenticatiemethode. Bovendien zal Auth0, afhankelijk van de sociale login-providers die u hebt geselecteerd, ook de aanmeldingsoptie van de provider weergeven.

5. Maak een succespaginacomponent

Dit onderdeel geeft twee hoofdfuncties weer: een geverifieerd gebruikersprofiel en een uitlogknop.

Voeg in het bestand Success.js de onderstaande code toe:

importeren Reageer van'Reageer'
importeren {gebruikAuth0} van'@auth0/auth0-reageren'
const Succes = () => {
const { gebruiker, uitloggen, isAuthenticated } = useAuth0(); 


opbrengst ( is geverifieerd && ( 




Gebruikersprofiel</h1> 
{gebruikersnaam}
{gebruikersnaam}</h2> 





{gebruiker.email}</p> 


exporterenstandaard Succes

Zodra u zich aanmeldt en wordt geverifieerd door Auth0, leidt Auth0 u terug naar uw app en stuurt het payloadgegevens naar uw app met de gebruikersgegevens. U kunt deze gegevens binnen uw app gebruiken om aangepaste gebruikersprofielen samen te stellen en gebruikerssessies te beheren. Met de eigenschap User van de UseAuth-hook hebt u toegang tot specifieke gebruikersgegevens.

De UseAuth0-hook biedt ook een eigenschap met de naam isAuthenticated, waarmee u de componenten voorwaardelijk kunt renderen. Als een gebruiker is geauthenticeerd, geeft de code zijn profieldetails weer en geeft hij een uitlogknopcomponent weer.

Omgekeerd, als dat niet het geval is, geeft u de login-knopcomponent weer. Dit betekent dat u de routes niet hoeft op te geven op basis van de authenticatiestatus van een gebruiker, aangezien deze eigenschap dit proces automatisch beheert. Auth0 definieert zowel de inlog- als de uitloglogica, waardoor het voor u gemakkelijker wordt om de authenticatiefunctionaliteit te implementeren.

Is de Auth0-authenticatieservice het proberen waard?

Auth0 biedt kant-en-klare oplossingen die voldoen aan de authenticatievereisten van uw app. Bovendien biedt de Auth0-service ondersteuning voor web-, mobiele en native ontwikkelingsplatforms, zodat u het authenticatiesysteem eenvoudig kunt integreren met een technologiestapel van uw voorkeur.