Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

Egy egyedi hitelesítési rendszer felépítése ijesztő feladat lehet. Ez megköveteli a hitelesítési protokollok, valamint a felhasználói hitelesítési és engedélyezési folyamatok mély megértését. Egy olyan eszköz, mint a Supabase integrálásával azonban jobban összpontosíthat az alkalmazás alapvető logikájának felépítésére.

A Supabase egy nyílt forráskódú Firebase alternatíva, amely felhőalapú fejlesztési platformot biztosít. Számos háttérszolgáltatást kínál, például teljes körű Postgres adatbázist, hitelesítési szolgáltatást és kiszolgáló nélküli funkciókat.

Úgy tervezték, hogy könnyebben hozzáférhető legyen, lehetővé téve a projektek gyors beállítását. Kövesse a lépést, hogy megtudja, hogyan integrálhatja a hitelesítési szolgáltatást React.js alkalmazásaiba.

Hozzon létre egy új projektet a Supabase Developer Console-on

Ha új projektet szeretne létrehozni a Supabase Developer Console-on, kövesse az alábbi lépéseket:

instagram viewer
  1. Regisztráljon a Supabase fejlesztői fiók. Lépjen az irányítópultra, és hozzon létre egy új projektet.
  2. Adja meg a projekt nevét és jelszavát (ez nem kötelező ebben az oktatóanyagban, de ajánlott az adatbázis beállításakor), válassza ki a régiót, és végül kattintson Új projekt létrehozása.
  3. Az API-beállítások alatt másolja ki a projektet URL és a nyilvános anon kulcs.

Hitelesítés-szolgáltató beállítása

A hitelesítési szolgáltató biztonságos módot biztosít a felhasználók számára a különféle közösségi bejelentkezésekkel történő hitelesítésre. A Supabase alapértelmezés szerint e-mail szolgáltatót biztosít. Ezenkívül preferenciáitól függően más szolgáltatókat is hozzáadhat, például a Google-t, a GitHubot vagy a Discordot.

Ez az oktatóanyag bemutatja, hogyan kell beállítani egy Google Szolgáltatót. Ehhez kövesse az alábbi lépéseket:

  1. A bal oldali ablaktáblában válassza ki a Hitelesítés lapon.
  2. A Hitelesítési beállítások oldalon válassza ki a Szolgáltatók opciót, és végül válassza ki a Google Szolgáltató a szolgáltatók listájáról. Figyelje meg, hogy az e-mail szolgáltató alapértelmezés szerint már be van állítva. Nem kell semmilyen konfigurációt elvégeznie.
  3. Engedélyezze a Szolgáltató váltó gomb.
  4. A Google Provider két bevitelt igényel: egy ClientID és egy ClientSecret. Ezt a két értéket akkor kapja meg, ha létrehoz egy alkalmazást a Google Developer Console-on. Egyelőre másolja a Átirányítási URL. Ezzel egy alkalmazást állíthat be a Google Developer Console-on a ClientID és a ClientSecret beszerzéséhez.

Állítsa be projektjét a Google Developer Console-on (GDC)

