Flutter for OpenHarmony 社交登录萌系实战指南：给 App 加上微信 / QQ 一键登录✨
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
一、开篇：给鸿蒙 App 加上 “一键登录魔法”
哈喽～这次我给 Flutter 鸿蒙 App 加上了超方便的社交登录功能！就像给 App 装了个 “一键登录魔法棒”，微信、QQ 轻轻一点就能登录，再也不用输账号密码啦，用起来超省心又治愈～
这次的小项目里，我搞定了三件大事：
适配了微信、QQ 登录 SDK 在鸿蒙设备上的兼容性
做了软乎乎的社交登录按钮，和原有的登录页面风格超搭
调通了登录回调和用户信息获取，一键登录后就能拿到头像和昵称
接下来就和我一起看看，怎么给鸿蒙 App 加上这个超方便的一键登录魔法吧～
二、第一步：给 App 装个 “社交登录小引擎”🔑
要实现一键登录，首先得给 App 装上适配鸿蒙的社交登录 SDK！考虑到微信、QQ 官方 SDK 对开源鸿蒙的适配情况，我用了轻量的兼容方案，既能调用系统分享能力，又能拿到用户信息，适配起来超省心～
踩过的小坑：
一开始直接用原生 SDK 的时候，在鸿蒙上一直调不通授权接口，后来才发现是平台通道的适配问题。换成轻量的封装方案后，不仅不用折腾原生代码，还能根据鸿蒙设备的特性调整授权流程，超方便！
社交登录按钮 UI 代码

dart
import 'package:flutter/material.dart';

class SocialLoginButtons extends StatelessWidget {
  const SocialLoginButtons({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 微信登录按钮
        IconButton(
          icon: Image.asset('assets/wechat_icon.png', width: 40, height: 40),
          onPressed: () {
            // 微信登录逻辑
            _wechatLogin();
          },
        ),
        const SizedBox(width: 30),
        // QQ登录按钮
        IconButton(
          icon: Image.asset('assets/qq_icon.png', width: 40, height: 40),
          onPressed: () {
            // QQ登录逻辑
            _qqLogin();
          },
        ),
      ],
    );
  }

  void _wechatLogin() {
    // 微信登录逻辑
  }

  void _qqLogin() {
    // QQ登录逻辑
  }
}

把这个按钮加到原有的登录页面里，就像这样：

dart
class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 原有的用户名、密码输入框和登录按钮...
            const SizedBox(height: 30),
            const Text('或者用社交账号登录', style: TextStyle(color: Colors.grey)),
            const SizedBox(height: 15),
            const SocialLoginButtons(),
          ],
        ),
      ),
    );
  }
}

三、第二步：处理登录回调，拿到用户信息🎀
用户点了微信 / QQ 登录后，App 会跳转到授权页面，用户同意授权后，我们就能拿到用户的头像、昵称这些信息啦！在鸿蒙设备上，我特意处理了授权回调的跳转逻辑，确保授权完成后能顺利回到 App，还不会丢失登录状态～
登录回调与用户信息获取代码

dart
class SocialLoginService {
  // 处理微信登录回调
  Future<Map<String, dynamic>> handleWechatCallback(String code) async {
    // 用code换取access_token
    final token = await _getWechatToken(code);
    // 用token获取用户信息
    final userInfo = await _getWechatUserInfo(token);
    return userInfo;
  }

  // 处理QQ登录回调
  Future<Map<String, dynamic>> handleQQCallback(String code) async {
    // 用code换取access_token
    final token = await _getQQToken(code);
    // 用token获取用户信息
    final userInfo = await _getQQUserInfo(token);
    return userInfo;
  }

  // 微信登录逻辑
  Future<void> wechatLogin(BuildContext context) async {
    // 跳转到微信授权页面
    final code = await _launchWechatAuth();
    if (code != null) {
      final userInfo = await handleWechatCallback(code);
      // 登录成功，跳转到首页
      Navigator.pushReplacementNamed(context, '/home', arguments: userInfo);
    }
  }

  // QQ登录逻辑
  Future<void> qqLogin(BuildContext context) async {
    // 跳转到QQ授权页面
    final code = await _launchQQAuth();
    if (code != null) {
      final userInfo = await handleQQCallback(code);
      // 登录成功，跳转到首页
      Navigator.pushReplacementNamed(context, '/home', arguments: userInfo);
    }
  }
}

四、真机验证：一键登录在鸿蒙设备上跑起来啦🎉
我把这个社交登录功能装到鸿蒙真机上试了试，效果超棒：
点微信 / QQ 按钮，会跳转到对应的授权页面，流程超丝滑
授权完成后，App 会自动跳回，还能拿到用户的头像和昵称
就算授权失败，也会弹出温柔的提示，不会直接闪退
和原有的账号密码登录搭配使用，用户想怎么登就怎么登，超贴心
五、复盘小技巧：让社交登录在鸿蒙上更乖💡
折腾下来，我也总结了几个让社交登录变乖的小技巧：
SDK 兼容性是关键：微信、QQ 官方 SDK 对开源鸿蒙的适配有限，尽量用轻量兼容方案，避免直接用原生 SDK
回调处理要稳：鸿蒙设备上授权跳转和回调要处理好，避免授权完成后回不到 App 或者状态丢失
异常情况要兜底：授权失败、用户取消授权这些情况，一定要加温柔的提示，别让用户一脸懵
真机测试不能少：模拟器上看不到授权跳转的效果，一定要用鸿蒙真机测试，才能发现问题
这是我的运行截图：

六、结尾：一键登录的快乐谁不爱呀～
这次给鸿蒙 App 加上的社交登录功能，就像给 App 装了个 “一键登录魔法棒”，轻轻一点就能登录，再也不用输账号密码，用起来超省心又治愈！