Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Auth0 yksinkertaistaa käyttäjän identiteetin määrittämistä verkkosovelluksessasi. Se tarjoaa suojattuja ja muokattavia todennus- ja valtuutusominaisuuksia API: nsa kautta. Käytä sitä, ja sinun ei tarvitse huolehtia oman todennusjärjestelmän rakentamisesta tyhjästä.

Integrointi Auth0:n kanssa tekee luotettavan todennuksen sisällyttämisen React-sovellukseesi helposti ja takaa turvallisen pääsyn sovellukseesi.

Seuraavat vaiheet selittävät, mitä tarvitaan Auth0:n integroimiseksi React-sovellukseen.

Mikä on Auth0?

Auth0 on verkkopalvelu, joka tarjoaa suojatun API: n käsiteltäväksi käyttäjän todennus ja valtuutus sovelluksissasi.

Se tarjoaa mukautettavan todennusjärjestelmän, jonka voit helposti integroida React-sovellukseesi. Kun yhdistät Auth0:n sovellukseesi, se hoitaa muun todennustyökuorman.

Miten Auth0 toimii?

Auth0 tarjoaa yleisen kirjautumisominaisuuden, joka toteuttaa todennuskulun. Aina kun käyttäjä haluaa kirjautua sisään, API ohjaa hänet Auth0-kirjautumissivulle, hänet todennetaan ja onnistuneen todennuksen hyötykuormatiedot lähetetään sitten sovellukseesi.

instagram viewer

Voit mukauttaa sovelluksesi todennustyönkulkua määrittämällä erilaisia ​​kirjautumismenetelmiä. Yleinen kirjautuminen tarjoaa käyttäjänimen ja salasanan ensisijaisena todennusna, mutta voit lisää myös muita vaihtoehtoja, kuten sosiaalinen kirjautuminen Googlen kaltaisen palveluntarjoajan kautta ja monitekijäinen todennus.

Tämän tyyppisen todennuksen etuna on, että sinun ei tarvitse tuntea identiteettiä protokollat, kuten OAuth 2.0 tai OpenID Connect, joita käytetään yleisesti suojatun todennuksen luomiseen järjestelmät.

Luo uusi projekti Auth0-kehittäjäkonsolissa

Aloitaksesi sinun on ensin rekisteröidyttävä an Auth0 tili. Kun olet rekisteröitynyt, siirry kojelautaan ja napsauta Luo sovellus määrittääksesi todennusprojektin asetukset.

Auth0 tarjoaa erilaisia ​​todennuskonfiguraatioita rakentamasi sovelluksen tyypin mukaan. Tätä opetusohjelmaa varten kirjoita sovelluksesi nimi ja valitse Yksisivuiset verkkosovelluksetja napsauta sitten Tallentaa.

Valitse seuraavaksi Reagoi Auth0:n tukemien teknologioiden luettelosta.

Määritä sovelluksen URI: t

Kun olet luonut sovelluksesi ja määrittänyt tarvittavat asetukset, napsauta sovelluksesi kojelaudassa -kuvaketta asetukset -välilehteä määrittääksesi tarvittavat URI-ominaisuudet.

Aseta seuraavat ominaisuudet:

  • Sallitut takaisinsoitto-URL-osoitteet. URL-osoite, jota Auth0-palvelin kutsuu käyttäjän todennuksen jälkeen.
  • Sallitut uloskirjautumisen URL-osoitteet. URL-osoite, johon Auth0 uudelleenohjaa käyttäjän, kun hän kirjautuu ulos.
  • Sallitut verkkolähteet. Sallittu URL-osoite, josta valtuutuspyyntö voi tulla.

Voit käyttää paikalliseen kehittämiseen http://localhost: 3000 URL. Kuitenkin, kun siirrät koodisi tuotantoon, sinun on annettava verkkotunnuksesi URL-osoitteet.

Kun olet täyttänyt URL-osoitteet, siirry eteenpäin ja napsauta Tallenna muutokset asetussivun alareunassa.

Aseta ensisijaiset sosiaalisen kirjautumisen tarjoajasi

Napsauta Auth0:n sovelluksen kojelaudan vasemmassa valikkoruudussa Todennusja valitse sitten Sosiaalit. Napsauta seuraavaksi Luo yhteys -painiketta sosiaalisten yhteyksien asetussivulla.

Lopuksi valitse ja lisää haluamasi sosiaalisen kirjautumisen tarjoaja.

Määritä Auth0 React-sovellukseesi

Integroi Auth0-todennuspalvelu React-sovellukseesi rakentamalla kirjautumis- ja onnistumiskomponentit.

1. Luo React-sovellus ja määritä ENV-tiedosto

Luo React-sovellusja avaa sitten projektikansio koodieditorissasi. Luo seuraavaksi projektikansiosi juurihakemistoon ENV-tiedosto, joka sisältää ympäristömuuttujat: verkkotunnuksesi ja asiakastunnuksesi. Kirjaudu sisään Auth0-tilillesi, sovelluksen kojelautaan, kopioi verkkotunnuksen nimi ja asiakastunnus ja tallenna ne ENV-tiedostoosi seuraavasti:

REACT_APP_AUTH0_DOMAIN= verkkotunnuksesi nimi 
REACT_APP_AUTH0_CLIENT_ID= asiakastunnuksesi

2. Asenna tarvittavat paketit

Suorita tämä komento päätteessäsi asentaaksesi tarvittavat riippuvuudet:

npm asennus @auth0/auth0-react

3. Kääri sovelluskomponentti Auth0 Provideriin

Auth0-palveluntarjoaja käyttää React Contextia. Tämän avulla voit käyttää kaikkia sen ominaisuuksia sovelluskomponentista. Auth0-palveluntarjoaja ottaa kolme parametria: asiakkaan toimialueen, asiakastunnuksen ja uudelleenohjaus-URI: n.

Avaa index.js-tiedosto, poista mallin React-koodi ja lisää alla oleva koodi:

tuonti Reagoi alkaen'reagoi';
tuonti ReactDOM alkaen'react-dom/client';
tuonti Sovellus alkaen'./Sovellus';
tuonti{Auth0Provider} alkaen'@auth0/auth0-react';
konst root = ReactDOM.createRoot(asiakirja.getElementById('juuri'));
root.render(
 domain = {process.env. REACT_APP_AUTH0_DOMAIN}
 clientId = {process.env. REACT_APP_AUTH0_CLIENT_ID}
 redirectUri = {ikkuna.location.origin}
 >

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

4. Luo kirjautumissivun komponentti

Luo uusi kansio React-sovelluksesi /src-hakemistoon ja nimeä sille sivut. Luo tähän kansioon kaksi tiedostoa: Login.js ja Success.js.

Avaa login.js-tiedosto ja lisää alla oleva koodi. Kirjautumissivukomponentti näyttää kirjautumispainikkeen.

tuonti Reagoi alkaen'reagoi'
tuonti { useAuth0 } alkaen'@auth0/auth0-react';
konst Kirjautuminen = () => {
konst { loginWithRedirect, isAuthenticated } = useAuth0();


palata (on Authenticated || (
viedäoletuksena Kirjaudu sisään

Oletuksena Auth0 tarjoaa sähköpostin ja salasanan todennusmenetelmänä. Lisäksi valitsemistasi sosiaalisten kirjautumispalvelujen tarjoajista riippuen Auth0 näyttää myös palveluntarjoajan kirjautumisvaihtoehdon.

5. Luo menestyssivun komponentti

Tämä komponentti tuottaa kaksi pääominaisuutta: todennettu käyttäjäprofiili ja uloskirjautumispainike.

Lisää alla oleva koodi Success.js-tiedostoon:

tuonti Reagoi alkaen'reagoi'
tuonti { useAuth0 } alkaen'@auth0/auth0-react'
konst Menestys = () => {
konst { käyttäjä, uloskirjautuminen, isAuthenticated } = useAuth0(); 


palata ( on todennettu && ( 




Käyttäjäprofiili</h1> 
{käyttäjänimi}
{käyttäjänimi}</h2> 





{user.email}</p> 


viedäoletuksena Menestys

Kun kirjaudut sisään ja saat Auth0:n todennuksen, Auth0 ohjaa sinut takaisin sovellukseesi ja lähettää sovellukseesi hyötykuormatiedot, jotka sisältävät käyttäjätiedot. Voit käyttää näitä tietoja sovelluksessasi mukautettujen käyttäjäprofiilien luomiseen ja käyttäjäistuntojen hallintaan. UseAuth-koukun User-ominaisuuden avulla voit käyttää tiettyjä käyttäjätietoja.

UseAuth0-koukku tarjoaa myös ominaisuuden nimeltä isAuthenticated, jonka avulla voit hahmontaa komponentit ehdollisesti. Jos käyttäjä on todennettu, koodi näyttää hänen profiilinsa tiedot ja näyttää uloskirjautumispainikkeen.

Päinvastoin, jos ne eivät ole, teet kirjautumispainikekomponentin. Tämä tarkoittaa, että sinun ei tarvitse määrittää reittejä käyttäjän todennustilan perusteella, koska tämä ominaisuus hallitsee tätä prosessia automaattisesti. Auth0 määrittelee sekä sisään- että uloskirjautumislogiikan, mikä helpottaa todennustoiminnon toteuttamista.

Onko Auth0-todennuspalvelu kokeilemisen arvoinen?

Auth0 tarjoaa valmiita ratkaisuja, jotka käsittelevät sovelluksesi todennusvaatimukset. Lisäksi Auth0-palvelu tarjoaa tuen verkko-, mobiili- ja natiivikehitysalustoille, joiden avulla voit helposti integroida todennusjärjestelmän haluamaasi teknologiapinoon.