Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Mukautetun todennusjärjestelmän rakentaminen voi olla pelottava tehtävä. Se vaatii syvällistä ymmärrystä todennusprotokollia sekä käyttäjien todennus- ja valtuutusprosesseista. Integroimalla Supabasen kaltaisen työkalun voit kuitenkin keskittyä enemmän sovelluksesi ydinlogiikan rakentamiseen.

Supabase on avoimen lähdekoodin Firebase-vaihtoehto, joka tarjoaa pilvipohjaisen kehitysalustan. Se tarjoaa valikoiman taustapalveluita, kuten täysimittaisen Postgres-tietokannan, todennuspalvelun ja palvelimettomia toimintoja.

Se on suunniteltu helpommin käytettäviksi, joten voit määrittää projekteja nopeasti. Seuraa ohjeita saadaksesi lisätietoja todennuspalvelun integroimisesta React.js-sovelluksiin.

Luo uusi projekti Supabase Developer Consolessa

Luo uusi projekti Supabase Developer Consolessa seuraavasti:

  1. Ilmoittaudu mukaan a Supabase kehittäjätili. Siirry kojelautaan ja luo uusi projekti.
    2. instagram viewer
  2. Täytä projektin nimi ja salasana (tämä on valinnainen tässä opetusohjelmassa, mutta suositellaan tietokantaa määritettäessä), valitse alue ja napsauta lopuksi Luo uusi projekti.
  3. Kopioi projekti API-asetukset-kohdasta URL-osoite ja julkinen anon avain.

Määritä todennustarjoaja

Auth Provider tarjoaa käyttäjille turvallisen tavan todentaa käyttämällä erilaisia ​​sosiaalisia kirjautumisia. Supabase tarjoaa oletuksena sähköpostipalvelun. Lisäksi voit lisätä muita palveluntarjoajia, kuten Googlen, GitHubin tai Discordin mieltymystesi mukaan.

Tämä opetusohjelma näyttää, kuinka Google-palveluntarjoaja määritetään. Voit tehdä tämän seuraavasti:

  1. Valitse vasemmasta ruudusta Todennus -välilehti.
  2. Valitse Todennusasetukset-sivulta Palveluntarjoajat -vaihtoehto ja lopuksi valitse Google-palveluntarjoaja palveluntarjoajien luettelosta. Huomaa, että sähköpostipalveluntarjoaja on jo määritetty oletusarvoisesti. Sinun ei tarvitse tehdä mitään asetuksia.
  3. Ota käyttöön Palveluntarjoaja vaihtopainike.
  4. Google-palveluntarjoaja vaatii kaksi syötettä: ClientID ja ClientSecret. Saat nämä kaksi arvoa, kun olet luonut sovelluksen Google Developer Consolessa. Kopioi toistaiseksi Uudelleenohjauksen URL-osoite. Käytät sitä sovelluksen määrittämiseen Google Developer Consolessa ClientID: n ja ClientSecretin hankkimiseksi.

Projektin määrittäminen Google Developer Consolessa (GDC)

