Flutter社交登录插件siwe_flutter的使用

Sign-In with Ethereum 是一种认证方式，它允许用户通过他们的以太坊账户和ENS配置文件来控制其数字身份，而不是依赖传统的中介。SIWE Flutter 是一个Flutter插件，可以让你在Flutter应用中集成SIWE认证。

插件的功能

该插件是用于你应用前端的SIWE实现。它允许你：

• 使用WalletConnect初始化并连接钱包提供者。
• 使用用户的以太坊钱包创建并签署SIWE消息。
• 将SIWE消息发送到后端服务器进行验证。

有关SIWE如何工作的更多细节，请参阅SIWE文档。

开始使用

有以下两种方式使用插件：一种是使用默认提供者（walletconnect），另一种是自己提供提供者。我们建议使用默认提供者，因为它更易于使用且整体上需要较少的设置时间。请查看示例应用，了解使用默认提供者的插件工作示例。

使用默认提供者

1. 初始化并连接钱包提供者

   initializeEthereumProvider(BuildContext context, String bridge,
       String name, String description, String url, String icon)
   

   context 是必需的，以便将弹出窗口显示在屏幕上。其余参数是初始化WalletConnect提供者的必要参数。

2. 从后端服务器获取随机数

   getNonce(String url)
   

3. 签署SIWE消息

   signInWithEthereum(
   String domain, String statement, String uri, String version, String chainId)
   

4. 验证消息

   verifyMessage(String url)
   

使用自己的提供者

1. 初始化自己的提供者。

2. 从后端服务器获取随机数

   getNonce(String url)
   

3. 使用createExternalMessage() 创建一条消息

   createExternalMessage(String domain, String statement, String uri, String version, String chainId)
   

4. 使用personal sign message签名消息，并使用createExternalMessage()返回的消息。

完整示例Demo

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:siwe_flutter/library.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'), // 英语
        // ... 其他支持的语言
      ],
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: _ConnectWalletButton(),
        ),
      ),
    );
  }
}

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

class __ConnectWalletButtonState extends State<_ConnectWalletButton> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        // 首先初始化提供者，必须提供context。
        await initializeEthereumProvider(
          context,
          "https://bridge.walletconnect.org",
          'MoonGate',
          'An example app showcasing Sign in With Ethereum',
          'localhost:3000',
          'https://www.joinef.com/wp-content/uploads/2023/03/MoonGate-5-Praneet-Sinha-700x700.png',
        );
        // 从SIWE后端获取随机数。
        await getNonce("http://192.168.0.30:3001/api/nonce");
        // 使用以太坊登录。
        await signInWithEthereum(
            'localhost:3000', 'I love pizza', 'localhost:3000', '1', '1');
        // 验证签名。
        await verifyMessage('http://192.168.0.30:3001/verify');
      },
      child: Text('连接钱包'),
    );
  }
}