0
327
ViewsComportamiento extraño de Google Auth OAuth 2.0 SvelteKit
Estoy usando Google Auth OAuth 2.0 One Tap Sign y Sveltekit, y obtuve un comportamiento realmente extraño, seguí este documento https://developers.google.com/identity/gsi/web/guides/overview con javascript
onMount(async () => { const handleCredentialResponse = async (response) => { console.log('Encoded JWT ID token: ' + response.credential); }; google.accounts.id.initialize({ client_id: clientId, callback: handleCredentialResponse, }); google.accounts.id.renderButton( document.getElementById('buttonDiv'), { theme: 'outline', size: 'large' } // customization attributes ); google.accounts.id.prompt(); });A veces funciona todo sale bien,
A veces tengo
- Uncaught (en promesa) ReferenceError: google no está definido Y algunos navegadores móviles / móviles obtengo
- [GSI_LOGGER]: el origen dado no está permitido para el ID de cliente dado. pero funciona en la computadora portátil
Espero que alguien pueda entender y ayudar.
¿Tenemos alguna forma de comprobar los registros para la investigación?
1 answers
Answer question0
Obtuve su código para ejecutarlo correctamente sin modificaciones: https://google-signin-kit.vercel.app/ (Esta aplicación está en modo "dev", por lo que es posible que el inicio de sesión solo sea exitoso con mi cuenta de Google. Si clona mi repositorio y configura su identificación de cliente de Google, el inicio de sesión funcionará para usted).
Verificaría cómo mi código es diferente de su código fuera de onMount() . Por ejemplo, ¿cómo incluiste el javascript de Google? Describo un cambio importante a continuación.
También debe verificar la configuración de su aplicación de Google. [GSI_LOGGER]: The given origin is not allowed... se corrige agregando el dominio de la aplicación HTTPS a su aplicación de Google "Orígenes de JavaScript autorizados". No se permiten dominios que no sean HTTPS. Por ejemplo, estos dominios no funcionarían:
- https://google-signin-kit-leftium.vercel.app/ (No agregado como origen de JavaScript autorizado)
- http://google-signin-kit.vercel.app/ (No HTTPS, si Vercel no redirigió automáticamente a HTTPS)
- Por supuesto, las direcciones IP sin procesar tampoco funcionarán.
-
localhostes una excepción especial, pero no fácil (¿imposible?) de acceder desde el móvil.
ReferenceError: google is not defined (a veces) sucede porque onMount() se ejecuta antes de que se cargue el script de Google.
- Para obtener una reproducción consistente, depure/inspeccione el USB de Android Chrome y configure "deshabilitar el almacenamiento en caché" y la aceleración en "3G lento". (No pude reproducir en Chrome de escritorio).
- Se solucionó eliminando la
defer asyncal incluir el script de Google:<script src="https://accounts.google.com/gsi/client"></script> - También debería ser posible llamar a una función después de cargar el script , pero obtuve resultados inconsistentes en SvelteKit. Por alguna razón, Kit no siempre llama a la función de carga. ¿Posiblemente un error?
- Idealmente, la secuencia de comandos de Google debería
import, pero no pude encontrar una versión de la secuencia de comandos de Google creada para importar. ¿Es posible que pueda construir una biblioteca que pueda importar? La importación compilaría el código de secuencia de comandos de Google en su aplicación, sacudiendo las porciones no utilizadas. Ahorrando así una solicitud de red y ancho de banda. - Otra solución es hacer que su función
onMountverifique la variable degoogle. Sigoogleaún no está definido, vuelva a llamar a su función después de un cierto tiempo de espera.