Những gì bạn cần biết
Xác thực là một thành phần quan trọng của phát triển ứng dụng. Nó giúp bảo vệ dữ liệu người dùng và ngăn chặn các hoạt động độc hại. Nói một cách đơn giản, nó xác định độ tin cậy của danh tính người dùng, đảm bảo rằng chỉ những người dùng được ủy quyền mới có thể truy cập ứng dụng và tài nguyên của ứng dụng đó.
Tạo một hệ thống xác thực tùy chỉnh có thể là một nhiệm vụ tốn thời gian và đây là lúc NextAuth.js có ích. Nó cung cấp hỗ trợ xác thực an toàn cho các ứng dụng được xây dựng bằng khung Next.js.
Mục Lục
NextAuth.js là gì?
NextAuth.js là một thư viện nhẹ mã nguồn mở cung cấp hỗ trợ xác thực và ủy quyền cho các ứng dụng Next.js. Nó cho phép các nhà phát triển nhanh chóng và dễ dàng thiết lập xác thực và ủy quyền cho các ứng dụng Next.js của họ. Nó cung cấp các tính năng như xác thực với nhiều nhà cung cấp, email và xác thực không cần mật khẩu.
NextAuth.js hoạt động như thế nào trong quá trình xác thực?
Giải pháp xác thực của NextAuth.js cung cấp API phía máy khách mà bạn có thể tích hợp vào ứng dụng Next.js của mình. Bạn có thể sử dụng nó để xác thực người dùng với các nhà cung cấp dịch vụ đăng nhập khác mà họ đã tạo tài khoản.
Về cơ bản, người dùng được chuyển hướng đến trang đăng nhập của nhà cung cấp. Sau khi xác thực thành công, nhà cung cấp trả về dữ liệu phiên chứa tải trọng của người dùng. Tải trọng này sau đó có thể cho phép truy cập vào ứng dụng và tài nguyên của nó.
Cập nhật tính năng mới trong NextAuth.js (v4)
Vào tháng 12 năm 2022, NextAuth.js đã phát hành phiên bản thứ tư. Phiên bản này đã được cải thiện so với phiên bản trước đó, v3, với các cập nhật và sửa đổi mới. Các thay đổi chủ yếu tập trung vào việc cải thiện việc sử dụng thư viện trong quy trình xác thực.
1. Cập nhật cho useSession Hook
Bạn có thể sử dụng hook useSession để kiểm tra xem người dùng đã đăng nhập hay chưa. Trong phiên bản mới này, hook useSession trả về một đối tượng cung cấp một cách đơn giản hơn để kiểm tra các trạng thái, nhờ vào việc bổ sung tùy chọn trạng thái. Xem mã dưới đây:
import { useSession } from "next-auth/react"export default function Component() {
const { data: session, status } = useSession()
if (status === "authenticated") {
return <p>Signed in as {session.user.email}</p>
}
return <p> Not signed in </p>
}
2. Bối cảnh SessionProvider trở nên bắt buộc
Phiên bản bốn mới bắt buộc sử dụng ngữ cảnh SessionProvider. Điều này có nghĩa là bạn sẽ phải bọc ứng dụng của mình bằng Nhà cung cấp useSession. NextAuth.js khuyên bạn nên gói ứng dụng của mình trong _app.jsx tập tin.
Ngoài ra, phương pháp clientMaxAge đã được thay thế bằng refetchInterval. Điều này sẽ giúp tìm nạp phiên theo định kỳ trong nền dễ dàng hơn.
import { SessionProvider } from "next-auth/react" export default function App({
Component, pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session} refetchInterval={5 * 60}>
<Component {...pageProps} /> </SessionProvider>
)
}
3. Nhập từng nhà cung cấp riêng lẻ
NextAuth.js cung cấp một số dịch vụ của nhà cung cấp mà bạn có thể sử dụng để đăng nhập người dùng. Chúng bao gồm:
- Sử dụng Nhà cung cấp OAuth tích hợp (ví dụ: GitHub, Google).
- Sử dụng Nhà cung cấp Email.
Trong phiên bản mới này, bạn cần nhập từng nhà cung cấp riêng lẻ.
import GoogleProvider from "next-auth/providers/google"
import Auth0Provider from "next-auth/providers/auth0";
4. Những thay đổi nhỏ khác
- Quá trình nhập phía máy khách đã được đổi tên thành next-auth/reac từ next-auth/client.
- Thay đổi đối số của các phương thức gọi lại:
signIn({ user, account, profile, email, credentials })
session({ session, token, user })
jwt({ token, user, account, profile, isNewUser })
Bắt đầu với NextAuth.js trong Xác thực
Để tích hợp NextAuth.js trong các ứng dụng Next.js của bạn, hãy làm theo các bước bên dưới:
- Tạo Ứng dụng Next.js bằng cách chạy lệnh này: npx tạo ứng dụng tiếp theo
- Chạy npm cài đặt xác thực tiếp theo trong thiết bị đầu cuối của bạn để cài đặt NextAuth.js trong Ứng dụng Next.js của bạn.
- Truy cập tài liệu chính thức của NextAuth.js và chọn (các) nhà cung cấp ưa thích của bạn từ danh sách những nhà cung cấp được hỗ trợ. Tiếp theo, hãy tạo một tài khoản trong bảng điều khiển dành cho nhà phát triển của (các) nhà cung cấp đã chọn của bạn và đăng ký ứng dụng Next.js của bạn.
- Trong bảng điều khiển dành cho nhà phát triển của (các) nhà cung cấp đã chọn của bạn, hãy chỉ định URL tuyến đường nhà và URL chuyển hướng gọi lạilưu các thay đổi và sao chép Mã khách hàng và Bí mật khách hàng.
- Trong thư mục gốc ứng dụng Next.js của bạn, hãy tạo tệp .env để giữ ID khách hàng và Bí mật khách hàng.
- Cuối cùng, trong thư mục /pages/api, hãy tạo một thư mục mới có tên xác thực. Trong thư mục auth, tạo một tệp mới và đặt tên cho nó […nextauth].js. Trong tệp đã tạo, thêm mã bên dưới. Mã hiển thị API phía máy khách NextAuth.js bằng Nhà cung cấp Google:
import GoogleProvider from "next-auth/providers/google";providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET
})
]
Bây giờ bạn có thể tiếp tục và xây dựng trang xác thực đăng nhập. Đây là kết xuất DOM cho thành phần đăng nhập:
import React from 'react';
import { useSession, signIn, signOut } from "next-auth/react"export default function Component() {
const { data: session } = useSession()
if (session) {
return (
<>
<p> Signed in as {session.user.email} </p>
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return (
<>
<p> Not signed in </p>
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
Các sử dụngSession Hook truy cập đối tượng phiên người dùng hiện tại. Sau khi người dùng đăng nhập và được Google xác thực, một đối tượng phiên có tải trọng của người dùng sẽ được trả về. Điều này cho phép Next.js hiển thị chi tiết người dùng ở phía máy khách của ứng dụng, trong trường hợp này là email.
Hệ thống xác thực tùy chỉnh so với các giải pháp sẵn sàng sử dụng, chẳng hạn như NextAuth.js
Lựa chọn giữa việc xây dựng hệ thống xác thực tùy chỉnh và tích hợp giải pháp xác thực sẵn sàng sử dụng, chẳng hạn như NextAuth.js, điều quan trọng là phải xem xét chi phí, độ phức tạp và tính bảo mật của từng giải pháp.
Nếu bạn có tài nguyên và kiến thức chuyên môn để phát triển hệ thống xác thực tùy chỉnh, thì đó có thể là cách tiếp cận tốt nhất dành cho bạn. Tuy nhiên, nếu bạn đang tìm kiếm một giải pháp vượt trội, dễ triển khai, an toàn và tiết kiệm chi phí thì NextAuth.js có thể là một lựa chọn tốt để xem xét. Cuối cùng, sự lựa chọn sẽ phụ thuộc vào nhu cầu và sở thích của bạn.