vue-googleapis
vue-googleapis
Handling Google APIs in Vue.js project
Ths is a simple wrapper around Google API Client Library for Javascript for use in Vue.js project.
While I was prototyping a side-project I needed to access YouTube Data API
and Google Auth
to perform actions on behalf of a Google user.
The existing plugins I found were either outdated or doing too less (oAuth only) or too much (deciding how I should I have managed user session).
So I wrote my own plugin being totally new to Vue and frontend development in general.
Google offer a wide range of APIs and few different ways you can connect and authenticate the requests. Some APIs let you use just an API key
, some others require you to use an OAuth 2.0 token
, some both. If you have to perform requests on behalf of an authenticated Google user you have to use oAuth2
and you can do manage the process on the frontend only or using a backend that will take care of exchanging an authorization code with an authenticated token.
This is a good starting point to understand how use OAuth2
for Google APIs.
Installation
npm install --save vue-googleapis
Initialization
// src/main.js
import Gapi from 'vue-googleapis'
Vue.use(Gapi, {
apiKey: '<APIKEY>',
clientId: '<CLIENT_ID>.apps.googleusercontent.com',
discoveryDocs: ['https://www.googleapis.com/discovery/v1/apisyoutube/v3/rest'],
scope: 'https://www.googleapis.com/auth/youtube',
})
The options passed to Vue.use
are used to initialise the client, check the documentation for details, depending on what you are trying to do you may not need an apiKey
parameter or if you only want to to use the library to authenticated the user you don't need discoveryDocs
and your scope
may be something like profile email
only.
Please check the EXAMPLES REPOS where there are a couple of example on how manage user authentication
Usage
The pluging add a $google
object to the Vue instance. This object has two properties
isInit
(boolean) : Determine if the api libraries has been loaded. Please make sure the value is set to true before using the client
api
: This represent the configured gapi client and allow you to access all its methods and properties
Google Auth
For example you can access the Google Auth object in your component this way:
this.$google.api.auth2.getAuthInstance()
and define a methods that deals with authentication this way
methods: {
isSignedId () {
return this.$google.api.auth2.getAuthInstance().isSignedIn.get()
},
async signIn () {
await this.$google.api.auth2.getAuthInstance().signIn()
},
}
Please refer to the official documentation for how to manage oAuth 2.0 autentication:
- https://developers.google.com/identity/protocols/oauth2
- https://developers.google.com/identity/sign-in/web/reference
Using Google APIs
The Google Javasript Client library allow you to make requests in several ways
If you loaded the Discoveery documents for the APIs you intend to use as in the initialization step above you can make requests this way
await this.$google.api.client.youtube.playlists.list({mine: true, part: "snippet"})
If you didn't you can always use the client.request method this way
await this.$google.api.client.request({
path: 'youtube/v3/playlists',
method: 'GET',
params: {
mine: true, part: "snippet"
}
})