Ta biblioteka umożliwia bezproblemową integrację uwierzytelniania Google z aplikacją Next.js, eliminując potrzebę tworzenia jej od podstaw.

Integracja bezpiecznego systemu uwierzytelniania to kluczowy krok w rozwoju, który nie tylko zapewnia bezpieczne środowisko dla użytkowników, ale także budzi zaufanie do Twojego produktu. System ten gwarantuje, że ich dane są chronione, a dostęp do aplikacji mają tylko upoważnione osoby.

Tworzenie bezpiecznego uwierzytelniania od podstaw może być czasochłonnym procesem, który wymaga gruntownej analizy zrozumienie protokołów i procesów uwierzytelniania, zwłaszcza podczas obsługi różnych uwierzytelnień dostawcy.

Korzystając z NextAuth, możesz skupić się na budowaniu podstawowych funkcji. Czytaj dalej, aby dowiedzieć się, jak zintegrować logowanie społecznościowe Google w swojej aplikacji za pomocą NextAuth.

Jak działa NextAuth

NextAuth.js to biblioteka uwierzytelniania typu open source, która upraszcza proces dodawania uwierzytelnianie i autoryzacja funkcjonalność do aplikacji Next.js, a także dostosowywanie przepływów pracy uwierzytelniania. Zapewnia szereg funkcji, takich jak poczta e-mail, uwierzytelnianie bez hasła i wsparcie dla różnych dostawców uwierzytelniania, takich jak Google, GitHub i innych.

instagram viewer

Na wysokim poziomie NextAuth działa jako oprogramowanie pośrednie, ułatwiając proces uwierzytelniania między Twoją aplikacją a dostawcą. Pod maską, gdy użytkownik próbuje się zalogować, jest przekierowywany na stronę logowania Google. Po pomyślnym uwierzytelnieniu Google zwraca ładunek zawierający dane użytkownika, takie jak imię i nazwisko oraz adres e-mail. Dane te służą do autoryzacji dostępu do aplikacji i jej zasobów.

Korzystając z danych ładunku, NextAuth tworzy sesję dla każdego uwierzytelnionego użytkownika i przechowuje token sesji w bezpiecznym pliku cookie obsługującym tylko protokół HTTP. Token sesji służy do weryfikacji tożsamości użytkownika i zachowania jego statusu uwierzytelnienia. Ten proces dotyczy również innych dostawców z niewielkimi różnicami we wdrażaniu.

Zarejestruj swoją aplikację Next.js w Google Developer Console

NextAuth zapewnia obsługę usługi uwierzytelniania Google. Jednak aby Twoja aplikacja mogła wchodzić w interakcję z interfejsami API Google i umożliwiać użytkownikom uwierzytelnianie swoich danych logowania Google, musisz zarejestrować swoją aplikację w konsoli programisty Google i uzyskanie Identyfikator klienta I Sekret klienta.

Aby to zrobić, przejdź do Konsola programisty Google. Następnie zaloguj się na swoje konto Google, aby uzyskać dostęp do konsoli. Po zalogowaniu utwórz nowy projekt.

Na stronie przeglądu projektu wybierz API i usługi kartę z listy usług w lewym okienku menu i wreszcie plik Referencje opcja.

Kliknij na Utwórz dane uwierzytelniające przycisk, aby wygenerować swój identyfikator klienta i klucz tajny klienta. Następnie określ typ aplikacji z podanych opcji, a następnie podaj nazwę swojej aplikacji.

Następnie określ adres URL trasy domowej aplikacji i na koniec określ identyfikator URI autoryzowanego przekierowania dla aplikacji. W tym przypadku tak powinno być http://localhost: 3000/api/auth/callback/google zgodnie z ustawieniami dostawcy Google NextAuth.

Po udanej rejestracji firma Google przekaże Ci identyfikator klienta i klucz tajny klienta do wykorzystania w Twojej aplikacji.

Skonfiguruj aplikację NextJS

Aby rozpocząć, utwórz lokalnie projekt Next.js:

npx utwórz-następną-aplikację następną-aplikację-uwierzytelniania

Po zakończeniu instalacji przejdź do nowo utworzonego katalogu projektu i uruchom to polecenie, aby uruchomić serwer deweloperski.

npm uruchom dev

Otwórz przeglądarkę i przejdź do http://localhost: 3000. To powinien być oczekiwany wynik.

Możesz znaleźć kod tego projektu w jego Repozytorium GitHub.

Konfigurowanie pliku .env

W folderze głównym projektu utwórz nowy plik i nadaj mu nazwę .env przechowywać Twój identyfikator klienta, klucz tajny i podstawowy adres URL.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'Identyfikator klienta'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'sekret'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

Adres URL NextAUTH służy do określenia podstawowego adresu URL Twojej aplikacji, który służy do przekierowywania użytkowników po zakończeniu uwierzytelniania.

Zintegruj NextAuth ze swoją aplikacją Next.js

Najpierw zainstaluj bibliotekę NextAuth w swoim projekcie.

npm zainstaluj następną autoryzację

Dalej, w /pages katalogu, utwórz nowy folder i nadaj mu nazwę interfejs API. Zmień katalog na interfejs API folder i utwórz inny folder o nazwie autoryzacja W folderze auth dodaj nowy plik i nadaj mu nazwę [...następne uwierzytelnienie].js i dodaj następujące wiersze kodu.

