Ionic Angular集成Moralis连接移动端Metamask钱包报错咨询

抛出Non ethereum enabled browser错误的核心原因是：默认的Moralis.authenticate()方法仅会检测当前运行环境中是否存在浏览器插件注入的window.ethereum对象。ionic serve启动的网页运行在桌面浏览器中，安装Metamask插件后会自动注入该对象，因此可以正常唤起插件完成授权；但Ionic打包到Android/iOS端后，代码运行在系统原生WebView容器内，既没有浏览器插件运行环境，也默认无法桥接设备上安装的Metamask原生App，自然无法检测到以太坊注入对象，直接调用认证方法就会报错。

移动端唤起原生Metamask App需要通过WalletConnect协议做桥接，Moralis原生支持该协议，按以下步骤调整即可：

• 安装WalletConnect依赖包，在项目根目录执行命令：
  npm install @walletconnect/web3-provider
• 替换原有网页端认证逻辑，手动传入WalletConnect作为Web3提供者，代码示例如下：

import Moralis from 'moralis';
import WalletConnectProvider from '@walletconnect/web3-provider';

// Moralis初始化逻辑保持原有配置即可，无需修改（传入application id与server url）
async connectMetaMask() {
  try {
    // 初始化WalletConnect提供者
    const walletConnectProvider = new WalletConnectProvider({
      rpc: {
        // 替换为你业务实际使用的公链RPC地址，示例为以太坊主网、BSC主网配置
        1: "对应链ID1的RPC节点地址",
        56: "对应链ID56的RPC节点地址"
      },
      // 配置直接唤起Metamask App，跳过通用钱包选择列表
      qrcodeModalOptions: {
        mobileLinks: ["metamask"]
      }
    });

    // 传入自定义提供者调用Moralis认证
    this.user = await Moralis.authenticate({
      signingMessage: "Log in using Moralis",
      provider: walletConnectProvider,
      chainId: 1 // 替换为业务默认连接的链ID
    });
    console.log("logged in user:", this.user);
    console.log(this.user.get("ethAddress"));
  } catch (error) {
    console.log("钱包连接异常：", error);
  }
}

• Android端添加跳转白名单配置：找到项目路径下android/app/src/main/AndroidManifest.xml文件，在<application>标签同级位置添加以下配置，解决安卓11及以上版本拦截跨App跳转的问题：

<queries>
  <package android:name="io.metamask" />
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="wc" />
  </intent>
</queries>

• iOS端添加跳转白名单配置：找到项目路径下ios/App/App/Info.plist文件，添加以下配置，允许应用查询并跳转Metamask App：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>metamask</string>
  <string>wc</string>
</array>

• 真机测试前必须确保测试设备已经安装最新版本的Metamask App，否则无法完成跳转授权
• 不要用ionic serve验证移动端逻辑，该命令启动的是桌面浏览器环境，无法测试唤起原生App的能力，需要打debug安装包到真机，或使用ionic capacitor run android -l/ionic capacitor run ios -l做真机热更新调试
• 如果需要兼容其他支持WalletConnect的钱包，删除qrcodeModalOptions的mobileLinks配置即可，连接时会自动弹出二维码，用户用任意支持WalletConnect的钱包扫码都可完成授权
• 连接成功后，其余Moralis相关的链上查询、签名、交互逻辑和网页端写法完全一致，无需额外适配

目前没有官方推出的开箱即用Ionic+Moralis适配样板，基于Ionic Angular空白模板按照上述步骤集成即可，核心适配点仅为WalletConnect接入和双端跳转白名单配置，整体集成成本很低。

内容的提问来源于stack exchange，提问作者Ali Haider