Auth0 supaprastina vartotojo tapatybės nustatymo procesą žiniatinklio programoje. Jis teikia saugias ir tinkinamas autentifikavimo ir autorizacijos funkcijas per savo API. Naudokite jį ir jums nereikės nerimauti dėl savo autentifikavimo sistemos kūrimo nuo nulio.

Integravus su „Auth0“, į „React“ programą lengva įtraukti patikimą autentifikavimą ir garantuojama saugi prieiga prie programos.

Šie veiksmai paaiškina, ko reikia norint integruoti Auth0 į React programą.

Kas yra Auth0?

Auth0 yra žiniatinklio paslauga, teikianti saugią API vartotojo autentifikavimas ir autorizacija savo programose.

Tai suteikia tinkinamą autentifikavimo sistemą, kurią galite lengvai integruoti į savo „React“ programą. Kai prijungiate „Auth0“ prie programos, ji atlieka likusį autentifikavimo darbo krūvį.

Kaip veikia „Auth0“?

Auth0 suteikia universalaus prisijungimo funkciją, kuri įgyvendina autentifikavimo srautą. Kiekvieną kartą, kai vartotojas nori prisijungti, API nukreipia jį į Auth0 prisijungimo puslapį, jie autentifikuojami, o sėkmingo autentifikavimo naudingieji duomenys siunčiami į jūsų programą.

Galite tinkinti savo programos autentifikavimo darbo eigą, nustatydami skirtingus prisijungimo būdus. Universalus prisijungimas suteikia vartotojo vardą ir slaptažodį kaip pagrindinį autentifikavimą, bet jūs galite taip pat pridėkite kitų parinkčių, pvz., socialinio prisijungimo per teikėją, pvz., „Google“, ir kelių veiksnių autentifikavimas.

Šio tipo autentifikavimo pranašumas yra tas, kad jums nereikia žinoti tapatybės protokolai, tokie kaip OAuth 2.0 arba OpenID Connect, kurie dažniausiai naudojami saugiam autentifikavimui sukurti sistemos.

Sukurkite naują projektą „Auth0“ kūrėjų pulte

Norėdami pradėti, pirmiausia turėsite užsiregistruoti Auth0 sąskaitą. Prisiregistravę eikite į savo prietaisų skydelį ir spustelėkite Sukurti programą norėdami sukonfigūruoti autentifikavimo projekto nustatymus.

Auth0 teikia skirtingas autentifikavimo konfigūracijas, priklausomai nuo kuriamos programos tipo. Norėdami gauti šią mokymo programą, įveskite programos pavadinimą, pasirinkite Vieno puslapio žiniatinklio programos, tada spustelėkite Sutaupyti.

Toliau pasirinkite Reaguoti iš Auth0 palaikomų technologijų sąrašo.

Konfigūruokite programos URI

Sukūrę programą ir sukonfigūravę reikiamus nustatymus, programos prietaisų skydelyje spustelėkite Nustatymai skirtuką, kad nustatytumėte reikiamas URI ypatybes.

Nustatykite šias ypatybes:

• Leidžiami atgalinio skambinimo URL. URL, kurį Auth0 serveris iškvies po to, kai vartotojas bus autentifikuotas.
• Leidžiami atsijungimo URL. URL, į kurį Auth0 nukreips vartotoją, kai jis atsijungs.
• Leidžiama žiniatinklio kilmė. Leidžiamas URL, iš kurio gali būti pateikta autorizacijos užklausa.

Vietinei plėtrai galite naudoti http://localhost: 3000 URL. Tačiau išleidę kodą į gamybinę versiją, turėsite pateikti savo domeno URL.

Baigę užpildyti URL, eikite į priekį ir spustelėkite Išsaugoti pakeitimus nustatymų puslapio apačioje.

Nustatykite pageidaujamus socialinio prisijungimo teikėjus

„Auth0“ programos prietaisų skydelio kairiojoje meniu srityje spustelėkite Autentifikavimas, tada pasirinkite Socialiniai. Tada spustelėkite Sukurti ryšį mygtuką socialinių ryšių nustatymų puslapyje.

Galiausiai pasirinkite ir pridėkite pageidaujamą socialinio prisijungimo teikėją.

Konfigūruokite „Auth0“ savo „React“ programoje

Integruokite Auth0 autentifikavimo paslaugą į savo React programą, sukurdami prisijungimo ir sėkmės komponentus.

1. Sukurkite „React“ programą ir nustatykite ENV failą

Sukurkite programą „React“., tada atidarykite projekto aplanką savo kodo rengyklėje. Tada savo projekto aplanko šakniniame kataloge sukurkite ENV failą, kuriame bus jūsų aplinkos kintamieji: domeno pavadinimas ir kliento ID. Prisijunkite prie savo „Auth0“ paskyros, programos prietaisų skydelyje, nukopijuokite domeno pavadinimą ir kliento ID ir išsaugokite juos savo ENV faile taip:

