Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Pielāgotas autentifikācijas sistēmas izveide var būt biedējošs uzdevums. Tam nepieciešama dziļa izpratne par autentifikācijas protokoliem un lietotāju autentifikācijas un autorizācijas procesiem. Tomēr, integrējot tādu rīku kā Supabase, varat vairāk koncentrēties uz savas lietojumprogrammas galvenās loģikas izveidi.

Supabase ir atvērtā pirmkoda Firebase alternatīva, kas nodrošina uz mākoņiem balstītu izstrādes platformu. Tas piedāvā virkni aizmugures pakalpojumu, piemēram, pilnvērtīgu Postgres datu bāzi, autentifikācijas pakalpojumu un bezservera funkcijas.

Tas ir izstrādāts tā, lai būtu vieglāk pieejams, ļaujot ātri iestatīt projektus. Sekojiet līdzi, lai uzzinātu, kā integrēt autentifikācijas pakalpojumu savās React.js lietojumprogrammās.

Izveidojiet jaunu projektu Supabase izstrādātāja konsolē

Lai izveidotu jaunu projektu Supabase izstrādātāja konsolē, veiciet šīs darbības:

instagram viewer
  1. Reģistrēties a Supabāze izstrādātāja konts. Pārejiet uz informācijas paneli un izveidojiet jaunu projektu.
  2. Ievadiet projekta nosaukumu un paroli (šajā apmācībā tā nav obligāta, bet ieteicama datu bāzes iestatīšanai), atlasiet reģionu un visbeidzot noklikšķiniet uz Izveidojiet jaunu projektu.
  3. Sadaļā API iestatījumi kopējiet projektu URL un publisks anons taustiņu.

Iestatiet autentifikācijas nodrošinātāju

Autentifikācijas nodrošinātājs nodrošina drošu veidu, kā lietotāji var autentificēties, izmantojot dažādus sociālos pieteikumvārdus. Supabase pēc noklusējuma nodrošina e-pasta pakalpojumu sniedzēju. Turklāt atkarībā no jūsu vēlmēm varat pievienot citus pakalpojumu sniedzējus, piemēram, Google, GitHub vai Discord.

Šajā apmācībā tiks parādīts, kā iestatīt Google pakalpojumu sniedzēju. Lai to izdarītu, veiciet tālāk norādītās darbības.

  1. Kreisajā rūtī atlasiet Autentifikācija cilne.
  2. Lapā Autentifikācijas iestatījumi atlasiet Pakalpojumu sniedzēji opciju un visbeidzot atlasiet Google pakalpojumu sniedzējs no pakalpojumu sniedzēju saraksta. Ņemiet vērā, ka e-pasta pakalpojumu sniedzējs jau ir konfigurēts pēc noklusējuma. Jums nav jāveic nekādas konfigurācijas.
  3. Iespējot Pakalpojumu sniedzējs pārslēgšanas poga.
  4. Google pakalpojumu sniedzējam ir nepieciešamas divas ievades: ClientID un ClientSecret. Šīs divas vērtības iegūsit pēc lietojumprogrammas izveides Google izstrādātāja konsolē. Pagaidām kopējiet Novirzīt URL. Jūs to izmantosit, lai Google izstrādātāja konsolē iestatītu lietojumprogrammu, lai iegūtu ClientID un ClientSecret.

Projekta iestatīšana Google izstrādātāja konsolē (GDC)

