Aparentemente, Google está descontinuando el servicio para gapi.oauth2 . Estoy tratando de usar sus nuevas herramientas para Iniciar sesión con Google, pero son muy confusas.

Estructura del proyecto
Tengo una interfaz de Vue donde necesito permitir que los usuarios inicien sesión con google. Luego necesito usar el flujo del servidor OIDC para autenticarlos en mi backend.

Mi estructura de archivos es la estructura predeterminada que le proporciona la CLI de Vue.

Seguí estos documentos , pero no explican cómo darle al usuario la oportunidad de iniciar sesión. ¿Cómo iniciamos todo el flujo? Pensé que tal vez el flujo se inició con el nuevo botón Iniciar sesión con Google , pero no puedo entender cómo hacer que este botón funcione.

Así es como estoy intentando las cosas ahora:

En App.vue tengo lo siguiente

 created() { loadGSIClient().then((this.GSILoaded = true)); }

googleAuth.js

 export function loadGSIClient() { console.log("loading GSI"); return new Promise((resolve, reject) => { const script = document.createElement("script"); script.src = "https://accounts.google.com/gsi/client"; script.onload = () => { var client = window.google.accounts.oauth2.initCodeClient({ client_id: process.env.VUE_APP_CLIENT_ID, scope: "https://www.googleapis.com/auth/calendar.readonly", ux_mode: "redirect", redirect_uri: "http://localhost:5001/sig-wig/us-central1/handleRedirect", }); resolve(client); }; script.onerror = (message, url, line, column, error) => { reject({ message, url, line, column, error }); }; }); }

Luego, en mi archivo de inicio de sesión AccessRequest tengo

 created() { var google = window.google; google.accounts.id.initialize({ client_id: process.env.VUE_APP_CLIENT_ID, callback: () => { "I'm a callback"; }, }); google.accounts.id.renderButton( document.getElementById("buttonDiv"), { theme: "outline", size: "large" } // customization attributes ); },

Sin embargo, esa configuración siempre arroja el error Error in created hook: "TypeError: Cannot read properties of undefined (reading 'accounts')"

Entonces parece que window.google existe cuando estoy en App.vue pero no en AccessRequest.vue . ¿Hay algún gran malentendido que tengo sobre cómo se supone que funciona todo esto?

¿Este botón "Iniciar sesión con Google" está destinado a funcionar con un flujo de servidor OIDC?