Đă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ý đặc biệt trường hợp WordPress yêu cầu mật khẩu, chúng ta sẽ cần kết hợp NextAuth.js (cho xác thực Google), WordPress REST API (để đăng ký người dùng), và một số logic tùy chỉnh. Dưới đây là hướng dẫn chi tiết từng bước:

---

Tổng quan

1. Mục tiêu: Người dùng đăng nhập bằng Google qua Next.js, sau đó thông tin được gửi đến WordPress để tạo tài khoản. Nếu WordPress yêu cầu mật khẩu, ta sẽ sinh mật khẩu ngẫu nhiên hoặc yêu cầu người dùng nhập thêm.

2. Công cụ:

   • Next.js với TypeScript.

   • NextAuth.js để xác thực Google.

   • WordPress REST API để tạo người dùng.

3. Xử lý đặc biệt: WordPress mặc định yêu cầu mật khẩu khi tạo người dùng qua API, nên ta cần sinh mật khẩu tự động hoặc thêm bước yêu cầu người dùng nhập.

---

Bước 1: Thiết lập dự án Next.js với TypeScriptNếu chưa có dự án, chạy lệnh sau:bash

npx create-next-app@latest --typescript my-app
cd my-app

Cài đặt NextAuth.js:bash

npm install next-auth

---

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

1. Tạo Google OAuth Credentials:

   • Truy cập Google Cloud Console.

   • Tạo một dự án mới, vào "APIs & Services" > "Credentials".

   • Tạo "OAuth 2.0 Client ID" với các thông tin:

     • Authorized JavaScript origins: http://localhost:3000

     • Authorized redirect URIs: http://localhost:3000/api/auth/callback/google

   • Lưu lại Client ID và Client Secret.

2. Tạo file cấu hình NextAuth: Trong thư mục pages/api/auth, tạo file [...nextauth].ts:typescript

   import NextAuth from "next-auth";
   import GoogleProvider from "next-auth/providers/google";
   
   export default NextAuth({
     providers: [
       GoogleProvider({
         clientId: process.env.GOOGLE_CLIENT_ID as string,
         clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
       }),
     ],
     callbacks: {
       async signIn({ user, account, profile }) {
         // Xử lý đăng ký với WordPress tại đây
         return true;
       },
       async session({ session, token }) {
         session.user.id = token.sub; // Lưu ID người dùng từ Google
         return session;
       },
     },
   });

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

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

---

Bước 3: Tích hợp với WordPress REST APIWordPress không cung cấp endpoint đăng ký người dùng mặc định qua REST API công khai, nên bạn cần:

1. Kích hoạt đăng ký người dùng trong WordPress:

   • Vào WordPress Admin > Settings > General, bật "Anyone can register".

   • Cài plugin như WP REST API Authentication hoặc JWT Authentication for WP REST API để xác thực API.

2. Tạo endpoint tùy chỉnh trong WordPress: Thêm code sau vào file functions.php của theme WordPress:php

   add_action('rest_api_init', function () {
       register_rest_route('custom/v1', '/register', [
           'methods' => 'POST',
           'callback' => 'register_user_with_google',
           'permission_callback' => '__return_true', // Điều chỉnh quyền nếu cần
       ]);
   });
   
   function register_user_with_google($request) {
       $email = sanitize_email($request['email']);
       $username = sanitize_user($request['username']);
       $name = sanitize_text_field($request['name']);
       $password = $request['password'] ?? wp_generate_password(12, true); // Sinh mật khẩu nếu không có
   
       if (email_exists($email) || username_exists($username)) {
           return new WP_Error('user_exists', 'User already exists', ['status' => 400]);
       }
   
       $user_id = wp_create_user($username, $password, $email);
       if (is_wp_error($user_id)) {
           return $user_id;
       }
   
       wp_update_user(['ID' => $user_id, 'display_name' => $name]);
       return ['success' => true, 'user_id' => $user_id];
   }

---

