Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Kohandatud autentimissüsteemi loomine võib olla hirmutav ülesanne. See nõuab autentimisprotokollide ning kasutaja autentimis- ja autoriseerimisprotsesside sügavat mõistmist. Kuid integreerides sellise tööriista nagu Supabase, saate rohkem keskenduda oma rakenduse põhiloogika loomisele.

Supabase on avatud lähtekoodiga Firebase'i alternatiiv, mis pakub pilvepõhist arendusplatvormi. See pakub mitmesuguseid taustateenuseid, nagu täisväärtuslik Postgresi andmebaas, autentimisteenus ja serverita funktsioonid.

See on loodud paremini juurdepääsetavaks, võimaldades teil projekte kiiresti seadistada. Järgige teksti, et õppida, kuidas integreerida autentimisteenus oma React.js rakendustesse.

Looge Supabase'i arendajakonsoolis uus projekt

Supabase'i arendajakonsoolis uue projekti loomiseks toimige järgmiselt.

  1. Registreeruge a Supabase arendaja konto. Liikuge armatuurlauale ja looge uus projekt.
    2. instagram viewer
  2. Sisestage projekti nimi ja parool (see on selle õpetuse jaoks valikuline, kuid soovitatav andmebaasi seadistamisel), valige piirkond ja klõpsake lõpuks Loo uus projekt.
  3. Kopeerige projekt jaotises API sätted URL ja avalik anon võti.

Seadistage autentimise pakkuja

Auth Provider pakub kasutajatele turvalist viisi erinevate sotsiaalsete sisselogimiste abil autentimiseks. Supabase pakub vaikimisi meiliteenuse pakkujat. Lisaks saate vastavalt oma eelistustele lisada teisi teenusepakkujaid, nagu Google, GitHub või Discord.

See õpetus näitab, kuidas Google'i pakkujat seadistada. Selleks toimige järgmiselt.

  1. Valige vasakpoolsel paanil Autentimine sakk.
  2. Valige lehel Autentimisseaded Pakkujad valik ja lõpuks valige Google'i pakkuja pakkujate nimekirjast. Pange tähele, et meiliteenuse pakkuja on vaikimisi juba konfigureeritud. Te ei pea konfiguratsioone tegema.
  3. Lubage Pakkuja lülitusnupp.
  4. Google'i pakkuja nõuab kahte sisendit: ClientID ja ClientSecret. Need kaks väärtust saate pärast Google'i arendajakonsoolis rakenduse loomist. Praegu kopeerige Ümbersuunamise URL. Kasutate seda rakenduse seadistamiseks Google Developer Console'is, et hankida ClientID ja ClientSecret.

Seadistage oma projekt Google'i arendajakonsoolis (GDC)

