Тази библиотека ви позволява безпроблемно да интегрирате удостоверяването на Google във вашето приложение Next.js, елиминирайки необходимостта да го разработвате от нулата.

Интегрирането на сигурна система за удостоверяване е решаваща стъпка в развитието, която не само осигурява безопасна среда за потребителите, но и вдъхва доверие във вашия продукт. Тази система гарантира, че техните данни са защитени и че само оторизирани лица имат достъп до приложението.

Изграждането на сигурно удостоверяване от самото начало може да бъде отнемащ време процес, който изисква задълбочено разбиране на протоколите и процесите за удостоверяване, особено при работа с различно удостоверяване доставчици.

Използвайки NextAuth, можете да преместите фокуса си върху изграждането на основните функции. Прочетете, за да научите как да интегрирате социалното влизане в Google във вашето приложение с помощта на NextAuth.

Как работи NextAuth

NextAuth.js е библиотека за удостоверяване с отворен код, която опростява процеса на добавяне

instagram viewer
удостоверяване и оторизация функционалност към приложенията Next.js, както и персонализиране на работните процеси за удостоверяване. Той предоставя набор от функции като имейл, удостоверяване без парола и поддръжка за различни доставчици на удостоверяване като Google, GitHub и др.

На високо ниво NextAuth действа като междинен софтуер, улеснявайки процеса на удостоверяване между вашето приложение и доставчика. Под капака, когато потребител се опита да влезе, той се пренасочва към страницата за вход на Google. При успешно удостоверяване Google връща полезен товар, който включва данните на потребителя, като тяхното име и имейл адрес. Тези данни се използват за разрешаване на достъп до приложението и неговите ресурси.

Използвайки данните за полезния товар, NextAuth създава сесия за всеки удостоверен потребител и съхранява токена на сесията в защитена бисквитка само за HTTP. Токенът на сесията се използва за проверка на самоличността на потребителя и запазване на неговия статус на удостоверяване. Този процес важи и за други доставчици с леки вариации в изпълнението.

Регистрирайте приложението си Next.js в Google Developer Console

NextAuth осигурява поддръжка за услугата за удостоверяване на Google. Въпреки това, за да може вашето приложение да взаимодейства с API на Google и да позволи на потребителите да се удостоверяват с техните идентификационни данни за Google, ще трябва да регистрирате приложението си в конзолата за разработчици на Google и получи a ID на клиента и Тайна на клиента.

За да направите това, отидете до Google Developer Console. След това влезте с вашия акаунт в Google за достъп до конзолата. След като влезете, създайте нов проект.

На страницата с преглед на проекта изберете API и услуги от списъка с услуги в левия панел на менюто и накрая, the Акредитивни писма опция.

Кликнете върху Създайте идентификационни данни бутон за генериране на вашия клиентски идентификатор и клиентска тайна. След това посочете типа на приложението от дадените опции и след това въведете име за вашето приложение.

След това посочете URL адреса на началния маршрут на вашето приложение и накрая посочете оторизирания URI адрес за пренасочване за вашето приложение. За този случай трябва да бъде http://localhost: 3000/api/auth/callback/google както е посочено от настройките на доставчика на Google на NextAuth.

При успешна регистрация Google ще ви предостави клиентски идентификатор и клиентска тайна за използване във вашето приложение.

Настройте приложението NextJS

За да започнете, създайте локално проект Next.js:

npx create-next-app next-auth-app

След като настройката приключи, отидете до новосъздадената директория на проекта и изпълнете тази команда, за да завъртите сървъра за разработка.

npm стартиране dev

Отворете браузъра си и отворете http://localhost: 3000. Това трябва да е очакваният резултат.

Можете да намерите кода на този проект в него GitHub хранилище.

Настройване на .env файла

В главната папка на вашия проект създайте нов файл и го наименувайте .env за съхраняване на вашия клиентски идентификатор, тайна и основния URL адрес.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'клиентски идентификатор'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'тайна'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

URL адресът NextAUTH се използва за указване на основния URL адрес на вашето приложение, който се използва за пренасочване на потребители след завършване на удостоверяването.

Интегрирайте NextAuth във вашето приложение Next.js

Първо инсталирайте библиотеката на NextAuth във вашия проект.

npm инсталирайте next-auth

На следващо място, в /pages директория, създайте нова папка и я наименувайте api. Променете директорията на api и създайте друга папка, наречена авт. В папката за удостоверяване добавете нов файл и го наименувайте [...nextauth].js и добавете следните редове код.

