Jak integrovat Google Authentication do Next.js Apps pomocí NextAuth

Integrace bezpečného autentizačního systému je zásadním vývojovým krokem, který nejenže poskytuje bezpečné prostředí pro uživatele, ale také vzbuzuje důvěru ve váš produkt. Tento systém zajišťuje ochranu jejich dat a přístup k aplikaci pouze oprávněným osobám.

Vytvoření bezpečné autentizace od základů může být časově náročný proces, který vyžaduje důkladnou kontrolu porozumění autentizačním protokolům a procesům, zejména při manipulaci s různými autentizacemi poskytovatelé.

Pomocí NextAuth se můžete zaměřit na vytváření základních funkcí. Čtěte dále a zjistěte, jak integrovat sociální přihlášení Google do vaší aplikace pomocí NextAuth.

Jak funguje NextAuth

NextAuth.js je open-source autentizační knihovna, která zjednodušuje proces přidávání autentizace a autorizace funkčnost aplikací Next.js a také přizpůsobení pracovních postupů ověřování. Poskytuje řadu funkcí, jako je e-mail, ověřování bez hesla a podpora pro různé poskytovatele ověřování, jako je Google, GitHub a další.

Na vysoké úrovni funguje NextAuth jako middleware, který usnadňuje proces ověřování mezi vaší aplikací a poskytovatelem. Když se uživatel pokusí přihlásit, je pod kapotou přesměrován na přihlašovací stránku Google. Po úspěšném ověření Google vrátí datovou část, která obsahuje data uživatele, jako je jeho jméno a e-mailová adresa. Tato data se používají k autorizaci přístupu k aplikaci a jejím zdrojům.

Pomocí dat o užitečné zátěži vytvoří NextAuth relaci pro každého ověřeného uživatele a uloží token relace do zabezpečeného cookie pouze HTTP. Token relace se používá k ověření identity uživatele a zachování stavu jeho ověření. Tento proces platí i pro ostatní poskytovatele s drobnými odchylkami v implementaci.

Zaregistrujte svou aplikaci Next.js ve Vývojářské konzoli Google

NextAuth poskytuje podporu pro službu ověřování Google. Aby však vaše aplikace interagovala s rozhraními Google API a umožňovala uživatelům ověření pomocí jejich přihlašovací údaje Google, budete muset svou aplikaci zaregistrovat ve vývojářské konzoli Google a získat a ID klienta a Tajemství klienta.

Chcete-li to provést, přejděte na Google Developer Console. Poté se přihlaste pomocí svého účtu Google pro přístup ke konzole. Po přihlášení vytvořte nový projekt.

Na stránce přehledu projektu vyberte API a služby ze seznamu služeb v levém podokně nabídky a nakonec Pověření volba.

Klikněte na Vytvořte přihlašovací údaje tlačítko pro vygenerování vašeho ID klienta a tajného klíče klienta. Dále určete typ aplikace z daných možností a poté zadejte název aplikace.

Poté zadejte adresu URL domovské trasy vaší aplikace a nakonec zadejte autorizovaný URI přesměrování pro vaši aplikaci. Pro tento případ by to mělo být http://localhost: 3000/api/auth/callback/google jak je uvedeno v nastavení poskytovatele Google NextAuth.

Po úspěšné registraci vám Google poskytne ID klienta a tajný klíč klienta pro použití ve vaší aplikaci.

Nastavte aplikaci NextJS

Chcete-li začít, vytvořte lokálně projekt Next.js:

npx create-next-app next-auth-app

Po dokončení nastavení přejděte do nově vytvořeného adresáře projektu a spusťte tento příkaz, abyste roztočili vývojový server.

npm spustit dev

Otevřete prohlížeč a přejděte na http://localhost: 3000. To by měl být očekávaný výsledek.

Kód tohoto projektu najdete v něm úložiště GitHub.

Nastavení souboru .env

V kořenové složce projektu vytvořte nový soubor a pojmenujte jej .env uchovávat vaše ID klienta, tajný klíč a základní adresu URL.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'client ID'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'tajný'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

Adresa URL NextAUTH se používá k určení základní adresy URL vaší aplikace, která se používá k přesměrování uživatelů po dokončení ověřování.

Integrujte NextAuth do vaší Next.js aplikace

Nejprve do svého projektu nainstalujte knihovnu NextAuth.

npm install next-auth

Dále v /pages adresář, vytvořte novou složku a pojmenujte ji api. Změňte adresář na api a vytvořte další složku s názvem auth. Ve složce auth přidejte nový soubor a pojmenujte jej [...nextauth].js a přidejte následující řádky kódu.

import NextAuth z"next-auth/next";
import GoogleProvider z"next-auth/providers/google";
vývoznívýchozí NextAuth({
 poskytovatelé:[
 GoogleProvider({
 clientId: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Tento kód nakonfiguruje Google jako poskytovatele ověření. Funkce NextAuth definuje objekt konfigurace poskytovatele Google, který má dvě vlastnosti: ID klienta a tajný klíč klienta, který inicializuje poskytovatele.

Dále otevřete pages/_app.js soubor a proveďte následující změny v kódu.

import'../styles/globals.css'
import { SessionProvider } z"další ověření/reakce"
funkceMoje aplikace({ Component, pageProps: { session, ...pageProps } }) {
vrátit se (


 </SessionProvider>
 )
}
vývoznívýchozí Moje aplikace 

NextAuth's Poskytovatel relace poskytuje aplikaci Next.js funkci správy stavu ověřování. To trvá a zasedání prop, který obsahuje data ověřovací relace vrácená z rozhraní API Google, která zahrnují podrobnosti o uživateli, jako je jeho ID, e-mail a přístupový token.

Zabalením Moje aplikace s komponentou SessionProvider je zpřístupněn objekt autentizační relace s podrobnostmi o uživateli v celé aplikaci, což umožňuje aplikaci přetrvávat a vykreslovat stránky na základě jejich stavu ověření.

Nakonfigurujte soubor index.js

Otevři pages/index.js soubor, odstraňte standardní kód a přidejte kód níže, abyste vytvořili přihlašovací tlačítko, které uživatele nasměruje na přihlašovací stránku.

import Hlava z'další/hlava'
import styly z'../styles/Home.module.css'
import { useRouter } z'další/router';
vývoznívýchozífunkceDomov() {
konst router = useRouter();

vrátit se (