Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Izgradnja sistema za preverjanje pristnosti po meri je lahko zastrašujoča naloga. Zahteva globoko razumevanje protokolov za preverjanje pristnosti ter procesov preverjanja pristnosti in avtorizacije uporabnikov. Z integracijo orodja, kot je Supabase, pa se lahko bolj osredotočite na gradnjo osnovne logike vaše aplikacije.

Supabase je odprtokodna alternativa Firebase, ki ponuja razvojno platformo v oblaku. Ponuja vrsto zalednih storitev, kot je popolna zbirka podatkov Postgres, storitev preverjanja pristnosti in funkcije brez strežnika.

Zasnovan je tako, da je bolj dostopen in vam omogoča hitro nastavitev projektov. Sledite, če želite izvedeti, kako integrirati storitev preverjanja pristnosti v svoje aplikacije React.js.

Ustvarite nov projekt na konzoli za razvijalce Supabase

Če želite ustvariti nov projekt na konzoli za razvijalce Supabase, sledite tem korakom:

instagram viewer
  1. Prijavite se za a Supabase račun razvijalca. Pomaknite se do nadzorne plošče in ustvarite nov projekt.
  2. Vnesite ime projekta in geslo (to ni obvezno za to vadnico, vendar priporočljivo pri nastavitvi baze podatkov), izberite regijo in na koncu kliknite Ustvari nov projekt.
  3. Pod nastavitvami API-ja kopirajte projekt URL in javno anon ključ.

Nastavite ponudnika avt

Ponudnik avtentikacije uporabnikom zagotavlja varen način za avtentikacijo z uporabo različnih družabnih prijav. Supabase privzeto ponuja ponudnika e-pošte. Poleg tega lahko dodate druge ponudnike, kot so Google, GitHub ali Discord, odvisno od vaših želja.

Ta vadnica bo prikazala, kako nastavite Googlovega ponudnika. To storite tako, da sledite tem korakom:

  1. V levem podoknu izberite Preverjanje pristnosti zavihek.
  2. Na strani z nastavitvami preverjanja pristnosti izberite Ponudniki možnost in na koncu izberite Googlov ponudnik s seznama ponudnikov. Upoštevajte, da je ponudnik e-pošte že privzeto konfiguriran. Ni vam treba narediti nobenih konfiguracij.
  3. Omogoči Ponudnik preklopni gumb.
  4. Googlov ponudnik zahteva dva vnosa: ClientID in ClientSecret. Ti dve vrednosti boste prejeli po ustvarjanju aplikacije na konzoli Google Developer Console. Za zdaj kopirajte URL preusmeritve. Uporabili ga boste za nastavitev aplikacije na konzoli Google Developer Console za pridobitev ClientID in ClientSecret.

Nastavite svoj projekt na konzoli Google Developer Console (GDC)

