开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 区块链 -> 将 Magic 与以太坊区块链一起使用 -> 正文阅读

[区块链]将 Magic 与以太坊区块链一起使用

在构建 Web 应用程序时，身份验证可能是一个令人头疼的问题。开发人员需要决定他们想要实现的安全模式，并以正确的方式进行。

Magic ，前身为 Fortmatic ，以其快速、无缝、单向的 Web 身份验证集成而闻名，由于其 Magic Auth 产品，现在已成为区块链生态系统的主要参与者。

在本教程中，我们将演示如何在 Ethereum 中使用 Magic，讨论如何设置智能合约，并学习如何在 Ethereum 区块链上使用 Magic 对用户进行身份验证。

您可以找到的公共存储库的链接包含我们在本文中创建的项目。我们将介绍以下内容：

什么是区块链？
什么是魔法和魔法认证？
什么是 web3.js？
设置 Magic 和 web3.js
编写我们的智能合约
编译智能合约
使用 Magic Auth 对用户进行身份验证
写入区块链

让我们开始吧！

什么是区块链？

区块链是过去五年来在互联网上掀起热潮的一个流行词，但简单地说，它是一个分布式数据库，在计算机网络的节点之间共享，以数字格式以电子方式存储信息。区块链已被广泛采用，因为它保证了数据记录的真实性和安全性。

区块链以其在加密货币系统中的关键作用而闻名，它们在其中维护安全和分散的交易记录。

以太坊是一种流行的、分散的开源区块链，具有智能合约功能。在本文中，我们将使用以太坊作为我们与之交互的区块链。

什么是魔法和魔法认证？

Magic，最初是Fortmatic ，以提供无缝方式将身份验证集成到 Web 应用程序而广为人知。 Magic 是一个支持无密码身份验证的 SDK，只需几行代码即可集成到您的应用程序中。

我们将在本文中使用的Magic Auth 是一个 SDK，当它集成到您的应用程序中时，可以使用魔术链接启用无密码 Web2 和 Web3 登录和身份验证。在撰写本文时，Magic Auth 支持 20 多个区块链，并且只需几行代码即可实现。

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

什么是 web3.js？

web3.js 是一个库集合，允许您使用 HTTP、IPC 或 WebSocket 与本地或远程以太坊节点进行交互。总之，Web3.js 是一个库，它使我们能够使用 JavaScript 与以太坊区块链进行交互。

设置 Magic 和 Web3.js

要开始在以太坊区块链中使用 Magic，我们需要添加一些配置和设置。

首先，创建一个新目录来存放我们的项目：

 mkdir magic-blockchain && cd magic-blockchain

接下来，初始化一个 Node.js 项目：

npm init -y

现在，我们将安装 web3.js 库和 Magic SDK：

npm install --save web3 magic-sdk@1.0.1

星球视频双端追剧神器，大量高品质影视剧免费看，点开软件即是永久VIP！

编写我们的智能合约

我们需要创建一个智能合约，以后可以将其部署到以太坊区块链。智能合约是存储在区块链上的程序，在满足预定条件时运行。

我们将创建一个基本的“Hello, World！” 智能合约。创建一个名为的新文件 helloworld.sol使用以下代码：

来自 LogRocket 的更多精彩文章：

不要错过 The Replay 来自 LogRocket 的精选时事通讯
了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题
使用 React 的 useEffect 优化应用程序的性能
之间切换在多个 Node 版本
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri ，一个用于构建二进制文件的新框架
比较 NestJS 与 Express.js

// SPDX-License-Identifier: MIT
?
pragma solidity ^0.8.9;
?
contract helloworld {
?
  string public message = "Hello World";
?
  function update(string memory newMessage) public {
 ?  message = newMessage;
  }
?
}

编译智能合约

如前所述，我们需要将智能合约部署到以太坊区块链。为此，我们需要将其编译为可以在区块链中执行的形式。

我们将使用下面的代码通过获取我们需要的 Abi 和字节码来帮助我们编译我们的智能合约：

npm i solc@0.8.9

创建一个名为 compile.js并将以下代码添加到其中：

const path ?= require('path');
const fs = require('fs');
const ?solc = require('solc')
const helloWorldPath = path.resolve(__dirname, '' , 'helloworld.sol');
const file = fs.readFileSync(helloWorldPath).toString();
// Input structure for solidity compiler
var input = {
 ? ?language: "Solidity",
 ? ?sources: {
 ? ? ?"helloworld.sol": {
 ? ? ? ?content: file,
 ? ?  },
 ?  },
?
 ? ?settings: {
 ? ? ?outputSelection: {
 ? ? ? ?"*": {
 ? ? ? ? ?"*": ["*"],
 ? ? ?  },
 ? ?  },
 ?  },
  };
 ?const output = JSON.parse(solc.compile(JSON.stringify(input)));
 ?if(output.errors) {
 ? ? ?output.errors.forEach(err => {
 ? ? ? ? ?console.log(err.formattedMessage);
 ? ?  });
  } else {
 ? ? ?const bytecode = output.contracts['helloworld.sol'].helloworld.evm.bytecode.object;
 ? ? ?const abi = output.contracts['helloworld.sol'].helloworld.abi;
 ? ? ?console.log(`bytecode: ${bytecode}`);
 ? ? ?console.log(`abi: ${JSON.stringify(abi, null, 2)}`);
  }

