在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):phanan/vue-google-signin-button开源软件地址(OpenSource Url):https://github.com/phanan/vue-google-signin-button开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):vue-google-signin-button
InstallThis 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 Usage
Step 1: import GSignInButton from 'vue-google-signin-button'
Vue.use(GSignInButton) Step 2: Now you have a <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!
LicenseMIT © Phan An |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论