Categories
Vue Answers

How to implement Google Login API in Vue.js?

Spread the love

Sometimes, we want to implement Google Login API in Vue.js.

In this article, we’ll look at how to implement Google Login API in Vue.js.

How to implement Google Login API in Vue.js?

To implement Google Login API in Vue.js, we can use the gap.signin2.render method.

For instance, we write

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

to call gapi.signin2.render to render the sign in page contents in the div with ID google-signin-button.

We set onsuccess to this.onSignIn to call it when sign in is successful.

Conclusion

To implement Google Login API in Vue.js, we can use the gap.signin2.render method.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *