Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Sukurti tinkintą autentifikavimo sistemą gali būti nelengva užduotis. Tam reikia giliai išmanyti autentifikavimo protokolus ir vartotojo autentifikavimo bei autorizacijos procesus. Tačiau integravę tokį įrankį kaip „Supabase“, galite daugiau dėmesio skirti pagrindinės programos logikos kūrimui.

„Supabase“ yra atvirojo kodo „Firebase“ alternatyva, teikianti debesies kūrimo platformą. Ji siūlo daugybę užpakalinių paslaugų, tokių kaip visavertė Postgres duomenų bazė, autentifikavimo paslauga ir be serverio funkcijos.

Jis sukurtas taip, kad būtų lengviau pasiekiamas, todėl galėsite greitai nustatyti projektus. Sekite toliau ir sužinokite, kaip integruoti autentifikavimo paslaugą į savo React.js programas.

Sukurkite naują projektą „Supabase Developer Console“.

Norėdami sukurti naują projektą „Supabase Developer Console“, atlikite šiuos veiksmus:

  1. Užsiregistruoti a Supabase kūrėjo paskyra. Eikite į prietaisų skydelį ir sukurkite naują projektą.
    2. instagram viewer
  2. Įveskite projekto pavadinimą ir slaptažodį (šioje pamokoje tai neprivaloma, bet rekomenduojama nustatant duomenų bazę), pasirinkite regioną ir galiausiai spustelėkite Sukurti naują projektą.
  3. Skiltyje API nustatymai nukopijuokite projektą URL ir viešas anon Raktas.

Nustatykite autentifikavimo teikėją

Auth Provider suteikia vartotojams saugų būdą autentifikuoti naudojant įvairius socialinius prisijungimus. Supabase pagal numatytuosius nustatymus suteikia el. pašto teikėją. Be to, atsižvelgdami į savo pageidavimus, galite pridėti kitų teikėjų, pvz., „Google“, „GitHub“ arba „Discord“.

Ši mokymo programa parodys, kaip nustatyti „Google“ teikėją. Norėdami tai padaryti, atlikite šiuos veiksmus:

  1. Kairiojoje srityje pasirinkite Autentifikavimas skirtuką.
  2. Autentifikavimo nustatymų puslapyje pasirinkite Teikėjai parinktį ir galiausiai pasirinkite „Google“ teikėjas iš tiekėjų sąrašo. Atkreipkite dėmesį, kad el. pašto paslaugų teikėjas jau sukonfigūruotas pagal numatytuosius nustatymus. Jums nereikia atlikti jokių konfigūracijų.
  3. Įgalinti Teikėjas perjungimo mygtukas.
  4. „Google“ teikėjas reikalauja dviejų įvesties: „ClientID“ ir „ClientSecret“. Šias dvi reikšmes gausite sukūrę programą „Google Developer Console“. Kol kas nukopijuokite Peradresuoti URL. Ją naudosite nustatydami programą „Google Developer Console“, kad gautumėte ClientID ir ClientSecret.

Projekto nustatymas „Google Developer Console“ (GDC)

