Flutter华为账号登录插件sign_in_with_huawei的使用

Flutter华为账号登录插件sign_in_with_huawei的使用

用于 HarmonyOS 上华为账号登录的 Flutter 插件。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  sign_in_with_huawei: ^0.0.3

然后运行以下命令以安装依赖：

flutter pub get

前提条件

在开始之前，请先阅读 开发准备 和 华为账号登录（获取UnionID/OpenID）。

使用方法

以下是一个完整的示例代码，展示如何使用 sign_in_with_huawei 插件进行华为账号登录。

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

import 'package:sign_in_with_huawei/sign_in_with_huawei.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  // 登录函数
  Future<void> loginWithHuaweiId() async {
    try {
      // 调用 authById 方法进行登录
      final response = await SignInWithHuawei.instance.authById(
        forceLogin: true, // 强制登录
        state: "any state", // 随机状态值
        nonce: "any nonce", // 随机字符串
        idTokenAlg: IdTokenSignAlgorithm.PS256, // 签名算法
      );

      // 打印返回结果
      print("Response: $response");

      // 提取返回的数据
      print("State: ${response.state}");
      print("Auth Code: ${response.authCode}");
      print("ID Token: ${response.idToken}");
      print("OpenID: ${response.openID}");
      print("UnionID: ${response.unionID}");
    } catch (e) {
      // 捕获并打印错误信息
      print("Error: $e");
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('华为账号登录示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: loginWithHuaweiId, // 点击按钮触发登录
            child: const Text('登录华为账号'),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter华为账号登录插件sign_in_with_huawei的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter华为账号登录插件sign_in_with_huawei的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


要在Flutter应用中使用华为账号登录功能，你可以使用 sign_in_with_huawei 插件。以下是使用该插件的详细步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 sign_in_with_huawei 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  sign_in_with_huawei: ^1.0.0

然后运行 flutter pub get 以安装依赖。

2. 配置华为开发者账号

在使用华为账号登录功能之前，你需要在华为开发者联盟网站上创建一个应用，并启用华为账号登录服务。

  1. 登录 华为开发者联盟。
  2. 创建一个新的应用，并获取 App ID 和 App Secret。
  3. 在应用管理页面中，启用 Huawei Account 服务。

3. 配置 Android 项目

在 Android 项目中，你需要在 AndroidManifest.xml 文件中添加以下配置：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <application>
        <!-- 其他配置 -->

        <!-- 华为账号登录配置 -->
        <meta-data
            android:name="com.huawei.hms.client.appid"
            android:value="your_app_id" />
    </application>
</manifest>

将 your_app_id 替换为你在华为开发者联盟上获取的 App ID。

4. 配置 iOS 项目

在 iOS 项目中，你需要在 Info.plist 文件中添加以下配置：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>your_app_bundle_id</string>
        </array>
    </dict>
</array>

将 your_app_bundle_id 替换为你的应用的 Bundle ID。

5. 使用 sign_in_with_huawei 插件进行登录

在你的 Flutter 代码中，你可以使用 sign_in_with_huawei 插件来实现华为账号登录功能。

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

class HuaweiLoginScreen extends StatefulWidget {
  [@override](/user/override)
  _HuaweiLoginScreenState createState() => _HuaweiLoginScreenState();
}

class _HuaweiLoginScreenState extends State<HuaweiLoginScreen> {
  String _loginResult = '';

  Future<void> _signInWithHuawei() async {
    try {
      final AuthAccount authAccount = await SignInWithHuawei.signIn();
      setState(() {
        _loginResult = '登录成功: ${authAccount.displayName}';
      });
    } catch (e) {
      setState(() {
        _loginResult = '登录失败: $e';
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('华为账号登录'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _signInWithHuawei,
              child: Text('使用华为账号登录'),
            ),
            SizedBox(height: 20),
            Text(_loginResult),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: HuaweiLoginScreen(),
));
回到顶部