Meta OAuth验证错误求助：redirect_uri匹配问题排查

问题描述 #

按照Meta官方文档编写了OAuth授权码获取代码，前端成功拿到code，但后端请求换取access token时始终收到redirect_uri不匹配的错误。已在Facebook商业版登录设置中配置了URI，尝试过带/不带结尾斜杠的注册页与回调页，也试过传递空redirect_uri或不传递该参数，当前使用ngrok提供HTTPS服务，但问题仍未解决。

前端代码 #

window.fbAsyncInit = function() {
            FB.init({
                appId: '{APP_ID}',
                cookie: true,
                xfbml: true,
                version: 'v22.0' 
            });
        };

        window.addEventListener('message', (event) => {
            if (!event.origin.endsWith('facebook.com')) return;
            try { 
                const data = JSON.parse(event.data);
                if (data.type === 'WA_EMBEDDED_SIGNUP') {
                    console.log('message event: ', data);
                }
            } catch {
                // ignore errors
            }
        });

        const fbLoginCallback = (response) => {
            if (response.authResponse) {
                const code = response.authResponse.code;
                console.log('Got code:', code);
                
            } else {
                console.log('User cancelled login or did not fully authorize.', response);
            }
        }

        const launchWhatsAppSignup = () => {
            FB.login(fbLoginCallback, {
                config_id: '{CONFIG_ID}',
                response_type: 'code',
                override_default_response_type: true,
                extras: {
                    setup: {}
                }
            });
        }

后端Python代码 #

@app.get("/oauth_callback")
async def oauth_callback(code: str):
    if not http_client:
        return "Server Error: HTTP Client not ready"

    APP_ID = ID
    APP_SECRET = SECRET
    
   
    token_url = (
        f"https://graph.facebook.com/v22.0/oauth/access_token?"
        f"client_id={APP_ID}&"
        f"client_secret={APP_SECRET}&"
        f"code={code}"
    )

错误信息 #

"error": {
    "message": "Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request",
    "type": "OAuthException",
    "code": 100,
    "error_subcode": 36008,
    "fbtrace_id": "AdnLOB3APv-8mab1UQ8jGBS"
}

排查与解决步骤 #

• 前端显式指定redirect_uri
  Meta OAuth要求获取code时的redirect_uri必须和换token时完全一致，前端FB.login未指定该参数时，会默认使用应用设置中的第一个URI，容易出现匹配偏差。修改前端代码，添加精确的回调地址：

  const launchWhatsAppSignup = () => {
      FB.login(fbLoginCallback, {
          config_id: '{CONFIG_ID}',
          response_type: 'code',
          override_default_response_type: true,
          redirect_uri: 'https://你的ngrok域名/oauth_callback', // 与后端回调地址完全一致
          extras: {
              setup: {}
          }
      });
  }
  

• 后端必须传递相同的redirect_uri
  换token请求必须携带和前端完全一致的redirect_uri，包括HTTPS协议、域名、路径、结尾斜杠：

  token_url = (
      f"https://graph.facebook.com/v22.0/oauth/access_token?"
      f"client_id={APP_ID}&"
      f"client_secret={APP_SECRET}&"
      f"code={code}&"
      f"redirect_uri=https://你的ngrok域名/oauth_callback" # 和前端参数完全匹配
  )
  

• 检查应用URI配置的精确性
  在Facebook商业版「登录设置」中，确保配置的回调URI：

  • 为HTTPS协议（ngrok地址符合要求）
  • 路径与前后端使用的完全一致（比如是否带结尾斜杠）
  • 无拼写错误，且已保存生效

• 确认code的有效性
  Meta授权码code仅能使用一次，重复使用会触发匹配错误，确保每次换token都使用新获取的code。

• 保持API版本一致
  前端使用v22.0，后端请求建议使用相同版本，避免因API版本差异导致规则变化。

• 同步ngrok动态域名
  ngrok每次启动会生成新域名，若重启过ngrok，需同步更新Facebook应用设置及前后端代码中的地址。

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