无Firebase的Flutter应用集成Facebook与Google登录方案问询

先直接回答你的核心疑问：你用的这个Facebook登录插件（看起来是旧版的flutter_facebook_login，现在更推荐用flutter_facebook_auth）并不是专为Firebase设计的——它的核心作用只是帮你完成Facebook OAuth2.0的授权流程，拿到用户的访问令牌和基础信息，完全可以脱离Firebase，配合你的NodeJS+MySQL后端使用。

接下来分模块解决你的问题：

一、Facebook OAuth Redirect URL 配置 #

你在Facebook开发者控制台需要填写的OAuth redirect URL，应该指向你的NodeJS后端的回调端点，因为你需要后端来验证Facebook返回的令牌有效性，而不是直接在前端处理。

举个例子：

• 如果你的NodeJS后端运行在本地localhost:3000，可以填http://localhost:3000/auth/facebook/callback
• 上线后要替换成你的生产域名，比如https://yourdomain.com/auth/facebook/callback

另外注意：

• 如果你同时支持Flutter Web端，还需要添加Web端的回调URL（比如http://localhost:5555/__/auth/handler，具体取决于你的Flutter Web启动端口）
• 所有填写的URL必须和你后端实际接收请求的路径完全一致，包括HTTP/HTTPS协议

二、Facebook登录的完整流程（无Firebase） #

你的现有代码已经能拿到Facebook的用户信息和accessToken，接下来需要补充后端验证和数据库操作：

前端（Flutter）修改建议 #

在拿到profile后，把accessToken传给你的NodeJS后端，让后端去验证令牌的合法性：

case FacebookLoginStatus.loggedIn:
  print("LoggedIn");
  var graphResponse = await http.get(
      'https://graph.facebook.com/v2.12/me?fields=name,first_name,last_name,email,picture.height(200)&access_token=${facebookLoginResult.accessToken.token}');
  var profile = json.decode(graphResponse.body);
  print(profile.toString());
  
  // 新增：把accessToken传给后端验证
  final response = await http.post(
    Uri.parse('http://localhost:3000/auth/facebook/verify'),
    body: {
      'access_token': facebookLoginResult.accessToken.token,
      'user_profile': json.encode(profile),
    },
  );
  
  if (response.statusCode == 200) {
    // 后端验证成功，返回用户的本地会话或JWT，前端保存后跳转首页
    onLoginStatusChanged(true, profileData: profile);
  } else {
    // 验证失败，提示用户
    onLoginStatusChanged(false);
  }
  break;

后端（NodeJS）验证逻辑 #

你需要调用Facebook的debug_token接口来验证令牌是否有效：

const axios = require('axios');

app.post('/auth/facebook/verify', async (req, res) => {
  const { access_token, user_profile } = req.body;
  const appId = '你的Facebook应用ID';
  const appSecret = '你的Facebook应用密钥';

  try {
    // 调用Facebook的debug_token接口验证令牌
    const debugResponse = await axios.get(`https://graph.facebook.com/debug_token`, {
      params: {
        input_token: access_token,
        access_token: `${appId}|${appSecret}`
      }
    });

    if (debugResponse.data.data.is_valid) {
      // 令牌有效，解析用户信息
      const userData = JSON.parse(user_profile);
      // 检查MySQL数据库中是否存在该用户（通过facebook_id）
      const existingUser = await db.query('SELECT * FROM users WHERE facebook_id = ?', [userData.id]);
      
      if (existingUser.length > 0) {
        // 用户已存在，返回登录成功的会话（比如JWT）
        const token = generateJWT(existingUser[0]);
        res.status(200).json({ token, user: existingUser[0] });
      } else {
        // 用户不存在，创建新用户
        const newUser = await db.query(
          'INSERT INTO users (facebook_id, name, email, avatar) VALUES (?, ?, ?, ?)',
          [userData.id, userData.name, userData.email, userData.picture.data.url]
        );
        const token = generateJWT(newUser[0]);
        res.status(200).json({ token, user: newUser[0] });
      }
    } else {
      res.status(401).json({ message: 'Invalid Facebook token' });
    }
  } catch (error) {
    res.status(500).json({ message: 'Server error' });
  }
});

三、Google登录的集成思路（无Firebase） #

和Facebook类似，你可以使用google_sign_in插件来实现，核心流程：

1. 在Google Cloud Console创建应用，获取客户端ID
2. Flutter端用插件获取用户的idToken（注意不是accessToken，idToken更适合后端验证）
3. 把idToken传给NodeJS后端，调用Google的tokeninfo接口验证：https://oauth2.googleapis.com/tokeninfo?id_token=你的idToken
4. 验证通过后，在MySQL中创建或更新用户，返回会话令牌

示例Flutter代码片段：

import 'package:google_sign_in/google_sign_in.dart';

final GoogleSignIn _googleSignIn = GoogleSignIn(
  scopes: ['email', 'profile'],
  clientId: '你的Google客户端ID',
);

void initiateGoogleLogin() async {
  try {
    final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();
    final GoogleSignInAuthentication googleAuth = await googleUser!.authentication;
    
    // 把idToken传给后端验证
    final response = await http.post(
      Uri.parse('http://localhost:3000/auth/google/verify'),
      body: {
        'id_token': googleAuth.idToken,
      },
    );
    
    if (response.statusCode == 200) {
      // 登录成功处理
      onLoginStatusChanged(true, profileData: json.decode(response.body)['user']);
    } else {
      onLoginStatusChanged(false);
    }
  } catch (error) {
    print('Google login error: $error');
    onLoginStatusChanged(false);
  }
}

四、关键注意事项 #

• 所有第三方OAuth令牌的验证必须在后端完成，绝对不能只在前端处理，避免伪造令牌的安全问题
• 生产环境必须使用HTTPS协议，否则Facebook/Google会拒绝OAuth请求
• 记得在Facebook和Google开发者控制台中，正确配置你的应用包名、签名哈希（Android）、Bundle ID（iOS）等信息

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