google-signin-vue

google-signin-vue

This Package can be used for both vue and nuxt. Both Documentation are given below.

Project setup

npm install google-signin-vue

Basic Setup

To use this package, we must get the client-id from google.

• Go to Google developer Console

• Create a Project or select an existing project

• Then goto oath consent tab on the left sidebar

• Choose the option internal if this can be used only by the organization. For example, if you registered the organization like myowndomain.com, then anyone who has mail id with @mydomain.com registered with Gmail only can log in.

• Choose the option external if anyone registered with Gmail can log in.

• Then You can fill all the details.

• In case you are testing in localhost, you can just enter application name (mandatory) and enter logo(optional)

• Save the Details

• Goto Credentials tab on the left sidebar

• Select Create Credential

• Select application type as a web application, specify a name.

• In the Authorized javascript origins section, enter the project domain name.

• In Case of localhost just type localhost, If the project running on a specific port, enter the port like localhost:XXXX.

• Now you’ll get the credentials, use only the client-id, keep your client- secret confidential. client- secret should be provided only to the backend.

For Vue Project

• In public/index.html add the below script in header

<script src="https://apis.google.com/js/platform.js"></script>

Inside Template

<googleSignIn
      :clientId="'xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com'"
      :successCallBack="getSuccessData"
      :failureCallBack="getFailureData"
/>

On the script of the same template

import googleSignIn from 'google-signin-vue'

export default {
  name: 'app',
  components: {
    googleSignIn
  },
  methods:{
    getSuccessData:function (user) {
      // The User variable contains id_token, id, name, image, email as objects.
      // Send The id_token to the Backend for the verication.
    },
    getFailureData:function (errorData) {
      // The errorData variable contains failure details
    }
  }
}

For Nuxt Project

• Create app.html in the root directory of the project and add

   <html {{ HTML_ATTRS }}>
   <head {{ HEAD_ATTRS }}>
     {{ HEAD }}
       <script src="https://apis.google.com/js/platform.js"></script>
   </head>
   <body {{ BODY_ATTRS }}>
   {{ APP }}
   </body>
   </html>

Nuxt Js App Template Documentation

Inside Template

<googleSignIn
      :clientId="'xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com'"
      :successCallBack="getSuccessData"
      :failureCallBack="getFailureData"
/>

On the script of the same template

import googleSignIn from 'google-signin-vue/src/googleSignIn.vue'

export default {
  name: 'app',
  components: {
    googleSignIn
  },
  methods:{
    getSuccessData:function (user) {
      // The User variable contains id_token, id, name, image, email as objects.
      // Send The id_token to the Backend for the verication.
    },
    getFailureData:function (errorData) {
      // The errorData variable contains failure details
    }
  }
}

Note: You must specify the callback function as props to get the data, The supported props are given below.