Google'iga autentimiseks peate registreerima oma rakenduse Google'i arendajakonsoolis (GDC) ning hankima kliendi ID ja ClientSecreti. GDC-s projekti seadistamiseks järgige neid samme.

  1. Minema Google'i arendajakonsool ja logige sisse oma Google'i kontoga, et pääseda konsoolile.
  2. Pärast sisselogimist navigeerige lehele API-d ja teenused valige vahekaart Loo mandaadid suvand ja seejärel valige OAuthi kliendi ID.
  3. Määrake pakutavate valikute hulgast taotluse tüüp ja seejärel sisestage oma taotluse nimi.
  4. Seejärel määrake oma rakenduse kodutee URL (http//:localhost: 3000) ja lõpuks määrake tagasihelistamise ümbersuunamise URL. Kleepige ümbersuunamise URL, mille kopeerisite Supabase Google'i pakkuja seadete lehelt. Kliki Salvesta protsessi lõpuleviimiseks.
  5. Kopeerige Kliendi ID ja ClientSecret ja minge tagasi oma Supabase Projecti juhtpaneelile ning kleepige need Google'i pakkuja seadete lehel ClientID ja ClientSecret sisestusväljadele. Klõpsake Salvesta Pakkuja lubamiseks.

Supabase'i autentimisteenuse konfigureerimine rakenduses React.js

Looge rakendus React.jsja seejärel avage oma lemmikkoodiredaktoris projekti kaust. Järgmisena looge oma projektikausta juurkataloogis ENV-fail, mis sisaldab oma keskkonnamuutujaid: teie projekti URL ja avalik anonvõti. Minge oma Supabase'i seadete lehele, avage API jaotis ja kopeerige projekti URL ja avalik anonvõti.

REACT_APP_SUPABASE_URL= projekti URL
REACT_APP_SUPABASE_API_KEY = avalik anon võti

1. Installige nõutavad paketid

Nõutavate sõltuvuste installimiseks käivitage oma terminalis see käsk:

npm installimine @supabase/auth-ui-react @supabase/supabase-js react react-ruuter-dom

2. Looge sisselogimisleht ja edulehe komponendid

Looge oma React.js rakenduse kataloogis /src uus kaust ja nimetage see lehtedeks. Looge selles kaustas kaks faili: Login.js ja Success.js.

3. Sisselogimislehe komponent

See komponent renderdab registreerimise ja sisselogimise funktsiooni, kasutades Supabase'i pakutavat React.js autentimise kasutajaliidest. Importisite autentimisliidese sõltuvusena (@supabase/auth-UI-react), mis muudab autentimisfunktsiooni rakendamise lihtsamaks.

Lisage faili login.js allolev kood:

importida Reageerige alates'reageeri';
importida {createClient} alates'@supabase/supabase-js';
importida {Auth, ThemeSupa} alates'@supabase/auth-ui-react';
importida {useNavigate} alates'react-ruuter-dom';
konst supabase = createClient(
protsessi.env.REACT_APP_SUPABASE_URL,
protsessi.env.REACT_APP_SUPABASE_API_KEY
); 
funktsiooniLogi sisse() {
konst navigate = useNavigate(); 
 supabase.auth.onAuthStateChange(asünkr (sündmus) =>{
kui (sündmus !== "SIGNED_OUT") {
 navigate('/edu');
 }muidu{
 navigate('/');
 }
 })
tagasi (
<divklassi nimi="Rakendus">
<päisklassi nimi="Rakenduse päis">
 supabaseClient={supabase}
 välimus={{teema: ThemeSupa}}
 teema ="tume"
 pakkujad={['google']}
 /> 
päis>
div>
 );
}
eksportidavaikimisi Logi sisse;

Teeme selle lahti:

  • Initsialiseerige Supabase'i klient keskkonnamuutujatega – oma projekti URL ja ENV-faili avalik anonvõti.
  • Seadistage sündmuste kuulaja autentimisoleku muutuste jälgimiseks, kasutades meetodit supabase.auth.onAuthStateChange(), st kui autentimise olek ei ole "SIGNED_OUT", siis navigeeritakse kasutaja lehele "/edu", vastasel juhul navigeeritakse kasutaja lehele "/" (avaleht/sisselogimine) lehel.
  • Selle protsessi haldamiseks kasutate navigeerimismeetodit useNavigate konks.
  • Lõpuks tagastage Supabase'i teegist React Auth UI komponenti sisaldav div, mille atribuutidena on seatud themeSupa (pakkuja Supabase), tume teema ja Google'i pakkuja.

4. Edu lehe komponent

See komponent renderdab pärast kasutaja edukat autentimist ja väljalogimisnuppu eduka lehe kasutajaandmetega.

Lisage faili Success.js allolev kood:

importida Reageerige alates'reageeri';
importida {createClient} alates'@supabase/supabase-js';
importida {useNavigate} alates'react-ruuter-dom';
importida {useEffect, useState} alates'reageeri';
konst supabase = createClient(
protsessi.env.REACT_APP_SUPABASE_URL,
protsessi.env.REACT_APP_SUPABASE_API_KEY
); 
funktsiooniEdu() {
konst [kasutaja, setUser] = useState([]); 
konst navigate = useNavigate(); 
 useEffect (() => {
asünkrfunktsioonihankigeUserData(){
ootama supabase.auth.getUser().then((väärtus) => {
kui(väärtus.andmed?.kasutaja) {
setUser(väärtus.andmed.kasutaja)} 
 }) }
 getUserData();
 },[]);
konst avatar = kasutaja?.kasutaja_metadata?.avatari_url; 
konst kasutajanimi = kasutaja?.kasutaja_metadata?.täielik_nimi; 
asünkrfunktsioonisignOutUser(){
ootamasupabaas.auth.Logi välja();
 navigate('/');
 };
tagasi (
<divklassi nimi="Rakendus">
<päisklassi nimi="Rakenduse päis">
<h1>Sisselogimine õnnestush1>
<h2>{userName}h2>
<imgsrc={avatar} />
<nuppuonClick={()=> signOutUser()}> Logi väljanuppu>
päis>
div>
 );
}
eksportidavaikimisi Edu;

Teeme selle lahti:

  • Initsialiseerige Supabase'i klient keskkonnamuutujatega – oma projekti URL ja ENV-faili avalik anonvõti.
  • Kasutage React.js konksud, useState ja useEffect, et saada andmeid API vastusest.
  • Konks useEffect rakendab asünkroonset funktsiooni, mis kutsub välja meetodi supabase.auth.getUser. See meetod hangib praeguse kasutaja seansiga seotud kasutajateabe.
  • Seejärel kontrollib asünkroonne funktsioon, et näha, kas kasutajaandmed on olemas, ja seab need olekumuutujale, kui need on olemas.
  • Funktsioon signOutUser kasutab kasutaja väljalogimiseks ja väljalogimisnupul klõpsamisel tagasi sisselogimislehele navigeerimiseks meetodit supabase.auth.signOut.
  • Lõpuks tagastage osa kasutajateabega div.

5. Seadistage lehe marsruudid

Lõpuks konfigureerige nii sisselogimis- kui ka edulehtede marsruudid.

Lisage faili app.js allolev kood:

importida Reageerige alates'reageeri';
importida { Brauserruuter nagu Ruuter, marsruudid, marsruut } alates'react-ruuter-dom';
importida Logi sisse alates'./pages/Login';
importida Edu alates'./pages/Success';
funktsiooniRakendus() {
tagasi (
<Ruuter>
//Määrake marsruudid
"/" element={} />
"/edu" element={} />
Marsruudid>
Ruuter>
 );
}
eksportidavaikimisi Rakendus;

Teeme selle lahti:

  • Määratlege kaks marsruuti: marsruut sisselogimislehe jaoks ja marsruut edulehe jaoks, kasutades ruuteri komponente react-ruuteri teegist.
  • Määrake marsruuditeed vastavalt "/" ja "/success" ning määrake nende vastavatele marsruutidele komponendid Login ja Success.
  • Lõpuks käivitage arendusserveri käivitamiseks oma terminalis see käsk: 
 npm alustada
  • Navigeerige http//:localhost: 3000 tulemuse vaatamiseks brauseris. Sisselogimiskomponent renderdab Supabase'i React-auth-UI nii meili kui ka Google'i teenusepakkujatega.

Saate autentida Google'i abil või registreeruda oma e-posti aadressi ja parooliga ning kasutada sisselogimiseks neid mandaate. Supabase'i sotsiaalse sisselogimise pakkujate või meiliteenuse pakkuja kasutamise eeliseks on see, et te ei pea muretsema registreerumisloogika pärast.

Kui kasutaja registreerub sotsiaalteenuse pakkujaga või meilisõnumi ja parooliga, salvestatakse andmed teie projekti jaoks Supabase'i autentimise kasutajate andmebaasi. Kui nad logivad sisse oma mandaatidega, kontrollib Supabase üksikasju registreerumisel kasutatud mandaatidega.

Supabase teeb Reactis autentimise lihtsaks

Supabase pakub laiaulatuslikku komplekti funktsioone peale autentimise, nagu andmebaasi hostimine, API juurdepääs ja reaalajas andmete voogesitus. See pakub ka selliseid funktsioone nagu päringu koostaja ja andmete visualiseerimine, et aidata arendajatel oma rakendusi tõhusamalt luua ja hallata.

Oma intuitiivse armatuurlaua ja tugeva API-ga on Supabase võimas tööriist skaleeritavate ja turvaliste rakenduste loomiseks.