Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

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

Създаването на персонализирана система за удостоверяване може да отнеме време задача и тук е полезен NextAuth.js. Той осигурява сигурна поддръжка за удостоверяване за приложения, създадени с рамката Next.js.

Какво е NextAuth.js?

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

instagram viewer

Как работи NextAuth.js при удостоверяване?

Решението за удостоверяване на NextAuth.js предоставя API от страна на клиента, който можете интегрирайте във вашето приложение Next.js. Можете да го използвате за удостоверяване на потребители с различни доставчици за влизане, при които те са създали акаунти.

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

Актуализации на нови функции в NextAuth.js (v4)

През декември 2022 г. NextAuth.js пусна четвъртата си версия. Тази версия е подобрена от по-ранната си версия, v3, с нови актуализации и модификации. Промените се фокусират основно върху подобряване на използването на библиотеката в процеса на удостоверяване.

1. Актуализации на useSession Hook

Можете да използвате куката useSession, за да проверите дали даден потребител е влязъл или не. В тази нова версия куката useSession връща обект, който предоставя по-прост начин за тестване на състояния, благодарение на добавянето на опцията за състояние. Вижте кода по-долу:

импортиране {useSession} от"next-auth/react"
износпо подразбиранефункцияКомпонент() {
конст { данни: сесия, състояние } = useSession()


ако (състояние "удостоверен") { 
връщане<стр>Влезли сте като {session.user.email}стр>
 }
връщане<стр> Не сте влезли стр>
}

2. Контекстът на SessionProvider става задължителен

Новата версия четири изисква използването на контекста SessionProvider. Това означава, че ще трябва да обвиете приложението си с доставчика useSession. NextAuth.js препоръчва да опаковате приложението си в рамките на _app.jsx файл.

Освен това методът clientMaxAge е заменен с refetchInterval. Това ще улесни периодичното извличане на сесията във фонов режим.

импортиране {SessionProvider} от"next-auth/react"
износпо подразбиранефункцияПриложение({
 Компонент, pageProps: { session, ...pageProps }, 
}) {
връщане ( 
<SessionProviderсесия={сесия}refetchInterval={5 * 60}>
<Компонент {...pageProps} />SessionProvider>
 )
}

3. Импортиране на доставчици поотделно

NextAuth.js предоставя няколко услуги на доставчик, които можете да използвате за влизане на потребител. Те включват:

  • Използване на вградени доставчици на OAuth (напр. GitHub, Google).
  • Използване на имейл доставчик.

В тази нова версия трябва да импортирате всеки доставчик поотделно.

импортиране GoogleProvider от"next-auth/providers/google"
импортиране Auth0Provider от"следващ-автор/доставчици/автор0";

4. Други незначителни промени

  • Импортирането от страна на клиента е преименувано на next-auth/react от next-auth/client.
  • Промени в аргументите на методите за обратно извикване: 
    signIn({потребител, акаунт, профил, имейл, идентификационни данни})
    сесия ({сесия, токен, потребител})
    jwt({токен, потребител, акаунт, профил, isNewUser})

Първи стъпки с NextAuth.js при удостоверяване

За да интегрирате NextAuth.js във вашите приложения Next.js, следвайте стъпките по-долу:

  1. Създайте приложение Next.js, като изпълните тази команда: npx create-next-app
  2. Бягай npm инсталирайте next-auth във вашия терминал, за да инсталирате NextAuth.js във вашето приложение Next.js.
  3. Посетете NextAuth.js официална документация и изберете предпочитания от вас доставчик/и от списъка с поддържаните. След това създайте акаунт в конзолата за разработчици на избрания от вас доставчик/и и регистрирайте своето приложение Next.js.
  4. В конзолата за разработчици на избрания от вас доставчик/и посочете URL адрес на началния маршрут и на URL адрес за пренасочване на обратно извикване, запазете промените и копирайте ClientID и Тайна на клиента.
  5. В основната директория на вашето приложение Next.js създайте .env файл, който да съдържа ID на клиента и Тайна на клиента.
  6. И накрая, в директорията /pages/api създайте нова папка, наречена авт. В папката за удостоверяване създайте нов файл и го наименувайте [...nextauth].js. В създадения файл добавете кода по-долу. Кодът показва API на NextAuth.js от страна на клиента с помощта на доставчик на Google: 
импортиране GoogleProvider от"next-auth/providers/google";
доставчици: [
 GoogleProvider({
clientId: процес.env.GOOGLE_CLIENT_ID,
clientSecret: процес.env.GOOGLE_CLIENT_SECRET
 })
]

Вече можете да продължите и да създадете страница за удостоверяване при влизане. Ето изобразяване на DOM за компонент за влизане:

импортиране Реагирайте от"реагира";
импортиране {useSession, signIn, signOut} от"next-auth/react"
износпо подразбиранефункцияКомпонент() {
конст { данни: сесия } = useSession()


 ако (сесия) {
връщане (
<>
<стр> Влезли сте като {session.user.email} стр>
<бутонonClick={() => signOut()}>Изходбутон>

 )
 }
връщане (
<>
<стр> Не сте влезли стр>
<бутонonClick={() => signIn()}>Влезтебутон>

 )
}

The useSession Hook осъществява достъп до обекта на текущата потребителска сесия. След като потребителят влезе и бъде удостоверен от Google, се връща обект на сесия с полезния товар на потребителя. Това позволява на Next.js да визуализира потребителските данни от клиентската страна на приложението, в този случай имейла.

Персонализирани системи за удостоверяване срещу. Готови за използване решения като NextAuth.js

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

Ако имате ресурсите и опита да разработите персонализирана система за удостоверяване, това може да е най-добрият подход за вас. Въпреки това, ако търсите готово решение, което е лесно за внедряване, сигурно и рентабилно, тогава NextAuth.js може да бъде добър избор за разглеждане. В крайна сметка изборът ще зависи от вашите нужди и предпочитания.