Last active
September 26, 2020 15:39
-
-
Save BenjaminRqt/8d17f1e0453357a947347e3dfa25e2a3 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<button class="button" @click="logInWithFacebook"> Login with Facebook</button> | |
</template> | |
<script> | |
export default { | |
setup() { | |
const logInWithFacebook = async () => { | |
await loadFacebookSDK(document, "script", "facebook-jssdk") | |
initFacebook().then(r => { | |
window.FB.login(function (response) { | |
if (response.authResponse) { | |
alert("You are logged in & cookie set!") | |
} else { | |
alert("User cancelled login or did not fully authorize.") | |
} | |
}) | |
return false | |
}) | |
} | |
const initFacebook = async () => { | |
window.fbAsyncInit = function () { | |
window.FB.init({ | |
appId: "3313555114XXXXXX", //You will need to change this | |
cookie: true, // This is important, it's not enabled by default | |
version: "v13.0" | |
}) | |
} | |
} | |
const loadFacebookSDK = async (d, s, id) => { | |
let js, fjs = d.getElementsByTagName(s)[0] | |
if (d.getElementById(id)) { | |
return | |
} | |
js = d.createElement(s) | |
js.id = id | |
js.src = "https://connect.facebook.net/en_US/sdk.js" | |
fjs.parentNode.insertBefore(js, fjs) | |
} | |
return { | |
logInWithFacebook, | |
} | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks Kilonzi for this inspired example on Vue 2 (FacebookLogin.vue