93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
<template>
|
|
<button class="g-signin-btn" id="googleSignIn" type="button">
|
|
Login with Google
|
|
</button>
|
|
<!-- id="google-signin-button"
|
|
class="g-signin2"
|
|
data-onsuccess="onGoogleSignIn" -->
|
|
</template>
|
|
<script>
|
|
/* eslint-disable */
|
|
// function onGoogleSignIn(googleUser) {
|
|
// // Useful data for your client-side scripts:
|
|
// var profile = googleUser.getBasicProfile()
|
|
// console.log('ID: ' + profile.getId()) // Don't send this directly to your server!
|
|
// console.log('Full Name: ' + profile.getName())
|
|
// console.log('Given Name: ' + profile.getGivenName())
|
|
// console.log('Family Name: ' + profile.getFamilyName())
|
|
// console.log('Image URL: ' + profile.getImageUrl())
|
|
// console.log('Email: ' + profile.getEmail())
|
|
|
|
// // The ID token you need to pass to your backend:
|
|
// var id_token = googleUser.getAuthResponse().id_token
|
|
// console.log('ID Token: ' + id_token)
|
|
// }
|
|
|
|
function onLoadGoogleCallback() {
|
|
gapi.load('auth2', function () {
|
|
const auth2 = gapi.auth2.init({
|
|
client_id: process.env.googleId,
|
|
cookiepolicy: 'single_host_origin',
|
|
scope: 'profile',
|
|
})
|
|
|
|
const element = document.getElementById('googleSignIn')
|
|
auth2.attachClickHandler(
|
|
element,
|
|
{},
|
|
function (googleUser) {
|
|
console.log('Signed in: ' + googleUser.getBasicProfile().getName())
|
|
},
|
|
function (error) {
|
|
console.log('Sign-in error', error)
|
|
}
|
|
)
|
|
})
|
|
}
|
|
|
|
export default {
|
|
head() {
|
|
return {
|
|
meta: [
|
|
{
|
|
name: 'google-signin-scope',
|
|
content: 'profile email',
|
|
},
|
|
{
|
|
name: 'google-signin-client_id',
|
|
content: process.env.googleId,
|
|
},
|
|
],
|
|
script: [
|
|
{
|
|
src: 'https://apis.google.com/js/platform.js',
|
|
defer: true,
|
|
async: true,
|
|
},
|
|
// {
|
|
// src: 'https://apis.google.com/js/api:client.js',
|
|
// },
|
|
],
|
|
}
|
|
},
|
|
mounted() {
|
|
window.onload = onLoadGoogleCallback
|
|
},
|
|
|
|
methods: {},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.g-signin-btn {
|
|
align-self: center;
|
|
background-color: $color-google;
|
|
color: $color-light;
|
|
border: none;
|
|
border-radius: 5px;
|
|
text-transform: uppercase;
|
|
padding: 15px 20px;
|
|
margin-top: 15px;
|
|
}
|
|
</style>
|