Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Vytvorenie vlastného autentifikačného systému môže byť náročná úloha. Vyžaduje hlboké pochopenie autentifikačných protokolov a procesov autentifikácie a autorizácie používateľov. Integráciou nástroja, ako je Supabase, sa však môžete viac zamerať na budovanie základnej logiky vašej aplikácie.

Supabase je open-source alternatíva Firebase, ktorá poskytuje cloudovú vývojovú platformu. Ponúka celý rad backendových služieb, ako je plnohodnotná databáza Postgres, overovacia služba a funkcie bez servera.

Je navrhnutý tak, aby bol prístupnejší a umožnil vám rýchlo nastaviť projekty. Postupujte ďalej a zistite, ako integrovať autentifikačnú službu do vašich aplikácií React.js.

Vytvorte nový projekt v konzole Supabase Developer Console

Ak chcete vytvoriť nový projekt v konzole Supabase Developer Console, postupujte takto:

  1. Zaregistrujte sa na a Supabase vývojársky účet. Prejdite na informačný panel a vytvorte nový projekt.
    2. instagram viewer
  2. Vyplňte názov projektu a heslo (toto je voliteľné pre tento návod, ale odporúča sa pri nastavovaní databázy), vyberte región a nakoniec kliknite Vytvorte nový projekt.
  3. V časti Nastavenia rozhrania API skopírujte projekt URL a verejná anon kľúč.

Nastavte poskytovateľa autorizácie

Poskytovateľ autorizácie poskytuje používateľom bezpečný spôsob autentifikácie pomocou rôznych sociálnych prihlásení. Supabase v predvolenom nastavení poskytuje poskytovateľa e-mailu. Okrem toho môžete pridať ďalších poskytovateľov, ako sú Google, GitHub alebo Discord v závislosti od vašich preferencií.

Tento tutoriál vám ukáže, ako nastaviť poskytovateľa Google. Ak to chcete urobiť, postupujte takto:

  1. Na ľavej table vyberte položku Overenie tab.
  2. Na stránke Nastavenia overenia vyberte možnosť Poskytovatelia a nakoniec vyberte možnosť Poskytovateľ Google zo zoznamu poskytovateľov. Všimnite si, že poskytovateľ e-mailu je už predvolene nakonfigurovaný. Nemusíte robiť žiadne konfigurácie.
  3. Povoliť Poskytovateľ prepínacie tlačidlo.
  4. Poskytovateľ Google vyžaduje dva vstupy: ClientID a ClientSecret. Tieto dve hodnoty získate po vytvorení aplikácie v Google Developer Console. Zatiaľ skopírujte súbor Adresa URL presmerovania. Budete ho používať na nastavenie aplikácie v Google Developer Console na získanie ClientID a ClientSecret.

Nastavte svoj projekt v Konzole pre vývojárov Google (GDC)

