Tämän kirjaston avulla voit integroida Google-todennuksen saumattomasti Next.js-sovellukseesi, jolloin sitä ei tarvitse kehittää tyhjästä.

Suojatun todennusjärjestelmän integrointi on tärkeä kehitysvaihe, joka ei ainoastaan ​​tarjoa turvallisen ympäristön käyttäjille, vaan myös herättää luottamusta tuotteeseesi. Tämä järjestelmä varmistaa, että heidän tietonsa on suojattu ja että vain valtuutetut henkilöt voivat käyttää sovellusta.

Turvallisen todennuksen rakentaminen alusta alkaen voi olla aikaa vievä prosessi, joka vaatii perusteellisen käsittelyn todennusprotokollien ja -prosessien ymmärtäminen, erityisesti käsiteltäessä erilaisia ​​todennusta tarjoajat.

NextAuthin avulla voit siirtää keskittymisesi ydinominaisuuksien rakentamiseen. Lue lisää, kuinka voit integroida Googlen sosiaalisen kirjautumisen sovellukseesi NextAuthin avulla.

Miten NextAuth toimii

NextAuth.js on avoimen lähdekoodin todennuskirjasto, joka yksinkertaistaa lisäämistä todennus ja valtuutus toimivuus Next.js-sovelluksiin sekä todennustyönkulkujen mukauttaminen. Se tarjoaa erilaisia ​​ominaisuuksia, kuten sähköpostin, salasanattoman todennuksen ja tuen eri todennustarjoajille, kuten Googlelle, GitHubille ja muille.

instagram viewer

Korkealla tasolla NextAuth toimii väliohjelmistona, joka helpottaa todennusprosessia sovelluksesi ja palveluntarjoajan välillä. Konepellin alla, kun käyttäjä yrittää kirjautua sisään, hänet ohjataan Googlen kirjautumissivulle. Onnistuneen todennuksen jälkeen Google palauttaa hyötykuorman, joka sisältää käyttäjän tiedot, kuten hänen nimensä ja sähköpostiosoitteensa. Näitä tietoja käytetään valtuuttamaan pääsy sovellukseen ja sen resursseihin.

Hyötykuormatietojen avulla NextAuth luo istunnon jokaiselle todennetulle käyttäjälle ja tallentaa istuntotunnisteen suojattuun vain HTTP-evästeeseen. Istuntotunnusta käytetään käyttäjän henkilöllisyyden tarkistamiseen ja hänen todennustilansa säilyttämiseen. Tämä prosessi koskee myös muita palveluntarjoajia, joiden toteutuksessa on pieniä eroja.

Rekisteröi Next.js-sovelluksesi Google Developer Consolessa

NextAuth tukee Googlen todennuspalvelua. Kuitenkin, jotta sovelluksesi olisi vuorovaikutuksessa Googlen sovellusliittymien kanssa ja salli käyttäjien todennuksen heidän Google-kirjautumistietonsa, sinun on rekisteröitävä sovelluksesi Googlen kehittäjäkonsoliin ja saada a Asiakastunnus ja Asiakkaan salaisuus.

Voit tehdä sen siirtymällä kohtaan Google Developer Console. Seuraavaksi kirjaudu sisään Google-tililläsi päästäksesi konsoliin. Kun olet kirjautunut sisään, luo uusi projekti.

Valitse projektin yleiskatsaussivulta API: t ja palvelut -välilehti vasemman valikkoruudun palveluluettelosta ja lopuksi Valtuustiedot vaihtoehto.

Klikkaa Luo tunnistetiedot -painiketta luodaksesi asiakastunnuksesi ja asiakassalaisuuden. Määritä seuraavaksi sovelluksen tyyppi annetuista vaihtoehdoista ja anna sitten sovelluksellesi nimi.

Määritä myöhemmin sovelluksesi kotireitin URL-osoite ja lopuksi sovelluksesi valtuutettu uudelleenohjaus-URI. Tässä tapauksessa sen pitäisi olla http://localhost: 3000/api/auth/callback/google NextAuthin Google-palveluntarjoajan asetusten mukaisesti.

Onnistuneen rekisteröinnin jälkeen Google antaa sinulle asiakastunnuksen ja asiakassalaisuuden käytettäväksi sovelluksessasi.

Asenna NextJS-sovellus

Aloita luomalla Next.js-projekti paikallisesti:

npx create-next-app next-auth-app

Kun asennus on valmis, siirry äskettäin luotuun projektihakemistoon ja suorita tämä komento käynnistääksesi kehityspalvelimen.

npm run dev

Avaa selain ja siirry kohtaan http://localhost: 3000. Tämän pitäisi olla odotettu tulos.

Löydät tämän projektin koodin siitä GitHub-arkisto.

.env-tiedoston määrittäminen

Luo uusi tiedosto projektisi juurikansioon ja anna sille nimi .env säilyttääksesi asiakastunnuksesi, salasuutesi ja perus-URL-osoitteesi.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'Asiakastunnus'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'salaisuus'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

NextAUTH-URL-osoitetta käytetään määrittämään sovelluksesi perus-URL-osoite, jota käytetään käyttäjien uudelleenohjaamiseen todennuksen jälkeen.

Integroi NextAuth Next.js-sovellukseesi

Asenna ensin NextAuthin kirjasto projektiisi.

npm install next-auth

Seuraavaksi vuonna /pages hakemistoon, luo uusi kansio ja anna sille nimi api. Muuta hakemistoksi api kansio ja luo toinen kansio nimeltä tod. Lisää todennuskansioon uusi tiedosto ja anna sille nimi [...nextauth].js ja lisää seuraavat koodirivit.

