Menu
I'm new to vue and have been trying to include a google sign in button into my webpage. However, there is an error that states that "gapi is undefined" in my mounted(). How do i fix this? I've also tried initializing gapi but I don't know where to put that.
<template>
<div id = "signin"><div class="g-signin2">Sign in with LFA Email</div></div>
</div>
</template>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
import UserDataService from "../services/UserDataService";
export default {
data(){
return {
emailAddress:"",
signedIn:false
};
},
methods:{
onSignIn(user){
const profile = user.getBasicProfile()
this.emailAddress =profile.getEmail()
console.log(this.emailAddress)
if(this.emailAddress.indexOf("@students.org")>-1){
UserDataService.create(this.emailAddress)
this.signedIn = true
}
else{
alert("Please sign in with an LFA Email Account")
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
this.signedIn=false
}
}
},
mounted() {
gapi.signin2.render('signin', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': this.onSuccess,
})
}
}
</script>
<style>
@import '../../public/stylesheet.css';
</style>
948
You can't put this tag <script src="https://apis.google.com/js/platform.js"></script> in Single File Component.
Put this tag in your public/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>t-vue</title>
</head>
<body>
<noscript>
<strong>We're sorry but t-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="https://apis.google.com/js/platform.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
Besides that, you need also to remove the attributes async and defer. Because when you call the gapi variable in mounted the script didn't download yet.
The correct script is: <script src="https://apis.google.com/js/platform.js"></script>
PS: I create a minimal example that works for me, try this in your computer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="test">Click Here</button>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<script>
let app = new Vue({
el: '#app',
methods: {
test() {
console.log('method', gapi);
},
},
mounted() {
console.log('mounted', gapi);
},
});
</script>
</body>
</html>
Not sure if you still need help with this, but I had to explicitly assign the gapi variable I see in all these examples to window.gapi by doing this at the beginning of the Mounted() method:
let gapi = window.gapi
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
