在构建 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，通过单击已部署智能合约的链接以验证我们是否可以看到部署合约并更新消息的交易：

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

结论

在本文中，我们了解了 Magic 以及它如何使用 web3.js JavaScript 库与以太坊区块链集成。

希望您喜欢这篇文章，并对 Magic 为区块链开发人员提供创建安全、去中心化应用程序的机会感到兴奋。谢谢阅读！

加入 Bitso 和 Coinsquare 等使用 LogRocket 主动监控其 Web3 应用程序的组织

影响用户在您的应用程序中激活和交易的能力的客户端问题可能会严重影响您的底线。如果您对监控 UX 问题、自动显示 JavaScript 错误以及跟踪缓慢的网络请求和组件加载时间感兴趣，请尝试 LogRocket

LogRocket 就像一个用于 Web 和移动应用程序的 DVR，记录您的 Web 应用程序或网站中发生的一切。无需猜测问题发生的原因，您可以汇总和报告关键前端性能指标、重放用户会话以及应用程序状态、记录网络请求并自动显示所有错误。

将 Magic 与以太坊区块链一起使用相关推荐

以太坊区块链同步_以太坊69：如何在10分钟内建立完全同步的区块链节点
以太坊区块链同步 by Lukas Lukac 卢卡斯·卢卡奇(Lukas Lukac) Ethereu M 69:如何在10分钟内建立完全同步的区块链节点 (Ethereum 69: how to ...
以太坊区块链_以太坊区块链搭建与使用(一)-私有链
步骤一.下载go语言,并配置环境变量 //以太坊源代码依赖的编译与运行环境二.通过git clone以太坊源码(go-ethereum),并编译一.go安装 step1:下载官方(一般打不开) ...
如何搭建socks5和ss节点_以太坊区块链搭建与使用(三)-联盟链
首先对以下概念说明下: 一.以太坊大家都知道比特币使用的技术是区块链技术,比特币也是区块链技术的代表. 即比特币=区块链1.0随着区块链技术的发展以太坊也诞生了,也就是我们说的区块链2.0.为什么说 ...
如何用web3.js在以太坊区块链上保存数据？
2019独角兽企业重金招聘Python工程师标准>>> 虽然有北大博士讲,95%的区块链项目都没有前途,但我们知道区块链还是有它的优势,比如数据的不可篡改性对于版权保护有相当大的意义 ...
solidity payable_以太坊区块链搭建与使用(五)-智能合约Solidity
一.智能合约Solidity开发工具 1.remix-ide http://remix.ethereum.org/ 在线版本,也可以去github下载安装到本地.开发.编译.发布.执行.测试 2.re ...
美联社将在以太坊区块链记录NCAA锦标赛篮球比分和赛程表
美联社与Everipedia合作,将在以太坊区块链上发布疯狂三月(NCAA锦标赛)的篮球比分和赛程表.首场比赛将于美东时间今天下午6点开始. 文章链接:https://www.tuoluocaijin ...
用以太坊区块链保证Asp.Net Core的API安全（上）
去中心化应用程序(DApp)的常见设计不仅依赖于以太坊区块链,还依赖于API层.在这种情况下,DApp通过用户的以太坊帐户与智能合约进行交互,并通过交换用户凭据而发布的JWT token与API层进行 ...
EOS区块链和以太坊区块链那个更好？
显然,你已经听说过两个最受欢迎的智能合约区块链,但想知道EOS与以太坊之中哪个更好?或许你想比较一下两种技术?好吧,你来对了地方,因为我要告诉你你需要知道的一切! 在这个EOS vs Ethereum ...
以太坊区块链快速入门
一.基本概念 1.什么是以太坊? 以太坊是由社区驱动的技术,为加密货币以太币(ETH)和成千上万的去中心化应用程序提供动力. 属于所有人的银行服务现实生活中不是每个人都能使用金融服务.但是只要您有网 ...

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

什么是区块链？

什么是魔法和魔法认证？

什么是 web3.js？

设置 Magic 和 Web3.js

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

编写我们的智能合约

来自 LogRocket 的更多精彩文章：

编译智能合约

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

写入区块链

结论

加入 Bitso 和 Coinsquare 等使用 LogRocket 主动监控其 Web3 应用程序的组织

将 Magic 与以太坊区块链一起使用相关推荐

最新文章

热门文章

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

什么是区块链？

什么是魔法和魔法认证？

什么是 web3.js？

设置 Magic 和 Web3.js

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

编写我们的智能合约

来自 LogRocket 的更多精彩文章：

编译智能合约

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

写入区块链

结论

加入 Bitso 和 Coinsquare 等使用 LogRocket 主动监控其 Web3 应用程序的 组织

将 Magic 与以太坊区块链一起使用相关推荐

最新文章

热门文章

加入 Bitso 和 Coinsquare 等使用 LogRocket 主动监控其 Web3 应用程序的组织