Integrate

web、原生 Android iOS 如何集成

以下内容参照@privy-io/expo,通过 ReactNative 集成这个库的过程，可以推测出来是 ReactNative UI + react-native-webview 方案

方案一：通过 webview 与 iframe-wallet 交互

特点

没有授权相关的交互和 UI 渲染，
iframe-wallet 是一个网页（只有 JS 内容没有 HTML）提供核心的密钥管理功能
交易这块是有一个 wallet provider 层

web 端直接集成@next-wallet/provider

原生端与 webview 通信

原生端通过一个 webview，与 webview 通信，原生本身支持 webview，原生 webview（也就是前端运行容器）加载 iframe wallet 的核心内容到 webview 中，之后原生可以与之交互，也就是相当于原生要实现@next-wallet/provider 的功能（代码量很少，另外为了方便原生开发最好可以实现 async 工具调用，使用工具与 iframe 通信，@next-wallet/provider 是调用@next-wallet/iframe 内实现的工具，这个工具原生用不了），原生直接与 wallet iframe 交互

主要技术实现：

原生集成 webview 与之通信，需要 webview 不可见，并且随时可以进行交互
原生需要对应到 iframe 的 action 操作上，action 是一个枚举值，@next-wallet/iframe 中使用 switch case 进行处理

参考其他集成方案

privy iOS 如何集成
coinbaseSDK

TODO

助记词处理

1.助记词用私钥加密后存储在服务器上 2.导出助记词，需要先生成私钥，然后用私钥解密助记词 不同链上资产是否联通 以太坊钱包协议 安全

服务端渲染就可以拿到会话公钥，用于客户端与服务端数据加密，无需客户端重新获取，
数据库
1. 库 1: APP 表，域名表，用户表 salt，助记词表
2. 库 2：auth 密钥份额表
3. 库 3：recover 密钥份额表

# database1
  # app 表
    id
    app_id
    name
    domains: 关联domain的id
  # domain 表
    id
    domain

  # user 表
    id
    auth_salt
    recover_salt

  # wallet 表
    id
    user_id
    public
    private

  # private 表
    id
    auth_share_id 查database2的share
    recover_share_id  查database3的share
    wallets 关联wallet的id

# database2
  # auth 表
  id
  share
# database3
  # recover 表
  id
  share

存储私钥第 1 步：获取 user 的 auth_salt 和 recover_salt 存储私钥第 2 步：对 authShare 加密存储到 database2 auth 表中，对 recoverShare 加密存储到 database3 recover 表中存储私钥第 3 步：更新 private 表的 auth_share_id、recover_share_id 存储私钥第 3 步：更新 wallet 表的 user_id、public、private

计算私钥过程第 1 步：通过传递 wallet 的 public 获取 private，查询 private 表对应的 auth_share_id 和 recover_share_id 计算私钥过程第 2 步：获取 user 的 auth_salt 和 recover_salt alt text

MethodChannel

https://github.com/Web3Auth/web3auth-flutter-sdk/blob/master/lib/web3auth_flutter.dart

MethodChannel 是 Flutter 框架中用于与原生平台（Android 和 iOS）进行通信的一种机制。它允许 Dart 代码和原生代码之间进行双向通信，通常用于调用原生平台的功能或获取原生代码的结果。

具体来说，MethodChannel 允许你在 Flutter 应用中调用原生 Android 和 iOS 的方法，并接收它们的返回值。它是 Flutter 的平台通道（Platform Channels）的一部分，平台通道是 Flutter 与原生代码交互的主要方式。

使用 `MethodChannel` 的步骤

1. 在 Flutter 端定义 `MethodChannel`

在 Flutter 代码中，定义一个 MethodChannel 并调用原生方法：

import 'package:flutter/services.dart';

class Web3AuthFlutter {
  static const MethodChannel _channel = MethodChannel('web3auth_flutter');

  static Future<String> authenticate(String username, String password) async {
    final String result = await _channel.invokeMethod('authenticate', {
      'username': username,
      'password': password,
    });
    return result;
  }
}

2. 在 Android 端实现方法

在 Android 代码中，处理来自 Flutter 的方法调用：

import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class MainActivity extends FlutterActivity {
  private static final String CHANNEL = "web3auth_flutter";

  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
    GeneratedPluginRegistrant.registerWith(flutterEngine);

    new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
      .setMethodCallHandler(
        (call, result) -> {
          if (call.method.equals("authenticate")) {
            String username = call.argument("username");
            String password = call.argument("password");
            // 处理认证逻辑
            String authResult = authenticate(username, password);
            result.success(authResult);
          } else {
            result.notImplemented();
          }
        }
      );
  }

  private String authenticate(String username, String password) {
    // 执行认证逻辑
    return "Authenticated: " + username;
  }
}

3. 在 iOS 端实现方法

在 iOS 代码中，处理来自 Flutter 的方法调用：

import Flutter
import UIKit

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
    let channel = FlutterMethodChannel(name: "web3auth_flutter", binaryMessenger: controller.binaryMessenger)

    channel.setMethodCallHandler { (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
      if call.method == "authenticate" {
        guard let args = call.arguments as? [String: Any],
              let username = args["username"] as? String,
              let password = args["password"] as? String else {
          result(FlutterError(code: "INVALID_ARGUMENT", message: "Invalid arguments", details: nil))
          return
        }
        // 处理认证逻辑
        let authResult = self.authenticate(username: username, password: password)
        result(authResult)
      } else {
        result(FlutterMethodNotImplemented)
      }
    }

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }

  private func authenticate(username: String, password: String) -> String {
    // 执行认证逻辑
    return "Authenticated: \(username)"
  }
}

总结

MethodChannel 是 Flutter 中用于与原生平台（Android 和 iOS）进行通信的机制。
通过在 Flutter 端定义 MethodChannel，并在原生端实现方法处理器，你可以在 Flutter 应用中调用原生平台的方法，并接收它们的返回值。

web3auth.io

flutter MethodChannel
react native https://github.com/torusresearch/react-native-web-browser

web、原生 Android iOS 如何集成​

方案一：通过 webview 与 iframe-wallet 交互​

web 端直接集成@next-wallet/provider​

原生端与 webview 通信​

主要技术实现：​

参考其他集成方案​

TODO​

MethodChannel​

使用 MethodChannel 的步骤​

1. 在 Flutter 端定义 MethodChannel​

2. 在 Android 端实现方法​

3. 在 iOS 端实现方法​

总结​

web3auth.io​