MetaMask API – 웹 앱 사용자 가입 및 로그인 구축
이 문서에서는 신규 사용자가 Metamask API를 사용하여 웹 앱에서 계정에 가입할 수 있도록 하는 방법을 간략하게 설명합니다.
암호화폐 지갑은 Web3 앱에서 잠재 고객과 고객을 연결하는 주요 접점입니다. 또한 신규 가입을 유도하고 더 많은 판매를 전환하는 최신 유행 접근 방식입니다.
이 기사에서는 Metamask API를 사용하여 신규 사용자가 웹 앱에 계정을 등록할 수 있도록 하는 방법을 간략하게 설명하겠습니다. 이 기사가 끝나면 방문자는 MetaMask 지갑을 사용하여 가입할 수 있으며 지갑 공개 키를 사용하여 사용자를 식별할 수 있습니다.
목차: 웹앱 신규 사용자 가입, Metamask API를 이용한 로그인, Javascript
- 프런트엔드의 MetaMask Javascript 코드
- 공개 키를 저장하기 위한 백엔드의 Flask 경로 코드
- 사용자 가입 및 로그인 시스템의 전체 Javascript 및 Python 스크립트
프런트엔드의 MetaMask Javascript 코드
먼저, 개발자는 헤더 사이에 Ethereum 공급자 감지 스크립트를 추가해야 합니다.
< script src = "https://cdn.jsdelivr.net/npm/@metamask/detect-provider" ></ script >
그런 다음 사용자가 가입 또는 로그인 버튼을 클릭할 때 메타마스크 계정 액세스 요청을 트리거하는 자바스크립트를 작성해야 합니다.
< 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 ];
마지막으로 계정 공개 키를 웹앱 데이터베이스로 보냅니다. MetaMask는 args.get 매개변수를 사용합니다. 따라서 코드 샘플은 다음과 같습니다.
window . location . href = '/login?metamask_address=' + metamaskAddress ;
} catch ( error ) {
console . error ( error );
공개 키를 저장하기 위한 백엔드의 Flask 경로 코드
사용자가 웹 앱 연결을 확인하면 해당 사용자의 지갑 공개 키가 앱 서버에 응답합니다. 이제부터 사용자 인증을 위한 키를 캡처하는 코드 샘플은 다음과 같습니다.
@ 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 – 웹 앱 사용자 가입 및 LoginMetaMask API 구축 – 웹 앱 사용자 가입 및 로그인 구축에 관심이 있으시면, "Web3.0 tutorial 9"라는 메시지를 추가하여 뉴스레터를 구독 해 주세요. . 우리는 즉시 귀하의 사서함으로 스크립트를 보내드립니다.
Web3.0 튜토리얼 8 – Infura, Metamask 및 Web3를 사용한 암호화폐 결제 방법 생성을 재미있게 읽으시기 바랍니다. 그렇게 했다면 아래 나열된 일 중 하나를 수행하여 우리를 지원해 주세요. 이는 항상 우리 채널에 도움이 되기 때문입니다.
- PayPal( paypal.me/Easy2digital )을 통해 내 채널을 지원하고 기부하세요.
- 내 채널을 구독하고 Easy2Digital Youtube 채널 알림 벨을 켜십시오.
- 내 페이지 Easy2Digital Facebook 페이지를 팔로우하고 좋아요를 누르세요.
- 해시태그 #easy2digital을 사용하여 소셜 네트워크에 기사를 공유하세요.
- Easy2Digital 최신 기사, 비디오 및 할인 코드를 받으려면 주간 뉴스레터에 가입하세요.
- Patreon을 통해 월간 멤버십을 구독하여 독점적인 혜택을 누리세요( www.patreon.com/louisludigital )
