Vue.JS(3)Google Login

Vue.JS(3)Google Login

I just pick up the simple one, add the dependency in package.json
    "vue-google-signin-button": "1.0.2"

Add the script in index.html
<script src="https://apis.google.com/js/api:client.js"></script>

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

Script part will have all the action, usually I just send the token to server to auth again
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      users: [
        {firstname: 'Carl', lastname: 'Luo'},
        {firstname: 'Rachel', lastname: 'Kang'},
        {firstname: 'Leo', lastname: 'Luo'}
      ],
      username: '',
      googleSignInParams: {
        client_id: ‘44266xxxxx-xxxxxx.apps.googleusercontent.com'
      }
    }
  },
  methods: {
    onSignInSuccess (googleUser) {
      // `googleUser` is the GoogleUser object that represents the just-signed-in user.
      // See https://developers.google.com/identity/sign-in/web/reference#users
      const profile = googleUser.getBasicProfile() // etc etc
      const authResponse = googleUser.getAuthResponse(false)
      console.log(profile)
      console.log(authResponse)
    },
    onSignInError (error) {
      // `error` contains any error occurred.
      console.log('OH NOES', error)
    }
  }
}
</script>

A very simple CSS in the <style></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;
}

It seems I have everything for the UI part, I just need to refactor and clear my codes.
Some of the documents from google for the response
https://developers.google.com/identity/sign-in/web/reference#gapiauth2authresponse

References:
https://github.com/phanan/vue-google-signin-button
https://github.com/simmatrix/vue-google-auth