本地主机refine npm dev中谷歌账户登录问题

Question

每当我尝试在本地主机中启动 run dev 命令时，它都会要求谷歌帐户登录，但是当我选择登录时，提示不会显示任何要继续的谷歌帐户。我正在从事 REFINE 项目。

我尝试刷新多次，甚至更换浏览器，但仍然面临同样的问题。我已经在该浏览器中使用我的 Gmail 帐户登录，但它仍然没有显示我的帐户以继续我的 REFINE 应用程序设置。

import { useEffect, useRef } from "react";
import { useLogin } from "@pankod/refine-core";
import { Container, Box } from "@pankod/refine-mui";

import { yariga } from '../assets';

import { CredentialResponse } from "../interfaces/google";

export const Login: React.FC = () => {
const { mutate: login } = useLogin<CredentialResponse>();

const GoogleButton = (): JSX.Element => {
const divRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  if (typeof window === "undefined" || !window.google || !divRef.current) {
    return;
  }

  try {
    window.google.accounts.id.initialize({
      ux_mode: "popup",
      client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
        callback: async (res: CredentialResponse) => {
        if (res.credential) {
          login(res);
        }
      },
    });
    window.google.accounts.id.renderButton(divRef.current, {
      theme: "filled_blue",
      size: "medium",
      type: "standard",
    });
  } catch (error) {
    console.log(error);
  }
}, []); // you can also add your client id as dependency here

return <div ref={divRef} />;
};

return (
<Box
  component="div"
  sx={{
    backgroundColor: '#FCFCFC'
  }}
>
  <Container
    component="main"
    maxWidth="xs"
    sx={{
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      height: "100vh",
    }}
  >
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <div>
        <img src={yariga} alt="Yariga Logo" />
      </div>
      <Box mt={4}>
        <GoogleButton />
      </Box>
    </Box>
  </Container>
</Box>
  );
  };

Answer 1

我检查了https://github.com/refinedev/refine/tree/next/examples/auth-google-login示例。它按预期工作。

Google登录的问题在refine Discord服务器中已被多次提出，并且始终与实现细节有关。事实上，使用fine实现Google登录与任何其他React应用程序没有什么不同。我将在这里分享来自 Fine Discord 服务器的一些答案。

1. 您可以观看此视频https://www.youtube.com/watch?v=HtJKUQXmtok
2. 给定的客户端 ID (GSI) 不允许使用给定的来源