Vuejs global function with Google Auth Signin

Question

I am using vuejs 2 and I am having issues with using the Google auth signin.

I successfully setup and got the sign out and user profile functions working using 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');
          });
      }
  },
};

My main issue here is the onSignIn(googleUser) function from

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

The data-onsuccess="onSignIn" is looking for a js function outside the vue instance. I tried adding the onSignIn(googleUser) function in my HTML file like:

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

This works as expected, but I wanted to know if it would be possible to add this in my vue file instead of a native javascript way, since inside this function, I will be calling other vue methods.

Or is there a way where I could add the onSignIn(googleUser) function in vue and then call it when Google Auth finishes?

@CamHart I followed this post http://stackoverflow.com/questions/31144874/gapi-is-not-defined-google-sign-in-issue-with-gapi-auth2-init — raffffffff, Apr 05 '17 at 23:27

Phil · Accepted Answer · 2020-08-17T06:33:12.323

16

The solution here is to use gapi.signin2.render to render the sign-in button inside your component's mounted hook

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

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

edited Aug 17 '20 at 06:33

answered Mar 31 '17 at 00:17

Phil

157,677
23
242
245

this works but it always fail on the `onSignIn` function when trying to access `gapi.auth2.init()`, which is needed to get the current user's details. – raffffffff Mar 31 '17 at 00:39
I am assuming the `mounted` is calling the `onSignIn` while google auth is still running, reason why `gapi.auth2.init()` fails. How can I prevent this from happening? – raffffffff Mar 31 '17 at 00:41
@raffffffff that's unlikely, `onSignIn` will only be called after the button completes the sign-in process. Can you define the problem better? If you're just after the user details, you can get them from the `user` passed to `onSignIn`. I'll add an example – Phil Mar 31 '17 at 00:43
the only functions I have in the `onSignIn` method was to output the `user` but it returns as `undefined` even when I am signed in – raffffffff Mar 31 '17 at 00:47
@raffffffff dealing with `gapi.auth2` and it's *readiness* state can be difficult. You might find some hints in this answer ~ http://stackoverflow.com/a/42799677/283366 (Angular but you should be able to adapt it) – Phil Mar 31 '17 at 00:48
@raffffffff you have a typo, it should be `onsuccess: this.onSignIn`, **not** `onsuccess: this.onSignIn()`. You don't want to execute the method there, just assign it as a callback – Phil Mar 31 '17 at 00:49
1

how did you all get gapi to be globally available? @Phil – CamHart Apr 01 '17 at 07:02
1

@CamHart include the script from Google in your `index.html` – Phil Apr 01 '17 at 07:15
I'm still learning all this--but apparently I'm using webpack. So I think that makes it more difficult than that? Because I can't seem to get it to work. @Phil – CamHart Apr 01 '17 at 07:27
@CamHart I've done this with a webpack set up (from vue-cli) and that's how I did it – Phil Apr 01 '17 at 09:57
@Phil it will give me this error: `Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'signin2' of undefine` – Travis Su Jun 11 '18 at 15:45
@Travis sounds like you're not including the script from Google. I suggest you open a new question as that is unrelated to this post – Phil Jun 11 '18 at 21:12

Vuejs global function with Google Auth Signin

1 Answers1