Estoy trabajando en el inicio de sesión de Google con el nuevo script del servicio Google Identity en mi aplicación vue. Parece que no puedo hacer que el script se cargue en mi aplicación.
Tengo el script de Google en mi cabeza index.html como este
<script type="text/javascript" src="https://accounts.google.com/gsi/client?onload=onGoogleApiLoad" defer></script>y esto es lo que tengo hasta ahora en un archivo javascript.
GoogleDriveGisAuthV3.js
class Auth extends EventTarget { client; clientId; access_token; constructor() { super(); } init() { return new Promise(() => { this.client = window.google.accounts.oauth2.initTokenClient({ client_id: this.clientId, scope: 'https://www.googleapis.com/auth/drive \ https://www.googleapis.com/auth/drive.file \ https://www.googleapis.com/auth/drive.metadata' , callback: (tokenResponse) => { this.access_token = tokenResponse.access_token; } }) }); } getAccessToken () { this.client.requestAccessToken(); } revokeAccessToken () { window.google.accounts.oauth2.revoke(this.access_token, () => {console.log('access token revoked')}); } } export default Authy luego estoy cargando esto en mi main.js. como esto
/** * Initialize and load the Google api for the application. */ window.onGoogleApiLoad = async () => { const auth = new Auth(); auth.clientId = { clientId: process.env.VUE_APP_GOOGLE_CLIENT_ID, } try { await auth.init(); } catch (error) { console.error(error) } }Estoy accediendo a la función getAccessToken en mi tienda para iniciar el inicio de sesión de acuerdo con la documentación, debería aparecer una ventana emergente para que el usuario inicie sesión, todo lo que obtengo en este momento es
Error in v-on handler: "TypeError: Cannot read property 'requestAccessToken' of undefinedEstoy buscando otro par de ojos en esto para ver si podemos resolverlo... como mencioné anteriormente, tal vez el script no se está cargando correctamente y no tiene acceso a la función requestAccessToken.
¿Podría alguien revisar esto y darme algún consejo sobre cómo puedo solucionarlo o al menos señalarme en la dirección correcta?
ACTUALIZACIÓN: estoy usando electrones. con mi aplicación vue, así que según google, tengo que abrir un navegador externo para iniciar sesión y luego pasar los datos a mi aplicación. Estoy perdido en ese proceso sobre cómo hacerlo.
Pero la respuesta dada hasta ahora está ayudando a obtener el error 400: invalid_request.
estaba implementando GIS en reaccionar. creé una función de ayuda como esta
// GoogleInit.js export const SignUpUser = async () => { const client = window.google.accounts.oauth2.initTokenClient({ client_id: id, scope: "https://www.googleapis.com/auth/user.birthday.read \ https://www.googleapis.com/auth/profile.agerange.read \ https://www.googleapis.com/auth/user.gender.read", callback: "", // defined at request time }); const tokenResponse = await new Promise((resolve, reject) => { try { // Settle this promise in the response callback for requestAccessToken() client.callback = (resp) => { if (resp.error !== undefined) { reject(resp); } // console.log("client resp",resp); resolve(resp); }; // console.log("client",client); client.requestAccessToken({ prompt: "consent" }); } catch (err) { console.log(err); } }); return tokenResponse; };más tarde llamó a esta función
let data = await GoogleInit.SignUpUser();así es como implemento el flujo GIS en mi aplicación de reacción/nodo: Enlace al artículo