Jotta voit todentaa Googlen avulla, sinun on rekisteröitävä sovelluksesi Google Developer Consolessa (GDC) ja hankittava ClientID ja ClientSecret. Noudata näitä ohjeita luodaksesi projektin GDC: ssä:

  1. Mene Google Developer Console ja kirjaudu sisään Google-tililläsi päästäksesi konsoliin.
  2. Kun olet kirjautunut sisään, siirry kohtaan API: t ja palvelut -välilehti, valitse Luo tunnistetiedot vaihtoehto ja valitse sitten OAuth-asiakastunnus.
  3. Määritä hakemuksen tyyppi tarjotuista vaihtoehdoista ja täytä sitten hakemuksesi nimi.
  4. Määritä myöhemmin sovelluksesi kotireitin URL-osoite (http//:localhost: 3000) ja lopuksi määritä takaisinsoitto-uudelleenohjauksen URL-osoite. Liitä uudelleenohjaus-URL-osoite, jonka kopioit Supabase Google Provider -asetussivulta. Klikkaa Tallentaa suorittaaksesi prosessin loppuun.
  5. Kopioi Asiakastunnus ja ClientSecret ja palaa Supabase Project -hallintapaneeliin ja liitä ne ClientID- ja ClientSecret-syöttökenttiin Google Provider -asetussivulla. Klikkaus Tallentaa Ota Palveluntarjoaja käyttöön.

Määritä Supabase-todennuspalvelu React.js-sovelluksessa

Luo React.js-sovellusja avaa sitten projektikansio suosikkikoodieditorissasi. Luo seuraavaksi projektikansiosi juurihakemistoon ENV-tiedosto, joka sisältää ympäristömuuttujat: projektin URL-osoitteen ja julkisen anon-avaimen. Siirry Supabase-asetussivullesi, avaa API-osio ja kopioi projektin URL-osoite ja julkinen anon-avain.

REACT_APP_SUPABASE_URL= projektin URL-osoite
REACT_APP_SUPABASE_API_KEY = julkinen anon avain

1. Asenna tarvittavat paketit

Suorita tämä komento päätteessäsi asentaaksesi tarvittavat riippuvuudet:

npm asennus @supabase/auth-ui-react @supabase/supabase-js react react-router-dom

2. Luo kirjautumissivu ja menestyssivun osat

Luo uusi kansio React.js-sovelluksesi /src-hakemistoon ja nimeä se sivuiksi. Luo tähän kansioon kaksi tiedostoa: Login.js ja Success.js.

3. Kirjautumissivun komponentti

Tämä komponentti tekee kirjautumis- ja sisäänkirjautumisominaisuuden käyttämällä Supabasen tarjoamaa React.js-todennuskäyttöliittymää. Toit todennuskäyttöliittymän riippuvuutena (@supabase/auth-UI-react), mikä helpottaa todennustoiminnon käyttöönottoa.

Lisää login.js-tiedostoon alla oleva koodi:

tuonti Reagoi alkaen'reagoi';
tuonti {createClient} alkaen'@supabase/supabase-js';
tuonti {Auth, ThemeSupa} alkaen'@supabase/auth-ui-react';
tuonti {useNavigate} alkaen"react-router-dom";
konst supabase = createClient(
käsitellä asiaa.env.REACT_APP_SUPABASE_URL,
käsitellä asiaa.env.REACT_APP_SUPABASE_API_KEY
); 
toimintoKirjaudu sisään() {
konst navigoi = useNavigate(); 
 supabase.auth.onAuthStateChange(asynk (tapahtuma) =>{
jos (tapahtuma !== "KIRJAUTUI ULOS") {
 navigoida('/menestys');
 }muu{
 navigoida('/');
 }
 })
palata (
<divluokan nimi="Sovellus">
<otsikkoluokan nimi="Sovelluksen otsikko">
 supabaseClient={supabase}
 ulkonäkö={{teema: ThemeSupa}}
 teema ="tumma"
 tarjoajat={['Google']}
 /> 
otsikko>
div>
 );
}
viedäoletuksena Kirjaudu sisään;

Puretaan se:

  • Alusta Supabase-asiakasohjelma ympäristömuuttujilla – projektisi URL-osoitteella ja julkisella anon-avaimella ENV-tiedostossa.
  • Aseta tapahtuman kuuntelija seuraamaan muutoksia todennustilassa käyttämällä supabase.auth.onAuthStateChange()-menetelmää eli jos todennustila ei ole "SIGNED_OUT", jolloin käyttäjä navigoidaan "/success" -sivulle, muussa tapauksessa käyttäjä navigoidaan "/"-sivulle. (etusivu/kirjautuminen) -sivulle.
  • Käytät navigointimenetelmää useNavigate-koukusta hallitaksesi tätä prosessia.
  • Palauta lopuksi div, joka sisältää React Auth UI -komponentin Supabase-kirjastosta ja ulkoasu themeSupa (Supabasen toimittama), tumma teema ja Google-palveluntarjoaja asetettuna ominaisuuksina.

4. Menestyssivun komponentti

Tämä komponentti luo onnistumissivun, jossa on käyttäjätiedot, kun käyttäjä on todennettu onnistuneesti ja uloskirjautumispainikkeella.

Lisää alla oleva koodi Success.js-tiedostoon:

tuonti Reagoi alkaen'reagoi';
tuonti {createClient} alkaen'@supabase/supabase-js';
tuonti {useNavigate} alkaen"react-router-dom";
tuonti {useEffect, useState} alkaen'reagoi';
konst supabase = createClient(
käsitellä asiaa.env.REACT_APP_SUPABASE_URL,
käsitellä asiaa.env.REACT_APP_SUPABASE_API_KEY
); 
toimintoMenestys() {
konst [käyttäjä, setUser] = useState([]); 
konst navigoi = useNavigate(); 
 useEffect (() => {
asynktoimintogetUserData(){
odottaa supabase.auth.getUser().then((arvo) => {
jos(arvo.data?.käyttäjä) {
setUser(arvo.data.käyttäjä)} 
 }) }
 getUserData();
 },[]);
konst avatar = käyttäjä?.user_metadata?.avatar_url; 
konst userName = user?.user_metadata?.full_Name; 
asynktoimintosignOutUser(){
odottaasupabase.auth.Kirjaudu ulos();
 navigoida('/');
 };
palata (
<divluokan nimi="Sovellus">
<otsikkoluokan nimi="Sovelluksen otsikko">
<h1>Kirjautuminen onnistuih1>
<h2>{userName}h2>
<imgsrc={hahmo} />
<-painikettaklikkaamalla={()=> signOutUser()}> Kirjaudu ulos-painiketta>
otsikko>
div>
 );
}
viedäoletuksena Menestys;

Puretaan se:

  • Alusta Supabase-asiakasohjelma ympäristömuuttujilla – projektisi URL-osoitteella ja julkisella anon-avaimella ENV-tiedostossa.
  • Käyttää React.js-koukut, useState ja useEffect saadaksesi tietoja API-vastauksesta.
  • UseEffect-koukku toteuttaa asynkronisen funktion, joka kutsuu supabase.auth.getUser-metodia. Tämä menetelmä hakee nykyiseen käyttäjän istuntoon liittyvät käyttäjätiedot.
  • Asynkroninen toiminto tarkistaa sitten, onko käyttäjätietoja olemassa, ja asettaa sen tilamuuttujaan, jos on.
  • SignOutUser-toiminto käyttää supabase.auth.signOut-menetelmää käyttäjän kirjaamiseen ulos ja ohjatakseen hänet takaisin sisäänkirjautumissivulle, kun hän napsauttaa uloskirjautumispainiketta.
  • Palauta lopuksi div, jossa on joitain käyttäjätietoja.

5. Määritä sivureitit

Lopuksi määritä reitit sekä kirjautumis- että onnistumissivuille.

Lisää alla oleva koodi app.js-tiedostoon:

tuonti Reagoi alkaen'reagoi';
tuonti { Selainreititin kuten Reititin, reitit, reitti } alkaen"react-router-dom";
tuonti Kirjaudu sisään alkaen'./pages/Login';
tuonti Menestys alkaen'./pages/Success';
toimintoSovellus() {
palata (
<Reititin>
//Määritä reitit
"/" element={} />
"/menestys" element={} />
Reitit>
Reititin>
 );
}
viedäoletuksena Sovellus;

Puretaan se:

  • Määritä kaksi reittiä: reitti kirjautumissivulle ja reitti onnistumissivulle käyttämällä React-router-kirjaston Router-komponentteja.
  • Aseta reittipolut arvoihin '/' ja '/success' ja määritä Login- ja Success-komponentit vastaaville reiteille.
  • Suorita lopuksi tämä komento päätteelläsi kehittääksesi kehityspalvelimen: 
 npm alkaa
  • Navigoida johonkin http//:localhost: 3000 selaimessasi nähdäksesi tuloksen. Kirjautumiskomponentti näyttää Supabasen React-auth-UI: n sekä sähköpostin että Googlen palveluntarjoajien kanssa.

Voit joko todentaa Googlen avulla tai kirjautua sisään sähköpostiosoitteellasi ja salasanallasi ja käyttää näitä tunnistetietoja kirjautuaksesi sisään. Supabasen sosiaalisten kirjautumispalvelujen tai sähköpostipalveluntarjoajien käytön etuna on, että sinun ei tarvitse huolehtia kirjautumislogiikasta.

Kun käyttäjä kirjautuu sosiaaliseen palveluntarjoajaan tai sähköpostiosoitteella ja salasanalla, tiedot tallennetaan Supabasen Auth-käyttäjätietokantaan projektille. Kun he kirjautuvat sisään valtuustiedoillaan, Supabase tarkistaa tiedot kirjautumiseen käytettyjen tunnistetietojen perusteella.

Supabase tekee tunnistamisesta helppoa Reactissa

Supabase tarjoaa kattavan valikoiman ominaisuuksia todennuksen lisäksi, kuten tietokannan isännöinnin, API-käytön ja reaaliaikaisen datan suoratoiston. Se tarjoaa myös ominaisuuksia, kuten kyselyn rakennustyökalun ja tietojen visualisoinnin, joiden avulla kehittäjät voivat rakentaa ja hallita sovelluksiaan tehokkaammin.

Intuitiivisen kojelaudan ja vankan API: n ansiosta Supabase on tehokas työkalu skaalautuvien ja turvallisten sovellusten rakentamiseen.