将 Moralis 与 MetaMask 集成

Moralis 中的默认身份验证是 ​MetaMask ​钱包身份验证

1.调用鉴权函数

使用 ​MetaMask ​对用户进行身份验证很简单,可以选择使用​JS​或者​React​:

Moralis.authenticate().then(function (user) {
    console.log(user.get(ethAddress))
})
import { useMoralis } from "react-moralis";

function App() {

    const { authenticate, isAuthenticated, user } = useMoralis();

    const login = async () => {
      if (!isAuthenticated) {

        await authenticate()
          .then(function (user) {
            console.log(user!.get("ethAddress"));
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }
}

这将连接 ​MetaMask ​并请求签名。

我们使用签名作为用户是账户所有者的证据

签名与输入用户名和密码没有什么不同。 如果用户想要使用应用程序的经过身份验证的功能,他们需要“登录”。


它适用于所有与以太坊虚拟机 (​​EVM​​) 兼容的链,例如 ​​Binance Smart Chain​​ 和 ​​Polygon (Matic)​​,因为它们都共享相同的以太坊地址。

一旦用户登录,他们所有的链上数据都会立即同步到您的 Moralis 数据库中。 如果用户在链上移动资产,数据库会更新。


2. 更改 MetaMask 应用程序图标

可以更改用户在与您的智能合约交互时看到的图标。 为此,您必须向您的 ​dApp ​添加一个网站图标。 按照 ​MetaMask ​文档中的说明进行操作。

3.添加自定义登录消息

更改 ​MetaMask上的身份验证消息。 只需遵循:Sign-in Message

4. 示例代码

以下代码演示了一个工作示例

与Vanilla JS连接

andy

前端小白,在Web176教程网这个平台跟大家一起学习,加油!

Share
Published by
andy

Recent Posts

vue:页面注入js修改input值

一般会直接这样写: let z…

7 小时 ago

聊聊vue3中的defineProps

在Vue 3中,defineP…

1 周 ago

在 Chrome 中删除、允许和管理 Cookie

您可以选择删除现有 Cooki…

2 周 ago

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

3 周 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

4 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

1 月 ago