Struggling with understanding the migration from GAPI to GIS in Vue? Google has provided a helpful document on this topic: https://developers.google.com/identity/oauth2/web/guides/migration-to-gis#server-side-web-apps
Attempting to implement code from the GIS section of the migration doc, I encountered an error:
Uncaught TypeError: Cannot read properties of undefined (reading 'requestAccessToken')<template>
<h1>Google Identity Services Authorization Token model</h1>
<button @click="getToken()">Get access token</button><br><br>
<button @click="loadCalendar()">Load Calendar</button><br><br>
<button @click="revokeToken()">Revoke token</button>
</template>
<script>
var client
var access_token
export default {
methods:{
initClient() {
client = google.accounts.oauth2.initTokenClient({
client_id: '...',
scope: 'https://www.googleapis.com/auth/calendar.readonly \
https://www.googleapis.com/auth/contacts.readonly',
callback: (tokenResponse) => {
access_token = tokenResponse.access_token;
},
});
},
getToken() {
client.requestAccessToken();
},
revokeToken() {
google.accounts.oauth2.revoke(access_token, () => {console.log('access token revoked')});
},
loadCalendar() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
xhr.send();
}
}
}
</script>
In the index.html file, make sure to include:
<script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
Looking for assistance to resolve this issue. Any help would be appreciated!