将 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，我们需要添加一些配置和设置。
首先，创建一个新目录来存放我们的项目：
接下来，初始化一个 Node.js 项目：
现在，我们将安装 web3.js 库和 Magic SDK：
星球视频双端追剧神器，大量高品质影视剧免费看，点开软件即是永久VIP！
编写我们的智能合约
我们需要创建一个智能合约，以后可以将其部署到以太坊区块链。 智能合约是存储在区块链上的程序，在满足预定条件时运行。
我们将创建一个基本的“Hello, World！” 智能合约。 创建一个名为的新文件 helloworld.sol使用以下代码：
来自 LogRocket 的更多精彩文章：
不要错过 The Replay 来自 LogRocket 的精选时事通讯
了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题
使用 React 的 useEffect 优化应用程序的性能
之间切换 在多个 Node 版本
了解如何 使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri ，一个用于构建二进制文件的新框架
比较 NestJS 与 Express.js
编译智能合约
如前所述，我们需要将智能合约部署到以太坊区块链。 为此，我们需要将其编译为可以在区块链中执行的形式。
我们将使用下面的代码通过获取我们需要的 Abi 和字节码来帮助我们编译我们的智能合约：
创建一个名为 compile.js并将以下代码添加到其中：
接下来，我们编译合约以获取 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文件启用登录和注销功能，以及与以太坊区块链的初始交互：
在用户进行身份验证后，我们会向他们展示一些细节以确保一切正常：
写入区块链
用户登录后，可以通过 Magic 与区块链进行交互。 为了测试这一点，我们将通过写入区块链来更新合约中的消息属性。
我们将简单地调用 update合约中的方法并传入新消息。 让我们更新 index.html文件：
接下来，我们添加 update方法，它只是使用 Magic 提供的第一个公共以太坊帐户将调用发送到 update合同方式：
我们现在有了一个新界面，如下图所示：
一旦用户输入新消息，将启动新事务以更新消息属性。
请记住，我们需要将测试以太币添加到用于与区块链交互的帐户中。 为此，请前往 Rinkeby Ether Faucet 。 在您的帐户中获取一些以太币后，刷新页面以反映更改：
接下来，用户通过插入新消息来更新消息。 这需要一些时间，因为它需要与运行在 Rinkeby 网络上的以太坊区块链进行交互。 完成后，它应该重新渲染页面，并显示新的合同消息。
前往 Rinkeby， 通过单击已部署智能合约的链接 以验证我们是否可以看到部署合约并更新消息的交易：
此更新从我们用于进行更新的帐户中收取一些汽油费。 如果我们检查我们当前的余额，我们会看到所需的以太币被扣除了：
结论
在本文中，我们了解了 Magic 以及它如何使用 web3.js JavaScript 库与以太坊区块链集成。
希望您喜欢这篇文章，并对 Magic 为区块链开发人员提供创建安全、去中心化应用程序的机会感到兴奋。 谢谢阅读！
加入 Bitso 和 Coinsquare 等使用 LogRocket 主动监控其 Web3 应用程序的 组织
影响用户在您的应用程序中激活和交易的能力的客户端问题可能会严重影响您的底线。 如果您对监控 UX 问题、自动显示 JavaScript 错误以及跟踪缓慢的网络请求和组件加载时间感兴趣，请 尝试 LogRocket
LogRocket 就像一个用于 Web 和移动应用程序的 DVR，记录您的 Web 应用程序或网站中发生的一切。 无需猜测问题发生的原因，您可以汇总和报告关键前端性能指标、重放用户会话以及应用程序状态、记录网络请求并自动显示所有错误。