Flutter跨平台开发鸿蒙化华为登录插件使用指南

一、插件介绍

华为登录插件（flutter_huawei_login）是一款专门为Flutter OpenHarmony跨平台开发设计的华为账号一键登录组件。该插件实现了Flutter与OpenHarmony原生能力的无缝对接，让开发者能够快速集成华为账号登录功能，为用户提供便捷、安全的登录体验。

核心功能

• 华为账号一键登录
• 匿名手机号快速登录
• 用户协议状态管理
• 跨平台数据通信

二、环境设置

在开始使用华为登录插件之前，需要确保您的开发环境满足以下要求：

Flutter环境要求

• Flutter SDK版本：≥ 3.7.0
• Dart SDK版本：≥ 2.19.6

OpenHarmony环境要求

• OpenHarmony SDK API版本：≥ 9
• DevEco Studio版本：≥ 3.0

三、包的引入

由于此插件为自定义修改版本，需要通过Git方式引入。在您的Flutter项目中，修改pubspec.yaml文件，添加以下依赖配置：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  webview_flutter:
    git:
      url: "https://atomgit.com/openharmony-tpc/flutter_packages.git"
      path: packages/webview_flutter/webview_flutter
  fluttertoast:
    git:
      url: "https://atomgit.com/openharmony-sig/flutter_fluttertoast"
  flutter_huawei_login:
    git:
      url: "https://atomgit.com/openharmony-sig/flutter_huawei_login.git"
      path: flutter_huawei_login

添加依赖后，执行以下命令获取包：

flutter pub get

四、API调用

1. 基础组件

HuaweiLoginView

华为登录视图组件，用于在Flutter界面中嵌入华为登录按钮。

构造函数：

HuaweiLoginView(OnViewCreated onViewCreated)

参数说明：

• onViewCreated：视图创建完成回调，用于获取LoginViewController实例

LoginViewController

登录视图控制器，用于与OpenHarmony原生视图通信。

主要方法：

• customDataStream：获取来自OHOS端的数据流
• setAgreementStatus(bool v)：设置协议同意状态
• agreementAndLogin()：同意协议并登录
• sendMessageToOhosView(String method, String message)：发送消息给OHOS视图

2. 完整使用流程

步骤1：初始化登录视图

import 'package:flutter/material.dart';
import 'package:flutter_huawei_login/login_view.dart';
import 'package:fluttertoast/fluttertoast.dart';

class LoginExample extends StatefulWidget {
  const LoginExample({Key? key}) : super(key: key);

  @override
  State<LoginExample> createState() => _LoginExampleState();
}

class _LoginExampleState extends State<LoginExample> {
  String phoneNumber = '';
  bool agreement = false;
  LoginViewController? _controller;

  void _onCustomOhosViewCreated(LoginViewController controller) {
    _controller = controller;
    // 监听来自OHOS端的数据
    _controller?.customDataStream.listen((data) {
      final result = jsonDecode(data);
      setState(() {
        switch (result['method']) {
          case 'quickLoginAnonymousPhone':
            // 获取匿名手机号
            phoneNumber = result['data'];
            break;
          case 'loginSuccess':
            // 登录成功
            Fluttertoast.showToast(msg: '登录成功：${result['data']}');
            break;
          case '1005300001':
            // 处理特定事件
            _showAgreementDialog();
            break;
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 登录视图
          Container(
            margin: const EdgeInsets.only(left: 20, top: 20, right: 20),
            height: 40,
            child: HuaweiLoginView(_onCustomOhosViewCreated),
          ),
          // 用户协议
          Row(
            children: [
              Checkbox(
                value: agreement,
                onChanged: (v) {
                  setState(() {
                    agreement = v!;
                    // 更新协议状态到OHOS端
                    _controller?.setAgreementStatus(agreement);
                  });
                },
              ),
              const Text('已阅读并同意用户协议和隐私条款'),
            ],
          ),
          // 显示登录手机号
          Text('登录手机号：$phoneNumber'),
        ],
      ),
    );
  }
}

步骤2：处理登录结果

登录结果通过customDataStream回调返回，主要包含以下事件：

• quickLoginAnonymousPhone：获取到匿名手机号
• loginSuccess：登录成功，返回用户信息
• loginFailed：登录失败，返回错误信息

步骤3：主动触发登录

在用户同意协议后，可以主动调用登录方法：

ElevatedButton(
  onPressed: () {
    if (agreement) {
      _controller?.agreementAndLogin();
    } else {
      Fluttertoast.showToast(msg: '请先同意用户协议和隐私条款');
    }
  },
  child: const Text('同意协议并登录'),
)

五、代码示例

完整示例应用

import 'dart:convert';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_huawei_login/login_view.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() {
  runApp(const MaterialApp(home: MyHome()));
}

class MyHome extends StatelessWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: LoginExample(),
    );
  }
}