Bước 4: Xử lý đăng ký trong Next.jsCập nhật callback signIn trong [...nextauth].ts để gửi thông tin người dùng từ Google sang WordPress: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 as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  callbacks: {
    async signIn({ user, account, profile }) {
      try {
        const wordpressApiUrl = `${process.env.WORDPRESS_API_URL}/custom/v1/register`;
        const response = await axios.post(wordpressApiUrl, {
          email: user.email,
          username: user.email.split("@")[0], // Tạo username từ email
          name: user.name,
          // Không gửi password, để WordPress tự sinh
        });

        if (response.data.success) {
          user.wordpressId = response.data.user_id; // Lưu ID từ WordPress nếu cần
          return true;
        }
        return false;
      } catch (error) {
        console.error("Error registering with WordPress:", error);
        return false;
      }
    },
    async session({ session, token }) {
      session.user.id = token.sub;
      return session;
    },
  },
});

Xử lý đặc biệt nếu WordPress yêu cầu mật khẩuNếu bạn muốn người dùng tự nhập mật khẩu thay vì tự động sinh:

1. Thêm form nhập mật khẩu: Tạo trang /pages/register-password.tsx:typescript

   import { useSession, signIn } from "next-auth/react";
   import { useState } from "react";
   import { useRouter } from "next/router";
   
   const RegisterPasswordPage = () => {
     const { data: session } = useSession();
     const [password, setPassword] = useState("");
     const router = useRouter();
   
     const handleSubmit = async (e: React.FormEvent) => {
       e.preventDefault();
       if (session) {
         const response = await fetch(`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/custom/v1/register`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             email: session.user.email,
             username: session.user.email.split("@")[0],
             name: session.user.name,
             password, // Gửi mật khẩu người dùng nhập
           }),
         });
   
         if (response.ok) {
           router.push("/"); // Chuyển hướng sau khi thành công
         }
       }
     };
   
     return (
       <div>
         <h1>Enter a Password for WordPress</h1>
         <form onSubmit={handleSubmit}>
           <input
             type="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
           />
           <button type="submit">Register</button>
         </form>
         <button onClick={() => signIn("google")}>Sign in with Google</button>
       </div>
     );
   };
   
   export default RegisterPasswordPage;

2. Điều hướng sau khi đăng nhập Google: Trong callback signIn, nếu cần mật khẩu, điều hướng người dùng đến trang nhập mật khẩu:typescript

   async signIn({ user, account, profile }) {
     const wordpressApiUrl = `${process.env.WORDPRESS_API_URL}/custom/v1/register`;
     const response = await axios.post(wordpressApiUrl, {
       email: user.email,
       username: user.email.split("@")[0],
       name: user.name,
     }).catch(() => null);
   
     if (!response?.data.success) {
       return "/register-password"; // Điều hướng đến trang nhập mật khẩu
     }
     return true;
   }

---

Bước 5: Giao diện đăng nhậpTạo file pages/index.tsx:typescript

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

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

  if (session) {
    return (
      <div>
        <p>Welcome, {session.user.name}!</p>
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    );
  }

  return (
    <div>
      <button onClick={() => signIn("google")}>Sign in with Google</button>
    </div>
  );
}

---

Bước 6: Chạy và kiểm tra

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

   npm run dev

2. Truy cập http://localhost:3000, nhấp "Sign in with Google".

3. Sau khi đăng nhập, nếu WordPress cần mật khẩu, người dùng sẽ được chuyển đến trang nhập mật khẩu.

---

Lưu ý

• Bảo mật: Sử dụng JWT hoặc Basic Auth để bảo vệ endpoint WordPress API.

• Xử lý lỗi: Thêm thông báo lỗi trên giao diện nếu đăng ký thất bại.

• Tùy chỉnh: Có thể lưu thêm thông tin từ Google (như avatar) vào WordPress bằng cách mở rộng hàm wp_update_user.

Hy vọng hướng dẫn này giúp bạn tích hợp thành công! Nếu cần thêm chi tiết, hãy cho tôi biết.Chi tiết NextAuth.jsTôi sẽ cung cấp chi tiết hơn về cách sử dụng NextAuth.js trong ứng dụng Next.js với TypeScript, tập trung vào cấu hình, các tùy chọn, và cách tích hợp với Google cũng như WordPress như bạn yêu cầu. Dưới đây là hướng dẫn chi tiết từng phần.

---