接下来，我们编译合约以获取 abi和 bytecode我们需要。跑 node compile.js并复制输出 bytecode和 abi将它们存放在安全的地方。

对于合约部署，我将使用我已经部署的合约的地址。

使用 Magic Auth 对用户进行身份验证

如前所述，Magic Auth 为所有经过身份验证的用户创建了一个以太坊公共地址，然后我们可以使用它来验证用户身份。

让我们创建一个 index.html文件将充当我们将开发的应用程序的 GUI。

为了在我们的应用程序中验证用户身份，我们将与 Magic 集成。一旦用户通过身份验证，我们将能够在以太坊区块链上看到 Magic 为该用户自动创建的帐户和公共地址。

在我们实现这一点之前，我们首先需要创建一个 Magic Auth 应用程序来获取我们在应用程序中需要的密钥。

前往您的 Magic 仪表板，单击 New App 按钮，然后输入应用程序的名称。然后，复制内容 PUBLISHABLE API KEY:

的内容 index.html文件启用登录和注销功能，以及与以太坊区块链的初始交互：

<!DOCTYPE html>
<html>
 ?<head>
 ? ?<title>Magic and Ethereum</title>
 ? ?<meta charset="UTF-8" />
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1" />
 ? ?<link rel="stylesheet" type="text/css" href="styles.css" />
 ? ?<script src="https://auth.magic.link/sdk"></script>
 ? ?<script src="https://cdn.jsdelivr.net/npm/web3@1.2.11/dist/web3.min.js"></script>
 ? ?<script>
 ? ? ?/* Configure Ethereum provider */
 ? ? ?const magic = new Magic("pk_live_your_own_here", {
 ? ? ? ?network: "rinkeby"
 ? ?  });
 ? ? ?const web3 = new Web3(magic.rpcProvider);
 ? ? ?const render = async () => {
 ? ? ? ?const isLoggedIn = await magic.user.isLoggedIn();
?
 ? ? ? ?let authHtml = `
 ? ? ? ? ?<div class="container">
 ? ? ? ? ? ?<h1>Please sign up or login</h1>
 ? ? ? ? ? ?<form οnsubmit="login(event)">
 ? ? ? ? ? ? ?<input type="email" name="email" required="required" placeholder="Enter your email" />
 ? ? ? ? ? ? ?<button type="submit">Send</button>
 ? ? ? ? ? ?</form>
 ? ? ? ? ?</div>
 ? ? ? ?`;
 ? ? ? ?let userHtml = "";
 ? ? ? ?const target = document.querySelector("#app");
 ? ? ? ?if (isLoggedIn) {
 ? ? ? ? ?const userMetadata = await magic.user.getMetadata();
 ? ? ? ? ?const userAddress = (await web3.eth.getAccounts())[0];
 ? ? ? ? ?const userBalance = web3.utils.fromWei(
 ? ? ? ? ? ?await web3.eth.getBalance(userAddress)
 ? ? ? ?  );
 ? ? ? ? ?authHtml = `
 ? ? ? ? ? ? <div class="container">
 ? ? ? ? ? ? ?<h1>Current user: ${userMetadata.email}</h1>
 ? ? ? ? ? ? ?<h1>User Address: ${userAddress}</h1>
 ? ? ? ? ? ? ?<h1>Current Balance: ${userBalance} ETH</h1>
 ? ? ? ? ? ? ?<button οnclick="logout()">Logout</button>
 ? ? ? ? ? ?</div>
 ? ? ? ? `;
?
 ? ? ? ? ?userHtml = `
 ? ? ? ? ? ?<div class="container">
 ? ? ? ? ? ? ?<h1>Ethereum address</h1>
 ? ? ? ? ? ? ?<div class="info">
 ? ? ? ? ? ? ? ?<a href="https://rinkeby.etherscan.io/address/${userAddres ? ? ? ? ? ? ? ? ? ?s}" target="_blank">${userAddress}</a>
 ? ? ? ? ? ? ?</div>
 ? ? ? ? ? ? ?<h1>Balance</h1>
 ? ? ? ? ? ? ?<div class="info">${userBalance} ETH</div>
 ? ? ? ? ? ?</div>
 ? ? ? ? ?`;
 ? ? ? ?}
 ? ? ? ?target.innerHTML = authHtml + userHtml
 ? ? ?};
 ? ? ?const login = async e => {
 ? ? ? ?e.preventDefault();
 ? ? ? ?const email = new FormData(e.target).get("email");
 ? ? ? ?if (email) {
 ? ? ? ? ?await magic.auth.loginWithMagicLink({ email });
 ? ? ? ? ?render();
 ? ? ? ?}
 ? ? ?};
