SvelteKit集成Facebook SDK授权：TypeScript环境问题求助

1. 修复TypeScript全局类型声明 #

创建（或修改）src/globals.d.ts文件，内容如下：

declare global {
  interface Window {
    FB: any;
    fbAsyncInit: () => void;
  }
}

// 必须导出空对象，让TypeScript识别这个模块
export {};

检查项目根目录的tsconfig.json，确保include数组包含类型声明文件：

{
  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
}

2. 优化Facebook SDK加载逻辑 #

在src/app.html的<head>标签中添加SDK初始化代码（替换你的应用ID和API版本）：

<script>
  window.fbAsyncInit = function() {
    window.FB.init({
      appId      : '你的Facebook应用ID',
      cookie     : true,
      xfbml      : true,
      version    : 'v18.0' // 替换为最新API版本
    });
    window.FB.AppEvents.logPageView();
  };

  (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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

3. 实现FacebookBtn组件的授权逻辑 #

在src/lib/components/FacebookBtn.svelte中编写组件代码：

<script lang="ts">
  import { onMount } from 'svelte';

  // 仅在客户端执行代码，避免SSR报错
  onMount(async () => {
    // 等待Facebook SDK加载完成
    await new Promise(resolve => {
      if (window.FB) {
        resolve(true);
      } else {
        window.fbAsyncInit = () => resolve(true);
      }
    });

    // 处理Facebook登录逻辑
    const handleLogin = () => {
      window.FB.login((response) => {
        if (response.authResponse) {
          // 授权成功，获取用户信息
          window.FB.api('/me', { fields: 'name,email' }, (userInfo) => {
            console.log('用户信息:', userInfo);
            console.log('授权凭证:', response.authResponse);
            // 此处可将凭证发送至后端验证
          });
        } else {
          console.log('用户取消授权或登录失败');
        }
      }, { scope: 'public_profile,email' }); // 请求的权限范围
    };

    // 绑定点击事件
    const btn = document.getElementById('facebook-login-btn') as HTMLElement;
    btn.addEventListener('click', handleLogin);

    // 清理事件监听
    return () => btn.removeEventListener('click', handleLogin);
  });
</script>

<button id="facebook-login-btn" class="facebook-btn">
  用Facebook登录
</button>

<style>
  .facebook-btn {
    background-color: #1877f2;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }
</style>

4. 在SignIn组件中使用FacebookBtn #

假设SignIn组件位于src/routes/sign-in/+page.svelte，调整代码如下：

<script lang="ts">
  import FacebookBtn from '$lib/components/FacebookBtn.svelte';
  let username: string = '';
  let password: string = '';

  const forgotPassword = () => {
    // 实现忘记密码逻辑
  };
</script>

<div class="page-container">
  <div class="form">
    <picture class="logo">
      <source srcset="https://gitlab.trisgram.com/trisgram/company-graphics/-/raw/main/Identity/3gram_logo_transparent_128px.avif" type="image/avif">
      <img src="https://gitlab.trisgram.com/trisgram/company-graphics/-/raw/main/Identity/3gram_logo_transparent.png" alt="logo" class="logo">
    </picture>
    <h1>Sign in</h1>
    <div class="input-box">
      <input type="text" placeholder="Username" bind:value={username} />
      <i class='bx bx-user'></i>
    </div>
    <div class="input-box">
      <input type="password" placeholder="Password" bind:value={password} />
      <i class='bx bx-lock-alt'></i>
    </div>
    
    <button class="button2" on:click={forgotPassword}>Forgot password?</button>
    
    <FacebookBtn />
    <a href="/profile/profilePage">Sign in</a>

    <div class="buttonWithText">
      <p>Don't have account?</p>
      <a href="/sign-up">Sign up</a>
    </div>
  </div>
</div>

关键注意事项 #

• SSR兼容：FB对象仅存在于浏览器环境，必须用onMount确保代码只在客户端执行，避免服务器端渲染报错。
• SDK加载等待：通过Promise等待FB初始化完成，防止组件渲染时SDK未加载完成导致的报错。
• 类型声明：globals.d.ts必须导出空对象，否则TypeScript不会识别该全局声明文件。

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