NextAuth.js là gì?NextAuth.js là một thư viện xác thực mã nguồn mở dành cho Next.js, hỗ trợ nhiều nhà cung cấp (Google, Facebook, GitHub, v.v.) và dễ dàng tích hợp xác thực vào ứng dụng. Với TypeScript, nó cung cấp kiểu dữ liệu mạnh mẽ để đảm bảo code an toàn và dễ bảo trì.

---

Bước 1: Cài đặt và cấu hình cơ bảnCài đặtĐảm bảo bạn đã cài đặt NextAuth.js:bash

npm install next-auth

Tạo file cấu hìnhTạo file pages/api/auth/[...nextauth].ts trong dự án Next.js. Đây là nơi bạn định nghĩa các nhà cung cấp (providers), callbacks, và các tùy chọn khác.Cấu hình cơ bản với Google:typescript

import NextAuth, { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

// Định nghĩa kiểu cho options để TypeScript hỗ trợ tốt hơn
export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET, // Khóa bí mật để mã hóa session
  pages: {
    signIn: "/auth/signin", // Trang tùy chỉnh để đăng nhập (tùy chọn)
  },
};

export default NextAuth(authOptions);

Biến môi trườngThêm các biến sau vào .env.local:env

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
NEXTAUTH_SECRET=your-secret-key-here # Tạo chuỗi ngẫu nhiên dài để mã hóa session
NEXTAUTH_URL=http://localhost:3000

• NEXTAUTH_SECRET: Dùng để ký và mã hóa JWT (JSON Web Token) cho session. Tạo chuỗi ngẫu nhiên bằng lệnh openssl rand -base64 32 nếu cần.

• NEXTAUTH_URL: URL gốc của ứng dụng, cần thiết khi deploy.

---

Bước 2: Các thành phần chính của NextAuth.js1. ProvidersProviders định nghĩa cách người dùng đăng nhập. Ở đây ta dùng Google:typescript

GoogleProvider({
  clientId: process.env.GOOGLE_CLIENT_ID as string,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
  authorization: {
    params: {
      prompt: "consent", // Yêu cầu người dùng xác nhận mỗi lần đăng nhập
      access_type: "offline", // Lấy refresh token nếu cần
      response_type: "code",
    },
  },
}),

• authorization: Tùy chỉnh yêu cầu OAuth, ví dụ yêu cầu quyền truy cập thêm (scopes).

2. CallbacksCallbacks cho phép tùy chỉnh luồng xác thực. Các callback quan trọng:

• signIn: Xử lý khi người dùng đăng nhập thành công với Google.

• jwt: Tùy chỉnh token JWT.

• session: Tùy chỉnh dữ liệu session trả về cho client.

Ví dụ tích hợp với WordPress:typescript

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

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    async signIn({ user, account, profile }) {
      // Gửi thông tin người dùng đến WordPress
      try {
        const wordpressApiUrl = `${process.env.WORDPRESS_API_URL}/custom/v1/register`;
        const response = await axios.post(wordpressApiUrl, {
          email: user.email,
          username: user.email?.split("@")[0],
          name: user.name,
          password: wp_generate_password(), // Sinh mật khẩu ngẫu nhiên
        });

        if (response.data.success) {
          user.wordpressId = response.data.user_id; // Lưu ID WordPress vào user object
          return true; // Cho phép đăng nhập
        }
        return false; // Từ chối nếu đăng ký thất bại
      } catch (error) {
        console.error("Error registering with WordPress:", error);
        return false;
      }
    },
    async jwt({ token, user }) {
      // Thêm thông tin từ user vào token sau khi đăng nhập lần đầu
      if (user) {
        token.wordpressId = user.wordpressId;
      }
      return token;
    },
    async session({ session, token }) {
      // Thêm thông tin từ token vào session
      session.user.wordpressId = token.wordpressId as string;
      return session;
    },
  },
};

// Hàm sinh mật khẩu ngẫu nhiên (tương tự WordPress)
function wp_generate_password(length = 12): string {
  const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()";
  return Array(length)
    .fill(chars)
    .map((x) => x[Math.floor(Math.random() * x.length)])
    .join("");
}

export default NextAuth(authOptions);

• signIn: Gửi yêu cầu đến WordPress API để tạo người dùng. Nếu WordPress yêu cầu mật khẩu, ta sinh ngẫu nhiên bằng hàm wp_generate_password.

