Cách kết nối Next.js với Google Drive: Hướng dẫn chi tiết

Bài viết này hướng dẫn cách kết nối Google Drive với Next.js. Nó bao gồm việc phát triển một giao diện cơ bản để hiển thị các tài liệu đã lưu, cấu hình NextAuth.js để xác thực, tạo API route để lấy dữ liệu từ Google Drive. Sau khi hoàn thành, bạn sẽ có thể xử lý an toàn các cuộc gọi API dựa trên OAuth, xác thực người dùng bằng Google và truy xuất tệp từ Google Drive bằng Next.js.

Google Drive là một dịch vụ lưu trữ đám mây phổ biến. Khi kết nối nó với ứng dụng Next.js của bạn, người dùng có thể dễ dàng xem, tải lên và quản lý tệp của họ. Bạn có thể sử dụng API của Google Drive để tạo hệ thống quản lý tài liệu an toàn và có thể mở rộng, công cụ chia sẻ tệp hoặc ứng dụng ghi chú trên nền tảng đám mây.

Trước khi bắt đầu, hãy đảm bảo rằng bạn đã có:

Một dự án Next.js đã được thiết lập (npx create-next-app my-app).
Một tài khoản trên Google Cloud Console để tạo thông tin đăng nhập OAuth.
API Google Drive đã được bật trong dự án Google của bạn.
Kiến thức cơ bản về OAuth 2.0 và API routes trong Next.js.

Bước 1: Bật API Google Drive và tạo thông tin đăng nhập OAuth

Bạn cần tạo thông tin đăng nhập OAuth và bật API Google Drive để sử dụng Google Drive từ Next.js.

Thiết lập một dự án mới trong Google Cloud Console.
Truy cập API & Services > Enable APIs & Services, tìm kiếm Google Drive API và bật nó.
Tạo OAuth 2.0 Client ID trong phần Credentials:

Chọn loại ứng dụng là Web Application.
Để thử nghiệm, đặt Redirect URI thành: http://localhost:3000/api/auth/callback/google.
Lưu lại Client ID và Client Secret để sử dụng sau này.

Bước 2: Cài đặt các thư viện cần thiết

Để kết nối Google Drive với Next.js, bạn cần cài đặt một số thư viện quan trọng. Đầu tiên là NextAuth.js, giúp ứng dụng của bạn quản lý OAuth để đăng nhập. Tiếp theo là Google APIs, cho phép bạn làm việc với Google Drive và các dịch vụ khác của Google.

Chạy lệnh sau để cài đặt các thư viện này:

npm install next-auth googleapis

Trong đó:

NextAuth.js giúp Google quản lý xác thực người dùng và cấp token truy cập.
Google APIs sử dụng token đó để thực hiện các truy vấn API một cách an toàn trên Google Drive.

Sau khi hoàn tất cài đặt, ứng dụng Next.js của bạn sẽ sẵn sàng để tích hợp với Google Drive.

Bước 3: Cấu hình NextAuth.js cho Google Authentication

Để sử dụng xác thực người dùng bằng Google, hãy tạo một tệp cấu hình NextAuth.js trong thư mục: pages/api/auth/[…nextauth]

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      authorization: {
        params: {
          scope: "openid email profile https://www.googleapis.com/auth/drive.readonly",
        },
      },
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.accessToken = token.accessToken;
      return session;
    },
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
  },
});

Các điểm quan trọng trong cấu hình này:

Google Provider: Cho phép người dùng đăng nhập bằng tài khoản Google.
Cấu hình phạm vi truy cập (Scope): Chỉ cấp quyền đọc dữ liệu từ Google Drive.
Quản lý phiên làm việc (Session Management): Lưu trữ mã OAuth trong phiên để có thể truy cập API sau khi đăng nhập.

Bước 4: Tạo API Route để lấy tệp từ Google Drive

Hãy tạo một API route trong thư mục sau để truy cập Google Drive: JavaScriptJavaScript/api/drive.js

import { google } from "googleapis";
import { getSession } from "next-auth/react";

export default async function handler(req, res) {
  const session = await getSession({ req });

  if (!session || !session.accessToken) {
    return res.status(401).json({ error: "Unauthorized" });
  }

  const auth = new google.auth.OAuth2();
  auth.setCredentials({ access_token: session.accessToken });

  const drive = google.drive({ version: "v3", auth });

  try {
    const response = await drive.files.list({
      pageSize: 10,
      fields: "files(id, name, mimeType)",
    });

    res.status(200).json(response.data.files);
  } catch (error) {
    res.status(500).json({ error: "Failed to fetch files" });
  }
}

API Route này sẽ làm gì?

Xác minh người dùng: Kiểm tra xem người dùng đã đăng nhập hay chưa.
Truy cập Google Drive: Sử dụng token OAuth đã lưu để kết nối với Google Drive.
Lấy danh sách tệp: Truy xuất danh sách tệp từ Google Drive của người dùng.

Bước 5: Xây dựng giao diện hiển thị tệp Google Drive

Hãy cập nhật Next.js component trong tệp: pages/index.js

import { useSession, signIn, signOut } from "next-auth/react";
import { useEffect, useState } from "react";

export default function Home() {
  const { data: session } = useSession();
  const [files, setFiles] = useState([]);

  useEffect(() => {
    if (session) {
      fetch("/api/drive")
        .then((res) => res.json())
        .then((data) => setFiles(data));
    }
  }, [session]);

  return (
    <div>
      {session ? (
        <>
          <p>Welcome, {session.user.name}</p>
          <button onClick={() => signOut()}>Sign Out</button>
          <h2>Your Google Drive Files:</h2>
          <ul>
            {files.map((file) => (
              <li key={file.id}>{file.name} ({file.mimeType})</li>
            ))}
          </ul>
        </>
      ) : (
        <button onClick={() => signIn("google")}>Sign In with Google</button>
      )}
    </div>
  );
}

Cách hoạt động:

Hiển thị nút đăng nhập nếu người dùng chưa xác thực.
Sau khi đăng nhập, hiển thị danh sách tệp từ Google Drive.
Hiển thị nút đăng xuất để kết thúc phiên làm việc.

Bước 6: Bảo mật API và triển khai ứng dụng

Hãy đảm bảo rằng Client ID và Client Secret của Google OAuth không bị lộ bằng cách lưu chúng vào tệp .env.local:

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
NEXTAUTH_SECRET=your-random-secret

Triển khai ứng dụng Next.js bằng Vercel hoặc nhà cung cấp dịch vụ lưu trữ mà bạn ưa thích.

Kết luận

Trong bài viết này, chúng ta đã học cách kết nối Google Drive với Next.js bằng cách:

Cấu hình NextAuth.js để xác thực người dùng Google.
Tạo API route để truy cập tệp từ Google Drive.
Xây dựng giao diện đơn giản để hiển thị tệp.
Bảo mật thông tin và triển khai ứng dụng trực tuyến.

Từ đây, bạn có thể mở rộng dự án để tạo trình quản lý tệp cá nhân, công cụ chia sẻ tệp, hoặc hệ thống lưu trữ tài liệu đám mây.

Cảm ơn các bạn đã theo dõi!

nextjs