Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Izgradnja prilagođenog sustava provjere autentičnosti može biti zastrašujući zadatak. Zahtijeva duboko razumijevanje protokola provjere autentičnosti i procesa provjere autentičnosti korisnika i autorizacije. Međutim, integracijom alata kao što je Supabase, možete se više usredotočiti na izgradnju temeljne logike svoje aplikacije.

Supabase je Firebase alternativa otvorenog koda koja pruža razvojnu platformu temeljenu na oblaku. Nudi niz pozadinskih usluga kao što je potpuna Postgres baza podataka, usluga autentifikacije i funkcije bez poslužitelja.

Dizajniran je da bude pristupačniji, što vam omogućuje brzo postavljanje projekata. Pratite kako biste naučili kako integrirati uslugu provjere autentičnosti u svoje React.js aplikacije.

Napravite novi projekt na Supabase Developer Console

Za izradu novog projekta na Supabase Developer Console, slijedite ove korake:

instagram viewer
  1. Prijavite se za a Supabaza račun razvojnog programera. Dođite do nadzorne ploče i izradite novi projekt.
  2. Unesite naziv projekta i lozinku (ovo nije obavezno za ovaj vodič, ali se preporučuje prilikom postavljanja baze podataka), odaberite regiju i na kraju kliknite Stvorite novi projekt.
  3. Pod postavkama API-ja kopirajte projekt URL i javno anon ključ.

Postavite davatelja autentifikacije

Davatelj autentifikacije pruža siguran način za autentifikaciju korisnika pomoću raznih društvenih prijava. Supabase prema zadanim postavkama pruža davatelja usluga e-pošte. Osim toga, možete dodati druge pružatelje usluga kao što su Google, GitHub ili Discord, ovisno o vašim željama.

Ovaj će vodič pokazati kako postaviti Google Providera. Da biste to učinili, slijedite ove korake:

  1. U lijevom oknu odaberite Ovjera tab.
  2. Na stranici postavki provjere autentičnosti odaberite Pružatelji usluga opciju i na kraju odaberite Google davatelj usluga s popisa pružatelja usluga. Imajte na umu da je pružatelj usluga e-pošte već konfiguriran prema zadanim postavkama. Ne morate raditi nikakve konfiguracije.
  3. Omogućite Davatelj gumb za prebacivanje.
  4. Google Provider zahtijeva dva unosa: ClientID i ClientSecret. Ove dvije vrijednosti dobit ćete nakon izrade aplikacije na Google Developer Console. Za sada kopirajte URL za preusmjeravanje. Koristit ćete ga za postavljanje aplikacije na Google Developer Console za dobivanje ClientID-a i ClientSecret-a.

Postavite svoj projekt na Google Developer Console (GDC)

