반응형
Google 로그인 사용 오류 - vue "gapi가 정의되지 않음"
나는 처음 보는 사람이라 내 웹페이지에 구글 로그인 버튼을 넣으려고 노력해왔다.다만, 탑재한()에 「가파이는 정의되지 않았다」라고 기재한 에러가 있다.이걸 어떻게 고쳐야 하지?나도 가피 초기화를 시도해 보았지만 그것을 어디에 두어야 할지 모르겠다.
<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>
이 태그는 넣을 수 없다.<script src="https://apis.google.com/js/platform.js"></script>단일 파일 구성 요소.
이 태그를 너의 태그에 넣어라.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>
그 외에도, 당신은 또한 속성을 제거해야 한다.async그리고defer왜냐하면 당신이 전화할 때gapi에 있어서 가변적인.mounted대본이 아직 다운로드되지 않았다.
올바른 스크립트는 다음과 같다.<script src="https://apis.google.com/js/platform.js"></script>
PS: 나에게 적합한 최소한의 예를 만들면, 당신의 컴퓨터에서 이것을 시도해 보십시오.
<!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>
아직 도움이 필요한지는 모르겠지만, 나는 이 모든 예에서 보는 gapi 변수를 window.gapi에 명시적으로 할당해야 했다.Mounted()방법:
let gapi = window.gapi
참조URL: https://stackoverflow.com/questions/61100835/error-using-google-login-vue-gapi-is-not-defined
반응형
'Programing' 카테고리의 다른 글
| 크기를 조정하려면 탐색 드로어 끌기 (0) | 2022.04.17 |
|---|---|
| 로그아웃 시 vuex 비어 있는 상태 (0) | 2022.04.17 |
| Java에서 Kotlin 확장 기능에 액세스 (0) | 2022.04.17 |
| C의 int 변수에 이중 정밀도를 할당하는 비직관적 결과 (0) | 2022.04.17 |
| Vue.js - 요소 UI - 폼 유효성 검사 상태를 확인하는 방법 (0) | 2022.04.17 |