?
 ? ? ?const logout = async () => {
 ? ? ? ?await magic.user.logout();
 ? ? ? ?render();
 ? ? ?};
</script>
 ?</head>
 ?<body οnlοad="render()">
 ? ?<div id="app">
 ? ? ?<div class="container">Loading...</div>
 ? ?</div>
 ?</body>
</html>

在用户进行身份验证后，我们会向他们展示一些细节以确保一切正常：

写入区块链

用户登录后，可以通过 Magic 与区块链进行交互。为了测试这一点，我们将通过写入区块链来更新合约中的消息属性。

我们将简单地调用 update合约中的方法并传入新消息。让我们更新 index.html文件：

const contractABI = 'theabi';
let contractAddress = "0x83d2F577E2c4D056864543a62B8638bFA0ebaAD6";
?
let userHtml = "";
let contractHtml = "";
if (isLoggedIn) {
let contract = new web3.eth.Contract(
 ? ? ? ? ?  JSON.parse(contractABI),
 ? ? ? ? ?  contractAddress
 ? ? ? ?  );
 ? ? ? ?  const currentMessage = await contract.methods.message().call();
 ? ? ? ?  contractHtml = `
 ? ? ? ? ? ?<div class="container">
 ? ? ? ? ? ? ?<h1>Smart Contract</h1>
 ? ? ? ? ? ? ?<div class="info">
 ? ? ? ? ? ? ? ?<a href="https://rinkeby.etherscan.io/address/${contractAddress}" target="_blank">${contractAddress}</a>
 ? ? ? ? ? ? ?</div>
 ? ? ? ? ? ? ?<h1>Message</h1>
 ? ? ? ? ? ? ?<div class="info">${currentMessage}</div>
 ? ? ? ? ? ? ?<form οnsubmit="update(event)">
 ? ? ? ? ? ? ? ?<input type="text" name="new-message" class="full-width" required="required" placeholder="New Message" />
 ? ? ? ? ? ? ? ?<button id="btn-update-msg" type="submit">Update Message</button>
 ? ? ? ? ? ? ?</form>
 ? ? ? ? ? ?</div>
 ? ? ? ?  `;
 ? ? ?  }
?
target.innerHTML = authHtml + userHtml + contractHtml

接下来，我们添加 update方法，它只是使用 Magic 提供的第一个公共以太坊帐户将调用发送到 update合同方式：

const update = async e => {
 ? ? ?  e.preventDefault();
 ? ? ?  const newMessage = new FormData(e.target).get("new-message");
 ? ? ?  if (newMessage) {
 ? ? ? ?  const btnUpdateMsg = document.getElementById("btn-update-msg");
 ? ? ? ?  btnUpdateMsg.disabled = true;
 ? ? ? ?  btnUpdateMsg.innerText = "Updating...";
 ? ? ? ?  const fromAddress = (await web3.eth.getAccounts())[0];
 ? ? ? ?  const contract = new web3.eth.Contract(
 ? ? ? ? ?  JSON.parse(contractABI),
 ? ? ? ? ?  contractAddress
 ? ? ? ?  );
 ? ? ? ?  const receipt = await contract.methods
 ? ? ? ? ?  .update(newMessage)
 ? ? ? ? ?  .send({ from: fromAddress });
 ? ? ? ?  console.log("Completed:", receipt);
 ? ? ? ?  render();
 ? ? ?  }
 ? ?  };

我们现在有了一个新界面，如下图所示：

一旦用户输入新消息，将启动新事务以更新消息属性。

请记住，我们需要将测试以太币添加到用于与区块链交互的帐户中。为此，请前往 Rinkeby Ether Faucet 。在您的帐户中获取一些以太币后，刷新页面以反映更改：

接下来，用户通过插入新消息来更新消息。这需要一些时间，因为它需要与运行在 Rinkeby 网络上的以太坊区块链进行交互。完成后，它应该重新渲染页面，并显示新的合同消息。

前往 Rinkeby，通过单击已部署智能合约的链接以验证我们是否可以看到部署合约并更新消息的交易：

此更新从我们用于进行更新的帐户中收取一些汽油费。如果我们检查我们当前的余额，我们会看到所需的以太币被扣除了：