Ez a könyvtár lehetővé teszi a Google hitelesítés zökkenőmentes integrálását a Next.js alkalmazásba, így nincs szükség a nulláról való fejlesztésre.

A biztonságos hitelesítési rendszer integrálása kulcsfontosságú fejlesztési lépés, amely nemcsak biztonságos környezetet biztosít a felhasználók számára, hanem a termékbe vetett bizalmat is. Ez a rendszer biztosítja adataik védelmét, és csak arra jogosult személyek férhetnek hozzá az alkalmazáshoz.

A biztonságos hitelesítés felépítése az alapoktól kezdve időigényes folyamat lehet, amely alapos munkát igényel a hitelesítési protokollok és folyamatok megértése, különösen a különböző hitelesítések kezelésekor szolgáltatók.

A NextAuth használatával áthelyezheti a hangsúlyt az alapvető funkciók kialakítására. Olvasson tovább, ha megtudhatja, hogyan integrálhatja a Google közösségi bejelentkezést az alkalmazásába a NextAuth segítségével.

Hogyan működik a NextAuth

NextAuth.js egy nyílt forráskódú hitelesítési könyvtár, amely leegyszerűsíti a hozzáadás folyamatát

instagram viewer
hitelesítés és engedélyezés funkcionalitást a Next.js alkalmazásokhoz, valamint a hitelesítési munkafolyamatok testreszabását. Számos funkciót biztosít, például e-mailt, jelszó nélküli hitelesítést, és támogatja a különböző hitelesítési szolgáltatókat, például a Google-t, a GitHub-ot és még sok mást.

Magas szinten a NextAuth köztes szoftverként működik, megkönnyítve a hitelesítési folyamatot az alkalmazás és a szolgáltató között. A motorháztető alatt, amikor a felhasználó megpróbál bejelentkezni, a rendszer átirányítja a Google bejelentkezési oldalára. Sikeres hitelesítés esetén a Google visszaküld egy hasznos adatot, amely tartalmazza a felhasználó adatait, például nevét és e-mail címét. Ezeket az adatokat az alkalmazáshoz és erőforrásaihoz való hozzáférés engedélyezésére használják.

A hasznos adatok felhasználásával a NextAuth munkamenetet hoz létre minden hitelesített felhasználó számára, és a munkamenet tokent egy biztonságos, csak HTTP-alapú cookie-ban tárolja. A munkamenet-token a felhasználó személyazonosságának ellenőrzésére és hitelesítési állapotának megőrzésére szolgál. Ez a folyamat más szolgáltatókra is vonatkozik, kis eltérésekkel a megvalósításban.

Regisztrálja Next.js alkalmazását a Google Developer Console-on

A NextAuth támogatja a Google hitelesítési szolgáltatást. Ahhoz azonban, hogy alkalmazása kölcsönhatásba léphessen a Google API-kkal, és lehetővé tegye a felhasználók számára a hitelesítést Google hitelesítő adatait, akkor regisztrálnia kell alkalmazását a Google fejlesztői konzolján, és megszerezni a Ügyfélazonosító és Ügyfél titka.

Ehhez navigáljon ide Google Developer Console. Ezután jelentkezzen be Google-fiókjával a konzol eléréséhez. Miután bejelentkezett, hozzon létre egy új projektet.

A projekt áttekintő oldalán válassza ki a API-k és szolgáltatások fület a szolgáltatások listájából a bal oldali menüpanelen, és végül a Hitelesítő adatok választási lehetőség.

Kattintson a Hitelesítési adatok létrehozása gombot az ügyfél-azonosító és az ügyféltitkos létrehozásához. Ezután adja meg az alkalmazás típusát a megadott lehetőségek közül, majd adjon nevet az alkalmazásnak.

Ezt követően adja meg az alkalmazás kezdőútvonalának URL-jét, és végül adja meg az alkalmazás engedélyezett átirányítási URI-jét. Ebben az esetben annak kell lennie http://localhost: 3000/api/auth/callback/google a NextAuth Google szolgáltató beállításai szerint.

