Google 一键登录有效，但正常的 google 登录不起作用

Question

import React, { useState, useRef, useEffect } from 'react';
import { jwtDecode } from 'jwt-decode';
import axios from 'axios';
import { FcGoogle } from 'react-icons/fc';

const GoogleOneTapLogin = ({ setNavigateHome }) => {
    const googleButton = useRef(null);

    const [displayType, setDisplayType] = useState('flex');
    const [gBtnDisplay, setGBtnDisplay] = useState('none');

    const handleResponse = async (response) => {
        const token = response.credential;
        const { sub: uid, email, name, picture: photoURL } = jwtDecode(token);
        const username = email.split('@')[0];
        const config = {
            headers: {
                'Content-type': 'application/json',
            },
        };
        await axios
            .post(
                `${import.meta.env.VITE_APP_SERVER_URL}/api/user/googleSignUp`,
                {
                    uid,
                    email,
                    name,
                    photoURL,
                    username,
                },
                config
            )
            .then((result) => {
                const user = result.data.result;
                window.localStorage.setItem(
                    'sketchApp',
                    JSON.stringify({ email: user.email, isSignedIn: true })
                );

                setNavigateHome((prev) => !prev);
            })
            .catch((error) => {
                console.log(error);
                alert('Something went wrong, please try again later.');
            });
    };

    const handleGoogleLogIn = () => {
        try {
            window.google.accounts.id.initialize({
                client_id: import.meta.env.VITE_GOOGLE_CLIENT_ID,
                use_fedcm_for_prompt: true,
                auto_select: true,
                cancel_on_tap_outside: false,
                callback: handleResponse,
                prompt_parent_id: 'googleButtonId',
                itp_support: true,
                ux_mode: 'popup',
            });

            window.google.accounts.id.prompt();
            window.google.accounts.id.renderButton(googleButton.current, {
                theme: 'outline',
                size: 'large',
                logo_alignment: 'left',
                locale: 'en_US',
                text: 'continue_with',
                width: 280,
                click_listener: () => {
                    console.log('clicked');
                    window.google.accounts.id.cancel();
                    setDisplayType('none');
                    setGBtnDisplay('flex');
                },
            });
        } catch (error) {
            console.log(error);
            alert('Log In Failed. Please try again');
        }
    };
    return (
        <React.Fragment>
            <button
                className="googleButton bg-green-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded flex justify-center items-center"
                style={{
                    display: displayType,
                    width: 'fit-content',
                    marginTop: '1rem',
                }}
                onClick={handleGoogleLogIn}
            >
                <FcGoogle className="mr-2 text-2xl" />
                Login with Google
            </button>
            <div style={{ display: gBtnDisplay }} ref={googleButton}></div>
        </React.Fragment>
    );
};

export default GoogleOneTapLogin;

这是我的谷歌登录代码。 在这里，一键登录可以工作，但是普通的谷歌登录不起作用。

在执行一些console.logs后，我发现，当用户单击十字按钮一键登录时，不会调用click_listener函数。

另外，我猜问题可能是由于 FedCM 的一些新限制造成的。

提前致谢

Answer 1

click_listener 回调仅适用于按钮。对于“一键点击”，您需要使用 PromptMomentNotification。