Za preverjanje pristnosti pri Googlu boste morali svojo aplikacijo registrirati na Googlovi razvijalski konzoli (GDC) ter pridobiti ClientID in ClientSecret. Za nastavitev projekta na GDC sledite tem korakom:

  1. Pojdi do Google Developer Console in se prijavite s svojim Google računom za dostop do konzole.
  2. Ko ste prijavljeni, se pomaknite do API-ji in storitve zavihek izberite Ustvarite poverilnice in nato izberite ID odjemalca OAuth.
  3. Med ponujenimi možnostmi določite vrsto vloge in nato vnesite ime svoje vloge.
  4. Nato določite URL domače poti vaše aplikacije (http//:localhost: 3000) in na koncu določite URL za preusmeritev povratnega klica. Prilepite preusmeritveni URL, ki ste ga kopirali s strani z nastavitvami ponudnika Supabase Google. Kliknite na Shrani za dokončanje postopka.
  5. Kopiraj ClientID in ClientSecret in se vrnite na nadzorno ploščo projekta Supabase ter jih prilepite v vnosni polji ClientID in ClientSecret na strani z nastavitvami Googlovega ponudnika. Kliknite Shrani omogočiti ponudnika.

Konfigurirajte storitev za preverjanje pristnosti Supabase v aplikaciji React.js

Ustvarite aplikacijo React.js, nato pa odprite mapo projekta v svojem najljubšem urejevalniku kode. Nato v korenskem imeniku vaše projektne mape ustvarite datoteko ENV za shranjevanje spremenljivk vašega okolja: URL vašega projekta in vaš javni anon ključ. Pojdite na svojo stran z nastavitvami Supabase, odprite razdelek API in kopirajte URL projekta in javni anon ključ.

REACT_APP_SUPABASE_URL= URL projekta
REACT_APP_SUPABASE_API_KEY = javnosti anon ključ

1. Namestite zahtevane pakete

Zaženite ta ukaz na vašem terminalu, da namestite zahtevane odvisnosti:

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

2. Ustvarite komponente strani za prijavo in strani za uspeh

Ustvarite novo mapo v imeniku /src vaše aplikacije React.js in jo poimenujte strani. Znotraj te mape ustvarite dve datoteki: Login.js in Success.js.

3. Komponenta prijavne strani

Ta komponenta bo prikazala funkcijo prijave in prijave z uporabo uporabniškega vmesnika za preverjanje pristnosti React.js, ki ga zagotavlja Supabase. Uporabniški vmesnik za preverjanje pristnosti ste uvozili kot odvisnost (@supabase/auth-UI-react), zaradi česar je implementacija funkcije preverjanja pristnosti preprostejša.

V datoteko login.js dodajte spodnjo kodo:

uvoz Reagiraj od'reagirati';
uvoz {createClient} od'@supabase/supabase-js';
uvoz {Auth, ThemeSupa} od'@supabase/auth-ui-react';
uvoz {useNavigate} od'react-router-dom';
konst supabase = createClient(
postopek.env.REACT_APP_SUPABASE_URL,
postopek.env.REACT_APP_SUPABASE_API_KEY
); 
funkcijoVpiši se() {
konst navigate = useNavigate(); 
 supabase.auth.onAuthStateChange(asinh (dogodek) =>{
če (dogodek !== "SIGNED_OUT") {
 krmariti('/uspeh');
 }drugače{
 krmariti('/');
 }
 })
vrnitev (
<divclassName="Aplikacija">
<glavaclassName="Glava aplikacije">
 supabaseClient={supabase}
 videz={{tema: ThemeSupa}}
 tema="temno"
 ponudniki={['google']}
 /> 
glava>
div>
 );
}
izvozprivzeto Vpiši se;

Razčlenimo:

  • Inicializirajte odjemalca Supabase s spremenljivkami okolja -- vaš URL projekta in vaš javni anon ključ v datoteki ENV.
  • Nastavite poslušalca dogodkov za sledenje spremembam v stanju preverjanja pristnosti z metodo supabase.auth.onAuthStateChange(), tj. stanje avtentikacije ni "SIGNED_OUT", potem je uporabnik preusmerjen na stran '/success', sicer pa je uporabnik preusmerjen na '/' (domača/prijavna) stran.
  • Za upravljanje tega procesa boste uporabili metodo navigacije iz kljuke useNavigate.
  • Na koncu vrnite div, ki vsebuje komponento uporabniškega vmesnika React Auth iz knjižnice Supabase z videzom themeSupa (zagotavlja Supabase), temno temo in Googlovim ponudnikom, nastavljenim kot lastnosti.

4. Komponenta strani uspeha

Ta komponenta bo prikazala uspešno stran s podrobnostmi o uporabniku, potem ko je uporabnik uspešno overjen, in gumb za odjavo.

V datoteko Success.js dodajte spodnjo kodo:

uvoz Reagiraj od'reagirati';
uvoz {createClient} od'@supabase/supabase-js';
uvoz {useNavigate} od'react-router-dom';
uvoz {useEffect, useState} od'reagirati';
konst supabase = createClient(
postopek.env.REACT_APP_SUPABASE_URL,
postopek.env.REACT_APP_SUPABASE_API_KEY
); 
funkcijoUspeh() {
konst [uporabnik, setUser] = useState([]); 
konst navigate = useNavigate(); 
 useEffect (() => {
asinhfunkcijogetUserData(){
čakati supabase.auth.getUser().then((vrednost) => {
če(vrednost.podatki?.uporabnik) {
setUser(vrednost.podatki.uporabnik)} 
 }) }
 getUserData();
 },[]);
konst avatar = uporabnik?.uporabniški_metapodatki?.avatar_url; 
konst uporabniško ime = uporabnik?.uporabniški_metapodatki?.polno_ime; 
asinhfunkcijosignOutUser(){
čakatinadosnova.auth.Odjava();
 krmariti('/');
 };
vrnitev (
<divclassName="Aplikacija">
<glavaclassName="Glava aplikacije">
<h1>Prijava uspešnah1>
<h2>{userName}h2>
<imgsrc={avatar} />
<gumbonClick={()=> signOutUser()}>Odjavagumb>
glava>
div>
 );
}
izvozprivzeto uspeh;

Razčlenimo:

  • Inicializirajte odjemalca Supabase s spremenljivkami okolja -- vaš URL projekta in vaš javni anon ključ v datoteki ENV.
  • Uporaba Kavlji React.js, useState in useEffect, da pridobite podatke iz odziva API-ja.
  • Kavelj useEffect implementira asinhrono funkcijo, ki kliče metodo supabase.auth.getUser. Ta metoda pridobi informacije o uporabniku, povezane s sejo trenutnega uporabnika.
  • Asinhrona funkcija nato preveri, ali uporabniški podatki obstajajo, in jih nastavi na spremenljivko stanja, če obstajajo.
  • Funkcija signOutUser uporablja metodo supabase.auth.signOut, da odjavi uporabnika in ga pomakne nazaj na stran za prijavo, ko klikne gumb za odjavo.
  • Na koncu vrnite div z nekaterimi uporabniškimi informacijami.

5. Konfigurirajte poti strani

Končno konfigurirajte poti za stran za prijavo in stran za uspeh.

V datoteko app.js dodajte spodnjo kodo:

uvoz Reagiraj od'reagirati';
uvoz { BrowserRouter kot Usmerjevalnik, poti, pot } od'react-router-dom';
uvoz Vpiši se od'./pages/Login';
uvoz Uspeh od'./pages/Success';
funkcijoaplikacija() {
vrnitev (
<Usmerjevalnik>
//Določite poti
"/" element={} />
"/uspeh" element={} />
Poti>
Usmerjevalnik>
 );
}
izvozprivzeto aplikacija;

Razčlenimo:

  • Definirajte dve poti: pot za prijavno stran in pot za uspešno stran z uporabo komponent usmerjevalnika iz knjižnice react-router.
  • Nastavite poti poti na '/' oziroma '/success' in dodelite komponenti Login in Success njunima ustreznima potema.
  • Na koncu zaženite ta ukaz na vašem terminalu, da zavrtite razvojni strežnik: 
 npm začetek
  • Pojdite na http//:localhost: 3000 v brskalniku, da si ogledate rezultat. Komponenta za prijavo upodablja Supabase React-auth-UI z e-pošto in Googlovimi ponudniki.

Lahko se preverite z Googlom ali pa se prijavite s svojim e-poštnim naslovom in geslom ter uporabite te poverilnice za prijavo. Prednost uporabe ponudnikov družabnih prijav Supabase ali ponudnika e-pošte je, da vam ni treba skrbeti za logiko prijave.

Ko se uporabnik prijavi pri socialnem ponudniku ali z e-pošto in geslom, bodo podatki shranjeni v podatkovni zbirki uporabnikov Supabase Auth za vaš projekt. Ko se prijavijo s svojimi poverilnicami, bo Supabase preveril podrobnosti glede na poverilnice, uporabljene za prijavo.

Supabase omogoča enostavno preverjanje pristnosti v Reactu

Supabase ponuja obsežen nabor funkcij poleg preverjanja pristnosti, kot so gostovanje baze podatkov, dostop API in pretakanje podatkov v realnem času. Ponuja tudi funkcije, kot sta graditelj poizvedb in vizualizacija podatkov, ki razvijalcem pomagata učinkoviteje graditi in upravljati svoje aplikacije.

S svojo intuitivno nadzorno ploščo in robustnim API-jem je Supabase močno orodje za izdelavo razširljivih in varnih aplikacij.