Norėdami autentifikuoti naudodami „Google“, turėsite užregistruoti programą „Google Developer Console“ (GDC) ir gauti „ClientID“ bei „ClientSecret“. Norėdami nustatyti projektą GDC, atlikite šiuos veiksmus:

  1. Eiti į Google Developer Console ir prisijunkite naudodami „Google“ paskyrą, kad pasiektumėte konsolę.
  2. Prisijungę eikite į API ir paslaugos skirtuką, pasirinkite Sukurkite kredencialus parinktį, tada pasirinkite „OAuth“ kliento ID.
  3. Iš pateiktų parinkčių nurodykite paraiškos tipą ir įveskite savo paraiškos pavadinimą.
  4. Tada nurodykite savo programos namų maršruto URL (http//:localhost: 3000) ir galiausiai nurodykite atgalinio peradresavimo URL. Įklijuokite peradresavimo URL, kurį nukopijavote iš „Supabase Google Provider“ nustatymų puslapio. Spustelėkite Sutaupyti kad užbaigtumėte procesą.
  5. Nukopijuokite Kliento ID ir Kliento paslaptis ir grįžkite į „Supabase Project“ prietaisų skydelį ir įklijuokite juos į „Google Provider“ nustatymų puslapio „ClientID“ ir „ClientSecret“ įvesties laukus. Spustelėkite Sutaupyti įgalinti Teikėjas.

Sukonfigūruokite Supabase autentifikavimo paslaugą React.js programoje

Sukurkite React.js programą, tada atidarykite projekto aplanką savo mėgstamoje kodo rengyklėje. Tada projekto aplanko šakniniame kataloge sukurkite ENV failą, kuriame būtų aplinkos kintamieji: projekto URL ir viešasis anoninis raktas. Eikite į „Supabase“ nustatymų puslapį, atidarykite API skyrių ir nukopijuokite projekto URL bei viešąjį anon raktą.

REACT_APP_SUPABASE_URL= projekto URL
REACT_APP_SUPABASE_API_KEY = viešas anon raktas

1. Įdiekite reikiamus paketus

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

npm diegimas @supabase/auth-ui-react @supabase/supabase-js react react-router-dom

2. Sukurkite prisijungimo puslapį ir sėkmės puslapio komponentus

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

3. Prisijungimo puslapio komponentas

Šis komponentas pateiks registracijos ir prisijungimo funkciją, naudodamas „Supabase“ pateiktą React.js autentifikavimo vartotojo sąsają. Importavote autentifikavimo vartotojo sąsają kaip priklausomybę (@supabase/auth-UI-react), todėl autentifikavimo funkciją įdiegti buvo paprasčiau.

Į login.js failą pridėkite toliau pateiktą kodą:

importuoti Reaguoti iš'reaguoti';
importuoti {createClient} iš„@supabase/supabase-js“;
importuoti {Auth, ThemeSupa} iš„@supabase/auth-ui-react“;
importuoti {useNavigate} iš'react-router-dom';
konst supabase = CreateClient(
procesas.env.REACT_APP_SUPABASE_URL,
procesas.env.REACT_APP_SUPABASE_API_KEY
); 
funkcijaPrisijungti() {
konst naršyti = useNavigate(); 
 supabase.auth.onAuthStateChange(async (įvykis) =>{
jeigu (įvykis !== „SIGNED_OUT“) {
 Rodyti kelią('/sėkmė');
 }Kitas{
 Rodyti kelią('/');
 }
 })
grąžinti (
<divklasės pavadinimas="Programėlė">
<antraštęklasės pavadinimas="Programos antraštė">
 supabaseClient={supabase}
 išvaizda={{tema: ThemeSupa}}
 tema ="tamsus"
 teikėjai={["google"]}
 /> 
antraštę>
div>
 );
}
eksportuotinumatytas Prisijungti;

Išskaidykime:

  • Supabase klientą inicijuokite naudodami aplinkos kintamuosius – projekto URL ir viešąjį anon raktą ENV faile.
  • Nustatykite įvykių klausytoją, kad būtų galima stebėti autentifikavimo būsenos pokyčius naudojant supabase.auth.onAuthStateChange() metodą, t. y. jei autentifikavimo būsena nėra „SIGNED_OUT“, tada vartotojas nukreipiamas į „/sėkmės“ puslapį, kitu atveju vartotojas nukreipiamas į „/“ (pagrindinis / prisijungimo) puslapis.
  • Norėdami valdyti šį procesą, naudosite naršymo metodą iš UseNavigate Hook.
  • Galiausiai grąžinkite div, kuriame yra „React Auth“ vartotojo sąsajos komponentas iš „Supabase“ bibliotekos su „themeSupa“ (pateikiama „Supabase“), tamsioji tema ir „Google“ teikėjo, kaip ypatybių, išvaizda.

4. Sėkmės puslapio komponentas

Šis komponentas pateiks sėkmingą puslapį su išsamia vartotojo informacija, kai vartotojas bus sėkmingai autentifikuotas, ir atsijungimo mygtuku.

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

importuoti Reaguoti iš'reaguoti';
importuoti {createClient} iš„@supabase/supabase-js“;
importuoti {useNavigate} iš'react-router-dom';
importuoti {useEffect, useState} iš'reaguoti';
konst supabase = CreateClient(
procesas.env.REACT_APP_SUPABASE_URL,
procesas.env.REACT_APP_SUPABASE_API_KEY
); 
funkcijaSėkmė() {
konst [naudotojas, setUser] = useState([]); 
konst naršyti = useNavigate(); 
 useEffect (() => {
asyncfunkcijagetUserData(){
laukti supabase.auth.getUser().then((vertė) => {
jeigu(vertė.duomenys?.Vartotojas) {
setUser(vertė.duomenys.Vartotojas)} 
 }) }
 getUserData();
 },[]);
konst avatar = vartotojas?.user_metadata?.avatar_url; 
konst userName = user?.user_metadata?.full_Name; 
asyncfunkcijasignOutUser(){
lauktisupabase.auth.Atsijungti();
 Rodyti kelią('/');
 };
grąžinti (
<divklasės pavadinimas="Programėlė">
<antraštęklasės pavadinimas="Programos antraštė">
<h1>Prisijungimas sėkmingash1>
<h2>{Vartotojo vardas}h2>
<imgsrc={avatar} />
<mygtukąpaspaudus={()=> signOutUser()}> Atsijungtimygtuką>
antraštę>
div>
 );
}
eksportuotinumatytas Sėkmė;

Išskaidykime:

  • Supabase klientą inicijuokite naudodami aplinkos kintamuosius – projekto URL ir viešąjį anon raktą ENV faile.
  • Naudokite React.js kabliukai, useState ir useEffect, kad gautumėte duomenis iš API atsako.
  • „useEffect Hook“ įgyvendina asinchroninę funkciją, kuri iškviečia metodą supabase.auth.getUser. Šis metodas nuskaito vartotojo informaciją, susietą su dabartiniu vartotojo seansu.
  • Tada asinchroninė funkcija patikrina, ar yra vartotojo duomenų, ir nustato juos į būsenos kintamąjį, jei jie yra.
  • Funkcija signOutUser naudoja supabase.auth.signOut metodą, kad atjungtų vartotoją ir nukreiptų jį atgal į prisijungimo puslapį, kai spusteli atsijungimo mygtuką.
  • Galiausiai grąžinkite div su tam tikra vartotojo informacija.

5. Konfigūruokite puslapio maršrutus

Galiausiai sukonfigūruokite prisijungimo ir sėkmės puslapių maršrutus.

Faile app.js pridėkite toliau pateiktą kodą:

importuoti Reaguoti iš'reaguoti';
importuoti { Naršyklės maršrutizatorius kaip Maršrutizatorius, maršrutai, maršrutas } iš'react-router-dom';
importuoti Prisijungti iš'./pages/Prisijungti';
importuoti Sėkmė iš'./pages/Success';
funkcijaProgramėlė() {
grąžinti (
<Maršrutizatorius>
//Apibrėžkite maršrutus
"/" element={} />
"/sėkmė" element={} />
Maršrutai>
Maršrutizatorius>
 );
}
eksportuotinumatytas Programėlė;

Išskaidykime:

  • Apibrėžkite du maršrutus: prisijungimo puslapio maršrutą ir sėkmingo puslapio maršrutą naudodami maršrutizatoriaus komponentus iš react-router bibliotekos.
  • Nustatykite maršruto kelius atitinkamai į „/“ ir „/sėkmė“ ir priskirkite komponentus „Prisijungimas“ ir „Sėkmė“ atitinkamiems maršrutams.
  • Galiausiai paleiskite šią komandą savo terminale, kad suaktyvintumėte kūrimo serverį: 
 npm pradėti
  • Eikite į http//:localhost: 3000 naršyklėje, kad pamatytumėte rezultatą. Prisijungimo komponentas pateikia „Supabase“ „React-auth-UI“ tiek el. paštu, tiek „Google“ teikėjams.

Galite autentifikuoti naudodami „Google“ arba prisiregistruoti naudodami savo el. pašto adresą ir slaptažodį bei naudoti šiuos kredencialus prisijungdami. „Supabase“ socialinio prisijungimo teikėjų arba el. pašto paslaugų teikėjo naudojimo pranašumas yra tas, kad jums nereikia jaudintis dėl prisiregistravimo logikos.

Kai vartotojas prisiregistruoja prie socialinio paslaugų teikėjo arba su el. paštu ir slaptažodžiu, duomenys bus saugomi jūsų projekto Supabase Auth naudotojų duomenų bazėje. Kai jie prisijungs naudodami savo kredencialus, „Supabase“ patikrins informaciją, palyginti su kredencialais, naudojamais prisiregistruojant.

Supabase palengvina autentifikavimą naudojant React

Supabase siūlo platų funkcijų rinkinį be autentifikavimo, tokių kaip duomenų bazės priegloba, API prieiga ir duomenų srautinis perdavimas realiuoju laiku. Ji taip pat siūlo tokias funkcijas kaip užklausų kūrimo priemonė ir duomenų vizualizacija, padedanti kūrėjams efektyviau kurti ir valdyti savo programas.

Su intuityviu prietaisų skydeliu ir patikima API „Supabase“ yra galingas įrankis, leidžiantis kurti keičiamo dydžio ir saugias programas.