Currently, I am implementing a Facebook login feature on my website and displaying a loading progress indicator for the user until I receive authentication response from Facebook. However, I encountered an issue with hiding the progress bar as the variable to control it is undefined within the window function.
In my code snippet:
initFacebook() {
this.progress=true;
window.fbAsyncInit = function() {
window.FB.init({
appId: "MY-APP-ID", //You will need to change this
cookie: true, // This is important, it's not enabled by default
version: "v2.6",
status: false,
});
window.FB.login(function(response) {
if (response.status === 'connected'){
window.FB.api('/me?fields=id,name,email', function(response) {
console.log( response);
})
} else {
console.log("User cancelled login or did not fully authorize.");
}
},
{scope: 'public_profile,email'}
);
this.progress = false;
console.warn(this.progress);
};
},
I am facing difficulty setting this.progress to false once all responses are received from Facebook and encounter an error while trying to access this variable using console.log.
The error message states:
Login.vue?7463:175 undefined
I would appreciate any advice on how to properly set the this.progress variable to false once the authentication process is completed successfully.