什么是 MetaMask？
MetaMask 是市场上最成熟、最受欢迎的加密货币钱包之一。事实上，MetaMask 已经为全球超过一百万用户提供服务。因此，它是进入加密行业的好方法。它与去中心化交易所 (DEX) 的兼容性也使其在希望避开中心化机构的用户中广受欢迎。
MetaMask 除了是一个加密钱包之外，还连接到各种区块链，包括主网和测试网。因此，这允许用户通过多个网络访问多个生态系统。借助此功能，这款流行的钱包还可用于验证 Web3 用户。如果您有兴趣了解有关 MetaMask 的更多详细信息，请务必查看 Moralis 博客中的以下文章：“ MetaMask 解释 - 什么是 MetaMask？ ”。
如何识别 MetaMask 上哪个网络处于活动状态？– 示例项目
如果您一直在关注Moralis 博客上的指南，您就会知道我们相信通过简单的示例项目来学习，我们也会在此遵循这一做法。为了最好地向您展示如何识别 MetaMask 上哪个网络处于活动状态，我们将使用一些 HTML 和JavaScript编码创建一个简单的 dApp。此外，与区块链相关的后端将完全由 Moralis 覆盖；我们只需要连接到我们的 Moralis 服务器并插入一些代码片段即可建立正确的连接。
此外，在我们识别 MetaMask 上哪个网络处于活动状态之前，用户必须安装 MetaMask。因此，我们还需要为用户尚未安装 MetaMask 的情况做好准备。因此，我们应该对 dApp 的网络识别部分进行编程，以便它首先检查是否找到 MetaMask。如果安装了 MetaMask，它应该继续进行网络识别并返回一条显示该网络名称的消息。但是，如果它找不到 MetaMask，我们希望 dApp 返回一条消息，指示用户安装 MetaMask 以继续。
虽然这听起来工作量很大，但您会发现，通过使用Moralis 的 Web3 SDK，我们可以在短时间内以最少的努力完成它。
设置 Moralis 和其他网络识别工具
为了便于本示例，我们将使用 Visual Studio Code (VSC)、MetaMask 的浏览器扩展程序，当然还有 Moralis。如果您需要帮助获取和设置前两个工具，请查看我们的“以太坊初学者开发”指南。至于 Moralis 设置，我们将在下面的分步说明中介绍。
如何设置 Moralis 进行网络识别
创建您的 Moralis 帐户– 如果您还没有 Moralis 帐户，请务必创建一个。它是完全免费的。只需点击链接（或单击此处），输入您的电子邮件地址并设置密码。然后通过确认您的电子邮件地址来完成您的 Moralis 帐户创建（您将收到一封带有确认链接的电子邮件）。如果您已经有一个有效的 Moralis 帐户，只需登录即可。
创建新服务器– 进入新的 Moralis 帐户后，您需要创建新服务器。单击右上角的“+ 创建新服务器”按钮即可完成此操作。之后，单击出现的下拉菜单中的其中一个选项（见下图）。
然后输入所有必需的详细信息。这包括服务器名称（可以是任何您想要的名称）、区域、网络、链，然后单击“添加实例”按钮。
访问服务器详细信息——创建服务器后，您需要获取它的一些详细信息（在我们的“.js”文件中使用）。要访问服务器详细信息，请单击服务器名称旁边的“查看详细信息”按钮。接下来，将出现一个弹出窗口，其中包含所有详细信息。如果您以前使用过 Moralis，您可能已经设置了一个或两个服务器。在这种情况下，您可以使用其中任何一个服务器。
初始化 Moralis –通过使用与 Moralis 相关的详细信息填充“.js”文件，我们获得所需的后端功能。在我们的示例中，我们将使用“logic.js”文件，我们将在其中执行所有 JavaScript 编码。在该文件的顶部，我们插入上一步中获得的应用程序 ID 和服务器 URL：
注意：请确保您使用服务器的详细信息，而不是从我们的示例中复制详细信息。
通过编程来识别 MetaMask 上哪个网络处于活动状态
在本部分中，我们将向您展示如何识别 MetaMask 上哪个网络处于活动状态。因此，我们将坚持使用基本的 HTML 和 JavaScript (JS) 编程。我们将使用“index.html”和“logic.js”文件，我们将在 Visual Studio Code 中编辑它们。此外，我们将主要关注 JavaScript，因为这是所有逻辑的来源。HTML 部分基本上只是一个框架，使我们能够在浏览器中显示我们的 dApp。
以下是我们在示例中使用的 HTML 代码：
注意：您可以在GitHub中访问我们示例使用的完整代码。
如您所见，代码很简单。为了帮助我们设计样式，我们使用了 Bootstrap（这是完全可选的）。脚本是我们代码的重要组成部分，我们在其中导入了“moralis.js”和“logic.js”。
使用 Visual Studio Code 顶部菜单栏中的“终端 > 新建终端”选项，我们创建一个新的工作文件夹和“logic.js”文件。是的，这是我们用来插入 Moralis 服务器详细信息的文件，如上一节（步骤 4）所述。接下来，我们添加代码来处理我们希望 dApp 向用户显示的消息。为此，我们创建了“displayMessage”函数：
为了实现网络跟踪目标，我们创建了两个消息实例。一个用于在我们成功识别 MetaMask 上哪个网络处于活动状态后显示网络名称（“alert alert-success”），第二个消息用于在用户未安装 MetaMask 时显示（“alert alert-danger”）。此外，我们实现了一个部分，以确保消息通过我们的 HTML 代码显示。为此，我们使用代码片段“document.getElementById.innerHTML”。
网络跟踪 – 检查 MetaMask 安装状态
由于我们计划使用 MetaMask 进行网络识别，因此我们必须首先确保有兴趣使用我们的 dApp 的用户安装了这个有用的工具。因此，我们需要创建一个函数作为逻辑，检查是否安装了 MetaMask，并采取相应的措施。如果安装了 MetaMask，我们的 dApp 的网络跟踪部分将自动进行网络识别，我们将在下一节中设置它。但是，如果没有安装 MetaMask，我们希望我们的 Web3 应用程序指示用户安装 MetaMask。我们通过确保我们的去中心化应用程序显示正确的消息来实现后者。
以下是我们用来检查 MetaMask 是否已经存在的代码：
查看上面的代码，您会发现一个简单的“if”语句就足够了。如果它未检测到 MetaMask，它会显示“此应用程序需要 MetaMask，请安装 MetaMask”消息。如果已安装 MetaMask，则会显示“MetaMask 已安装”消息。下图显示了如果上述代码在没有 MetaMask 的情况下执行，我们的 dApp 将如何工作：
现在，我们已经完成了未安装 MetaMask 的情况。但是，如果您还记得的话，我们希望我们的 dApp 在安装 MetaMask 时自动转到网络识别。具体来说，这不是显示“MetaMask 已安装”消息。因此，我们需要进一步完善我们的代码。
网络识别——识别 MetaMask 上哪个网络处于活动状态
如上所述，确认 MetaMask 安装后，网络识别就开始起作用。因此，我们在“checkWeb3()”函数的“else”语句下更改必要的代码行。本质上，我们将“displayMessage”转换为注释并添加“setWeb3Environment()”：
然后我们在“if”语句之外定义“setWeb3Environment()”函数。在其中，我们使用“getNetwork()”来识别 MetaMask 上哪个网络处于活动状态，并使用“monitorNetwork()”函数来检测用户是否在其 MetaMask 内切换到另一个网络：
此外，您可以看到我们在上面显示的函数中使用了“web3”对象。这意味着我们需要定义它。我们通过将这段代码添加到“logic.js”文件的顶部来实现这一点：
此外，我们需要添加代码行以确保“getNetwork()”和“monitorNetwork()”函数执行我们希望它们执行的操作。对于“getNetwork()”函数，我们需要定义链的 ID。此外，我们希望确保在识别哪个网络处于活动状态后显示正确的消息。以下是涵盖网络识别部分的代码行：
就“monitorNetwork()”函数而言，我们依靠 Moralis 为我们提供网络跟踪功能。本质上，我们希望 Moralis 在用户切换到另一个网络时向我们的 dApp 发出信号。以下是涵盖此方面的代码行：
这样，我们的 dApp 就可以覆盖这两种情况。如果尚未安装 MetaMask，或者已经安装了 MetaMask。此外，在我们代码的所有组件都识别出 MetaMask 上哪个网络处于活动状态后，它会返回一条消息。由于我们定义了（在“getNetworkName”函数中）“以太坊主网”、“以太坊 Rinkeby”、“币安智能链测试网”和“Polygon Mumbai 测试网”，因此 dApp 能够识别这些链。您可以在下图中看到这一点：
