暗号通貨ウォレットは、Web3 アプリで見込み客と顧客をつなぐ主要なタッチポイントです。さらに、これは新規登録にアピールし、より多くの売上につなげるための、流行のファッショナブルなアプローチです。
この記事では、Metamask API を使用して新しいユーザーがWeb アプリでアカウントにサインアップできるようにする方法を簡単に説明します。この記事が終わるまでに、訪問者はMetaMask ウォレットを使用してサインアップできるようになり、あなたはウォレットの公開キーを使用してユーザーを識別できるようになります。
目次: Web アプリの新規ユーザーのサインアップ、メタマスク API を使用したログイン、JavaScript
- フロントエンドのMetaMask Javascript コード
- 公開キーを保存するためにバックエンドでコードを Flask ルートします
- ユーザーサインアップおよびログインシステムの完全な Javascript および Python スクリプト
- よくある質問
フロントエンドのMetaMask Javascript コード
まず最初に、開発者はヘッダーの間に Ethereum プロバイダー検出スクリプトを追加する必要があります。
< script src = "https://cdn.jsdelivr.net/npm/@metamask/detect-provider" ></ script >次に、ユーザーがサインアップまたはログイン ボタンをクリックしたときにメタマスク アカウント アクセス リクエストをトリガーする Javascript を記述する必要があります。
< 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' );この場合、2 つのシナリオがあります。 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 について説明した記事が 2 つあります。詳細については、ご確認ください。
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 – Build a Web App User Sign-up and LoginMetaMask API – Build a Web App User Sign-up and Login に興味がある場合は、 「Web3.0 チュートリア. ル 9」というメッセージを追加してニュースレターを購読してください。 。スクリプトはすぐにあなたのメールボックスに送信されます。
「Web3.0 チュートリアル 8 – Infura、Metamask、および Web3 を使用した暗号通貨支払い方法の作成」を楽しんで読んでいただければ幸いです。もしそうなら、以下にリストされているいずれかの方法で私たちをサポートしてください。それは常に私たちのチャンネルに役立ちます。
- PayPal を通じて私のチャンネルをサポートし、寄付してください ( paypal.me/Easy2digital )
- 私のチャンネルを購読し、 Easy2Digital Youtube チャンネルの通知ベルをオンにしてください。
- Easy2Digital Facebook ページをフォローして「いいね！」してください
- ハッシュタグ #easy2digital を付けて記事をソーシャル ネットワークで共有してください
- Easy2Digital の最新記事、ビデオ、割引コードを受け取るには、毎週のニュースレターに登録してください。
- Patreon を通じて月額メンバーシップに登録すると、限定特典をお楽しみいただけます ( www.patreon.com/louisludigital )
