Moralis 與Vanilla JS連接

2022-05-09 10:58 更新

使用 Javascript 將 Moralis 添加到您的網(wǎng)頁

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

第一步是在同一目錄中創(chuàng)建一個名為 ?index.html? 和 ?main.js? 的空頁面，并將moralis 腳本與我們的 ?main.js? 文件一起導(dǎo)入。 我們在頁面上包含兩個按鈕 - 一個用于登錄，一個用于注銷。

<!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>
上面的示例導(dǎo)入了最新版本的 Moralis。 在生產(chǎn)環(huán)境中運(yù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()?? 函數(shù)初始化您的服務(wù)器

/* 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 獲取服務(wù)器 ?URL ?和 ?APP ID?。 通過以下步驟查看您的 Moralis 服務(wù)器詳細(xì)信息：

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.添加認(rèn)證

現(xiàn)在 SDK 已成功連接，我們可以使用 Moralis 的強(qiáng)大功能。 讓我們登錄一個用戶并立即從您的 Moralis 數(shù)據(jù)庫中的所有鏈獲取他們的所有代幣、交易和 ?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上運(yùn)行 ?index.html? 作為網(wǎng)頁。 最簡單的方法是使用Visual Studio Code中的實(shí)時服務(wù)器擴(kuò)展（插件名：?Live Server?）。 只需右鍵單擊 ?index.html? 并選擇 ?Open with Live Server?。

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

5. 使用 Metamask 登錄

訪問網(wǎng)頁并單擊登錄。 您的 ?Metamask ?將彈出并要求您登錄。

如果這一步未出現(xiàn)登錄界面，點(diǎn)擊這里安裝Metamask 擴(kuò)展插件

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-a2060a57aff546afa6634c7bd1053df686682c8e_MetaMask Authentication 2

6. 查看 Moralis 數(shù)據(jù)庫中的所有用戶資產(chǎn)

一旦用戶登錄 Moralis，就會從所有鏈中獲取有關(guān)該用戶的所有鏈上數(shù)據(jù)，并將其放入 Moralis 數(shù)據(jù)庫。 要查看 Moralis 數(shù)據(jù)庫，請轉(zhuǎn)到您的服務(wù)器并單擊儀表板。

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

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

單擊儀表板后，您將看到該服務(wù)器的數(shù)據(jù)庫。 Moralis 從用戶地址處于活動狀態(tài)的所有區(qū)塊鏈中獲取數(shù)據(jù)，您可以在一個數(shù)據(jù)庫中查看和查詢用戶的所有代幣、?NFT ?和過去的交易。

移動資產(chǎn)

嘗試移動 ?MetaMask ?錢包中的資產(chǎn)，并觀察 Moralis 數(shù)據(jù)庫如何實(shí)時更新記錄。

冰山一角

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

通過 NPM 連接

安裝 Moralis NPM 包

對于較大的項(xiàng)目，請使用 ?npm module?。

npm install moralis

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

const Moralis = require("moralis");


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號