Facebook Login Api 在 Angular 控制器中不起作用

Posted 2023-03-16

【中文标题】Facebook Login Api 在 Angular 控制器中不起作用

【英文标题】：Facebook Login Api Not working inside Angular Controller

【发布时间】：2016-05-06 11:18:37

【问题描述】：

我在我的 Angular 应用程序中使用 facebook web sdk，但我不断收到以下错误：-

checkLoginState is not defined

我的身份验证控制器中的 Facebook 脚本：-

function statusChangeCallback(response) 
    console.log('statusChangeCallback');
    console.log(response);
    if (response.status === 'connected') 
        testAPI();
     else if (response.status === 'not_authorized') 
        document.getElementById('status').innerhtml = 'Please log ' +
            'into this app.';
     else 
        document.getElementById('status').innerHTML = 'Please log ' +
            'into Facebook.';
    


function checkLoginState() 
    FB.getLoginStatus(function(response) 
        statusChangeCallback(response);
    );


window.fbAsyncInit = function() 
    FB.init(
        appId      : 'xxxxxxxxx',
        xfbml      : true,
        version    : 'v2.6'
    );

;

(function(d, s, id)
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
(document, 'script', 'facebook-jssdk'));


function testAPI() 
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me',  locale: 'en_US', fields: 'name, email, id' , function(response) 
        console.log('Successful login for name: ' + response.name);
        console.log('Successful login for email: ' + response.email);
        console.log('Successful login for id: ' + response.id);
        console.log('Successful login for picture: ' + response.picture);
        document.getElementById('status').innerHTML =
            'Thanks for logging in, ' + response.name + '!';
        document.getElementById('pic').innerHTML =
            'Your user id is : ' + response.id + "<br />" +
            "<img src='" + "https://graph.facebook.com/" + response.id + "/picture?type=large' alt='' />";
    );

【问题讨论】：

checkLoginSte 在哪里调用？

checkLoginState 需要return 的东西。

如果我将相同的脚本放在 HTML 页面的

checkLoginState() 不是作用域方法，因此未在 ui 中定义。检查我的答案以获取解决方案

【参考方案1】：

您正在关注this web guide 将 facebook 登录集成到您的 Angular 应用程序。他们在此链接中使用纯 javascript。

您应该使用this tutorial 而不是在您的angular 应用程序 中集成facebook 登录/api。这是他们的documentation 中提到的推荐链接。