Este es mi código. He configurado correctamente el ID de cliente.
una vez que hago clic en un botón con id 'buttonDiv', se muestra una ventana emergente, si no existe una cuenta de usuario, se me pide que inicie sesión, una vez que inicie sesión, tengo que elegir el correo electrónico para autenticarme, pero aparece un espacio en blanco en su lugar
import { Box, Button, Typography } from '@mui/material'; import Divider from 'components/Divider'; function handleCredentialResponse(response) { console.log("Encoded JWT ID token: " + response.credential); } function GoogleComponent({ action, isLoginPage }) { const classes = useStyles(); window.onload = function () { window.google.accounts.id.initialize({ client_id: process.env.REACT_APP_CLIENT_ID, callback: handleCredentialResponse, scope: 'email', ux_mode: 'popup', }); window.google.accounts.id.renderButton( document.getElementById("buttonDiv"), { theme: "outline", size: "large" } // customization attributes ); window.google.accounts.id.prompt(); // also display the One Tap dialog } return ( <Box className={classes.box}> <div id="buttonDiv"></div> </Box> ); } export default GoogleComponent; cuando cambio el ux_mode: 'redirect' funciona, pero no es así como lo quiero.
Necesito una ventana emergente para devolver un código y luego usar el código para hacer una solicitud de publicación a la API de back-end
He agregado http://localhost y http://localhost:3000 a los dominios autorizados en la consola en la nube.
¿Qué me podría estar perdiendo?
Intente mirar la consola de la ventana emergente en blanco (haga clic con el botón derecho -> Inspeccionar -> Consola). Podría ofrecer algunas ideas sobre el motivo de su falla al renderizar.
Por ejemplo, obtengo "[GSI_LOGGER]: el origen dado no está permitido para el ID de cliente dado". Su problema probablemente sea otro porque 'redireccionar' funciona para usted (para mí falla con el mismo error), pero al menos un error podría indicarle la dirección correcta.