閱讀(2.5k) 書簽贊(0) 我要糾錯

Moralis 與Vanilla JS連接

2022-05-09 10:58 更新

使用 Javascript 將 Moralis 添加到您的網頁

1.創(chuàng)建一個空白頁面

第一步是在同一目錄中創(chuàng)建一個名為 ?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。在生產環(huán)境中運行代碼時，最好以這種方式指定版本：
?https://unpkg.com/moralis@<版本>/dist/moralis.js?
對于最新的發(fā)布版本，您可以查看 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 從用戶地址處于活動狀態(tài)的所有區(qū)塊鏈中獲取數據，您可以在一個數據庫中查看和查詢用戶的所有代幣、?NFT ?和過去的交易。

移動資產

嘗試移動 ?MetaMask ?錢包中的資產，并觀察 Moralis 數據庫如何實時更新記錄。

冰山一角

正如您可能已經看到的那樣，Moralis 是區(qū)塊鏈開發(fā)人員真正的超級大國。但這個小演示只是冰山一角。 Moralis 為任何區(qū)塊鏈用例提供了無窮無盡的工具和功能。最重要的是，默認情況下一切都是跨鏈的。

通過 NPM 連接

安裝 Moralis NPM 包

對于較大的項目，請使用 ?npm module?。

npm install moralis

然后像往常一樣將它包含在 JS 文件中。

const Moralis = require("moralis");

以上內容是否對您有幫助：

← Moralis 創(chuàng)建Dapp

Moralis 與React連接 →

寫筆記

我要補充