具有 Google 身份验证登录的 Vuejs 全局函数

Question

我正在使用 vuejs 2，但在使用 Google 身份验证登录时遇到问题。

我使用 vue 成功设置并获得了注销和用户配置文件功能：

export default {

  data() {
    return {
      user: null
    };
  },

  methods: {
    getUserProfile() {
          const profile = gapi.auth2.currentUser.get().getBasicProfile();

          console.log(profile.getIdToken());
      },

      signOut() {
          const auth2 = gapi.auth2.getAuthInstance();

          auth2.signOut().then(function () {
              console.log('user signed out');
          });
      }
  },
};

我这里的主要问题是来自

的 onSignIn(googleUser) 函数

<div class="g-signin2" data-onsuccess="onSignIn"></div>

data-onsuccess="onSignIn"正在vue实例外寻找js函数。我尝试在我的 HTML 文件中添加 onSignIn(googleUser) 函数，例如：

<script>
    function onSignIn(googleUser) {
        const auth2 = gapi.auth2.init();

        if (auth2.isSignedIn.get()) {
            const profile = auth2.currentUser.get().getBasicProfile();

            console.log(profile.getName());
            console.log(googleUser.getAuthResponse().id_token);
            console.log(googleUser.getAuthResponse().uid);
            console.log(auth2.currentUser.get().getId());
        }
    }
</script>

这按预期工作，但我想知道是否可以将其添加到我的 vue 文件中而不是本地 javascript 方式，因为在这个函数中，我将调用其他 vue 方法.

或者有什么方法可以在 vue 中添加 onSignIn(googleUser) 函数，然后在 Google Auth 完成时调用它？

Answer 1

此处的解决方案是使用 gapi.signin2.render 在组件的 mounted 挂钩中呈现登录按钮

<template>
  <div id="google-signin-btn"></div>
</template>

<script>
export default {
  methods: {
    onSignIn (user) {
      // do stuff, for example
      const profile = user.getBasicProfile()
    }
  },
  mounted() {
    gapi.signin2.render('google-signin-btn', { // this is the button "id"
      onsuccess: this.onSignIn // note, no "()" here
    })
  }
}
</script>

见https://developers.google.com/identity/sign-in/web/reference#gapisignin2renderid_options

具有 Google 身份验证登录的 Vuejs 全局函数

Vuejs global function with Google Auth Signin

javascript

google-authentication

vue.js

vuejs2