• jwt: Lưu trữ dữ liệu bổ sung (như wordpressId) vào token.

• session: Truyền dữ liệu từ token sang session để client truy cập.

3. SessionNextAuth.js quản lý session bằng JWT mặc định (hoặc database nếu cấu hình). Để kiểm tra session phía client, dùng hook useSession:typescript

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

const MyComponent = () => {
  const { data: session, status } = useSession();

  if (status === "loading") return <p>Loading...</p>;
  if (session) return <p>Welcome, {session.user.name}! WordPress ID: {session.user.wordpressId}</p>;
  return <p>Not signed in</p>;
};

---

Bước 3: Tùy chỉnh giao diệnTrang đăng nhập tùy chỉnhTạo file pages/auth/signin.tsx:typescript

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

export default function SignIn({ providers }) {
  return (
    <div>
      <h1>Sign In</h1>
      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button onClick={() => signIn(provider.id)}>
            Sign in with {provider.name}
          </button>
        </div>
      ))}
    </div>
  );
}

export async function getServerSideProps() {
  const providers = await getProviders();
  return {
    props: { providers },
  };
}

Thêm vào authOptions:typescript

pages: {
  signIn: "/auth/signin",
},

Đăng xuấtDùng signOut từ next-auth/react:typescript

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

<button onClick={() => signOut()}>Sign out</button>;

---

Bước 4: Xử lý trường hợp WordPress yêu cầu mật khẩuNếu WordPress yêu cầu người dùng nhập mật khẩu thay vì tự động sinh:

1. Điều hướng trong signIn:

typescript

async signIn({ user, account, profile }) {
  const wordpressApiUrl = `${process.env.WORDPRESS_API_URL}/custom/v1/register`;
  const response = await axios.post(wordpressApiUrl, {
    email: user.email,
    username: user.email?.split("@")[0],
    name: user.name,
  }).catch(() => null);

  if (!response?.data.success) {
    return "/auth/register-password"; // Điều hướng đến trang nhập mật khẩu
  }
  return true;
},

1. Trang nhập mật khẩu (pages/auth/register-password.tsx):

typescript

import { useSession, signIn } from "next-auth/react";
import { useState } from "react";
import { useRouter } from "next/router";

const RegisterPasswordPage = () => {
  const { data: session } = useSession();
  const [password, setPassword] = useState("");
  const router = useRouter();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!session) return;

    const response = await fetch(`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/custom/v1/register`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: session.user.email,
        username: session.user.email?.split("@")[0],
        name: session.user.name,
        password,
      }),
    });

    if (response.ok) {
      router.push("/"); // Chuyển hướng sau khi thành công
    }
  };

  return (
    <div>
      <h1>Enter a Password for WordPress</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <button type="submit">Register</button>
      </form>
    </div>
  );
};

export default RegisterPasswordPage;

---

Bước 5: Các tùy chọn nâng caoSử dụng databaseMặc định, NextAuth.js dùng JWT cho session. Nếu muốn lưu session vào database (như PostgreSQL, MySQL), thêm adapter:bash

npm install @next-auth/prisma-adapter prisma @prisma/client

Cấu hình trong [...nextauth].ts:typescript

import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  // ...
};

Thêm scope tùy chỉnhĐể lấy thêm thông tin từ Google (ví dụ: avatar), thêm scope:typescript

GoogleProvider({
  clientId: process.env.GOOGLE_CLIENT_ID as string,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
  authorization: {
    params: {
      scope: "openid email profile",
    },
  },
}),

---

Bước 6: Debugging và triển khai

• Debug: Thêm debug: true vào authOptions để xem log chi tiết trong console.

• Triển khai: Đảm bảo NEXTAUTH_URL khớp với domain production (ví dụ: https://your-app.com).

---

Kết luậnNextAuth.js rất linh hoạt và mạnh mẽ khi tích hợp xác thực Google với Next.js và WordPress. Với TypeScript, bạn được hỗ trợ kiểu dữ liệu tốt, giảm lỗi khi phát triển. Nếu cần thêm ví dụ cụ thể hoặc giải thích chi tiết hơn về một phần nào đó, hãy cho tôi biết!