I am in the process of implementing Facebook login into my Angular7 application using Typescript. Although I have successfully integrated Facebook's Login Button plugin for logging in, I am facing issues with providing a callback method to the button's data-onlogin attribute.
Even though I have defined a typescript function within the same component as the login button, it seems that the button is not recognizing it.
Additionally, I am utilizing facebook-js-sdk type definitions.
login.component.html
<div
class="fb-login-button"
data-width=""
data-size="large"
data-button-type="login_with"
data-auto-logout-link="false"
sdata-use-continue-as="false"
data-onLogin="checkLoginStatus()"
>
</div>
login.component.ts
import { Component, OnInit } from '@angular/core';
// Defining the Facebook Javascript SDK
declare var FB: any;
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor() { }
ngOnInit() {
}
checkLoginStatus() {
FB.checkLoginStatus((result) => {
console.log(result);
});
}
}
index.html
<body>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: '{app-id}',
autoLogAppEvents: true,
xfbml: true,
version: 'v3.3'
});
};
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<app-root></app-root>
</body>
An error is being thrown by ZoneJS in the console stating:
Uncaught ReferenceError: checkLoginStatus is not defined