Ошибка при использовании логина Google - vue "gapi не определен" - PullRequest
Новая
       2

Ошибка при использовании логина Google - vue "gapi не определен"

0 голосов
/ 08 апреля 2020

Я новичок в vue и пытаюсь добавить кнопку входа в Google на мою веб-страницу. Тем не менее, есть ошибка, которая утверждает, что "gapi не определено" в моем mount (). Как я могу это исправить? Я также пытался инициализировать гаппи, но я не знаю, где это сделать. 

<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>

1 Ответ

0 голосов
/ 08 апреля 2020

Вы не можете поместить этот тег <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...