MetaMask API – 构建 Web 应用程序用户注册和登录
本文简要介绍了如何让新用户使用 Metamask API 在您的 Web 应用程序上注册帐户。
加密货币钱包是 Web3 应用程序中连接潜在客户和客户的主要接触点。此外，这是一种吸引新注册用户并转化更多销售的流行时尚方法。
在本文中，我将简要介绍如何让新用户使用 Metamask API 在您的 Web 应用程序上注册帐户。在本文结束时，您的访问者可以使用 MetaMask 钱包进行注册，并且您可以使用钱包公钥来识别用户。
目录：Web 应用程序新用户注册、使用 Metamask API 登录、Javascript
前端中的 MetaMask Javascript 代码
首先，它要求开发人员在标头之间添加以太坊提供商检测器脚本
< script src = "https://cdn.jsdelivr.net/npm/@metamask/detect-provider" ></ script >
然后，我们需要编写一段 Javascript，以便在用户单击注册或登录按钮时触发 Metamask 帐户访问请求。
< section >
< form action = "/login" method = "GET" onsubmit = " return false ;" >
< button id = "connect-button" type = "button" > Connect with MetaMask </ button >
</ form >
</ section >
< script >
const connectButton = document . querySelector ( '#connect-button' );
在这种情况下，有两种情况。浏览器上是否已安装 MetaMask 扩展。因此，我们需要在这个点击事件中添加一个if条件。
connectButton . addEventListener ( 'click' , async () => {
// Check if MetaMask is installed
if ( typeof window . ethereum === 'undefined' ) {
alert ( 'Please install MetaMask to continue.' );
Return ;
}
下一步需要我们调用 MetaMask 并获取帐户地址，以便在数据库中创建新的用户 ID 或在用户登录时识别谁。
const accounts = await window . ethereum . request ({ method: 'eth_requestAccounts' });
const metamaskAddress = accounts [ 0 ];
最后但并非最不重要的一点是，我们会将帐户公钥发送到 Web 应用程序数据库。由于 MetaMask 使用 args.get 参数。所以这里是代码示例如下：
window . location . href = '/login?metamask_address=' + metamaskAddress ;
} catch ( error ) {
console . error ( error );
后端的 Flask 路由代码用于存储公钥
一旦用户确认连接您的 Web 应用程序，她或他的钱包公钥将响应您的应用程序服务器。以下是从现在开始捕获用户身份验证密钥的代码示例。
@ app .route ( '/login' , methods =[ 'GET' , 'POST' ])
def login ():
metamask_address = request . args . get ( 'metamask_address' )
return render_template ( 'masklogin.html' , metamask_address = metamask_address )
关于新用户数据库的设置，这里有两篇文章，一篇详细介绍了 SQL 的使用，另一篇介绍了 MongoDB。欲了解更多详情，请查看。
https://www.easy2digital.com/automation/data/python-tutorial-66-flask-application-database-using-mongodb-atlas-and-python-to-better-big-data-management/
用户注册和登录系统的完整 Javascript 和 Python 脚本
如果您对 Web3.0 教程 9 – MetaMask API – 构建 Web 应用程序用户注册和登录感兴趣MetaMask API – 构建 Web 应用程序用户注册和登录，请添加消息“Web3.0教程9”来订阅我们的新闻通讯。我们会立即将脚本发送到您的邮箱。
我希望您喜欢阅读 Web3.0 教程 8 – 使用 Infura、Metamask 和 Web3 创建加密货币支付方式。如果您这样做了，请通过执行下列操作之一来支持我们，因为这总是对我们的频道有所帮助。
- 通过 PayPal ( paypal.me/Easy2digital ) 支持并捐赠我的频道
- 订阅我的频道并打开通知铃Easy2Digital Youtube 频道。
- 关注并喜欢我的页面Easy2Digital Facebook 页面
- 使用主题标签 #easy2digital 在您的社交网络上分享文章
- 您订阅我们的每周通讯即可接收 Easy2Digital 最新文章、视频和折扣代码
- 通过 Patreon 订阅我们的月度会员即可享受独家优惠 ( www.patreon.com/louisludigital )
