Flutter集成MoonGate服务插件moongate_flutter_sdk的介绍与使用

指南概述

本指南将帮助您通过Flutter SDK中的MoonGateConfig和MoonGateAuth功能将Ethereum登录集成到您的Flutter应用程序中。

前提条件

在开始之前，请确保满足以下条件：

1. 安装Flutter和Dart
   确保您已经安装并配置了Flutter和Dart开发环境。

2. 添加插件到项目中
   在您的项目中添加moongate_flutter_sdk插件。可以通过运行以下命令完成安装：

   flutter pub add moongate_flutter_sdk
   

开始使用

设置API密钥

首先，您需要在应用程序中设置API密钥。通过调用MoonGateConfig.setApiKey函数，并传入您的API密钥作为参数来完成此操作。

以下是设置API密钥的示例代码：

import 'package:moongate_flutter_sdk/library.dart';

void main() {
  // 替换为您的实际API密钥
  MoonGateConfig.setApiKey("YOUR_API_KEY_HERE");
  runApp(MyApp());
}

注意：将YOUR_API_KEY_HERE替换为您从MoonGate获取的实际API密钥。

实现Ethereum登录

要实现Ethereum登录功能，可以使用signWithEthereum和moonGateAuth提供的功能。

创建连接钱包的函数

创建一个名为connectWallet的新函数，用于处理登录流程：

import 'package:moongate_flutter_sdk/library.dart';

Future<void> connectWallet(BuildContext context) async {
  // 打开钱包连接弹窗
  await signWithEthereum(context);

  // 获取用户助记词和私钥
  String mnemonic = await moonGateAuth.getMnemonic();
  String privateKey = await moonGateAuth.getPrivateKey();
}

说明：connectWallet函数需要传递BuildContext上下文作为参数，这是为了显示钱包连接的弹窗。

在应用程序中使用连接钱包功能

以下是一个完整的示例，展示如何在应用程序中使用connectWallet函数：

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

void main() {
  // 设置API密钥
  MoonGateConfig.setApiKey("YOUR_API_KEY_HERE");
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ethereum Sign In Example'),
        ),
        body: Center(
          child: SignInButton(),
        ),
      ),
    );
  }
}

// 定义一个按钮组件用于触发登录
class SignInButton extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        // 调用连接钱包函数
        await connectWallet(context);
      },
      child: Text('Connect Wallet'),
    );
  }
}

// 连接钱包的逻辑
Future<void> connectWallet(BuildContext context) async {
  // 打开钱包连接弹窗
  await signWithEthereum(context);

  // 获取助记词和私钥
  String mnemonic = await moonGateAuth.getMnemonic();
  String privateKey = await moonGateAuth.getPrivateKey();

  // 打印结果（仅用于测试）
  print('Mnemonic: $mnemonic');
  print('Private Key: $privateKey');
}

示例代码详解

以下是从官方示例代码中提取的核心部分，并附有详细注释：

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

void main() {
  // 设置API密钥
  String userApiKey = 'your_api_key_here';
  MoonGateConfig.setApiKey(userApiKey);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Auth Plugin Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'MoonGate Auth Plugin Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 初始化MoonGateAuth实例
  MoonGateAuth moonGateAuth = MoonGateAuth();

  // 存储助记词和私钥
  String? mnemonic;
  String? privateKey;

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 登录逻辑
    Future<void> signInWithProvider(String provider, String redirectUrl, String chain) async {
      // 使用指定的登录提供商
      await moonGateAuth.signInWithProvider(context, provider, redirectUrl, chain);

      // 获取助记词和私钥
      mnemonic = await moonGateAuth.getMnemonic();
      privateKey = await moonGateAuth.getPrivateKey();

      // 打印结果
      print('Mnemonic: $mnemonic');
      print('Private Key: $privateKey');
    }

    // 连接钱包逻辑
    Future<void> connectWallet() async {
      print('Connecting wallet...');
      await signWithEthereum(context);

      // 获取助记词和私钥
      mnemonic = await moonGateAuth.getMnemonic();
      privateKey = await moonGateAuth.getPrivateKey();

      // 打印结果
      print('Mnemonic: $mnemonic');
      print('Private Key: $privateKey');
    }

    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 使用Discord登录提供商
                signInWithProvider('discord', 'moongate://', 'tezos');
              },
              child: Text('Log In with Provider'),
            ),
            SizedBox(height: 16), // 添加间距
            ElevatedButton(
              onPressed: () async {
                // 连接钱包
                await connectWallet();
              },
              child: Text('Connect Wallet'),
            ),
          ],
        ),
      ),
    );
  }
}