MetaMask 注册/登录

用户可以通过 MetaMask 账号登录/注册系统

接口使用说明

在调用接口之前，请确保您已经认真阅读了相关的接口文档。以下是针对不同登录方式的具体说明：

一、获取MetaMask登录配置信息

在集成MetaMask登录功能之前，您需要了解如何配置您的应用以支持MetaMask登录。以下是详细步骤：

1. 访问MetaMask开发文档：

   • 访问MetaMask SDK官方文档了解如何集成MetaMask SDK。

二、安装和配置MetaMask SDK

参考文档：https://docs.metamask.io/wallet/connect/metamask-sdk/javascript/

1. 安装 SDK

在您的项目目录中，使用 Yarn 或 npm 安装 SDK：

yarn add @metamask/sdk

或

npm i @metamask/sdk

2. 导入 SDK

在您的项目脚本中，添加以下代码以导入 SDK：

import { MetaMaskSDK } from "@metamask/sdk";

3. 实例化 SDK

使用任意选项实例化 SDK：

new MetaMaskSDK({
    dappMetadata: {
        url: window.location.href,
        name: 'MetaMask VueJS Example Dapp',
    },
    enableAnalytics: true,
    checkInstallationImmediately: false,
    logging: {
        developerMode: true,
        sdk: true,
    },
    i18nOptions: {
        enabled: true,
    },
})

三、登录代码实现

1. 调用MetaMask钱包登录

在您的界面上添加一个按钮，用于触发MetaMask登录：

<button class="action-button" @click="onConnectAndSign">
   Connect w/ sign
 </button>

2.实现登录方法

const onConnectAndSign = async () => {
    // 初始化 MetaMask SDK 配置
    const sdk = new MetaMaskSDK({
        dappMetadata: {
            url: 'dApp ',              // dApp 的网址
            name: 'dApp ',      // dApp 的名称
        },
        infuraAPIKey: 'infuraAPIKey', // Infura API 密钥，用于访问以太坊网络
        enableAnalytics: true,               // 启用 SDK 分析
        checkInstallationImmediately: false, // 启动时不立即检查 MetaMask 是否已安装
        logging: {
            developerMode: true,             // 开发者模式日志
            sdk: true,                       // 启用 SDK 日志
        },
        i18nOptions: {
            enabled: true,                   // 启用多语言支持
        },
    });

    try {
        // 连接 MetaMask，并获取用户的账户地址列表
        const accounts = await sdk.connect();

        // 获取 MetaMask 提供的 web3 provider
        const provider = await sdk.getProvider();

        // 获取当前选择的账户地址
        const address = provider.getSelectedAddress();

        // 定义签名消息
        const signStr = 'action: Vitatoken STARK Key\nonlySignOn: vitatoken.io';

        // 使用 `personal_sign` 方法对消息进行签名
        const web3Signature = await provider.request({
            method: 'personal_sign',
            params: [signStr, accounts[0]], // 签名的消息和账户地址
        });

        // 调用 `metaMaskVerify` 方法，并传递签名结果、时间戳和账户地址
        metaMaskVerify({
            web3Signature,
            timestamp: Date.now(), // 当前时间戳
            address,
        });
    } catch (err) {
        // 捕获并处理连接失败或签名失败的错误
        console.warn('连接失败..', err);
    }
};

3. MetaMask 三方 accessToken 校验

调用 MetaMask 三方登录校验接口

实现 metaMaskVerify 方法

请求参数

{
    /**
     * 钱包账户地址
     */
    address: string;
    /**
     * 时间戳
     */
    timestamp: number;
    /**
     * 校验签名
     */
    web3Signature: string;
}

接口返回

   /**
     * 下一步操作行为，login, bind, register
     */
    action: string;
    /**
     * 邮箱
     */
    email: string;
    /**
     * 校验失败原因
     */
    failReason: string;
    /**
     * 手机号
     */
    phone: string;
    /**
     * 校验结果
     */
    result: boolean;
    /**
     * 第三方登录源，google,facebook,twitter…
     */
    thirdSource: string;
    /**
     * 第三方userId
     */
    userId: string;

4.完成登录/注册

const Verify = (data: UserService.LoginVerifyRes) => {
    // 根据上一步接口返回获取操作类型、失败原因和第三方来源
    let { action, failReason, thirdSource } = data;

    // 根据操作类型进行不同的处理
    if (action === 'register') {
        // 注册操作
        socialRegister(data)
    } else if (action === 'login') {
        // 登录操作
        socialLogin(data)
    } else if (action === 'bind') {
        // 绑定操作
        socialLogin(data)
    } else {
        // 操作不符合预期，显示失败原因
        Toast.error(failReason);
    }
};

通过以上步骤，您可以成功集成 MataMask 登录功能，并获取用户授权的AccessToken。如果在集成过程中遇到问题，请检查网络连接或 MataMask 应用的配置，确保所有步骤正确无误。如需更多信息，请参考 MataMask 开发文档。