Google Auth Signin을 사용한 Vuejs 글로벌 함수

Google Auth Signin을 사용한 Vuejs 글로벌 함수

vuejs 2를 사용하고 있는데 Google auth signin 사용에 문제가 있습니다.

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 함수를 찾고 있습니다.추가하려고 했습니다.onSignIn(googleUser)다음과 같이 HTML 파일에서 기능합니다.

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

이것은 예상대로 동작합니다만, 네이티브 javascript 방식이 아닌 vue 파일에 추가할 수 있는지 알고 싶었습니다.이 기능에서는 다른 vue 메서드를 호출합니다.

아니면, 제가 이 모든 것을onSignIn(googleUser)vue에서 기능하고 Google Auth가 완료되면 호출할 수 있습니까?

여기서의 해결책은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 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/43130296/vuejs-global-function-with-google-auth-signin