HTML+JS+Rails 정면 서명 → 뒷면 서명 검증 [초보자용]
따라서 서명을 통해 정확한 지갑 주소를 얻을 수 있으며, 다음은 방법을 설명한다.
프론트 데스크톱에서 서명→백엔드에서 서명을 검증하면 정확한 주소임을 증명할 수 있다.
이번에는 HTML+Javascript+Rails로 진행됩니다.
HTML
먼저 프런트의 HTML입니다.
프로그램 라이브러리와 js 실행 단추를 불러왔을 뿐입니다!
axios를 사용하고 있는데, 다른 것도 괜찮을까요?
블록체인에 대한 라이브러리, 웹3.js를 사용하고 있습니다.
ethers.다음에 js판을 주고 싶어요!
index.rb
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ethereum/[email protected]/dist/web3.min.js"></script>
</head>
<body>
<button class="enableEthereumButton">Enable Ethereum</button>
<script src="./register.js">
</script>
</body>
</html>
Javascript
다음은 js 파일입니다.
register.js
const registerUserButton = document.querySelector('.registerUserButton');
registerUserButton.addEventListener('click', () => {
unlockWallet();
});
async function unlockWallet() {
//web3がない、もしくはメタマスクのない状況(window.ethereumがない状況)ならその注意文を出してreturn
if (typeof web3 == 'undefined' && typeof window.ethereum == 'undefined') {
console.log('Wallet is not installed!');
return
}
// web3をnewする metamaskであろうがその他であろうが、同じバージョンのweb3を使う(ethers.jsでもいいかも)
window.web3 = new Web3(window.ethereum);
ethereum.request({ method: 'eth_requestAccounts' })
.then(function(result){
signAndRegister(result[0]);
})
}
function signAndRegister(wallet_address){
web3.eth.personal.sign("Agree", wallet_address)
.then(function(result){
const params = {
signed_data: result,
address: wallet_address,
}
axios.post(apiUrl, params)
.then(function(res) {
console.log(res)
})
.catch(function(error) {
console.log(error)
})
})
}
ethereum.request({ method: "eth_requestAccounts" });
↓ 실행 후 Metamask를 팝업하여 서명합니다.
web3.eth.personal.sign("Agree", wallet_address);
Rails
그런 다음 Rails로 서명을 확인합니다.
프론트에서 보낸 서명 데이터에서 주소를 복원하여 함께 보낸 주소와 일치하는지 확인합니다.
ruby-eth Gem을 사용하여 서명에서 주소를 복구할 수 있습니다.
gem 'eth', '~> 0.4.10'
class Api::V1::SignaturesController < Api::ApplicationController
def create
address = recover_address(params[:signed_data], "Agree")
#復元したアドレスと、投げられてきたアドレスが異なる場合はErrorを返す(不正)
if address.downcase != params[:address].downcase
@error_message = "Error"
return
end
#ここで何かしら行いたい動作をする。
end
private
#署名からpublic keyを復元し、そのpublic_keyからaddressを復元する
def recover_address(signature, message)
public_key = Eth::Key.personal_recover(message, signature)
address = Eth::Utils.public_key_to_address(public_key)
return address
end
end
public_key = Eth::Key.personal_recover(message, signature)
address = Eth::Utils.public_key_to_address(public_key)
이렇게 하면 백엔드에서 정확한 지갑 주소를 사용할 수 있다.
총결산
백엔드에서 메타마스크 등 지갑 주소를 활용하고 싶을 때의 검증 방법에 대한 해설이다.
Reference
이 문제에 관하여(HTML+JS+Rails 정면 서명 → 뒷면 서명 검증 [초보자용]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/ryo27/articles/934e3fd14732a9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