tuonti NextAuth alkaen"seuraava auth/seuraava";
tuonti GoogleProvider alkaen"next-auth/providers/google";
viedäoletuksena NextAuth({
 palveluntarjoajat:[
 GoogleProvider({
 asiakastunnus: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Tämä koodi määrittää Googlen todennuspalveluntarjoajaksi. NextAuth-funktio määrittää Googlen tarjoajan määritysobjektin, joka ottaa käyttöön kaksi ominaisuutta: asiakastunnuksen ja asiakassalaisuuden, joka alustaa palveluntarjoajan.

Avaa seuraavaksi pages/_app.js tiedosto ja tee seuraavat muutokset koodiin.

tuonti'../styles/globals.css'
tuonti { SessionProvider } alkaen"seuraava auth/react"
toimintoOmaApp({ Komponentti, pageProps: { session, ...pageProps } }) {
palata (


 </SessionProvider>
 )
}
viedäoletuksena OmaApp

NextAuth's SessionProvider komponentti tarjoaa todennustilan hallintatoiminnon Next.js-sovellukselle. Se kestää a istunto prop, joka sisältää Googlen API: lta palautetut todennusistunnon tiedot, jotka sisältävät käyttäjätiedot, kuten heidän tunnuksensa, sähköpostiosoitteensa ja käyttöoikeustunnuksensa.

Käärimällä OmaApp komponentti SessionProvider-komponentin kanssa, käyttäjätiedot sisältävä todennusistuntoobjekti on saatavilla koko sovelluksen ajan, jolloin sovellus voi jatkaa ja renderöidä sivuja niiden todennustilan perusteella.

Määritä index.js-tiedosto

Avaa pages/index.js tiedosto, poista yleiskoodi ja lisää alla oleva koodi luodaksesi kirjautumispainikkeen, joka reitittää käyttäjät kirjautumissivulle.

tuonti Pää alkaen'seuraava/pää'
tuonti tyylejä alkaen'../styles/Home.module.css'
tuonti { käytä reititintä } alkaen'seuraava/reititin';
viedäoletuksenatoimintoKoti() {
konst reititin = userRouter();

palata (





Luo seuraava sovellus<<span>/title></span><br> <meta name="<span">"description" content=<span>"Luo seuraava sovellus"</span> /> <br> <linkki rel="<span">"kuvake" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Tervetuloa <a href="<span">" https://nextjs.org">Next.js!<<span>/a></span><br> <<span>/h1></span></a>
</h1></main></p>
<p> </p>
<p classname="{styles.description}"><br> Aloita kirjautumalla <span>sisään</span>{<span>' ' </span>}<br> <koodi classname="{styles.code}"><span></span> Google-tilisi kanssa<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Kirjaudu<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></koodi></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Tämä koodi käyttää Next.js: n <strong>useRouter</strong>-koukkua reitityksen käsittelyyn sovelluksen sisällä määrittämällä reititinobjektin. Kun kirjautumispainiketta napsautetaan, käsittelijätoiminto kutsuu <strong>router.push</strong>-menetelmää uudelleenohjaamaan käyttäjä kirjautumissivulle.</p> <h3 id="create-a-login-authentication-page">Luo kirjautumistodennus sivu</h3> <p>Luo <strong>sivut</strong>-hakemistoon uusi tiedosto <strong>Login.js</strong> ja lisää sitten seuraavat koodirivit.</p> <pre> <code><span>tuonti</span> { useSession, signIn, sign Out } <span>alkaen</span> <span>"next-auth/react"</span><br><span>tuo</span> { useRouter } <span>alkaen</span> <span>'seuraava /router'</span>;<br><span>tuo</span> tyylejä <span>osoitteesta</span> <span>'../styles/Login.module.css'</span><p><span>vienti</span> <span>oletus</span> <span><span>toiminto</span> < span>Kirjautuminen</span>() {<br> <span>const</span> { <span>data</span>: istunto } = useSession()<br> <span>const</span> reititin = userRouter();<br> <span>if</span> (istunto) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Luo seuraava sovellus<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Allekirjoitettu < span>in <span>as</span> {session.user.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> router.push(<span>'/Profile'< /span>)}><br> Käyttäjäprofiili<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Kirjaudu ulos<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> <br> <span>palautus</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Luo seuraava sovellus<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Et ole kirjautunut <span>sisään</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Kirjaudu <span>in</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> ja <strong>signOut</strong> ovat <strong>next-ath</strong>-koukut. <strong>useSession</strong>-koukkua käytetään pääsyyn nykyiseen käyttäjän istuntoobjektiin, kun käyttäjä kirjautuu sisään ja on onnistuneesti todennut hänet Google.</p> <p>Tämän avulla Next.js voi säilyttää todennustilan ja näyttää käyttäjätiedot sovelluksen asiakaspuolella, tässä tapauksessa Sähköposti.</p> <p>Lisäksi istuntoobjektia käyttämällä voit helposti luoda mukautettuja käyttäjäprofiileja sovelluksellesi ja tallentaa tiedot tietokantaan, kuten kuten PostgreSQL. Voit <span>yhdistää PostgreSQL-tietokannan Next.js-sovellukseesi Prisman avulla</span>.</p> <p>Kirjautumiskoukun avulla käyttäjä voi kirjautua ulos sovelluksesta. Tämä koukku poistaa sisäänkirjautumisen aikana luodun istuntoobjektin ja käyttäjä kirjataan ulos.</p> <p>Mene eteenpäin ja nosta kehityspalvelin päivitä muutokset ja siirry selaimessa käynnissä olevaan Next.js-sovellukseesi testaamaan todennustoimintoa.</p> <pre> <code>npm run dev</code> </pre> <p>Lisäksi voit <span>käyttää Tailwind CSS: ää Next.js-sovelluksesi kanssa</span> todennusmallien tyyliin.</p> <h2 id="authentication-using-nextauth"> Todennus NextAuthin avulla  h2> </h2>
<p>NextAuth tukee useita todennuspalveluita, jotka voidaan helposti integroida Next.js-sovelluksiin asiakaspuolen käsittelemiseksi todennus.</p> <p>Lisäksi voit integroida tietokannan käyttäjien tietojen tallentamiseen ja käyttöoikeustunnuksen toteuttaaksesi palvelinpuolen todennus myöhempiä todennuspyyntöjä varten, koska NextAuth tukee erilaisia ​​tietokantaintegraatioita.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre></linkki>