Эта библиотека позволяет легко интегрировать аутентификацию Google в ваше приложение Next.js, избавляя от необходимости разрабатывать его с нуля.

Интеграция безопасной системы аутентификации — важный этап разработки, который не только обеспечивает безопасную среду для пользователей, но и вызывает доверие к вашему продукту. Эта система гарантирует, что их данные защищены и что только авторизованные лица могут получить доступ к приложению.

Создание безопасной аутентификации с нуля может занять много времени и требует тщательного понимание протоколов и процессов аутентификации, особенно при обработке различных аутентификаций провайдеры.

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

Как работает NextAuth

NextAuth.js это библиотека аутентификации с открытым исходным кодом, которая упрощает процесс добавления аутентификация и авторизация функциональность для приложений Next.js, а также настройку рабочих процессов аутентификации. Он предоставляет ряд функций, таких как электронная почта, аутентификация без пароля и поддержка различных поставщиков аутентификации, таких как Google, GitHub и других.

instagram viewer

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

Используя данные полезной нагрузки, NextAuth создает сеанс для каждого пользователя, прошедшего проверку подлинности, и сохраняет токен сеанса в безопасном файле cookie только для HTTP. Маркер сеанса используется для проверки личности пользователя и сохранения его статуса проверки подлинности. Этот процесс также применяется к другим поставщикам с небольшими изменениями в реализации.

Зарегистрируйте свое приложение Next.js в консоли разработчика Google

NextAuth обеспечивает поддержку службы аутентификации Google. Однако, чтобы ваше приложение взаимодействовало с API Google и позволяло пользователям проходить аутентификацию с помощью свои учетные данные Google, вам нужно будет зарегистрировать свое приложение в консоли разработчика Google и получить ID клиента и Секрет клиента.

Для этого перейдите к Консоль разработчика Google. Затем войдите в свою учетную запись Google, чтобы получить доступ к консоли. После входа создайте новый проект.

На странице обзора проекта выберите API и сервисы вкладку из списка услуг в левой панели меню и, наконец, Реквизиты для входа вариант.

Нажать на Создать учетные данные кнопку, чтобы сгенерировать идентификатор клиента и секрет клиента. Затем укажите тип приложения из заданных параметров, а затем укажите имя для вашего приложения.

После этого укажите URL-адрес домашнего маршрута вашего приложения и, наконец, укажите авторизованный URI перенаправления для вашего приложения. Для этого случая следует http://localhost: 3000/API/аутентификация/обратный вызов/гугл как указано в настройках поставщика услуг Google NextAuth.

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

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

Для начала создайте проект Next.js локально:

npx создать следующее приложение следующее приложение авторизации

После завершения установки перейдите во вновь созданный каталог проекта и запустите эту команду, чтобы запустить сервер разработки.

нпм запустить разработчик

Откройте браузер и перейдите к http://localhost: 3000. Это должен быть ожидаемый результат.

Вы можете найти код этого проекта в его Репозиторий GitHub.

Настройка файла .env

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

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'ID клиента'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= секрет
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

URL-адрес NextAUTH используется для указания базового URL-адреса вашего приложения, который используется для перенаправления пользователей после завершения аутентификации.

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

Сначала установите библиотеку NextAuth в свой проект.

npm установить следующую авторизацию

Далее, в /pages каталог, создайте новую папку и назовите ее API. Измените каталог на API папку и создайте другую папку с именем авт. В папке auth добавьте новый файл и назовите его [...nextauth].js и добавьте следующие строки кода.

Импортировать NextAuth от"следующая авторизация/следующая";
Импортировать GoogleProvider от"следующая авторизация/поставщики/гугл";
экспортпо умолчанию СледующаяАвт({
 провайдеры:[
 GoogleProvider({
 идентификатор клиента: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 секрет клиента: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

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

Далее откройте страницы/_app.js файл и внесите следующие изменения в код.

Импортировать'../стили/globals.css'
Импортировать { Провайдер сеансов } от"следующая аутентификация/реакция"
функцияМое приложение({ Компонент, pageProps: {сеанс, ...pageProps} }) {
возвращаться (


 </SessionProvider>
 )
}
экспортпо умолчанию Мое приложение

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

Обернув Мое приложение компонент с компонентом SessionProvider, объект сеанса аутентификации с данными пользователя становится доступным во всем приложении, что позволяет приложению сохранять и отображать страницы в зависимости от их состояния аутентификации.

Настройте файл index.js

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

Импортировать Голова от'следующий / голова'
Импортировать стили от'../стили/Home.module.css'
Импортировать {использовать маршрутизатор} от'следующий/маршрутизатор';
экспортпо умолчаниюфункцияДом() {
константа маршрутизатор = использовать маршрутизатор ();

возвращаться (





Создать следующее приложение<<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>from</span> <span>"next-auth/react"</span><br><span>import</span> { useRouter } <span>from</span> <span>'next /router'</span>;<br><span>импорт</span> стилей <span>из</span> <span>'../styles/Login.module.css'</span><p><span>экспорт</span> <span>по умолчанию</span> <span><span>функция</span> < span>Вход</span>() {<br> <span>const</span> { <span>data</span>: session } = 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>return</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>в</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>Хук signOut позволяет пользователю выйти из приложения. Этот хук удалит объект сеанса, созданный во время процесса входа, и пользователь выйдет из системы.</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>