импортиране NextAuth от"следващо удостоверяване/следващо";
импортиране GoogleProvider от"next-auth/providers/google";
износпо подразбиране NextAuth({
 доставчици:[
 GoogleProvider({
 clientId: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Този код конфигурира Google като доставчик на удостоверяване. Функцията NextAuth дефинира обекта за конфигурация на доставчик на Google, който приема две свойства: ИД на клиента и тайна на клиента, която инициализира доставчика.

След това отворете страници/_app.js файл и направете следните промени в кода.

импортиране'../styles/globals.css'
импортиране {SessionProvider} от"next-auth/react"
функцияMyApp({ Компонент, pageProps: { сесия, ...pageProps } }) {
връщане (


 </SessionProvider>
 )
}
износпо подразбиране MyApp

NextAuth's SessionProvider компонент предоставя функционалност за управление на състоянието на удостоверяване на приложението Next.js. Това отнема а сесия prop, който съдържа данните за сесията за удостоверяване, върнати от API на Google, които включват подробности за потребителя, като техния идентификатор, имейл и токен за достъп.

Чрез опаковане на MyApp компонент с компонента SessionProvider, обектът на сесията за удостоверяване с подробности за потребителя е достъпен в цялото приложение, което позволява на приложението да продължава и да изобразява страници въз основа на тяхното състояние на удостоверяване.

Конфигурирайте файла index.js

Отвори страници/index.js файл, изтрийте шаблонния код и добавете кода по-долу, за да създадете бутон за влизане, който насочва потребителите към страница за вход.

импортиране Глава от"следваща/глава"
импортиране стилове от'../styles/Home.module.css'
импортиране {useRouter} от"следващ/рутер";
износпо подразбиранефункцияУ дома() {
конст рутер = useRouter();

връщане (





Създаване на следващо приложение<<span>/title></span><br> <meta name="<span">"description" content=<span>"Генерирано от създаване на следващо приложение"</span> /> <br> "icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Добре дошли в <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> Започнете, като влезете <span>в</span>{<span>' ' </span>}<br> <span>с</span> вашия акаунт в Google<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Вход<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Този код използва Next.js <strong>useRouter</strong> кука за обработка на маршрутизирането в рамките на приложението чрез дефиниране на обект на маршрутизатор. Когато се щракне върху бутона за влизане, манипулаторната функция извиква метода <strong>router.push</strong> за пренасочване потребителя към страницата за вход.</p> <h3 id="create-a-login-authentication-page">Създаване на удостоверяване за вход Страница</h3> <p>В директорията <strong>pages</strong> създайте нов файл <strong>Login.js</strong>, след което добавете следните редове код.</p> <pre> <code><span>импортиране</span> { useSession, signIn, signOut } <span>от</span> <span>"next-auth/react"</span><br><span>импорт</span> { useRouter} <span>от</span> <span>'следващ /router'</span>;<br><span>импортиране</span> стилове <span>от</span> <span>'../styles/Login.module.css'</span><p><span>export</span> <span>по подразбиране</span> <span><span>функция</span> < span>Вход</span>() {<br> <span>const</span> { <span>данни</span>: сесия } = useSession()<br> <span>const</span> router = useRouter();<br> <span>if</span> (сесия) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Създаване на следващо приложение<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Подписано < span>в <span>като</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> Потребителски профил<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Изход<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>връщане</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Създаване на следващо приложение<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Не сте влезли <span></span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Подпис <span>in</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> и <strong>signOut</strong> са кукички, предоставени от <strong>next-auth</strong>. <strong>useSession</strong> кука се използва за достъп до обекта на текущата потребителска сесия, след като потребителят влезе и бъде успешно удостоверен от Google.</p> <p>Това позволява на Next.js да поддържа състоянието на удостоверяване и да рендира потребителските данни от клиентската страна на приложението, в този случай, имейл.</p> <p>Освен това, като използвате обекта на сесията, можете лесно да създавате персонализирани потребителски профили за вашето приложение и да съхранявате данните в база данни като като PostgreSQL. Можете да <span>свържете PostgreSQL база данни с вашето приложение Next.js с помощта на Prisma</span>.</p> <p>Куката за излизане позволява на потребителя да излезе от приложението. Тази кука ще изтрие обекта на сесията, създаден по време на процеса на влизане, и потребителят ще излезе от системата.</p> <p>Давайте и развъртете сървъра за разработка до актуализирайте промените и преминете към вашето приложение Next.js, работещо в браузъра, за да тествате функционалността за удостоверяване.</p> <pre> <code>npm run dev</code> </pre> <p>Освен това можете да <span>използвате Tailwind CSS с вашето приложение Next.js</span>, за да стилизирате моделите за удостоверяване.</p> <h2 id="authentication-using-nextauth"> Удостоверяване чрез NextAuth  h2> </h2>
<p>NextAuth поддържа множество услуги за удостоверяване, които лесно могат да бъдат интегрирани във вашите приложения Next.js, за да работят от страна на клиента удостоверяване.</p> <p>Освен това можете да интегрирате база данни, за да съхранявате данните на вашите потребители и токена за достъп, за да внедрите от страна на сървъра удостоверяване за последващи заявки за удостоверяване, тъй като NextAuth осигурява поддръжка за различни интеграции на бази данни.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre>