Auth0 lihtsustab teie veebirakenduses kasutaja identiteedi tuvastamise protsessi. See pakub oma API kaudu turvalisi ja kohandatavaid autentimis- ja autoriseerimisfunktsioone. Kasutage seda ja te ei pea muretsema oma autentimissüsteemi nullist ülesehitamise pärast.
Auth0-ga integreerimine muudab teie Reacti rakendusse usaldusväärse autentimise lisamise lihtsaks ja tagab turvalise juurdepääsu teie rakendusele.
Järgmised sammud selgitavad, mida on vaja Auth0 integreerimiseks Reacti rakendusse.
Mis on Auth0?
Auth0 on veebiteenus, mis pakub haldamiseks turvalist API-d kasutaja autentimine ja autoriseerimine teie rakendustes.
See pakub kohandatavat autentimissüsteemi, mille saate hõlpsasti oma Reacti rakendusse integreerida. Kui ühendate Auth0 oma rakendusega, tegeleb see ülejäänud autentimise töökoormusega.
Kuidas Auth0 töötab?
Auth0 pakub universaalse sisselogimise funktsiooni, mis rakendab autentimisvoogu. Iga kord, kui kasutaja soovib sisse logida, suunab API ta ümber Auth0 sisselogimislehele, nad autentitakse ja seejärel saadetakse teie rakendusse eduka autentimise kasulikud andmed.
Saate kohandada oma rakenduse autentimise töövoogu, määratledes erinevad sisselogimismeetodid. Universaalne sisselogimine annab kasutajanime ja parooli esmase autentimise, kuid saate seda teha lisage ka muid valikuid, nagu sotsiaalne sisselogimine teenusepakkuja (nt Google) kaudu ja mitmefaktoriline autentimine.
Seda tüüpi autentimise eeliseks on see, et te ei pea identiteediga kursis olema protokollid, nagu OAuth 2.0 või OpenID Connect, mida tavaliselt kasutatakse turvalise autentimise loomiseks süsteemid.
Looge Auth0 arendajakonsoolis uus projekt
Alustamiseks peate esmalt registreeruma an Auth0 konto. Pärast registreerumist liikuge oma armatuurlauale ja klõpsake nuppu Loo rakendus autentimisprojekti sätete konfigureerimiseks.
Auth0 pakub erinevaid autentimiskonfiguratsioone olenevalt teie loodud rakenduse tüübist. Selle õpetuse jaoks sisestage oma rakenduse nimi ja valige Ühelehelised veebirakendused, seejärel klõpsake nuppu Salvesta.
Järgmisena valige Reageerige Auth0 toetatud tehnoloogiate loendist.
Konfigureerige rakenduse URI-d
Pärast rakenduse loomist ja vajalike sätete konfigureerimist klõpsake oma rakenduse juhtpaneelil nuppu Seaded vahekaarti, et seadistada vajalikud URI atribuudid.
Määrake järgmised omadused:
- Lubatud tagasihelistamise URL-id. URL, millele Auth0 server helistab pärast kasutaja autentimist.
- Lubatud väljalogimise URL-id. URL, millele Auth0 kasutaja väljalogimisel ümber suunab.
- Lubatud veebi päritolu. Lubatud URL, millelt autoriseerimistaotlus pärineda saab.
Kohalikuks arendamiseks võite kasutada http://localhost: 3000 URL. Kuid kui olete oma koodi tootmisse viinud, peate esitama oma domeeni URL-id.
Kui olete URL-ide täitmise lõpetanud, minge edasi ja klõpsake nuppu Salvesta muudatused seadete lehe allosas.
Määrake oma eelistatud sotsiaalse sisselogimise pakkujad
Klõpsake Auth0 rakenduse armatuurlaua vasakpoolsel menüüpaanil Autentimine, seejärel valige Sotsiaalsed. Järgmisena klõpsake nuppu Loo ühendus nuppu sotsiaalühenduste seadete lehel.
Lõpuks valige ja lisage eelistatud sotsiaalse sisselogimise pakkuja.
Seadistage Auth0 oma Reacti rakendusse
Integreerige Auth0 autentimisteenus oma Reacti rakendusse, luues sisselogimis- ja edukomponendid.
1. Looge rakendus React ja seadistage ENV-fail
Looge rakendus React, seejärel avage oma koodiredaktoris projekti kaust. Järgmisena looge oma projektikausta juurkataloogis ENV-fail, mis sisaldab teie keskkonnamuutujaid: teie domeeninimi ja kliendi ID. Logige sisse oma Auth0 kontole, rakenduse juhtpaneelil, kopeerige domeeninimi ja kliendi ID ning salvestage need oma ENV-faili järgmiselt:
REACT_APP_AUTH0_DOMAIN= teie domeeninimi
REACT_APP_AUTH0_CLIENT_ID= teie kliendi ID2. Installige nõutavad paketid
Nõutavate sõltuvuste installimiseks käivitage oma terminalis see käsk:
npm install @auth0/auth0-react3. Pakkige oma rakenduse komponent Auth0 pakkujaga
Auth0 pakkuja kasutab React Contexti. See võimaldab teil rakenduse komponendist pääseda juurde kõikidele selle atribuutidele. Auth0 pakkuja võtab kolm parameetrit: kliendi domeen, kliendi ID ja ümbersuunamise URI.
Avage fail index.js, kustutage malli React kood ja lisage allolev kood:
importida Reageerige alates'reageeri';
importida ReactDOM alates'reageerimis-/klient';
importida Rakendus alates'./Rakendus';
importida{Auth0Provider} alates'@auth0/auth0-react';konst root = ReactDOM.createRoot(dokument.getElementById("juur"));
root.render(
domeen = {process.env. REACT_APP_AUTH0_DOMAIN}
clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
redirectUri = {aken.location.origin}
>
</Auth0Provider>, document.getElementById('root')
);
4. Looge sisselogimislehe komponent
Looge oma Reacti rakenduse kataloogis /src uus kaust ja nimetage see lehtedeks. Looge selles kaustas kaks faili: Login.js ja Success.js.
Avage fail login.js ja lisage allolev kood. Sisselogimislehe komponent renderdab sisselogimisnupu.
importida Reageerige alates'reageeri'
importida { useAuth0 } alates'@auth0/auth0-react';konst Logi sisse = () => {
konst { loginWithRedirect, isAuthenticated } = useAuth0();tagasi (on Authenticated || (
eksportidavaikimisi Logi sisse
Vaikimisi pakub Auth0 autentimismeetodina meili ja parooli. Lisaks kuvab Auth0 sõltuvalt teie valitud sotsiaalse sisselogimise pakkujatest ka teenusepakkuja sisselogimisvaliku.
5. Edulehe komponendi loomine
See komponent renderdab kahte põhifunktsiooni: autentitud kasutajaprofiili ja väljalogimisnupu.
Lisage faili Success.js allolev kood:
importida Reageerige alates'reageeri'
importida { useAuth0 } alates'@auth0/auth0-react'konst Edu = () => {
konst { kasutaja, väljalogimine, on autentitud } = useAuth0();tagasi ( on autentitud && (
Kasutajaprofiil</h1>
{kasutaja.nimi}</h2>
{user.email}</p>
eksportidavaikimisi Edu
Kui olete sisse loginud ja Auth0 autentinud, suunab Auth0 teid tagasi teie rakendusse ja saadab teie rakendusse kasuliku koormuse andmed, mis sisaldavad kasutaja üksikasju. Saate neid andmeid oma rakenduses kasutada kohandatud kasutajaprofiilide koostamiseks ja kasutajaseansside haldamiseks. UserAuthi konksu atribuut User võimaldab teil pääseda juurde konkreetsetele kasutajaandmetele.
UseAuth0 konks pakub ka atribuuti nimega isAuthenticated, mis võimaldab komponente tingimuslikult renderdada. Kui kasutaja on autentitud, renderdab kood tema profiili üksikasjad ja kuvab väljalogimisnupu komponendi.
Vastupidi, kui neid pole, renderdate sisselogimisnupu komponendi. See tähendab, et te ei pea määrama marsruute kasutaja autentimisoleku põhjal, kuna see atribuut haldab seda protsessi automaatselt. Auth0 määratleb nii sisse- kui ka väljalogimise loogika, muutes autentimisfunktsiooni rakendamise lihtsamaks.
Kas Auth0 autentimisteenus on proovimist väärt?
Auth0 pakub valmislahendusi, mis vastavad teie rakenduse autentimisnõuetele. Lisaks pakub teenus Auth0 tuge veebi-, mobiili- ja natiivsetele arendusplatvormidele, võimaldades teil hõlpsasti integreerida autentimissüsteemi teie eelistatud tehnoloogiavirnaga.