class LoginExample extends StatefulWidget {
  const LoginExample({Key? key}) : super(key: key);

  @override
  State<LoginExample> createState() => _LoginExampleState();
}

class _LoginExampleState extends State<LoginExample> {
  String phoneNumber = '';
  bool agreement = false;
  LoginViewController? _controller;

  void _onCustomOhosViewCreated(LoginViewController controller) {
    _controller = controller;
    _controller?.customDataStream.listen((data) {
      final result = jsonDecode(data);
      setState(() {
        switch (result['method']) {
          case 'quickLoginAnonymousPhone':
            phoneNumber = result['data'];
            break;
          case 'loginSuccess':
            Fluttertoast.showToast(msg: '登录成功');
            break;
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const SizedBox(height: 100),
        const Text(
          '华为账号登录',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: 50),
        Container(
          margin: const EdgeInsets.symmetric(horizontal: 20),
          height: 40,
          child: HuaweiLoginView(_onCustomOhosViewCreated),
        ),
        const SizedBox(height: 20),
        Row(
          children: [
            Checkbox(
              value: agreement,
              onChanged: (v) {
                setState(() {
                  agreement = v!;
                  _controller?.setAgreementStatus(agreement);
                });
              },
            ),
            Expanded(
              child: RichText(
                text: TextSpan(
                  children: [
                    const TextSpan(
                      text: '已阅读并同意',
                      style: TextStyle(color: Colors.black),
                    ),
                    TextSpan(
                      text: '《用户协议》',
                      style: const TextStyle(color: Colors.blue),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          // 打开用户协议
                          Fluttertoast.showToast(msg: '打开用户协议');
                        },
                    ),
                    const TextSpan(
                      text: '和',
                      style: TextStyle(color: Colors.black),
                    ),
                    TextSpan(
                      text: '《隐私条款》',
                      style: const TextStyle(color: Colors.blue),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          // 打开隐私条款
                          Fluttertoast.showToast(msg: '打开隐私条款');
                        },
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
        const SizedBox(height: 50),
        if (phoneNumber.isNotEmpty) ...[
          const Text('检测到手机号：'),
          Text(
            phoneNumber,
            style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
        ],
        const SizedBox(height: 30),
        ElevatedButton(
          onPressed: () {
            if (agreement) {
              _controller?.agreementAndLogin();
            } else {
              Fluttertoast.showToast(msg: '请先同意用户协议和隐私条款');
            }
          },
          child: const Text('确认登录'),
        ),
      ],
    );
  }
}

五、总结

华为登录插件（flutter_huawei_login）为Flutter OpenHarmony跨平台开发提供了便捷的华为账号登录解决方案。通过简单的API调用，开发者可以快速集成华为账号登录功能，包括一键登录、匿名手机号登录等。

使用该插件的主要步骤包括：

1. 配置开发环境，确保Flutter和OpenHarmony SDK版本符合要求
2. 通过AtomGit引入插件依赖
3. 在Flutter界面中添加HuaweiLoginView组件
4. 通过LoginViewController与原生视图通信
5. 处理登录结果回调

该插件实现了Flutter与OpenHarmony原生能力的无缝对接，为开发者提供了统一的开发体验，同时保持了华为登录的原生性能和安全性。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.youkuaiyun.com