Next Js Google Auth

Question

我是前端开发新手，目前正在尝试在我的登录中实现 Google 登录。当我点击“使用谷歌登录”时，我希望我的前端将谷歌令牌发送到我的后端。

单击此按钮时，我不知道如何，但在我的前端中，我想将谷歌令牌发送到我的后端进行验证。

  <a className={styles.continue_with_email} href="">
        Continue With Email
      </a>

这可能吗？ 如果您没有听清我的问题，我很抱歉。

Answer 1

1. 安装谷歌oauth包

npm install @react-oauth/google@latest

2. 获取您的 Google API 客户端 ID （此处）

3. 配置您的 OAuth 同意屏幕 （此处）

4. 使用 GoogleOAuthProvider 包装您的应用程序并创建按钮。

import { GoogleOAuthProvider, GoogleLogin } from "@react-oauth/google";

export default function LoginByGoogleComponent() {
  const handleLogin = (credentialResponse) => {
    // this contains the response from google you can get the token from here
    console.log(credentialResponse);
  };

  const handleLoginError = (err) => {
    console.log("Login Failed");
  };

  return (
    <GoogleOAuthProvider clientId="<your_client_id>">
      <GoogleLogin onSuccess={handleLogin} onError={handleLoginError} />
    </GoogleOAuthProvider>
  );
}