REACT_APP_AUTH0_DOMAIN= jūsų domeno pavadinimas 
REACT_APP_AUTH0_CLIENT_ID= jūsų kliento ID

2. Įdiekite reikiamus paketus

Paleiskite šią komandą savo terminale, kad įdiegtumėte reikiamas priklausomybes:

npm įdiegti @auth0/auth0-react

3. Apvyniokite savo programos komponentą naudodami „Auth0“ teikėją

Auth0 teikėjas naudoja React Context. Tai leidžia pasiekti visas jo ypatybes iš programos komponento. Auth0 teikėjas naudoja tris parametrus: kliento domeną, kliento ID ir peradresavimo URI.

Atidarykite failą index.js, ištrinkite šablono React kodą ir pridėkite kodą toliau:

importuoti Reaguoti iš'reaguoti';
importuoti ReactDOM iš'react-dom/client';
importuoti Programėlė iš„./Programa“;
importuoti{Auth0Provider} iš„@auth0/auth0-react“;
konst root = ReactDOM.createRoot(dokumentas.getElementById("šaknis"));
root.render(
 domenas = {process.env. REACT_APP_AUTH0_DOMAIN}
 clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
 redirectUri = {langas.location.origin}
 >

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

4. Sukurkite prisijungimo puslapio komponentą

Sukurkite naują aplanką savo React programos kataloge /src ir pavadinkite jį puslapiais. Šiame aplanke sukurkite du failus: Login.js ir Success.js.

Atidarykite failą login.js ir toliau pridėkite kodą. Prisijungimo puslapio komponentas pateiks prisijungimo mygtuką.

importuoti Reaguoti iš'reaguoti'
importuoti { useAuth0 } iš„@auth0/auth0-react“;
konst Prisijungimas = () => {
konst { loginWithRedirect, isAuthenticated } = useAuth0();
grąžinti (yra autentifikuota || (
 loginWithRedirect()}> Prisijungti</button>
 ))
}
eksportuotinumatytas Prisijungti

Pagal numatytuosius nustatymus Auth0 pateikia el. pašto adresą ir slaptažodį kaip autentifikavimo būdą. Be to, atsižvelgiant į jūsų pasirinktus socialinio prisijungimo teikėjus, Auth0 taip pat parodys teikėjo prisijungimo parinktį.

5. Sukurkite sėkmės puslapio komponentą

Šis komponentas pateiks dvi pagrindines funkcijas: autentifikuotą vartotojo profilį ir atsijungimo mygtuką.

Failo Success.js pridėkite toliau pateiktą kodą:

importuoti Reaguoti iš'reaguoti'
importuoti { useAuth0 } iš„@auth0/auth0-react“
konst Sėkmė = () => {
konst { vartotojas, atsijungimas, autentifikuotas} = useAuth0(); 
grąžinti ( yra autentifikuota && ( 



Vartotojo profilis</h1> 

{naudotojo.vardas}</h2> 



{user.email}</p> 
 atsijungti()}> Atsijungti</button> 
 </div>
 ))
}
eksportuotinumatytas Sėkmė

Kai prisijungiate ir patvirtinate „Auth0“, „Auth0“ nukreipia jus atgal į jūsų programą ir į jūsų programą siunčia naudingos apkrovos duomenis, kuriuose yra naudotojo informacija. Šiuos duomenis galite naudoti programoje kurdami tinkintus naudotojų profilius ir tvarkydami naudotojų sesijas. Naudotojo ypatybė iš UseAuth kabliuko leidžia pasiekti konkrečius vartotojo duomenis.

„UseAuth0“ kabliukas taip pat suteikia ypatybę, vadinamą „isAuthenticated“, kuri leidžia sąlygiškai pateikti komponentus. Jei vartotojas yra autentifikuotas, kodas parodys jo profilio informaciją ir atsijungimo mygtuko komponentą.

Ir atvirkščiai, jei jų nėra, pateiksite prisijungimo mygtuko komponentą. Tai reiškia, kad jums nereikia nurodyti maršrutų pagal vartotojo autentifikavimo būseną, nes ši nuosavybė automatiškai valdo šį procesą. Auth0 apibrėžia ir prisijungimo, ir atsijungimo logiką, todėl jums lengviau įdiegti autentifikavimo funkciją.

Ar verta išbandyti „Auth0“ autentifikavimo paslaugą?

„Auth0“ teikia jau paruoštus sprendimus, kurie tvarko jūsų programos autentifikavimo reikalavimus. Be to, „Auth0“ paslauga siūlo žiniatinklio, mobiliųjų ir vietinių kūrimo platformų palaikymą, leidžiančią lengvai integruoti autentifikavimo sistemą su jūsų pageidaujama technologija.