web-dev-qa-db-ja.com

VueJSにGoogle Login APIを実装する方法は？

だから私はからのガイドとコードを使用していました

_https://developers.google.com/identity/sign-in/web/
_

ボタンをクリックすると正常に動作し、Googleログインページにリダイレクトされ、認証中に問題は発生しません。

完了すると、ボタンが配置されているページ（vueコンポーネント）にリダイレクトされます。理論的には、onSignInメソッドを呼び出して、_console.log_を使用して情報を出力する必要がありますが、発生しませんでした。

どういうわけかVueは_data-onsuccess="onSignIn"_を実行できませんでした。_data-onsuccess_を動的プロパティ（_:data-onsuccess_）またはイベント処理（_@data-onsuccess_ ）、どちらも機能しません。

誰もこの問題に以前に反論しましたか？または、Vueに実装する特別な方法はありますか？

vue.jsgoogle-apigoogle-signingoogle-login
8
Travis Su

data-onsuccess="onSignIn"はグローバルonSignIn関数を探しています。 onSignInをVueコンポーネントの外側に配置する必要があります。

別の方法は、gapi.signin2.renderでサインインボタンをレンダリングします。次に、Vueコンポーネント内でonSignInを使用できます。

<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

10
ittus

あまりセットアップせずにすぐに作業を開始するためにプラグインが必要な場合は、これを試してください vue-google-signin-button-directive 。

4
mejiamanuel57