Za autentifikaciju na Googleu morat ćete registrirati svoju aplikaciju na Google Developer Console (GDC) i dobiti ClientID i ClientSecret. Slijedite ove korake za postavljanje projekta na GDC:

  1. Ići Google Developer Console i prijavite se svojim Google računom za pristup konzoli.
  2. Nakon što ste prijavljeni, idite na API-ji i usluge karticu, odaberite Stvorite vjerodajnice opciju, a zatim odaberite OAuth ID klijenta.
  3. Od ponuđenih opcija navedite vrstu prijave, a zatim unesite naziv svoje prijave.
  4. Nakon toga navedite URL početne rute svoje aplikacije (http//:localhost: 3000), i na kraju navedite URL za preusmjeravanje povratnog poziva. Zalijepite URL za preusmjeravanje koji ste kopirali sa stranice postavki Supabase Google Providera. Kliknite na Uštedjeti dovršiti proces.
  5. Kopiraj ID klijenta i ClientSecret i vratite se na svoju nadzornu ploču projekta Supabase i zalijepite ih u polja za unos ClientID i ClientSecret na stranici postavki Google Providera. Klik Uštedjeti kako biste omogućili Davatelja.

Konfigurirajte Supabase Authentication Service u React.js aplikaciji

Napravite React.js aplikaciju, a zatim otvorite mapu projekta u svom omiljenom uređivaču koda. Zatim, u korijenskom direktoriju mape vašeg projekta, stvorite ENV datoteku za držanje varijabli vaše okoline: URL vašeg projekta i vaš javni anon ključ. Prijeđite na svoju stranicu postavki Supabase, otvorite odjeljak API i kopirajte URL projekta i javni anon ključ.

REACT_APP_SUPABASE_URL= URL projekta
REACT_APP_SUPABASE_API_KEY = javnost anon ključ

1. Instalirajte potrebne pakete

Pokrenite ovu naredbu na svom terminalu da instalirate potrebne ovisnosti:

npm instalirati @supabase/auth-ui-react @supabase/supabase-js reagirati reagirati-usmjerivač-dom

2. Izradite komponente stranice za prijavu i stranice uspjeha

Napravite novu mapu u /src direktoriju svoje React.js aplikacije i nazovite je stranice. Unutar ove mape stvorite dvije datoteke: Login.js i Success.js.

3. Komponenta stranice za prijavu

Ova komponenta će prikazati značajku registracije i prijave, koristeći React.js Authentication UI koje pruža Supabase. Uvezli ste korisničko sučelje za autentifikaciju kao ovisnost (@supabase/auth-UI-react), što olakšava implementaciju funkcije autentifikacije.

U datoteku login.js dodajte kod u nastavku:

uvoz Reagirati iz'reagirati';
uvoz {createClient} iz'@supabase/supabase-js';
uvoz {Auth, ThemeSupa} iz'@supabase/auth-ui-react';
uvoz {useNavigate} iz'react-router-dom';
konst supabase = createClient(
postupak.env.REACT_APP_SUPABASE_URL,
postupak.env.REACT_APP_SUPABASE_API_KEY
); 
funkcijaPrijaviti se() {
konst navigacija = useNavigate(); 
 supabase.auth.onAuthStateChange(asinkroni (događaj) =>{
ako (događaj !== "SIGNED_OUT") {
 kretati se ('/uspjeh');
 }drugo{
 kretati se ('/');
 }
 })
povratak (
<divnaziv klase="Aplikacija">
<Zaglavljenaziv klase="Zaglavlje aplikacije">
 supabaseClient={supabase}
 izgled={{tema: ThemeSupa}}
 tema="tamno"
 provideri={['google']}
 /> 
Zaglavlje>
div>
 );
}
izvozzadano Prijaviti se;

Razdvojimo to:

  • Inicijalizirajte Supabase klijent s varijablama okruženja -- URL vašeg projekta i vaš javni anon ključ u ENV datoteci.
  • Postavite slušatelja događaja za praćenje promjena u stanju provjere autentičnosti pomoću metode supabase.auth.onAuthStateChange(), tj. ako stanje provjere autentičnosti nije "SIGNED_OUT" tada se korisnik preusmjerava na stranicu '/uspjeh', inače se korisnik prebacuje na '/' (početna/prijava) stranica.
  • Za upravljanje ovim procesom koristit ćete metodu navigacije iz kuke useNavigate.
  • Na kraju, vratite div koji sadrži React Auth UI komponentu iz biblioteke Supabase s izgledom themeSupa (omogućuje Supabase), tamne teme i Google davatelja postavljenih kao svojstva.

4. Komponenta stranice uspjeha

Ova komponenta će prikazati uspješnu stranicu s detaljima o korisniku nakon što se korisnik uspješno autentificira i gumbom za odjavu.

U datoteku Success.js dodajte kod u nastavku:

uvoz Reagirati iz'reagirati';
uvoz {createClient} iz'@supabase/supabase-js';
uvoz {useNavigate} iz'react-router-dom';
uvoz {useEffect, useState} iz'reagirati';
konst supabase = createClient(
postupak.env.REACT_APP_SUPABASE_URL,
postupak.env.REACT_APP_SUPABASE_API_KEY
); 
funkcijaUspjeh() {
konst [korisnik, postaviKorisnik] = useState([]); 
konst navigacija = useNavigate(); 
 useEffect (() => {
asinkronifunkcijagetUserData(){
čekati supabase.auth.getUser().then((vrijednost) => {
ako(vrijednost.podaci?.korisnik) {
setUser(vrijednost.podaci.korisnik)} 
 }) }
 getUserData();
 },[]);
konst avatar = korisnik?.korisnički_metapodaci?.avatar_url; 
konst korisničko ime = korisnik?.korisnički_metapodaci?.puno_ime; 
asinkronifunkcijasignOutUser(){
čekatinadbaza.auth.odjavi se();
 kretati se ('/');
 };
povratak (
<divnaziv klase="Aplikacija">
<Zaglavljenaziv klase="Zaglavlje aplikacije">
<h1>Prijava uspješnah1>
<h2>{Korisničko ime}h2>
<imgsrc={avatar} />
<dugmena klik={()=> signOutUser()}>Odjavadugme>
Zaglavlje>
div>
 );
}
izvozzadano Uspjeh;

Razdvojimo to:

  • Inicijalizirajte Supabase klijent s varijablama okruženja -- URL vašeg projekta i vaš javni anon ključ u ENV datoteci.
  • Koristiti React.js kuke, useState i useEffect, za dobivanje podataka iz API odgovora.
  • Zakačka useEffect implementira asinkronu funkciju koja poziva metodu supabase.auth.getUser. Ova metoda dohvaća informacije o korisniku povezane s trenutnom sesijom korisnika.
  • Asinkrona funkcija tada provjerava postoje li korisnički podaci i postavlja ih na varijablu stanja ako postoje.
  • Funkcija signOutUser koristi metodu supabase.auth.signOut za odjavu korisnika i vraćanje na stranicu za prijavu kada klikne gumb za odjavu.
  • Na kraju vratite div s nekim korisničkim podacima.

5. Konfigurirajte rute stranice

Na kraju, konfigurirajte rute za stranice za prijavu i stranice za uspjeh.

U datoteku app.js dodajte kod u nastavku:

uvoz Reagirati iz'reagirati';
uvoz { BrowserRouter kao Ruter, rute, rute } iz'react-router-dom';
uvoz Prijaviti se iz'./pages/Login';
uvoz Uspjeh iz'./pages/Success';
funkcijaaplikacija() {
povratak (
<Usmjerivač>
//Definirajte rute
"/" element={} />
"/uspjeh" element={} />
Rute>
Usmjerivač>
 );
}
izvozzadano aplikacija;

Razdvojimo to:

  • Definirajte dvije rute: rutu za stranicu za prijavu i rutu za stranicu uspjeha koristeći komponente usmjerivača iz biblioteke react-router.
  • Postavite staze rute na '/' odnosno '/success' i dodijelite komponente Login i Success njihovim rutama.
  • Na kraju, pokrenite ovu naredbu na svom terminalu da zavrtite razvojni poslužitelj: 
 npm početak
  • Idite do http//:localhost: 3000 na vašem pregledniku da vidite rezultat. Komponenta za prijavu prikazuje Supabaseov React-auth-UI s pružateljima usluga e-pošte i Googleom.

Možete se autentificirati pomoću Googlea ili se prijaviti sa svojom e-poštom i zaporkom i koristiti ove vjerodajnice za prijavu. Prednost korištenja Supabaseovih pružatelja društvenih prijava ili pružatelja usluga e-pošte je ta što ne morate brinuti o logici prijave.

Nakon što se korisnik prijavi kod pružatelja društvenih usluga ili putem e-pošte i lozinke, podaci će biti pohranjeni u Supabaseovoj Auth korisničkoj bazi podataka za vaš projekt. Kada se prijave koristeći svoje vjerodajnice, Supabase će provjeriti podatke u odnosu na vjerodajnice korištene za prijavu.

Supabase olakšava provjeru autentičnosti u Reactu

Supabase nudi sveobuhvatan paket značajki izvan autentifikacije, kao što je hosting baze podataka, API pristup i strujanje podataka u stvarnom vremenu. Također nudi značajke poput alata za izradu upita i vizualizacije podataka kako bi programerima pomogao u učinkovitijoj izradi i upravljanju svojim aplikacijama.

Sa svojom intuitivnom nadzornom pločom i robusnim API-jem, Supabase je moćan alat za izgradnju skalabilnih i sigurnih aplikacija.