import DalejAuth z„następna autoryzacja/następna”;
import Dostawca Google z„next-auth/providers/google”;
eksportdomyślny Następna autoryzacja({
 dostawcy:[
 Dostawca Google({
 identyfikator klienta: proces.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 ClientSecret: proces.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Ten kod konfiguruje Google jako dostawcę uwierzytelniania. Funkcja NextAuth definiuje obiekt konfiguracji dostawcy Google, który przyjmuje dwie właściwości: identyfikator klienta i klucz tajny klienta, który inicjuje dostawcę.

Następnie otwórz pages/_app.js plik i wprowadź następujące zmiany w kodzie.

import„../style/globals.css”
import { Dostawca sesji } z„następna autoryzacja/reakcja”
funkcjonowaćMojaAplikacja({ Komponent, właściwości strony: { sesja,... właściwości strony } }) {
powrót (


 </SessionProvider>
 )
}
eksportdomyślny MojaAplikacja

DalejAuth's Dostawca sesji zapewnia funkcję zarządzania stanem uwierzytelniania dla aplikacji Next.js. To zajmuje sesja prop, który zawiera dane sesji uwierzytelniania zwrócone z interfejsu API Google, w tym dane użytkownika, takie jak jego identyfikator, adres e-mail i token dostępu.

Zawijając MojaAplikacja komponentu z komponentem SessionProvider udostępniany jest obiekt sesji uwierzytelniania ze szczegółami użytkownika w całej aplikacji, umożliwiając aplikacji utrwalanie i renderowanie stron na podstawie ich stanu uwierzytelnienia.

Skonfiguruj plik index.js

Otworzyć strony/index.js plik, usuń kod wzorcowy i dodaj poniższy kod, aby utworzyć przycisk logowania, który kieruje użytkowników do strony logowania.

import Głowa z„następny / głowa”
import style z„../style/Home.module.css”
import { useRouter } z„następny/router”;
eksportdomyślnyfunkcjonowaćDom() {
konst router = użyj routera ();

powrót (





Utwórz następną aplikację<<span>/title></span><br> <meta name="<span">"description" content=<span>"Wygenerowane przez utworzenie następnej aplikacji"</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> Witamy w <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> Zacznij od zalogowania się <span>w</span>{<span>' ' </span>}<br> <kod classname="{styles.code}"><span>z</span> Twoim kontem Google<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Zaloguj się<<span>/button></span><br> <<span>/p></span><br> < <rozpi>/main></rozpi></button></kod></p>
<p><kod> <<span>/div></span><br> )<br>}<br> </kod></p> <p>Ten kod wykorzystuje hak Next.js <strong>useRouter</strong> do obsługi routingu w aplikacji poprzez zdefiniowanie obiektu routera. Po kliknięciu przycisku logowania funkcja obsługi wywołuje metodę <strong>router.push</strong> w celu przekierowania użytkownika do strony logowania.</p> <h3 id="create-a-login-authentication-page">Utwórz uwierzytelnianie logowania Strona</h3> <p>W katalogu <strong>pages</strong> utwórz nowy plik <strong>Login.js</strong>, a następnie dodaj następujące wiersze kodu.</p> <pre> <code><span>importuj</span> { useSession, zaloguj się, wyloguj } <span>z</span> <span>"next-auth/react"</span><br><span>importuj</span> { useRouter } <span>z</span> <span>'następny /router'</span>;<br><span>importuj</span> style <span>z</span> <span>'../styles/Login.module.css'</span><p><span>eksportuj</span> <span>domyślnie</span> <span><span>funkcja</span> < span>Zaloguj się</span>() {<br> <span>stała</span> { <span>dane</span>: sesja } = useSession()<br> <span>const</span> router = useRouter();<br> <span>if</span> (sesja) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Utwórz następną aplikację<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Podpisano < span>w <span>jako</span> {session.user.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> router.push(<span>'/Profil'< /span>)}><br> Profil użytkownika<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Wyloguj się<br> <<span>/button></span> <br> <<rozpi>/div></rozpi></button></span><br> <<rozpi>/div><br> <<span>/div></span><p><code> )<br> }<br> <span>powrót</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Utwórz następną aplikację<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Nie jesteś zalogowany <span></span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Podpisz <span>w</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> i <strong>signOut</strong> to punkty zaczepienia udostępniane przez <strong>next-auth</strong>. <strong>useSession</strong> hak służy do uzyskiwania dostępu do bieżącego obiektu sesji użytkownika po zalogowaniu się użytkownika i pomyślnym uwierzytelnieniu przez Google.</p> <p>Dzięki temu Next.js może zachować stan uwierzytelnienia i renderować dane użytkownika po stronie klienta aplikacji, w tym przypadku e-mail.</p> <p>Ponadto, używając obiektu sesji, możesz łatwo tworzyć niestandardowe profile użytkowników dla swojej aplikacji i przechowywać dane w bazie danych, takiej jak jako PostgreSQL. Możesz <span>połączyć bazę danych PostgreSQL z aplikacją Next.js za pomocą Prisma</span>.</p> <p>Haczyk signOut umożliwia użytkownikowi wylogowanie się z aplikacji. Ten hak usunie obiekt sesji utworzony podczas procesu logowania, a użytkownik zostanie wylogowany.</p> <p>Śmiało i rozkręć serwer programistyczny, aby zaktualizuj zmiany i przejdź do aplikacji Next.js uruchomionej w przeglądarce, aby przetestować funkcjonalność uwierzytelniania.</p> <pre> <code>npm run dev</code> </pre> <p>Ponadto możesz <span>użyć CSS Tailwind z aplikacją Next.js</span>, aby stylizować modele uwierzytelniania.</p> <h2 id="authentication-using-nextauth"> Uwierzytelnianie za pomocą NextAuth  h2> </h2>
<p>NextAuth obsługuje wiele usług uwierzytelniania, które można łatwo zintegrować z aplikacjami Next.js w celu obsługi po stronie klienta uwierzytelnianie.</p> <p>Dodatkowo możesz zintegrować bazę danych do przechowywania danych użytkowników oraz token dostępu do implementacji po stronie serwera uwierzytelnianie dla kolejnych żądań uwierzytelnienia, ponieważ NextAuth zapewnia obsługę różnych integracji baz danych.</p> </button>
</h2>
</div>
</h1>
</div></code></p></rozpi></button>
</div>
</h2>
</div>
</h1>
</div></code></pre>