Sikeres regisztráció esetén a Google ügyfél-azonosítót és ügyféltitkot biztosít az alkalmazásban való használatra.

Állítsa be a NextJS alkalmazást

A kezdéshez hozzon létre egy Next.js projektet helyileg:

npx create-next-app next-auth-app

A telepítés befejezése után keresse meg az újonnan létrehozott projektkönyvtárat, és futtassa ezt a parancsot a fejlesztői kiszolgáló felpörgetéséhez.

npm futás dev

Nyissa meg a böngészőt, és navigáljon ide http://localhost: 3000. Ez legyen a várt eredmény.

A projekt kódja megtalálható benne GitHub adattár.

Az .env fájl beállítása

A projekt gyökérmappájában hozzon létre egy új fájlt, és nevezze el .env az ügyfél-azonosító, a titkos és az alap URL tárolásához.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'Ügyfélazonosító'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'titok'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

A NextAUTH URL az alkalmazás alap URL-címének megadására szolgál, amely a felhasználók átirányítására szolgál a hitelesítés befejezése után.

Integrálja a NextAuth programot Next.js alkalmazásába

Először telepítse a NextAuth könyvtárát a projektbe.

npm install next-ath

Következő, a /pages könyvtárba, hozzon létre egy új mappát, és nevezze el api. Módosítsa a könyvtárat a api mappát, és hozzon létre egy másik nevű mappát auth. Az aut mappában adjon hozzá egy új fájlt, és nevezze el [...nextauth].js és adja hozzá a következő kódsorokat.