Ak sa chcete overiť v službe Google, budete musieť zaregistrovať svoju aplikáciu v konzole Google Developer Console (GDC) a získať ClientID a ClientSecret. Ak chcete nastaviť projekt na GDC, postupujte podľa týchto krokov:

  1. Ísť do Google Developer Console a prihláste sa pomocou svojho účtu Google, aby ste získali prístup ku konzole.
  2. Po prihlásení prejdite na API a služby vyberte kartu Vytvorte poverenia možnosť a potom vyberte ID klienta OAuth.
  3. Uveďte typ aplikácie z ponúknutých možností a potom vyplňte názov vašej aplikácie.
  4. Potom zadajte adresu URL domovskej trasy vašej aplikácie (http//:localhost: 3000) a nakoniec zadajte adresu URL presmerovania spätného volania. Prilepte adresu URL presmerovania, ktorú ste skopírovali zo stránky nastavení poskytovateľa služby Supabase. Kliknite na Uložiť dokončiť proces.
  5. Skopírujte ClientID a ClientSecret a vráťte sa na hlavný panel projektu Supabase a prilepte ich do vstupných polí ClientID a ClientSecret na stránke nastavení poskytovateľa Google. Kliknite Uložiť umožniť Poskytovateľovi.

Nakonfigurujte službu overovania Supabase v aplikácii React.js

Vytvorte aplikáciu React.jsa potom otvorte priečinok projektu vo svojom obľúbenom editore kódu. Potom v koreňovom adresári priečinka projektu vytvorte súbor ENV, ktorý bude obsahovať premenné prostredia: adresu URL vášho projektu a váš verejný anon kľúč. Prejdite na stránku nastavení Supabase, otvorte sekciu API a skopírujte adresu URL projektu a verejný anon kľúč.

REACT_APP_SUPABASE_URL= URL projektu
REACT_APP_SUPABASE_API_KEY = verejnosti anon kľúč

1. Nainštalujte požadované balíky

Spustite tento príkaz na svojom termináli a nainštalujte požadované závislosti:

inštalácia npm @supabase/auth-ui-react @supabase/supabase-js reaguje reagovat-router-dom

2. Vytvorte prihlasovaciu stránku a komponenty stránky úspechu

Vytvorte nový priečinok v adresári /src vašej aplikácie React.js a pomenujte ho ako stránky. V tomto priečinku vytvorte dva súbory: Login.js a Success.js.

3. Komponent prihlasovacej stránky

Tento komponent vykreslí funkciu registrácie a prihlásenia pomocou používateľského rozhrania React.js Authentication, ktoré poskytuje Supabase. Importovali ste používateľské rozhranie autentizácie ako závislosť (@supabase/auth-UI-react), čím ste zjednodušili implementáciu funkcie overenia.

Do súboru login.js pridajte nižšie uvedený kód:

importovať Reagovať od'reagovať';
importovať {createClient} od'@supabase/supabase-js';
importovať {Auth, ThemeSupa} od'@supabase/auth-ui-react';
importovať {useNavigate} od„react-router-dom“;
konšt supabase = createClient(
proces.env.REACT_APP_SUPABASE_URL,
proces.env.REACT_APP_SUPABASE_API_KEY
); 
funkciuPrihlásiť sa() {
konšt navigovať = používaťNavigovať(); 
 supabase.auth.onAuthStateChange(async (udalosť) =>{
ak (udalosť !== "SIGNED_OUT") {
 navigovať ('/úspech');
 }inak{
 navigovať ('/');
 }
 })
vrátiť (
<divclassName="aplikácia">
<hlavičkaclassName="Hlavička aplikácie">
 supabaseClient={supabase}
 vzhľad={{theme: ThemeSupa}}
 téma ="tmavý"
 poskytovatelia={['google']}
 /> 
hlavička>
div>
 );
}
exportpredvolená Prihlásiť sa;

Poďme si to rozobrať:

  • Inicializujte klienta Supabase s premennými prostredia -- URL vášho projektu a váš verejný anon kľúč v súbore ENV.
  • Nastavte prijímač udalostí na sledovanie zmien v stave autentifikácie pomocou metódy supabase.auth.onAuthStateChange(), t.j. stav overenia nie je „SIGNED_OUT“, potom je používateľ navigovaný na stránku „/úspech“, v opačnom prípade je navigovaný na stránku „/“ (domovská/prihlasovacia) stránka.
  • Na správu tohto procesu použijete metódu navigácie z háku useNavigate.
  • Nakoniec vráťte div obsahujúci komponent používateľského rozhrania React Auth z knižnice Supabase so vzhľadom motívuSupa (poskytovaného spoločnosťou Supabase), tmavého motívu a poskytovateľa Google nastaveného ako vlastnosti.

4. Komponent stránky úspechu

Tento komponent vykreslí úspešnú stránku s údajmi o používateľovi po úspešnom overení používateľa a tlačidlom odhlásenia.

Do súboru Success.js pridajte nižšie uvedený kód:

importovať Reagovať od'reagovať';
importovať {createClient} od'@supabase/supabase-js';
importovať {useNavigate} od„react-router-dom“;
importovať {useEffect, useState} od'reagovať';
konšt supabase = createClient(
proces.env.REACT_APP_SUPABASE_URL,
proces.env.REACT_APP_SUPABASE_API_KEY
); 
funkciuÚspech() {
konšt [user, setUser] = useState([]); 
konšt navigovať = používaťNavigovať(); 
 useEffect (() => {
asyncfunkciugetUserData(){
čakať supabase.auth.getUser().then((hodnotu) => {
ak(hodnotu.údaje?.používateľ) {
setUser(hodnotu.údaje.používateľ)} 
 }) }
 getUserData();
 },[]);
konšt avatar = user?.user_metadata?.avatar_url; 
konšt userName = user?.user_metadata?.full_Name; 
asyncfunkciusignOutUser(){
čakaťsupabase.auth.Odhlásiť Sa();
 navigovať ('/');
 };
vrátiť (
<divclassName="aplikácia">
<hlavičkaclassName="Hlavička aplikácie">
<h1>Prihlásenie úspešnéh1>
<h2>{userName}h2>
<imgsrc={avatar} />
<tlačidlopo kliknutí={()=> signOutUser()}>Odhlásiť satlačidlo>
hlavička>
div>
 );
}
exportpredvolená Úspech;

Poďme si to rozobrať:

  • Inicializujte klienta Supabase s premennými prostredia -- URL vášho projektu a váš verejný anon kľúč v súbore ENV.
  • Použite Háčiky React.js, useState a useEffect, na získanie údajov z odpovede API.
  • Hák useEffect implementuje asynchrónnu funkciu, ktorá volá metódu supabase.auth.getUser. Táto metóda načíta informácie o používateľovi spojené s reláciou aktuálneho používateľa.
  • Asynchrónna funkcia potom skontroluje, či používateľské údaje existujú, a ak áno, nastaví ich na stavovú premennú.
  • Funkcia signOutUser používa metódu supabase.auth.signOut na odhlásenie používateľa a jeho navigáciu späť na prihlasovaciu stránku, keď klikne na tlačidlo odhlásenia.
  • Nakoniec vráťte div s niektorými používateľskými informáciami.

5. Nakonfigurujte smerovanie stránok

Nakoniec nakonfigurujte trasy pre prihlasovaciu stránku a stránku úspechu.

Do súboru app.js pridajte kód nižšie:

importovať Reagovať od'reagovať';
importovať { BrowserRouter ako Smerovač, trasy, trasa } od„react-router-dom“;
importovať Prihlásiť sa od'./pages/Login';
importovať Úspech od'./pages/Success';
funkciuApp() {
vrátiť (
<Router>
//Definujte trasy
"/" element={} />
"/úspech" element={} />
Trasy>
Router>
 );
}
exportpredvolená App;

Poďme si to rozobrať:

  • Definujte dve cesty: cestu pre stránku prihlásenia a cestu pre stránku úspechu pomocou komponentov smerovača z knižnice smerovačov reakcií.
  • Nastavte cesty trasy na '/' a '/success' a priraďte komponenty Login a Success k ich príslušným trasám.
  • Nakoniec spustite tento príkaz na svojom termináli, aby ste roztočili vývojový server: 
 npm začať
  • Prejdite na http//:localhost: 3000 vo svojom prehliadači, aby ste videli výsledok. Prihlasovací komponent vykresľuje používateľské rozhranie React-auth-UI Supabase s poskytovateľmi e-mailu aj Google.

Môžete sa buď overiť pomocou Google, alebo sa zaregistrovať pomocou svojho e-mailu a hesla a použiť tieto poverenia na prihlásenie. Výhodou používania poskytovateľov sociálneho prihlásenia Supabase alebo poskytovateľa e-mailu je, že sa nemusíte starať o logiku registrácie.

Keď sa používateľ zaregistruje u poskytovateľa sociálnej siete alebo pomocou e-mailu a hesla, údaje sa uložia do databázy používateľov Supabase Auth pre váš projekt. Keď sa prihlásia pomocou svojich poverení, Supabase overí podrobnosti oproti povereniam použitým na registráciu.

Supabase uľahčuje autentizáciu v React

Supabase ponúka komplexnú sadu funkcií nad rámec autentifikácie, ako je hosťovanie databázy, prístup k API a streamovanie údajov v reálnom čase. Ponúka tiež funkcie ako nástroj na tvorbu dotazov a vizualizáciu údajov, ktoré vývojárom pomáhajú efektívnejšie vytvárať a spravovať ich aplikácie.

Vďaka intuitívnemu dashboardu a robustnému API je Supabase výkonným nástrojom na vytváranie škálovateľných a bezpečných aplikácií.