61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<button class="button f-signin-btn" @click="logInWithFacebook">
|
|
Login with Facebook
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
head() {
|
|
return {
|
|
script: [
|
|
{
|
|
src: 'https://connect.facebook.net/es_ES/sdk.js',
|
|
defer: true,
|
|
async: true,
|
|
},
|
|
],
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
window.fbAsyncInit = async function () {
|
|
await window.FB.init({
|
|
appId: process.env.facebookId,
|
|
cookie: true,
|
|
version: 'v13.0',
|
|
})
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
async logInWithFacebook() {
|
|
await window.FB.login(function (response) {
|
|
if (response.authResponse) {
|
|
console.log(response)
|
|
alert('You are logged in & cookie set!')
|
|
// Now you can redirect the user or do an AJAX request to
|
|
// a PHP script that grabs the signed request from the cookie.
|
|
} else {
|
|
alert('User cancelled login or did not fully authorize.')
|
|
}
|
|
})
|
|
return false
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scooped>
|
|
.f-signin-btn {
|
|
align-self: center;
|
|
background-color: $color-facebook;
|
|
color: $color-light;
|
|
border: none;
|
|
border-radius: 5px;
|
|
text-transform: uppercase;
|
|
padding: 15px 20px;
|
|
margin-top: 15px;
|
|
}
|
|
</style>
|