MetaMask API – Web アプリの構築 ユーザーのサインアップとログイン
この記事では、Metamask API を使用して、新しいユーザーが Web アプリでアカウントにサインアップできるようにする方法を簡単に説明します。
暗号通貨ウォレットは、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 )
よくある質問:
Q1: MetaMaskはどのような機能を提供していますか？
A: MetaMaskは、イーサリアムブロックチェーン上で動作するウェブ3.0ウォレットです。ユーザーはMetaMaskを使用して、イーサリアムネットワーク上でトークンの送受信やスマートコントラクトの実行ができます。
Q2: MetaMaskはどのプラットフォームで利用できますか？
A: MetaMaskはGoogle Chrome、Firefox、Braveのような主要なウェブブラウザで利用することができます。
Q3: MetaMaskを利用するためにはどのような手順が必要ですか？
A: MetaMaskを使用するためには、まずウェブブラウザにMetaMask拡張機能を追加する必要があります。拡張機能を追加した後、アカウントの作成とウォレットの設定を行うことができます。
Q4: MetaMaskでトランザクションを行う際の手数料はどのように計算されますか？
A: MetaMaskのトランザクション手数料は、ユーザーが設定することができます。ユーザーは手動で手数料を設定するか、自動設定を選択することもできます。手数料の額はトランザクションの処理の速さに影響します。
Q5: MetaMaskでスマートコントラクトを実行するにはどうすればいいですか？
A: MetaMaskを使用してスマートコントラクトを実行するには、スマートコントラクトのアドレスと関数のパラメータを指定する必要があります。MetaMaskは関数を実行し、トランザクションを送信するための手順を提供します。
Q6: MetaMaskのウォレットバックアップはどのように行えますか？
A: MetaMaskのウォレットバックアップは、秘密鍵やシードフレーズを使用して行うことができます。ユーザーはウォレットの設定画面からバックアップオプションを選択し、指示に従ってバックアップを作成することができます。
Q7: MetaMaskのセキュリティ対策はどのようになっていますか？
A: MetaMaskはセキュリティ対策に重点を置いており、ユーザーの資産を保護するために暗号化やパスワード保護を提供しています。また、フィッシング詐欺やマルウェアからの保護のために警告機能も備えています。
Q8: MetaMaskで利用できるトークンはどのように追加できますか？
A: MetaMaskで利用できるトークンを追加するには、トークンのアドレスとシンボルを手動で入力するか、トークンの公式サイトから追加することができます。追加後、トークンはMetaMaskのウォレットで表示されるようになります。
Q9: MetaMaskのアカウント間でトークンを送信するにはどうすればいいですか？
A: MetaMaskのアカウント間でトークンを送信するには、送信したいアカウントのアドレスと送信するトークンの量を指定する必要があります。送信手順を実行すると、トランザクションが送信され、トークンが受信者のアカウントに移動します。
Q10: MetaMaskでのトランザクションの確認方法はありますか？
A: MetaMaskでのトランザクションの確認方法は、トランザクションのハッシュを使用してブロックエクスプローラーで検索することができます。トランザクションがブロックに含まれると、ステータスが更新され、確認されたことが表示されます。
