Flutter区块链认证插件 web3auth_flutter 的使用

Web3Auth 是一种无密码认证服务，专为 Web3 应用和钱包设计。它通过聚合 OAuth 登录（如 Google、Twitter、Discord）、不同钱包以及创新的多方计算（MPC），为您的应用程序中的每个用户提供无缝的登录体验。

📖 文档

查阅官方 Web3Auth 文档 和 SDK 参考 以开始使用！

💡 特性

• 插件式 OAuth 基于 Web3 认证服务
• 完全去中心化的非托管密钥基础设施
• 端到端可白标解决方案
• 基于阈值加密的密钥重建
• 多因素认证设置与恢复（包括密码、备份短语、设备因子编辑/删除等）
• 支持 WebAuthn 和无密码登录
• 支持连接多个钱包
• DApp 活动会话管理

…以及其他更多功能

⏪ 要求

iOS

• 仅支持 iOS 14+，因为需要使用 ASWebAuthenticationSession
  • Xcode 11.4+ / 12.x
  • Swift 4.x / 5.x
  • 对于 iOS 构建：platform :ios 需要设置为 14.0。检查您 Flutter 项目中的 ios/Podfile 文件进行修改。

Android

• 支持 API 版本 26 或更高版本。
  • 对于 Android 构建：compileSdkVersion 需要设置为 34。
  • 检查您 Flutter 项目中的 android/app/build.gradle 文件进行修改。

⚡ 安装

将 web3auth_flutter 添加为 pubspec.yaml 文件中的依赖项：

dependencies:
  web3auth_flutter: ^6.1.1

或运行以下命令：

flutter pub add web3auth_flutter

🌟 配置

查阅 SDK 参考 以配置 Android 和 iOS 构建。

🩹 示例

以下是一个完整的示例代码，展示了如何初始化、登录、登出用户，并处理异常：

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

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

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

class _MyAppState with WidgetsBindingObserver {
  String _privKey = '';
  String _userInfo = '';

  [@override](/user/override)
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    initWeb3Auth();
  }

  [@override](/user/override)
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  Future<void> initWeb3Auth() async {
    await Web3AuthFlutter.init(
      Web3AuthOptions(
        clientId: 'YOUR_WEB3AUTH_CLIENT_ID', // 替换为您从 dashboard.web3auth.io 获取的 client ID
        network: Network.sapphire_devnet,
        redirectUrl: 'YOUR_REDIRECT_URL', // 替换为您的重定向 URL
      ),
    );
  }

  Future<void> initialize() async {
    try {
      final result = await Web3AuthFlutter.initialize();
      setState(() {
        _privKey = result.privKey;
        _userInfo = result.userInfo.toString();
      });
    } catch (e) {
      print('Error initializing: $e');
    }
  }

  Future<void> login() async {
    try {
      await Web3AuthFlutter.login(LoginParams(loginProvider: Provider.google));
      initialize();
    } on UserCancelledException {
      print("User cancelled.");
    } on UnKnownException {
      print("Unknown exception occurred");
    } catch (e) {
      print(e.toString());
    }
  }

  Future<void> logout() async {
    await Web3AuthFlutter.logout();
    setState(() {
      _privKey = '';
      _userInfo = '';
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Web3Auth Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: login,
                child: const Text('Login with Google'),
              ),
              ElevatedButton(
                onPressed: logout,
                child: const Text('Logout'),
              ),
              if (_privKey.isNotEmpty)
                Text('Private Key: $_privKey'),
              if (_userInfo.isNotEmpty)
                Text('User Info: $_userInfo'),
            ],
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  void didChangeAppLifecycleState(final AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      Web3AuthFlutter.setCustomTabsClosed();
    }
  }
}

触发用户取消异常（Android）

在 Android 上，如果您希望触发用户关闭浏览器标签时的异常，可以使用 WidgetsBindingObserver 混入您的登录屏幕：

[@override](/user/override)
void didChangeAppLifecycleState(final AppLifecycleState state) {
  if (state == AppLifecycleState.resumed) {
    Web3AuthFlutter.setCustomTabsClosed();
  }
}