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