vue-google-signin-button
A simple Vue plugin to include a Google sign-in button into your web app.
Install
This plugin can be installed as a module
$ npm install vue-google-signin-button
or, if you're not in a modular environment, just include it as a <script>.
Usage
Important:
https://apis.google.com/js/api:client.jsmust be included as a<script>in your web app, as this plugin depends on it.
Step 1: import and use the plugin if you're in a modular environment (you don't need this step otherwise, as the plugin will register itself).
import GSignInButton from 'vue-google-signin-button'
Vue.use(GSignInButton)
Step 2: Now you have a g-signin-button global component, ready for use. It's best to demonstrate the usage with an example:
<template>
<g-signin-button
:params="googleSignInParams"
@success="onSignInSuccess"
@error="onSignInError">
Sign in with Google
</g-signin-button>
</template>
<script>
export default {
data () {
return {
/**
* The Auth2 parameters, as seen on
* https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams.
* As the very least, a valid client_id must present.
* @type {Object}
*/
googleSignInParams: {
clientId: 'YOUR_APP_CLIENT_ID.apps.googleusercontent.com'
}
}
},
methods: {
onSignInSuccess (googleUser) {
// `googleUser` is the GoogleUser object that represents the just-signed-in user.
// See https://developers.google.com/identity/sign-in/web/reference#users
const profile = googleUser.getBasicProfile() // etc etc
},
onSignInError (error) {
// `error` contains any error occurred.
console.log('OH NOES', error)
}
}
}
</script>
<style>
.g-signin-button {
/* This is where you control how the button looks. Be creative! */
display: inline-block;
padding: 4px 8px;
border-radius: 3px;
background-color: #3c82f7;
color: #fff;
box-shadow: 0 3px 0 #0f69ff;
}
</style>
That's it!
Looking for the Facebook counterpart?
License
MIT © Phan An
![Getting error for [g-signin-button]](https://avatars.githubusercontent.com/u/443781?v=4)
.">
37 Nov 3, 2022
0 Jun 13, 2022
109 Dec 24, 2022
4 Mar 23, 2022
0 Dec 31, 2021
2 Oct 10, 2022
1 May 18, 2021
15 Nov 28, 2022
160 Dec 24, 2022
22.2k Jan 7, 2023
406 Dec 10, 2022
4 Apr 27, 2022
67 Jul 15, 2021
5.8k Jan 5, 2023
17 Mar 3, 2022
2 Nov 4, 2022
2 Mar 7, 2022
8 Dec 13, 2022
11 Jan 22, 2021