Below is a practical demonstration utilizing vue-google-oauth2.
To incorporate it, follow these steps:
npm i vue-google-oauth2
You then need to integrate the following code snippet into your APP ENTRY file, for example src/main.js
import GAuth from 'vue-google-oauth2'
Vue.use(GAuth, {clientId: 'XXXXXXXX'})
Replace XXXXXXXX with the clientId provided by
I assume you have visited this link if you have attempted Google login previously.
Next, create the component below
<template>
<div>
<h1>Test</h1>
<button @click="handleClickGetAuth" :disabled="!isInit">get auth code</button>
<button @click="handleClickSignIn" v-if="!isSignIn" :disabled="!isInit">signIn</button>
<button @click="handleClickSignOut" v-if="isSignIn" :disabled="!isInit">signOout</button>
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
isInit: false,
isSignIn: false
}
},
methods: {
async handleClickGetAuth() {
try {
const authCode = await this.$gAuth.getAuthCode()
const response = await this.$http.post('http://your-backend-server.com/auth/google', { code: authCode, redirect_uri: 'postmessage' })
} catch (error) {
// Handle failure case
}
},
async handleClickSignIn(){
try {
const googleUser = await this.$gAuth.signIn()
console.log('user', googleUser)
this.isSignIn = this.$gAuth.isAuthorized
} catch (error) {
// Handle failure case
console.error(error);
return null;
}
},
async handleClickSignOut(){
try {
await this.$gAuth.signOut()
this.isSignIn = this.$gAuth.isAuthorized
} catch (error) {
// Handle failure case
}
}
},
mounted(){
let that = this
let checkGauthLoad = setInterval(function(){
that.isInit = that.$gAuth.isInit
that.isSignIn = that.$gAuth.isAuthorized
if(that.isInit) clearInterval(checkGauthLoad)
}, 1000);
}
}
</script>
Credit goes to
https://github.com/guruahn/vue-google-oauth2/blob/master/sample.html