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:
- Zaregistrujte sa na a Supabase vývojársky účet. Prejdite na informačný panel a vytvorte nový projekt.
- 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.
- 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:
- Na ľavej table vyberte položku Overenie tab.
- 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.
- Povoliť Poskytovateľ prepínacie tlačidlo.
- 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:
- Ísť do Google Developer Console a prihláste sa pomocou svojho účtu Google, aby ste získali prístup ku konzole.
- Po prihlásení prejdite na API a služby vyberte kartu Vytvorte poverenia možnosť a potom vyberte ID klienta OAuth.
- Uveďte typ aplikácie z ponúknutých možností a potom vyplňte názov vašej aplikácie.
- 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.
- 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-dom2. 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í.