MetaMask Sign Up/Log In

Users can log in/register the system through their MetaMask account

API Usage Instructions

Before calling the API, please ensure you have thoroughly read the relevant API documentation. Below are specific instructions for different login methods:

一、Retrieve MetaMask Login Configuration Information

Before integrating the MetaMask login functionality, you need to understand how to configure your application to support MetaMask login. Here are the detailed steps:

1. Visit the MetaMask Development Documentation: Access the MetaMask SDK official documentation to learn how to integrate the MetaMask SDK.

二、Install and Configure the MetaMask SDK

https://docs.metamask.io/wallet/connect/metamask-sdk/javascript/

1. Install the SDK: In your project directory, install the SDK using Yarn or npm:

yarn add @metamask/sdk

or

npm i @metamask/sdk

2. Import the SDK: In your project script, add the following code to import the SDK:

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

3. Instantiate the SDK: Instantiate the SDK using any options:

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

三、Login Code Implementation

1. Add MetaMask Login Button to Your Interface

Add a button to your interface to trigger the MetaMask login flow:

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

2.Implement the Login Method

const onConnectAndSign = async () => {
    // 1. Initialize MetaMask SDK configuration
    const sdk = new MetaMaskSDK({
        dappMetadata: {
            url: 'dApp',                   // dApp URL
            name: 'dApp',                  // dApp name
        },
        infuraAPIKey: 'infuraAPIKey', // Infura API Key for Ethereum network access
        enableAnalytics: true,            // Enable SDK analytics
        checkInstallationImmediately: false, // Do not check for MetaMask installation immediately
        logging: {
            developerMode: true,          // Developer mode logging
            sdk: true,                    // Enable SDK logging
        },
        i18nOptions: {
            enabled: true,                // Enable multi-language support
        },
    });

    try {
        // 2. Connect MetaMask and get the list of user accounts
        const accounts = await sdk.connect();
        const provider = await sdk.getProvider();
        const address = provider.getSelectedAddress();

        // 3. Define the message to sign
        const signStr = 'action: Vitatoken STARK Key\nonlySignOn: vitatoken.io';

        // 4. Use `personal_sign` method to sign the message
        const web3Signature = await provider.request({
            method: 'personal_sign',
            params: [signStr, accounts[0]],
        });

        // 5. Call `metaMaskVerify` with the signature, timestamp, and address
        metaMaskVerify({
            web3Signature,
            timestamp: Date.now(),
            address,
        });
    } catch (err) {
        // Handle connection or signing errors
        console.warn('Connection failed..', err);
    }
};

3. MetaMask Third-Party Access Token Verification

After logging in with MetaMask, call a third-party login verification API. The request parameters are as follows:

请求参数

{
    "action": "login",                 // Next action, options include "login", "bind", "register"
    "email": "[email protected]",       // User email from third-party (if available)
    "failReason": "Invalid credentials", // Reason for verification failure, if applicable
    "phone": "[phone]",            // User phone number (if available)
    "result": true,                    // Verification result, true for success, false for failure
    "thirdSource": "apple",            // Source of third-party login, e.g., "google", "facebook", "twitter"
    "token": "exampleToken123",        // Verification token for authentication
    "userId": "thirdPartyUserId",      // Third-party platform's unique user identifier
    "authToken": "authToken123"        // Token to access third-party API
}

4.Complete Login or Registration Process

Use the metaMaskVerify function to handle login, registration, or binding based on the action parameter ("login", "register", or "bind").

const verify = (data: UserService.LoginVerifyRes) => {
    // Retrieve action type, failure reason, and third-party source
    let { action, failReason, thirdSource } = data;

    // Handle different processes based on action type
    if (action === 'register') {
        // Registration operation
        socialRegister(data)
    } else if (action === 'login') {
        // Login operation
        socialLogin(data)
    } else if (action === 'bind') {
        // Binding operation
        socialLogin(data)
    } else {
        // Operation is not as expected, show failure reason
        Toast.error(failReason);
    }
};

By following these steps, you can successfully integrate the MetaMask login functionality and obtain the user's authorized Access Token. If you encounter issues during integration, please check the network connection or the MetaMask application configuration to ensure all steps are correctly followed. For more information, please refer to the MetaMask development documentation.