import NextAuth tól től"next-ath/next";
import GoogleProvider tól től"next-auth/providers/google";
exportalapértelmezett NextAuth({
 szolgáltatók:[
 GoogleProvider({
 ügyfélazonosító: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Ez a kód a Google-t konfigurálja hitelesítésszolgáltatóként. A NextAuth függvény határozza meg a Google szolgáltató konfigurációs objektumát, amely két tulajdonságot vesz fel: egy ügyfél-azonosítót és egy ügyféltitkot, amely inicializálja a szolgáltatót.

Ezután nyissa meg a pages/_app.js fájlt, és hajtsa végre a következő módosításokat a kódon.

import"../styles/globals.css"
import { SessionProvider } tól től"next-auth/react"
funkcióMyApp({ Component, pageProps: { session, ...pageProps } }) {
Visszatérés (


 </SessionProvider>
 )
}
exportalapértelmezett MyApp

NextAuth's SessionProvider összetevő hitelesítési állapotkezelési funkciókat biztosít a Next.js alkalmazás számára. Kell a ülés prop, amely tartalmazza a Google API-tól visszaküldött hitelesítési munkamenet-adatokat, amelyek olyan felhasználói adatokat tartalmaznak, mint például az azonosítójuk, az e-mail címük és a hozzáférési tokenjük.

Becsomagolásával a MyApp komponens a SessionProvider összetevővel, elérhetővé válik a felhasználói adatokat tartalmazó hitelesítési munkamenet objektum az egész alkalmazásban, lehetővé téve az alkalmazás számára, hogy fennmaradjon és hitelesítési állapotuk alapján jelenítse meg az oldalakat.

Állítsa be az index.js fájlt

Nyissa meg a pages/index.js fájlt, törölje az alapkódot, és adja hozzá az alábbi kódot egy bejelentkezési gomb létrehozásához, amely a felhasználókat egy bejelentkezési oldalra irányítja.

import Fej tól től'következő/fej'
import stílusok tól től"../styles/Home.module.css"
import { useRouter } tól től'next/router';
exportalapértelmezettfunkcióitthon() {
const router = userRouter();

Visszatérés (





Következő alkalmazás létrehozása<<span>/title></span><br> <meta name="<span">"description" content=<span>"A következő alkalmazás létrehozása generálta"</span> /> <br> <link rel="<span">"icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Üdvözli a <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> Kezdje azzal, hogy <span>bejelentkezik</span>{<span>' " </span>}<br> <k classname="{styles.code}"><span>a</span> a Google Fiókjával<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Bejelentkezés<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></k></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Ez a kód a Next.js <strong>useRouter</strong> hook segítségével kezeli az alkalmazáson belüli útválasztást egy útválasztó objektum meghatározásával. Amikor a bejelentkezés gombra kattint, a kezelő függvény meghívja a <strong>router.push</strong> metódust az átirányításhoz a felhasználót a bejelentkezési oldalra.</p> <h3 id="create-a-login-authentication-page">Bejelentkezési hitelesítés létrehozása oldal</h3> <p>Az <strong>pages</strong> könyvtárban hozzon létre egy új fájlt <strong>Login.js</strong>, majd adja hozzá a következő kódsorokat.</p> <pre> <code><span>import</span> { useSession, signIn, signOut } <span>tól</span> <span>"next-auth/react"</span><br><span>importálás</span> { useRouter } <span>from</span> <span>'next /router'</span>;<br><span>stílusok importálása</span> <span>honnan</span> <span>'../styles/Login.module.css'</span><p><span>exportálás</span> <span>alapértelmezett</span> <span><span>függvény</span> < span>Bejelentkezés</span>() {<br> <span>const</span> { <span>data</span>: session } = useSession()<br> <span>const</span> router = userRouter();<br> <span>if</span> (session) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Következő alkalmazás létrehozása<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Aláírva < span>in <span>mint</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> Felhasználói profil<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Kijelentkezés<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> <br> <span>vissza</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Következő alkalmazás létrehozása<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Nincs <span>bejelentkezve</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Sign <span>in</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  A <p><strong>useSession</strong>, a <strong>signIn</strong> és a <strong>signOut</strong> a <strong>next-auth</strong> által biztosított akasztók. A <strong>useSession</strong> hook segítségével hozzáférhet az aktuális felhasználói munkamenet objektumhoz, miután a felhasználó bejelentkezik, és sikeresen hitelesítette Google.</p> <p>Ez lehetővé teszi, hogy a Next.js megőrizze a hitelesítési állapotot, és megjelenítse a felhasználói adatokat az alkalmazás ügyféloldalán, ebben az esetben a e-mailt.</p> <p>A session objektum használatával ráadásul egyszerűen létrehozhat egyéni felhasználói profilokat az alkalmazáshoz, és tárolhatja az adatokat egy adatbázisban, pl. mint PostgreSQL. <span>A Prisma segítségével PostgreSQL-adatbázist csatlakoztathat Next.js alkalmazásához</span>.</p> <p>A kijelentkezési hook lehetővé teszi a felhasználó számára, hogy kijelentkezzen az alkalmazásból. Ez a hook törli a bejelentkezési folyamat során létrehozott munkamenet-objektumot, és a felhasználó kijelentkezett.</p> <p>Továbbra is állítsa be a fejlesztői kiszolgálót a frissítse a módosításokat, és lépjen a böngészőben futó Next.js alkalmazásba, hogy tesztelje a hitelesítési funkciókat.</p> <pre> <code>npm run dev</code> </pre> <p>Továbbá <span>használhatja a Tailwind CSS-t a Next.js alkalmazással</span> a hitelesítési modellek stílusához.</p> <h2 id="authentication-using-nextauth"> Hitelesítés a NextAuth használatával  h2> </h2>
<p>A NextAuth többféle hitelesítési szolgáltatást támogat, amelyek könnyen integrálhatók Next.js-alkalmazásaiba az ügyféloldali kezelés érdekében hitelesítés.</p> <p>Emellett integrálhat egy adatbázist a felhasználók adatainak tárolására és a hozzáférési tokent a szerveroldali megvalósításhoz hitelesítés a későbbi hitelesítési kérésekhez, mivel a NextAuth támogatja a különböző adatbázis-integrációkat.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre>