45 lines
1.1 KiB
Plaintext
45 lines
1.1 KiB
Plaintext
<template>
|
|
<div>
|
|
<div v-if="user">
|
|
<img :src="user.picture" :alt="user.name" />
|
|
<p>{{ user.name }}</p>
|
|
<p>{{ user.email }}</p>
|
|
</div>
|
|
<div v-else>
|
|
<GoogleLogin :callback="callback"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
user: null
|
|
};
|
|
},
|
|
methods: {
|
|
loginWithGoogle() {
|
|
// Perform Google login and trigger the callback
|
|
// Assuming your login mechanism triggers the provided callback
|
|
// For demonstration purposes, let's assume it updates user data directly
|
|
const response = { /* Assume response from Google login */ };
|
|
this.callback(response);
|
|
},
|
|
callback(response) {
|
|
// Decode credential and update user data
|
|
const userData = this.decodeCredential(response.credential);
|
|
this.user = userData;
|
|
},
|
|
decodeCredential(credential) {
|
|
// Your implementation to decode the credential
|
|
// For demonstration, assume it returns user data directly
|
|
return {
|
|
name: "John Doe",
|
|
picture: "https://example.com/user.jpg",
|
|
email: "john@example.com"
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script> |