Sample code for implementing Google third-party login in Vue

1. Developer Platform Configuration

1. Enter the developer platform and go to the Google API console to select or create a project.

Google Developer Platform

There are so many dazzling APIs that you can't choose from, but just remember that your purpose this time is: social API

2. One more thing you need to do before using this API is to apply for an OAuth 2.0 client ID

3 Fill in the type, name and source URL of your project as required

Note: After the creation is completed, there will be a pop-up window on the page showing the client ID and key you applied for. Yes, this is a generation process.

4. Install vue-google-signin-button

npm install vue-google-signin-button --save

5. Import and register in main.js

import GSignInButton from 'vue-google-signin-button'
Vue.use(GSignInButton);

6.Introduce js file in index.html

<!--Dependency js required for Google login-->
<script src="//apis.google.com/js/api:client.js"></script>

7. Use components in login.vue

<template>
  <g-signin-button
    :params="googleSignInParams"
    @success="onSignInSuccess"
    @error="onSignInError">
    Sign in with Google
  </g-signin-button>
</template>

<script>
export default {
  data () {
    return {
      /**
       * The Auth2 parameters, as seen on
       * https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams.
       * As the very least, a valid client_id must be present.
       * @type {Object}
       */
      googleSignInParams: {
        client_id: 'YOUR_APP_CLIENT_ID.apps.googleusercontent.com'
      }
    }
  },
  methods: {
    onSignInSuccess (googleUser) {
      console.log(googleUser)
      const profile = googleUser.getBasicProfile()
      console.log(profile)
    },
    onSignInError (error) {
      console.log('OH NOES', error)
    }
  }
}
</script>

<style>
.g-signin-button {
  /* This is where you control how the button looks. Be creative! */
  display: inline-block;
  padding: 4px 8px;
  border-radius: 3px;
  background-color: #3c82f7;
  color: #fff;
  box-shadow: 0 3px 0 #0f69ff;
}
</style>

Solve the problem

1. Problem 1: Initialization does not introduce js

You will find that an error message will appear on the page during initialization.

The reason for this problem is that the plug-in itself does not introduce the Google.js file. The solution is to introduce it into Vue's index.html, see the figure below for details.

This is the end of this article about the sample code for implementing Google third-party login in Vue. For more relevant Vue Google third-party login content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!