Lai autentificētos pakalpojumā Google, jums būs jāreģistrē sava lietotne Google izstrādātāja konsolē (GDC) un jāiegūst klienta ID un ClientSecret.. Veiciet šīs darbības, lai izveidotu projektu GDC:

  1. Iet uz Google izstrādātāja konsole un pierakstieties ar savu Google kontu, lai piekļūtu konsolei.
  2. Kad esat pieteicies, dodieties uz API un pakalpojumi cilnē izvēlieties Izveidojiet akreditācijas datus opciju un pēc tam atlasiet OAuth klienta ID.
  3. No piedāvātajām opcijām norādiet pieteikuma veidu un pēc tam ievadiet pieteikuma nosaukumu.
  4. Pēc tam norādiet savas lietotnes mājas maršruta URL (http//:localhost: 3000), un visbeidzot norādiet atzvanīšanas novirzīšanas URL. Ielīmējiet novirzīšanas URL, ko nokopējāt no Supabase Google Provider iestatījumu lapas. Klikšķiniet uz Saglabāt lai pabeigtu procesu.
  5. Kopējiet Klienta ID un ClientSecret un atgriezieties savā Supabase Project informācijas panelī un ielīmējiet tos ievades laukos ClientID un ClientSecret Google pakalpojumu sniedzēja iestatījumu lapā. Klikšķis Saglabāt lai iespējotu Pakalpojumu sniedzēju.

Konfigurējiet Supabase autentifikācijas pakalpojumu React.js lietojumprogrammā

Izveidojiet React.js lietojumprogrammuun pēc tam atveriet projekta mapi savā iecienītākajā koda redaktorā. Pēc tam projekta mapes saknes direktorijā izveidojiet ENV failu, kurā glabājiet vides mainīgos: jūsu projekta URL un publisko anon atslēgu. Dodieties uz savu Supabase iestatījumu lapu, atveriet API sadaļu un kopējiet projekta URL un publisko anon atslēgu.

REACT_APP_SUPABASE_URL= projekta URL
REACT_APP_SUPABASE_API_KEY = publiski anon atslēga

1. Instalējiet nepieciešamās pakotnes

Palaidiet šo komandu savā terminālī, lai instalētu nepieciešamās atkarības:

npm instalēšana @supabase/auth-ui-react @supabase/supabase-js react react-router-dom

2. Izveidojiet pieteikšanās lapu un veiksmes lapas komponentus

Izveidojiet jaunu mapi savas React.js lietojumprogrammas direktorijā /src un nosauciet tai lapas. Šajā mapē izveidojiet divus failus: Login.js un Success.js.

3. Pieteikšanās lapas komponents

Šis komponents nodrošinās reģistrēšanās un pierakstīšanās funkciju, izmantojot React.js autentifikācijas lietotāja saskarni, ko nodrošina Supabase. Jūs importējāt autentifikācijas lietotāja saskarni kā atkarību (@supabase/auth-UI-react), padarot autentifikācijas funkcionalitātes ieviešanu vienkāršāku.

Failā login.js pievienojiet tālāk norādīto kodu:

imports Reaģēt no'reaģēt';
imports {createClient} no'@supabase/supabase-js';
imports {Auth, ThemeSupa} no"@supabase/auth-ui-react";
imports {useNavigate} no"react-router-dom";
konst supabase = createClient(
process.env.REACT_APP_SUPABASE_URL,
process.env.REACT_APP_SUPABASE_API_KEY
); 
funkcijuPieslēgties() {
konst navigēt = useNavigate(); 
 supabase.auth.onAuthStateChange(asinhronā (pasākums) =>{
ja (pasākums !== "SIGNED_OUT") {
 pārvietoties('/veiksmi');
 }cits{
 pārvietoties('/');
 }
 })
atgriezties (
<divklasesNosaukums="Lietotne">
<galveneklasesNosaukums="Lietotnes galvene">
 supabaseClient={supabase}
 izskats={{tēma: ThemeSupa}}
 tēma ="tumšs"
 sniedzēji={['google']}
 /> 
galvene>
div>
 );
}
eksportētnoklusējuma Pieslēgties;

Sadalīsim to:

  • Inicializējiet Supabase klientu ar vides mainīgajiem — sava projekta URL un publisko anon atslēgu ENV failā.
  • Iestatiet notikumu uztvērēju, lai izsekotu autentifikācijas stāvokļa izmaiņas, izmantojot metodi supabase.auth.onAuthStateChange(), t.i., ja autentifikācijas stāvoklis nav "SIGNED_OUT", tad lietotājs tiek virzīts uz lapu "/veiksmi", pretējā gadījumā lietotājs tiek pārvietots uz "/" (mājas/pieteikšanās) lapa.
  • Lai pārvaldītu šo procesu, izmantosit navigācijas metodi no useNavigate āķa.
  • Visbeidzot, atgrieziet div, kas satur React Auth UI komponentu no Supabase bibliotēkas ar izskatu themeSupa (nodrošina Supabase), tumšo motīvu un kā rekvizītus iestatītu Google nodrošinātāju.

4. Veiksmes lapas komponents

Šis komponents parādīs veiksmīgu lapu ar lietotāja informāciju pēc tam, kad lietotājs būs veiksmīgi autentificēts, un tiks parādīta izrakstīšanās poga.

Failā Success.js pievienojiet tālāk norādīto kodu:

imports Reaģēt no'reaģēt';
imports {createClient} no'@supabase/supabase-js';
imports {useNavigate} no"react-router-dom";
imports {useEffect, useState} no'reaģēt';
konst supabase = createClient(
process.env.REACT_APP_SUPABASE_URL,
process.env.REACT_APP_SUPABASE_API_KEY
); 
funkcijuPanākumi() {
konst [lietotājs, setUser] = useState([]); 
konst navigēt = useNavigate(); 
 useEffect (() => {
asinhronāfunkcijugetUserData(){
gaidīt supabase.auth.getUser().then((vērtību) => {
ja(vērtību.dati?.lietotājs) {
setUser(vērtību.dati.lietotājs)} 
 }) }
 getUserData();
 },[]);
konst iemiesojums = lietotājs?.lietotāja_metadati?.avatar_url; 
konst userName = lietotājs?.lietotāja_metadati?.full_Name; 
asinhronāfunkcijusignOutUser(){
gaidītsupabāze.auth.izrakstīties();
 pārvietoties('/');
 };
atgriezties (
<divklasesNosaukums="Lietotne">
<galveneklasesNosaukums="Lietotnes galvene">
<h1>Pieteikšanās veiksmīgah1>
<h2>{userName}h2>
<imgsrc={avatar} />
<poguonClick={()=> signOutUser()}> Izrakstītiespogu>
galvene>
div>
 );
}
eksportētnoklusējuma Panākumi;

Sadalīsim to:

  • Inicializējiet Supabase klientu ar vides mainīgajiem — sava projekta URL un publisko anon atslēgu ENV failā.
  • Izmantot React.js āķi, useState un useEffect, lai iegūtu datus no API atbildes.
  • UseEffect āķis īsteno asinhronu funkciju, kas izsauc metodi supabase.auth.getUser. Šī metode izgūst lietotāja informāciju, kas saistīta ar pašreizējā lietotāja sesiju.
  • Pēc tam asinhronā funkcija pārbauda, ​​vai lietotāja dati pastāv, un iestata tos uz stāvokļa mainīgo, ja tie pastāv.
  • Funkcija signOutUser izmanto metodi supabase.auth.signOut, lai izrakstītu lietotāju un virzītu viņu atpakaļ uz pieteikšanās lapu, kad viņš noklikšķina uz izrakstīšanās pogas.
  • Visbeidzot, atgrieziet div ar daļu no lietotāja informācijas.

5. Konfigurējiet lapas maršrutus

Visbeidzot, konfigurējiet maršrutus gan pieteikšanās, gan veiksmes lapām.

Failā app.js pievienojiet tālāk norādīto kodu:

imports Reaģēt no'reaģēt';
imports { BrowserRouter kā Maršrutētājs, maršruti, maršruts } no"react-router-dom";
imports Pieslēgties no'./pages/Login';
imports Panākumi no'./pages/Success';
funkcijuApp() {
atgriezties (
<Maršrutētājs>
//Definējiet maršrutus
"/" elements={} />
"/veiksmi" elements={} />
Maršruti>
Maršrutētājs>
 );
}
eksportētnoklusējuma Lietotne;

Sadalīsim to:

  • Definējiet divus maršrutus: maršrutu pieteikšanās lapai un maršrutu veiksmes lapai, izmantojot maršrutētāja komponentus no react-router bibliotēkas.
  • Iestatiet maršruta ceļus attiecīgi uz '/' un '/success' un piešķiriet to attiecīgajiem maršrutiem komponentus Pieteikšanās un Veiksme.
  • Visbeidzot, palaidiet šo komandu savā terminālī, lai izveidotu izstrādes serveri: 
 npm sākt
  • Dodieties uz http//:localhost: 3000 savā pārlūkprogrammā, lai skatītu rezultātu. Pieteikšanās komponents atveido Supabase React-auth-UI gan e-pasta, gan Google pakalpojumu sniedzējiem.

Varat autentificēties, izmantojot Google, vai reģistrēties, izmantojot savu e-pastu un paroli, un izmantot šos akreditācijas datus, lai pierakstītos. Supabase sociālās pieteikšanās nodrošinātāju vai e-pasta pakalpojumu sniedzēja izmantošanas priekšrocība ir tāda, ka jums nav jāuztraucas par reģistrēšanās loģiku.

Kad lietotājs reģistrējas sociālajā pakalpojumu sniedzējā vai ar e-pastu un paroli, dati tiks saglabāti jūsu projekta Supabase Auth lietotāju datubāzē. Kad viņi pierakstīsies, izmantojot savus akreditācijas datus, Supabase pārbaudīs informāciju, salīdzinot ar akreditācijas datiem, kas tika izmantoti reģistrācijai.

Supabase atvieglo autentifikāciju pakalpojumā React

Supabase piedāvā plašu funkciju komplektu, ne tikai autentificējot, piemēram, datu bāzes mitināšanu, API piekļuvi un reāllaika datu straumēšanu. Tā piedāvā arī tādas funkcijas kā vaicājumu veidotājs un datu vizualizācija, lai palīdzētu izstrādātājiem efektīvāk veidot un pārvaldīt savas lietojumprogrammas.

Ar savu intuitīvo informācijas paneli un robusto API Supabase ir spēcīgs rīks mērogojamu un drošu lietojumprogrammu izveidei.