Facebook JavaScript SDK登录报错：'statusChangeCallback'未定义怎么办？

Hey there! I see you're hitting that frustrating Uncaught ReferenceError: statusChangeCallback is not defined error when setting up Facebook Login for your site—totally get it, those tutorial gaps can trip up even folks who follow steps closely. Let's break down what's going on and fix it.

Why this error happens #

The error boils down to one simple thing: your code is calling a function named statusChangeCallback, but your browser can't find where that function is defined. Facebook's official tutorial assumes you'll create this callback to handle the login status response it sends back, but if you skipped that part (or the tutorial didn't spell it out clearly), you'll run into this issue.

Looking at your code snippet, you've got the checkLoginState() function that calls statusChangeCallback(response), but you haven't actually written the statusChangeCallback function itself. That's exactly why the browser is throwing an error.

How to fix it #

You just need to define the statusChangeCallback function somewhere in your <script> tag—make sure it's placed before any code that calls it (JavaScript runs top-to-bottom, so order matters!). Here's a complete, working example that includes this missing function:

<script>
  // 首先定义statusChangeCallback函数，处理FB返回的登录状态
  function statusChangeCallback(response) {
    console.log('登录状态更新:', response);
    
    // 根据不同的状态做不同处理
    if (response.status === 'connected') {
      // 用户已登录Facebook并授权了你的应用
      console.log('用户已授权，可调用API获取信息');
      testUserAPI(); // 可选：调用API获取用户信息
    } else if (response.status === 'not_authorized') {
      // 用户登录了Facebook，但没授权你的应用
      document.getElementById('login-status').textContent = '请先授权我们的应用哦';
    } else {
      // 用户没登录Facebook
      document.getElementById('login-status').textContent = '请先登录Facebook';
    }
  }

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

  // 加载Facebook SDK的代码
  (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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0&appId=YOUR_APP_ID&autoLogAppEvents=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  // 可选：测试获取用户信息的函数
  function testUserAPI() {
    FB.api('/me', {fields: 'name,email'}, function(response) {
      console.log('用户信息:', response);
      document.getElementById('user-info').textContent = `欢迎回来，${response.name}！`;
    });
  }
</script>

Key things to remember #

• Replace YOUR_APP_ID with the actual app ID you created in the Facebook Developer Dashboard
• Make sure statusChangeCallback is defined before checkLoginState or any button that triggers checkLoginState (like the Facebook Login button that uses onclick="checkLoginState()")
• Double-check for typos! A common mistake is misspelling the function name (e.g., statusChangeCallBack with a capital B), which will also trigger this error

内容的提问来源于stack exchange，提问作者vibs2006