Home » vue » VueGapi do nothing when requesting with multiple scopes

VueGapi do nothing when requesting with multiple scopes

Posted by: admin November 26, 2021 Leave a comment

Questions:

here’s my Vue3 main.js

app.use(VueGapi, {
    apiKey: 'MyApiKey',
    clientId: 'myClientId.apps.googleusercontent.com',
    discoveryDocs: ['https://classroom.googleapis.com/$discovery/rest?version=v1'],
    scope: "https://www.googleapis.com/auth/classroom.profile",
  })
app.mount('#app')

but I need to provide many scopes, so I did

const SCOPES = ['https://www.googleapis.com/auth/classroom.courses.readonly',
'https://www.googleapis.com/auth/classroom.profile.emails',
      'https://www.googleapis.com/auth/classroom.profile.photos',
      'https://www.googleapis.com/auth/classroom.rosters',
      'https://www.googleapis.com/auth/classroom.rosters.readonly'];

and assign SCOPES to scope

app.use(VueGapi, {
        apiKey: 'MyApiKey',
        clientId: 'myClientId.apps.googleusercontent.com',
        discoveryDocs: ['https://classroom.googleapis.com/$discovery/rest?version=v1'],
        scope: SCOPES,
      })
    app.mount('#app')

From my vue component, calling

this.$gapi.login().then(({ currentUser, gapi, hasGrantedScopes }) => {
          console.log({ currentUser, gapi, hasGrantedScopes })
        })

when I press the login button only works when I set scope to singular scope like scope: "https://www.googleapis.com/auth/classroom.profile", but nothing happens (no error, no nothing) when I assigned SCOPES to scope. Where did I do wrong?

Answers:

scope should be a space-delimited string.

Try

...
    scope: SCOPES.join(' ')
...