[Vuejs]-Using google APIs with vue js

by

0👍

Service account authentication is more suited on the backend since you don’t want to include your secret key in a frontend project.

In a frontend project, depending on which API you want to use and which data you want to access, there are two options:

  • use an API key to authenticate your requests, although this is not always possible for all APIs. Usually, if you have to access user data you would rather implement OAuth2 authentication.
  • OAuth2 authentication. Use the Google Javascript client library to authenticate the user and let the user grant your application permissions to access the data you want to.

To use the Javascript Client Libraries in your Vuejs 2.x project you could use this plugin (available on npmjs.org) vue-googleapis

It is as simple as doing:

Vue.use(GoogleAPIs, {
  clientId: '<CLIENT_ID>.apps.googleusercontent.com',
  discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'],
  scope: 'https://www.googleapis.com/auth/youtube.readonly',
})

and you will have all the Google APIs at your disposal in the Vue instance (i.e. everywhere in your codebase)

Of course you will have to adjust the configuration with the scope and discoveryDocs based on what API you need to use and which access level you need.

This repo has few examples on how to use the plugin for different tasks in your Vuejs project

vue-gogleapis-examples

Leave a comment