A Google-lal történő hitelesítéshez regisztrálnia kell alkalmazását a Google Developer Console-on (GDC), és be kell szereznie egy ClientID-t és a ClientSecret-et.. Kövesse az alábbi lépéseket projekt beállításához a GDC-n:

  1. Menj Google Developer Console és jelentkezzen be Google-fiókjával a konzol eléréséhez.
  2. Miután bejelentkezett, navigáljon a API-k és szolgáltatások lapon válassza ki a Hitelesítési adatok létrehozása lehetőséget, majd válassza ki OAuth-ügyfélazonosító.
  3. Adja meg az alkalmazás típusát a rendelkezésre álló lehetőségek közül, majd írja be a pályázat nevét.
  4. Ezt követően adja meg az alkalmazás otthoni útvonalának URL-jét (http//:localhost: 3000), végül pedig adja meg a visszahívási átirányítási URL-t. Illessze be az átirányítási URL-t, amelyet a Supabase Google Provider beállítási oldaláról másolt. Kattintson Megment a folyamat befejezéséhez.
  5. Másolja a Ügyfélazonosító és ClientSecret és lépjen vissza a Supabase Project irányítópultjára, és illessze be azokat a ClientID és ClientSecret beviteli mezőkbe a Google Provider beállítási oldalán. Kattintson Megment hogy engedélyezze a Szolgáltatót.

A Supabase hitelesítési szolgáltatás konfigurálása egy React.js alkalmazásban

Hozzon létre egy React.js alkalmazást, majd nyissa meg a projekt mappát kedvenc kódszerkesztőjében. Ezután a projektmappa gyökérkönyvtárában hozzon létre egy ENV-fájlt a környezeti változók tárolására: a projekt URL-címe és a nyilvános anon kulcs. Nyissa meg a Supaba beállítási oldalát, nyissa meg az API részt, és másolja ki a projekt URL-címét és a nyilvános anon kulcsot.

REACT_APP_SUPABASE_URL= projekt URL
REACT_APP_SUPABASE_API_KEY = nyilvános anon kulcs

1. Telepítse a szükséges csomagokat

Futtassa ezt a parancsot a terminálon a szükséges függőségek telepítéséhez:

npm telepítés @supabase/auth-ui-react @supabase/supabase-js react react-router-dom

2. Hozza létre a bejelentkezési oldalt és a sikeroldal összetevőit

Hozzon létre egy új mappát a React.js alkalmazás /src könyvtárában, és nevezze el lapoknak. Ebben a mappában hozzon létre két fájlt: Login.js és Success.js.

3. Bejelentkezési oldal komponens

Ez az összetevő a Supabase által biztosított React.js hitelesítési felhasználói felületet használva regisztrációs és bejelentkezési funkciót biztosít. Függőségként importálta az auth felhasználói felületet (@supabase/auth-UI-react), így egyszerűbbé válik a hitelesítési funkció megvalósítása.

A login.js fájlban adja hozzá az alábbi kódot:

import Reagál tól től'reagál';
import {createClient} tól től"@supabase/supabase-js";
import {Auth, ThemeSupa} tól től"@supabase/auth-ui-react";
import {useNavigate} tól től"react-router-dom";
const supabase = createClient(
folyamat.env.REACT_APP_SUPABASE_URL,
folyamat.env.REACT_APP_SUPABASE_API_KEY
); 
funkcióBelépés() {
const navigate = useNavigate(); 
 supabase.auth.onAuthStateChange(async (esemény) =>{
ha (esemény !== "KIJELENTKEZETT") {
 hajózik('/siker');
 }más{
 hajózik('/');
 }
 })
Visszatérés (
<divosztály név="Alkalmazás">
<fejlécosztály név="Alkalmazás fejléc">
 supabaseClient={supabase}
 megjelenés={{téma: ThemeSupa}}
 téma="sötét"
 szolgáltatók={['Google']}
 /> 
fejléc>
div>
 );
}
exportalapértelmezett Belépés;

Bontsuk szét:

  • Inicializáljon egy Supabase klienst a környezeti változókkal -- a projekt URL-címével és a nyilvános anon kulcsával az ENV fájlban.
  • Állítson be egy eseményfigyelőt a hitelesítési állapot változásainak nyomon követésére a supabase.auth.onAuthStateChange() metódus használatával, azaz ha a a hitelesítési állapot nem „SIGNED_OUT”, akkor a felhasználó a „/siker” oldalra kerül, ellenkező esetben a felhasználó a „/” oldalra kerül. (főoldal/bejelentkezés) oldalon.
  • A folyamat kezeléséhez a useNavigate hook navigációs módszerét fogja használni.
  • Végül adjon vissza egy divet, amely tartalmazza a React Auth UI összetevőt a Supabase könyvtárból, a themeSupa megjelenésével (a Supabase által biztosított), a sötét témával és a Google-szolgáltatóval, mint tulajdonságok.

4. Sikeroldal komponens

Ez az összetevő sikeres oldalt jelenít meg a felhasználó adataival, miután a felhasználó sikeresen hitelesített, és megjelenik egy kijelentkezési gomb.

Adja hozzá az alábbi kódot a Success.js fájlhoz:

import Reagál tól től'reagál';
import {createClient} tól től"@supabase/supabase-js";
import {useNavigate} tól től"react-router-dom";
import {useEffect, useState} tól től'reagál';
const supabase = createClient(
folyamat.env.REACT_APP_SUPABASE_URL,
folyamat.env.REACT_APP_SUPABASE_API_KEY
); 
funkcióSiker() {
const [user, setUser] = useState([]); 
const navigate = useNavigate(); 
 useEffect (() => {
asyncfunkciógetUserData(){
várja supabase.auth.getUser().then((érték) => {
ha(érték.adat?.felhasználó) {
setUser(érték.adat.felhasználó)} 
 }) }
 getUserData();
 },[]);
const avatar = user?.user_metadata?.avatar_url; 
const userName = user?.user_metadata?.full_Name; 
asyncfunkciósignOutUser(){
várjasupabázis.auth.kijelentkezés();
 hajózik('/');
 };
Visszatérés (
<divosztály név="Alkalmazás">
<fejlécosztály név="Alkalmazás fejléc">
<h1>Sikeres bejelentkezésh1>
<h2>{felhasználónév}h2>
<imgsrc={avatar} />
<gombkattintásra={()=> signOutUser()}>Sign Outgomb>
fejléc>
div>
 );
}
exportalapértelmezett Siker;

Bontsuk szét:

  • Inicializáljon egy Supabase klienst a környezeti változókkal -- a projekt URL-címével és a nyilvános anon kulcsával az ENV fájlban.
  • Használat React.js horgok, useState és useEffect, hogy adatokat kapjon az API-válaszból.
  • A useEffect hook egy aszinkron függvényt valósít meg, amely meghívja a supabase.auth.getUser metódust. Ez a módszer lekéri az aktuális felhasználó munkamenetéhez társított felhasználói információkat.
  • Az aszinkron függvény ezután ellenőrzi, hogy a felhasználói adatok léteznek-e, és beállítja az állapotváltozóra, ha igen.
  • A signOutUser függvény a supabase.auth.signOut módszert használja a felhasználó kijelentkezéséhez, és a kijelentkezés gombra kattintva visszanavigálja a bejelentkezési oldalra.
  • Végül adjon vissza egy div-t néhány felhasználói információval.

5. Állítsa be az oldalútvonalakat

Végül állítsa be a bejelentkezési és a sikeroldali útvonalakat is.

Adja hozzá az alábbi kódot az app.js fájlhoz:

import Reagál tól től'reagál';
import { BrowserRouter mint Router, Routes, Route } tól től"react-router-dom";
import Belépés tól től'./pages/Login';
import Siker tól től'./pages/Siker';
funkcióApp() {
Visszatérés (
<Router>
//Határozza meg az útvonalakat
"/" elem={} />
"/siker" elem={} />
Útvonalak>
Router>
 );
}
exportalapértelmezett App;

Bontsuk szét:

  • Határozza meg a két útvonalat: egy útvonalat a bejelentkezési oldalhoz és egy útvonalat a sikeres oldalhoz a react-router könyvtár Router összetevőivel.
  • Állítsa be az útvonalakat '/' és '/siker' jelekre, és rendelje hozzá a Bejelentkezés és a Siker összetevőket a megfelelő útvonalakhoz.
  • Végül futtassa ezt a parancsot a terminálon a fejlesztői kiszolgáló felpörgetéséhez: 
 npm Rajt
  • Navigáljon ide http//:localhost: 3000 az eredmény megtekintéséhez. A bejelentkezési összetevő megjeleníti a Supabase React-auth-UI-ját mind az e-mail-, mind a Google-szolgáltatókkal.

A Google segítségével hitelesíthet, vagy regisztrálhat e-mail címével és jelszavával, és ezekkel a hitelesítő adatokkal jelentkezhet be. A Supabase közösségi bejelentkezési szolgáltatói vagy az e-mail szolgáltató használatának az az előnye, hogy nem kell aggódnia a regisztrációs logika miatt.

Miután a felhasználó regisztrál egy közösségi szolgáltatónál, vagy e-mail-címmel és jelszóval regisztrál, az adatok a Supabase Auth felhasználói adatbázisában tárolódnak a projekthez. Amikor bejelentkeznek a hitelesítő adataikkal, a Supabase ellenőrzi a részleteket a regisztrációhoz használt hitelesítő adatokkal.

A Supabase megkönnyíti a hitelesítést a Reactban

A Supabase a hitelesítésen túlmenően átfogó funkciókat kínál, mint például az adatbázis-tárhely, az API-hozzáférés és a valós idejű adatfolyam. Olyan funkciókat is kínál, mint a lekérdezéskészítő és az adatvizualizáció, amelyek segítenek a fejlesztőknek alkalmazásaik hatékonyabb felépítésében és kezelésében.

Intuitív irányítópultjával és robusztus API-jával a Supabase hatékony eszköz a méretezhető és biztonságos alkalmazások létrehozásához.