Moralis Web3 企业级API Moralis 与Vanilla JS连接

2024-02-26 开发教程 Moralis Web3 企业级API 匿名 9℃

使用 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 服务器详细信息：

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;