Moralis 与Vanilla JS连接

2022-05-09 10:58 更新

使用 Javascript 将 Moralis 添加到您的网页

1.创建一个空白页面

第一步是在同一目录中创建一个名为 ​index.html​ 和 ​main.js​ 的空页面,并将moralis 脚本与我们的 ​main.js​ 文件一起导入。 我们在页面上包含两个按钮 - 一个用于登录,一个用于注销。

<!DOCTYPE html>
<html>
  <head>
    <title>Vanilla Boilerplate</title>
    <script src="https://unpkg.com/moralis/dist/moralis.js" rel="external nofollow" ></script>
  </head>

  <body>
    <h1>Moralis Hello World!</h1>

    <button id="btn-login">Moralis Metamask Login</button>
    <button id="btn-logout">Logout</button>

    <script type="text/javascript" src="./main.js"></script>
  </body>
</html>
上面的示例导入了最新版本的 Moralis。 在生产环境中运行代码时,最好以这种方式指定版本:
https://unpkg.com/moralis@<版本>/dist/moralis.js
对于最新的发布版本,您可以查看 GitHub 上的 Releases。 例如:
<script src="https://unpkg.com/moralis@1.0.3/dist/moralis.js" rel="external nofollow" ></script>

2.初始化SDK

使用 ​​Moralis.start()​​ 函数初始化您的服务器

/* Moralis init code */
const serverUrl = "https://xxxxx/server";
const appId = "YOUR_APP_ID";
Moralis.start({ serverUrl, appId });

/* TODO: Add Moralis Authentication code */

为了初始化 SDK,您需要从 Moralis Dashboard 获取服务器 ​URL ​和 ​APP ID​。 通过以下步骤查看您的 Moralis 服务器详细信息:

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-5ff561a93a779cdbf95ef2b1330cd0a257a1565f_Screenshot 2022-03-16 at 12

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-ef04d24d7c1f975bc90564ba06271f0e0ad8d539_Screenshot 2022-03-16 at 12

3.添加认证

现在 SDK 已成功连接,我们可以使用 Moralis 的强大功能。 让我们登录一个用户并立即从您的 Moralis 数据库中的所有链获取他们的所有代币、交易和 ​NFT​。

/* Moralis init code */
const serverUrl = "https://xxxxx/server";
const appId = "YOUR_APP_ID";
Moralis.start({ serverUrl, appId });

/* Authentication code */
async function login() {
  let user = Moralis.User.current();
  if (!user) {
    user = await Moralis.authenticate({
      signingMessage: "Log in using Moralis",
    })
      .then(function (user) {
        console.log("logged in user:", user);
        console.log(user.get("ethAddress"));
      })
      .catch(function (error) {
        console.log(error);
      });
  }
}

async function logOut() {
  await Moralis.User.logOut();
  console.log("logged out");
}

document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logOut;

4.从localhost查看页面

在 ​localhost上运行 ​index.html​ 作为网页。 最简单的方法是使用Visual Studio Code中的实时服务器扩展(插件名:​Live Server​)。 只需右键单击 ​index.html​ 并选择 ​Open with Live Server​。

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-042084297c3007136be374498324b56d1dad834a_Screenshot 2022-03-17 at 1

5. 使用 Metamask 登录

访问网页并单击登录。 您的 ​Metamask ​将弹出并要求您登录。

如果这一步未出现登录界面,点击这里安装Metamask 扩展插件

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-a2060a57aff546afa6634c7bd1053df686682c8e_MetaMask Authentication 2

6. 查看 Moralis 数据库中的所有用户资产

一旦用户登录 Moralis,就会从所有链中获取有关该用户的所有链上数据,并将其放入 Moralis 数据库。 要查看 Moralis 数据库,请转到您的服务器并单击仪表板。

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-626f25f2001fef84206f129d0dd5a9542d3e3da7_Screenshot 2022-03-16 at 12

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-5663ad2e6bef138efd00a809e8f34f651e8baab1_Screenshot 2022-03-15 at 1

单击仪表板后,您将看到该服务器的数据库。 Moralis 从用户地址处于活动状态的所有区块链中获取数据,您可以在一个数据库中查看和查询用户的所有代币、​NFT ​和过去的交易。

移动资产

尝试移动 ​MetaMask ​钱包中的资产,并观察 Moralis 数据库如何实时更新记录。

冰山一角

正如您可能已经看到的那样,Moralis 是区块链开发人员真正的超级大国。 但这个小演示只是冰山一角。 Moralis 为任何区块链用例提供了无穷无尽的工具和功能。 最重要的是,默认情况下一切都是跨链的。

通过 NPM 连接

安装 Moralis NPM 包

对于较大的项目,请使用 ​npm module​。

npm install moralis

然后像往常一样将它包含在 JS 文件中。

const Moralis = require("moralis");


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号