Vytvoření vlastního autentizačního systému může být skličující úkol. Vyžaduje hluboké porozumění ověřovacím protokolům a procesům autentizace a autorizace uživatelů. Integrací nástroje, jako je Supabase, se však můžete více zaměřit na budování základní logiky vaší aplikace.
Supabase je open-source alternativa Firebase, která poskytuje cloudovou vývojovou platformu. Nabízí řadu backendových služeb, jako je plnohodnotná databáze Postgres, autentizační služba a funkce bez serveru.
Je navržen tak, aby byl přístupnější a umožnil vám rychle nastavit projekty. Postupujte dále a zjistěte, jak integrovat ověřovací službu do vašich aplikací React.js.
Vytvořte nový projekt na Supabase Developer Console
Chcete-li vytvořit nový projekt na Supabase Developer Console, postupujte takto:
- Zaregistrujte se na a Supabase vývojářský účet. Přejděte na řídicí panel a vytvořte nový projekt.
- Vyplňte název projektu a heslo (toto je pro tento tutoriál volitelné, ale doporučuje se při nastavování databáze), vyberte oblast a nakonec klikněte na Vytvořit nový projekt.
- V části Nastavení API zkopírujte projekt URL a veřejná anon klíč.
Nastavte poskytovatele ověření
Poskytovatel auth poskytuje uživatelům bezpečný způsob ověřování pomocí různých sociálních přihlášení. Supabase ve výchozím nastavení poskytuje poskytovatele e-mailu. Navíc můžete přidat další poskytovatele, jako je Google, GitHub nebo Discord v závislosti na vašich preferencích.
Tento tutoriál vám ukáže, jak nastavit poskytovatele Google. Chcete-li tak učinit, postupujte takto:
- V levém podokně vyberte Autentizace tab.
- Na stránce Nastavení ověřování vyberte možnost Poskytovatelé a nakonec vyberte poskytovatel Google ze seznamu poskytovatelů. Všimněte si, že poskytovatel e-mailu je již ve výchozím nastavení nakonfigurován. Nemusíte provádět žádné konfigurace.
- Povolit Poskytovatel přepínací tlačítko.
- Poskytovatel Google vyžaduje dva vstupy: ClientID a ClientSecret. Tyto dvě hodnoty získáte po vytvoření aplikace v Google Developer Console. Prozatím zkopírujte Adresa URL přesměrování. Použijete jej k nastavení aplikace v Google Developer Console k získání ClientID a ClientSecret.
Nastavení projektu ve Vývojářské konzoli Google (GDC)
Chcete-li se ověřit u společnosti Google, budete muset zaregistrovat svou aplikaci v Google Developer Console (GDC) a získat ClientID a ClientSecret. Chcete-li nastavit projekt na GDC, postupujte takto:
- Jít do Google Developer Console a přihlaste se pomocí svého účtu Google pro přístup ke konzoli.
- Po přihlášení přejděte na API a služby vyberte kartu Vytvořte přihlašovací údaje možnost a poté vyberte ID klienta OAuth.
- Určete typ aplikace z nabízených možností a poté vyplňte název vaší aplikace.
- Poté zadejte adresu URL domovské trasy vaší aplikace (http//:localhost: 3000) a nakonec zadejte adresu URL přesměrování zpětného volání. Vložte adresu URL přesměrování, kterou jste zkopírovali ze stránky nastavení poskytovatele Google Supabase. Klikněte na Uložit k dokončení procesu.
- Zkopírujte ClientID a ClientSecret a vraťte se na řídicí panel projektu Supabase a vložte je do vstupních polí ClientID a ClientSecret na stránce nastavení poskytovatele Google. Klikněte Uložit umožnit Poskytovateli.
Nakonfigurujte službu Supabase Authentication Service v aplikaci React.js
Vytvořte aplikaci React.jsa poté otevřete složku projektu ve svém oblíbeném editoru kódu. Dále v kořenovém adresáři složky projektu vytvořte soubor ENV, který bude obsahovat proměnné prostředí: adresu URL projektu a veřejný anon klíč. Přejděte na stránku nastavení Supabase, otevřete sekci API a zkopírujte adresu URL projektu a veřejný anon klíč.
REACT_APP_SUPABASE_URL= URL projektu
REACT_APP_SUPABASE_API_KEY = veřejnost anon klíč1. Nainstalujte požadované balíčky
Spusťte tento příkaz na svém terminálu a nainstalujte požadované závislosti:
instalace npm @supabase/auth-ui-react @supabase/supabase-js reagovat reagovat-router-dom2. Vytvořte přihlašovací stránku a součásti úspěšné stránky
Vytvořte novou složku v adresáři /src vaší aplikace React.js a pojmenujte ji jako stránky. V této složce vytvořte dva soubory: Login.js a Success.js.
3. Komponenta přihlašovací stránky
Tato komponenta vykreslí funkci registrace a přihlášení pomocí uživatelského rozhraní React.js Authentication poskytovaného Supabase. Importovali jste uživatelské rozhraní ověřování jako závislost (@supabase/auth-UI-react), což usnadňuje implementaci funkce ověřování.
Do souboru login.js přidejte níže uvedený kód:
import Reagovat z'reagovat';
import {createClient} z'@supabase/supabase-js';
import {Auth, ThemeSupa} z'@supabase/auth-ui-react';
import {useNavigate} z'react-router-dom';
konst supabase = createClient(
proces.env.REACT_APP_SUPABASE_URL,
proces.env.REACT_APP_SUPABASE_API_KEY
);
funkcePřihlásit se() {
konst navigovat = useNavigate();
supabase.auth.onAuthStateChange(asynchronní (událost) =>{
-li (událost!== "ODHLÁŠENO") {
navigovat('/úspěch');
}jiný{
navigovat('/');
}
})
vrátit se (
<divjméno třídy="Aplikace">
<záhlavíjméno třídy="Záhlaví aplikace">
supabaseClient={supabase}
vzhled={{theme: ThemeSupa}}
téma ="temný"
poskytovatelé={['Google']}
/>
záhlaví>
div>
);
}
vývoznívýchozí Přihlásit se;
Pojďme si to rozebrat:
- Inicializujte klienta Supabase s proměnnými prostředí -- URL vašeho projektu a váš veřejný anon klíč v souboru ENV.
- Nastavte posluchač událostí pro sledování změn stavu ověřování pomocí metody supabase.auth.onAuthStateChange(), tj. stav autentizace není "SIGNED_OUT", pak je uživatel navigován na stránku '/úspěch', jinak je uživatel navigován na '/' (domovská/přihlašovací) stránka.
- Ke správě tohoto procesu použijete metodu navigace z háku useNavigate.
- Nakonec vraťte div obsahující komponentu uživatelského rozhraní React Auth z knihovny Supabase se vzhledem themeSupa (poskytovaný Supabase), tmavým motivem a poskytovatelem Google nastaveným jako vlastnosti.
4. Součást stránky úspěchu
Tato komponenta vykreslí úspěšnou stránku s podrobnostmi o uživateli poté, co je uživatel úspěšně ověřen, a tlačítkem pro odhlášení.
Do souboru Success.js přidejte níže uvedený kód:
import Reagovat z'reagovat';
import {createClient} z'@supabase/supabase-js';
import {useNavigate} z'react-router-dom';
import {useEffect, useState} z'reagovat';
konst supabase = createClient(
proces.env.REACT_APP_SUPABASE_URL,
proces.env.REACT_APP_SUPABASE_API_KEY
);
funkceÚspěch() {
konst [user, setUser] = useState([]);
konst navigovat = useNavigate();
useEffect (() => {
asynchronnífunkcegetUserData(){
čekat supabase.auth.getUser().then((hodnota) => {
-li(hodnota.data?.uživatel) {
setUser(hodnota.data.uživatel)}
}) }
getUserData();
},[]);
konst avatar = uživatel?.metadata_uživatele?.avatar_url;
konst userName = user?.user_metadata?.full_Name;
asynchronnífunkcesignOutUser(){
čekatsupabáze.auth.odhlásit se();
navigovat('/');
};
vrátit se (
<divjméno třídy="Aplikace">
<záhlavíjméno třídy="Záhlaví aplikace">
<h1>Přihlášení úspěšnéh1>
<h2>{userName}h2>
<imgsrc={avatar} />
<knoflíkpři kliknutí={()=> signOutUser()}>Odhlásit seknoflík>
záhlaví>
div>
);
}
vývoznívýchozí Úspěch;Pojďme si to rozebrat:
- Inicializujte klienta Supabase s proměnnými prostředí -- URL vašeho projektu a váš veřejný anon klíč v souboru ENV.
- Použití Háčky React.js, useState a useEffect, abyste získali data z odpovědi API.
- Hák useEffect implementuje asynchronní funkci, která volá metodu supabase.auth.getUser. Tato metoda načte informace o uživateli spojené s relací aktuálního uživatele.
- Asynchronní funkce pak zkontroluje, zda uživatelská data existují, a pokud ano, nastaví je na stavovou proměnnou.
- Funkce signOutUser používá metodu supabase.auth.signOut k odhlášení uživatele a jeho navigaci zpět na přihlašovací stránku, když klikne na tlačítko odhlášení.
- Nakonec vraťte div s některými informacemi o uživateli.
5. Nakonfigurujte směrování stránek
Nakonec nakonfigurujte trasy pro přihlašovací i úspěšné stránky.
Do souboru app.js přidejte kód níže:
import Reagovat z'reagovat';
import { BrowserRouter tak jako Směrovač, trasy, trasa } z'react-router-dom';
import Přihlásit se z'./pages/Login';
import Úspěch z'./pages/Success';
funkceAplikace() {
vrátit se (
<Směrovač>
//Definujte trasy
"/" element={} />
"/úspěch" element={} />
Trasy>
Směrovač>
);
}
vývoznívýchozí Aplikace;
Pojďme si to rozebrat:
- Definujte dvě cesty: cestu pro přihlašovací stránku a cestu pro stránku úspěchu pomocí komponent Router z knihovny Reagovat Router.
- Nastavte cesty trasy na '/' a '/success' a přiřaďte komponenty Login a Success k jejich příslušným trasám.
- Nakonec spusťte tento příkaz na svém terminálu, abyste roztočili vývojový server:
npm Start- Navigovat do http//:localhost: 3000 ve vašem prohlížeči, abyste viděli výsledek. Přihlašovací komponenta vykresluje React-auth-UI Supabase s poskytovateli e-mailu i Google.
Můžete se buď ověřit pomocí Googlu, nebo se zaregistrovat pomocí e-mailu a hesla a pomocí těchto přihlašovacích údajů se přihlásit. Výhodou používání poskytovatelů sociálního přihlášení Supabase nebo poskytovatele e-mailu je, že se nemusíte starat o logiku registrace.
Jakmile se uživatel zaregistruje u poskytovatele sociálních sítí nebo pomocí e-mailu a hesla, data budou uložena v uživatelské databázi Supabase Auth pro váš projekt. Když se přihlásí pomocí svých přihlašovacích údajů, Supabase ověří podrobnosti podle přihlašovacích údajů použitých k registraci.
Supabase usnadňuje autentizaci v Reactu
Supabase nabízí komplexní sadu funkcí nad rámec ověřování, jako je hostování databáze, přístup k API a streamování dat v reálném čase. Nabízí také funkce, jako je tvůrce dotazů a vizualizace dat, které vývojářům pomáhají vytvářet a spravovat jejich aplikace efektivněji.
Díky intuitivnímu řídicímu panelu a robustnímu rozhraní API je Supabase výkonným nástrojem pro vytváření škálovatelných a bezpečných aplikací.