Tích hợp hệ thống xác thực an toàn là một bước phát triển quan trọng không chỉ cung cấp môi trường an toàn cho người dùng mà còn tạo niềm tin vào sản phẩm của bạn. Hệ thống này đảm bảo rằng dữ liệu của họ được bảo vệ và chỉ những cá nhân được ủy quyền mới có thể truy cập ứng dụng.
Xây dựng xác thực an toàn từ đầu có thể là một quá trình tốn thời gian, đòi hỏi sự hiểu biết thấu đáo về các quy trình và giao thức xác thực, đặc biệt là khi xử lý các nhà cung cấp xác thực khác nhau.
Sử dụng NextAuth, bạn có thể chuyển trọng tâm sang xây dựng các tính năng cốt lõi. Đọc tiếp để tìm hiểu cách tích hợp thông tin đăng nhập xã hội của Google trong ứng dụng của bạn bằng NextAuth.
NextAuth hoạt động như thế nào
NextAuth.js là một thư viện xác thực nguồn mở giúp đơn giản hóa quy trình thêm chức năng xác thực và ủy quyền cho các ứng dụng Next.js cũng như tùy chỉnh quy trình xác thực. Nó cung cấp một loạt các tính năng như email, xác thực không cần mật khẩu và hỗ trợ cho các nhà cung cấp xác thực khác nhau như Google, GitHub, v.v.
Ở cấp độ cao, NextAuth hoạt động như một phần mềm trung gian, hỗ trợ quá trình xác thực giữa ứng dụng của bạn và nhà cung cấp. Về cơ bản, khi người dùng cố gắng đăng nhập, họ sẽ được chuyển hướng đến trang đăng nhập của Google. Sau khi xác thực thành công, Google trả về một tải trọng bao gồm dữ liệu của người dùng, chẳng hạn như tên và địa chỉ email của họ. Dữ liệu này được sử dụng để cấp quyền truy cập vào ứng dụng và tài nguyên của nó.
Sử dụng dữ liệu tải trọng, NextAuth tạo phiên cho mỗi người dùng được xác thực và lưu trữ mã thông báo phiên trong cookie chỉ HTTP an toàn. Mã thông báo phiên được sử dụng để xác minh danh tính của người dùng và duy trì trạng thái xác thực của họ. Quy trình này cũng áp dụng cho các nhà cung cấp khác có thay đổi nhỏ trong quá trình triển khai.
Đăng ký ứng dụng Next.js của bạn trên Google Developer Console
NextAuth cung cấp hỗ trợ cho dịch vụ xác thực của Google. Tuy nhiên, để ứng dụng của bạn tương tác với các API của Google và cho phép người dùng xác thực bằng thông tin đăng nhập Google của họ, bạn cần phải đăng ký ứng dụng của mình trên bảng điều khiển dành cho nhà phát triển của Google và có được một ID khách hàng Và Bí mật khách hàng.
Để làm điều đó, hãy điều hướng đến Bảng điều khiển dành cho nhà phát triển của Google. Tiếp theo, đăng nhập bằng tài khoản Google của bạn để truy cập bảng điều khiển. Sau khi đăng nhập, hãy tạo một dự án mới.
Trên trang tổng quan của dự án, chọn API và dịch vụ tab từ danh sách các dịch vụ trên ngăn menu bên trái và cuối cùng, thông tin đăng nhập lựa chọn.
bấm vào Tạo thông tin xác thực để tạo ID khách hàng và Bí mật khách hàng của bạn. Tiếp theo, chỉ định loại ứng dụng từ các tùy chọn đã cho và sau đó cung cấp tên cho ứng dụng của bạn.
Sau đó, chỉ định URL tuyến đường về nhà của ứng dụng và cuối cùng chỉ định URI chuyển hướng được ủy quyền cho ứng dụng của bạn. Đối với trường hợp này, nó nên được http://localhost:3000/api/auth/callback/google như được chỉ định bởi cài đặt nhà cung cấp Google của NextAuth.
Sau khi đăng ký thành công, Google sẽ cung cấp cho bạn ID khách hàng và Bí mật khách hàng để sử dụng trong ứng dụng của bạn.
Thiết lập ứng dụng NextJS
Để bắt đầu, hãy tạo cục bộ một dự án Next.js:
npx create-next-app next-auth-app
Sau khi thiết lập hoàn tất, hãy điều hướng đến thư mục dự án mới được tạo và chạy lệnh này để khởi động máy chủ phát triển.
npm run dev
Mở trình duyệt của bạn và điều hướng đến http://localhost:3000. Đây phải là kết quả mong đợi.
Thiết lập tệp .env
Trong thư mục gốc của dự án của bạn, hãy tạo một tệp mới và đặt tên cho nó .env để giữ ID khách hàng, Bí mật và URL cơ sở của bạn.
NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'client ID'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'secret'
NEXT_PUBLIC_NEXTAUTH_URL= 'http://localhost:3000'
URL NextAUTH được sử dụng để chỉ định URL cơ sở của ứng dụng của bạn, được sử dụng để chuyển hướng người dùng sau khi xác thực hoàn tất.
Tích hợp NextAuth trong ứng dụng Next.js của bạn
Đầu tiên, hãy cài đặt thư viện của NextAuth vào dự án của bạn.
npm install next-auth
Tiếp theo, trong /trang thư mục, tạo một thư mục mới và đặt tên cho nó api. Thay đổi thư mục thành api thư mục và tạo một thư mục khác có tên xác thực. Trong thư mục auth, thêm một tệp mới và đặt tên cho nó […nextauth].js và thêm các dòng mã sau.
import NextAuth from "next-auth/next";
import GoogleProvider from "next-auth/providers/google";
export default NextAuth({
providers:[
GoogleProvider({
clientId:process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
clientSecret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
}),
]
});
Mã này định cấu hình Google làm nhà cung cấp xác thực. Hàm NextAuth xác định đối tượng cấu hình nhà cung cấp Google có hai thuộc tính: ID khách hàng và Bí mật khách hàng khởi tạo nhà cung cấp.
Tiếp theo, mở trang/_app.js tệp và thực hiện các thay đổi sau đối với mã.
import '../styles/globals.css'
import { SessionProvider } from "next-auth/react"
function MyApp({ Component, pageProps: { session, ...pageProps } }) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}
export default MyApp
NextAuth Nhà cung cấp phiên thành phần cung cấp chức năng quản lý trạng thái xác thực cho ứng dụng Next.js. phải mất một phiên họp prop chứa dữ liệu phiên xác thực được trả về từ API của Google, bao gồm các chi tiết người dùng như ID, email và mã thông báo truy cập của họ.
Bằng cách gói Ứng dụng của tôi thành phần với thành phần SessionProvider, đối tượng phiên xác thực với các chi tiết người dùng được cung cấp trong toàn bộ ứng dụng, cho phép ứng dụng duy trì và hiển thị các trang dựa trên trạng thái xác thực của chúng.
Định cấu hình tệp index.js
Mở trang/index.js tệp, xóa mã soạn sẵn và thêm mã bên dưới để tạo nút đăng nhập định tuyến người dùng đến trang đăng nhập.
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { useRouter } from 'next/router';
export default function Home() {
const router = useRouter();
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by signing in{' '}
<code className={styles.code}>with your Google Account</code>
<button className={styles.loginButton}
onClick={() => router.push('/Login')}> Login</button>
</p>
</main>
</div>
)
}
Mã này sử dụng Next.js sử dụngRouter móc để xử lý định tuyến trong ứng dụng bằng cách xác định đối tượng bộ định tuyến. Khi nhấp vào nút đăng nhập, chức năng xử lý sẽ gọi bộ định tuyến.push phương pháp để chuyển hướng người dùng đến trang đăng nhập.
Tạo một trang xác thực đăng nhập
bên trong trang thư mục, tạo một tập tin mới Đăng nhập.jssau đó thêm các dòng mã sau.
import { useSession, signIn, signOut } from "next-auth/react"
import { useRouter } from 'next/router';
import styles from '../styles/Login.module.css'
export default function Login() {
const { data: session } = useSession()
const router = useRouter();
if (session) {
return (
<div className={styles.container}>
<h1 className="title">Create Next App</h1>
<div className={styles.content}>
<h2> Signed in as {session.user.email} <br /></h2>
<div classname={styles.btns}>
<button className={styles.button} onClick={() => router.push('/Profile')}>
User Profile
</button>
<button className={styles.button} onClick={() => {
signOut()
}}>
Sign out
</button>
</div>
</div>
</div>
)
}
return (
<div className={styles.container}>
<h1 className="title">Create Next App</h1>
<div className={styles.content}>
<h2> You are not signed in!!</h2>
<button className={styles.button}
onClick={() => signIn()}>Sign in</button>
</div>
</div>
)
}
sử dụngSession, đăng nhậpVà đăng xuất là móc được cung cấp bởi xác thực tiếp theo. sử dụngSession móc được sử dụng để 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 thành công.
Điều này cho phép Next.js duy trì trạng thái xác thực và 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.
Ngoài ra, bằng cách sử dụng đối tượng phiên, bạn có thể dễ dàng tạo hồ sơ người dùng tùy chỉnh cho ứng dụng của mình và lưu trữ dữ liệu trong cơ sở dữ liệu như PostgreSQL. Bạn có thể kết nối cơ sở dữ liệu PostgreSQL với ứng dụng Next.js của mình bằng Prisma.
Móc signOut cho phép người dùng đăng xuất khỏi ứng dụng. Móc này sẽ xóa đối tượng phiên được tạo trong quá trình đăng nhập và người dùng sẽ bị đăng xuất.
Hãy tiếp tục và khởi động máy chủ phát triển để cập nhật các thay đổi và chuyển đến ứng dụng Next.js của bạn đang chạy trên trình duyệt để kiểm tra chức năng xác thực.
npm run dev
Ngoài ra, bạn có thể sử dụng Tailwind CSS với ứng dụng Next.js của mình để tạo kiểu cho các mô hình xác thực.
Xác thực bằng NextAuth
NextAuth hỗ trợ nhiều dịch vụ xác thực có thể dễ dàng tích hợp vào các ứng dụng Next.js của bạn để xử lý xác thực phía máy khách.
Ngoài ra, bạn có thể tích hợp cơ sở dữ liệu để lưu trữ dữ liệu của người dùng và mã thông báo truy cập để triển khai xác thực phía máy chủ cho các yêu cầu xác thực tiếp theo vì NextAuth cung cấp hỗ trợ cho các tích hợp cơ sở dữ liệu khác nhau.
