I am working on the google sign in with the new Google Identity service script in my vue app. It seems I cannot get the script to load into my app.
I have the google script in my index.html head like this
<script type="text/javascript" src="https://accounts.google.com/gsi/client?onload=onGoogleApiLoad" defer></script>
and this is what I have so far in a javascript file.
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 Auth
and then I am loading this in my main.js. like this
/**
* 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)
}
}
I am accessing the getAccessToken function in my store to kick off the sign in according to the documentation it should popup a window for the user to sign in all I am getting at this point is
Error in v-on handler: "TypeError: Cannot read property 'requestAccessToken' of undefined
Im looking to get another set of eyes on this to see if we can get it figured out .. as I mentioned above maybe the script is not loading properly and it has no access to the requestAccessToken function.
Could some one look over this and give me any pointers on how I can get this fixed or atleast point me in the right direction?
UPDATE: I am using electron. with my vue app so according to google I have to open an external browser to log the user in and then pass the data back to my app I am lost on that process on how to do that.
But the answer given so far Is helping just getting Error 400: invalid_request.
i was implementing GIS in react. i created a helper function like this
// 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;
};
later called this function
let data = await GoogleInit.SignUpUser();
this is how i implement the GIS flow in my react/node app: Link to article