-
-
Save kilonzi/aa939ac9a520e9aa803928062d62ddaa to your computer and use it in GitHub Desktop.
| <template> | |
| <div> | |
| <button class="button" @click="logInWithFacebook"> Login with Facebook</button> | |
| </div> | |
| </template> | |
| <script> | |
| export default { | |
| name:"facebookLogin", | |
| methods: { | |
| async logInWithFacebook() { | |
| await this.loadFacebookSDK(document, "script", "facebook-jssdk"); | |
| await this.initFacebook(); | |
| window.FB.login(function(response) { | |
| if (response.authResponse) { | |
| 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; | |
| }, | |
| async initFacebook() { | |
| window.fbAsyncInit = function() { | |
| window.FB.init({ | |
| appId: "8220179XXXXXXXXX", //You will need to change this | |
| cookie: true, // This is important, it's not enabled by default | |
| version: "v13.0" | |
| }); | |
| }; | |
| }, | |
| async loadFacebookSDK(d, s, id) { | |
| var 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); | |
| } | |
| } | |
| }; | |
| </script> | |
| <style> | |
| .button{ | |
| color:white; | |
| min-width: 150px; | |
| background-color: #000000a1; | |
| height: 2.5rem; | |
| border-radius: 2rem; | |
| font-weight: 400; | |
| font-size: 0.8rem; | |
| } | |
| </style> |
im gettting error when click button
Cannot read properties of undefined (reading 'login')
TypeError: Cannot read properties of undefined (reading 'login')
at Proxy.logInWithFacebook (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/FacebookLogin.vue?vue&type=script&lang=js:8:17)
im having the same issue like @asadmmn . cannot read properties of undefined... etc
edited:
okay, found the issue
you will need to return the promises
async loadFacebookSDK(d, s, id) {
return new Promise((resolve, reject) => {
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);
js.onload = resolve;
js.onerror = reject;
});
},
async initFacebook() {
return new Promise((resolve) => {
window.fbAsyncInit = function () {
window.FB.init({
appId: "your-app-id",
cookie: true, // enable cookies to allow the server to access
xfbml: true, // parse social plugins on this page
version: "v16.0",
});
resolve();
};
});
},
@harithzainudin have you solved it ?? any one please tell me how to solve
yes, you can refer back to my edited answer above @asadmmn :)
im having the same issue like @asadmmn .
cannot read properties of undefined... etcedited: okay, found the issue you will need to return the promises
async loadFacebookSDK(d, s, id) { return new Promise((resolve, reject) => { 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); js.onload = resolve; js.onerror = reject; }); }, async initFacebook() { return new Promise((resolve) => { window.fbAsyncInit = function () { window.FB.init({ appId: "your-app-id", cookie: true, // enable cookies to allow the server to access xfbml: true, // parse social plugins on this page version: "v16.0", }); resolve(); }; }); },
@derekjj the idea is to only load the sdk if the user clicks "Login with Facebook", hence the example is not using the mounted event.