Làm chức năng đăng ký bằng google cho nextjs typescript với wordpress. đọc thêm

Để xây dựng chức năng đăng ký bằng Google trong ứng dụng Next.js (sử dụng TypeScript) và tích hợp với WordPress, đồng thời xử lý trường hợp WordPress yêu cầu mật khẩu, bạn cần thực hiện một số bước cụ thể. Dưới đây là hướng dẫn chi tiết:

Tổng quan

  1. Next.js Frontend: Sử dụng NextAuth.js để triển khai đăng nhập bằng Google.

  2. WordPress Backend: Tích hợp WordPress làm nguồn dữ liệu người dùng, sử dụng REST API hoặc JWT Authentication plugin để quản lý người dùng.

  3. Xử lý đặc biệt: Nếu WordPress yêu cầu mật khẩu (ví dụ, khi tạo tài khoản mới hoặc đăng nhập lần đầu), bạn cần sinh mật khẩu ngẫu nhiên hoặc yêu cầu người dùng nhập thêm mật khẩu.

Tôi sẽ chia hướng dẫn thành các bước cụ thể với mã TypeScript.

Bước 1: Cài đặt Next.js và NextAuth.jsTạo một dự án Next.js với TypeScript:bash

npx create-next-app@latest --ts my-nextjs-app
cd my-nextjs-app
npm install next-auth

Bước 2: Cấu hình NextAuth.js với Google Provider

  1. Thêm biến môi trường: Tạo file .env.local trong thư mục gốc và thêm các biến sau:env

    GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-random-secret
WORDPRESS_API_URL=http://your-wordpress-site/wp-json

    • GOOGLE_CLIENT_ID và GOOGLE_CLIENT_SECRET lấy từ Google Developer Console.

    • NEXTAUTH_SECRET là chuỗi ngẫu nhiên để mã hóa token (tạo bằng lệnh openssl rand -base64 32).

    • WORDPRESS_API_URL là URL của WordPress REST API.

  2. Cấu hình NextAuth: Tạo file pages/api/auth/[...nextauth].ts:typescript

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

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    async signIn({ user, account, profile }) {
      // Gọi WordPress API để kiểm tra hoặc tạo người dùng
      try {
        const wpApiUrl = `${process.env.WORDPRESS_API_URL}/wp/v2/users`;
        const wpResponse = await axios.get(`${wpApiUrl}?search=${user.email}`, {
          headers: {
            Authorization: `Bearer your-jwt-token`, // Nếu WordPress dùng JWT
          },
        });

        if (wpResponse.data.length > 0) {
          // Người dùng đã tồn tại trong WordPress
          return true;
        } else {
          // Tạo người dùng mới trong WordPress
          const newUser = await axios.post(
            wpApiUrl,
            {
              username: user.email?.split("@")[0], // Tạo username từ email
              email: user.email,
              password: generateRandomPassword(), // Sinh mật khẩu ngẫu nhiên
              name: user.name,
            },
            {
              headers: {
                Authorization: `Bearer your-jwt-token`,
              },
            }
          );
          return true;
        }
      } catch (error) {
        console.error("Error with WordPress integration:", error);
        return false;
      }
    },
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
    async session({ session, token }) {
      session.user.id = token.id as string;
      return session;
    },
  },
});

// Hàm sinh mật khẩu ngẫu nhiên
function generateRandomPassword() {
  return Math.random().toString(36).slice(-8); // Mật khẩu 8 ký tự ngẫu nhiên
}

Bước 3: Tích hợp với WordPress

  1. Cài đặt plugin trên WordPress: Để WordPress hỗ trợ REST API và quản lý người dùng:

    • Cài plugin JWT Authentication for WP REST API để xác thực qua token.

    • Đảm bảo REST API của WordPress được bật (mặc định từ phiên bản 4.7).

  2. Lấy JWT Token: Đăng ký một tài khoản quản trị viên trên WordPress và lấy token từ endpoint /wp-json/jwt-auth/v1/token để sử dụng trong các yêu cầu API.

  3. Xử lý trường hợp yêu cầu mật khẩu:

    • Nếu WordPress yêu cầu mật khẩu cho người dùng mới, hàm generateRandomPassword() sẽ tạo một mật khẩu ngẫu nhiên.

    • Để tăng trải nghiệm người dùng, bạn có thể gửi email chứa mật khẩu này hoặc yêu cầu người dùng nhập mật khẩu bổ sung sau khi đăng nhập bằng Google.

Bước 4: Giao diện đăng nhập trên Next.jsTạo file pages/index.tsx để hiển thị nút đăng nhập:typescript

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

export default function Home() {
  const { data: session } = useSession();

  if (session) {
    return (
      <div>
        <p>Xin chào, {session.user?.name}</p>
        <button onClick={() => signOut()}>Đăng xuất</button>
      </div>
    );
  }

  return (
    <div>
      <button onClick={() => signIn("google")}>Đăng nhập bằng Google</button>
    </div>
  );
}

Bước 5: Xử lý đặc biệt khi WordPress yêu cầu mật khẩuNếu WordPress yêu cầu người dùng phải có mật khẩu để đăng nhập trực tiếp (không qua Google), bạn có thể:

  1. Sinh mật khẩu ngẫu nhiên và gửi qua email:

    • Sử dụng plugin WordPress như WP Mail SMTP để gửi email chứa mật khẩu ngẫu nhiên sau khi tạo người dùng.

  2. Yêu cầu người dùng nhập mật khẩu bổ sung:

    • Sau khi đăng nhập bằng Google, hiển thị một form để người dùng nhập mật khẩu mong muốn và cập nhật vào WordPress:typescript

      import { useState } from "react";
import axios from "axios";

export default function SetPassword() {
  const { data: session } = useSession();
  const [password, setPassword] = useState("");

  const handleSubmit = async () => {
    await axios.post(
      `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/wp/v2/users/me`,
      { password },
      {
        headers: {
          Authorization: `Bearer your-jwt-token`,
        },
      }
    );
    alert("Mật khẩu đã được cập nhật!");
  };

  if (!session) return null;

  return (
    <div>
      <h1>Thiết lập mật khẩu cho tài khoản WordPress</h1>
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleSubmit}>Lưu mật khẩu</button>
    </div>
  );
}

Bước 6: Kiểm tra và triển khai

  • Chạy ứng dụng Next.js:bash

    npm run dev

  • Truy cập http://localhost:3000 và kiểm tra chức năng đăng nhập bằng Google.

  • Đảm bảo WordPress API hoạt động bình thường và xử lý đúng các yêu cầu.

Lưu ý

  1. Bảo mật: Sử dụng HTTPS cho cả Next.js và WordPress để bảo vệ thông tin người dùng.

  2. Tùy chỉnh: Nếu bạn muốn kiểm soát sâu hơn (ví dụ: vai trò người dùng trong WordPress), hãy mở rộng dữ liệu gửi trong yêu cầu API.

  3. Hiệu suất: Có thể dùng Redis hoặc cơ chế cache để lưu trữ phiên đăng nhập, tránh gọi API WordPress liên tục.

Với cách tiếp cận này, bạn đã tích hợp thành công đăng nhập bằng Google trong Next.js với WordPress, đồng thời xử lý trường hợp đặc biệt khi WordPress yêu cầu mật khẩu. Nếu cần thêm chi tiết, hãy cho tôi biết!

PreviousCách mở rộng interface, type trong core nextjs (ok)NextNgười dùng đã có, không cần đăng nhập lại qua WordPress tôi muốn chuyển qua trang khác đọc thêm

Last updated

Was this helpful?