как реализовать Google Login API в VueJS?

Question

Так что я использовал руководство и коды от

https://developers.google.com/identity/sign-in/web/

Когда я нажал кнопку, она работает нормально, она перенаправит меня на страницу входа в Google, и во время аутентификации не возникнет никаких проблем.

После завершения он перенаправил меня обратно на страницу (компонент vue), где расположена кнопка.Теоретически он должен вызывать метод onSignIn и выводить информацию с помощью console.log, но этого не произошло.

Каким-то образом Vue не смог простить data-onsuccess="onSignIn".Я пытался изменить data-onsuccess на динамический реквизит (:data-onsuccess) или обработку событий (@data-onsuccess), оба они тоже не работают.

Кто-нибудь раньше сталкивался с этой проблемой?Или есть особый способ реализовать это на Vue?

Answer 1

Если кому-то нужен плагин, чтобы он сразу начал работать без особых настроек, попробуйте эту vue-google-signin-button-directive .

Answer 2

data-onsuccess="onSignIn" ищет глобальную функцию onSignIn.Вам нужно поместить onSignIn вне компонента Vue.

Другой способ - использовать gapi.signin2.render для визуализации кнопки входа, тогда вы можете использовать onSignIn внутри компонента Vue:

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

<script>
export default {
  mounted() {
    gapi.signin2.render('google-signin-button', {
      onsuccess: this.onSignIn
    })
  },
  methods: {
    onSignIn (user) {
      const profile = user.getBasicProfile()
    }
  }
}
</script>

Для получения дополнительной справки: https://developers.google.com/identity/sign-in/web/build-button