MetaMask API — создание регистрации и входа пользователя в веб-приложение
В этой статье кратко рассказывается, как разрешить новым пользователям регистрировать учетную запись в вашем веб-приложении с помощью API Metamask.
Криптовалютный кошелек — это основная точка взаимодействия между потенциальными клиентами и клиентами в приложении Web3. Кроме того, это модный подход, позволяющий привлечь новых подписчиков и увеличить продажи.
В этой статье я кратко расскажу, как разрешить новым пользователям регистрировать учетную запись в вашем веб-приложении с помощью Metamask API. К концу этой статьи ваши посетители смогут зарегистрироваться с помощью кошелька MetaMask, а вы сможете идентифицировать пользователей с помощью открытого ключа кошелька.
Оглавление: регистрация нового пользователя веб-приложения, вход с использованием Metamask API, Javascript
- Javascript-код MetaMask во внешнем интерфейсе
- Код маршрута Flask в бэкэнде для хранения открытого ключа
- Полный Javascript и Python-скрипт системы регистрации и входа пользователей.
Javascript-код MetaMask во внешнем интерфейсе
Прежде всего, разработчикам необходимо добавить скрипт обнаружения провайдера Ethereum между заголовком.
< 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 и получили адрес учетной записи для создания нового идентификатора пользователя в базе данных или определения того, кого пользователь входит в систему.
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-скрипт системы регистрации и входа пользователей.
Если вас интересует руководство 9 Web3.0 — MetaMask API — Создание регистрации пользователя в веб-приложении и LoginMetaMask API — Создание регистрации и входа в систему в веб-приложении, подпишитесь на нашу рассылку , добавив сообщение «Урок 9 по Web3.0». . Мы немедленно отправим вам сценарий на ваш почтовый ящик.
Надеюсь, вам понравится читать руководство 8 по Web3.0 — Создание способа оплаты в криптовалюте с использованием Infura, Metamask и Web3. Если да, поддержите нас, выполнив одно из действий, перечисленных ниже, потому что это всегда помогает нашему каналу.
- Поддержите мой канал и сделайте пожертвование через PayPal ( paypal.me/Easy2digital ).
- Подпишитесь на мой канал и включите колокольчик Easy2Digital Youtube-канал .
- Подпишитесь на мою страницу и поставьте ей лайк. Страница Easy2Digital в Facebook.
- Поделитесь статьей в своей социальной сети с хэштегом #easy2digital.
- Вы подписываетесь на нашу еженедельную рассылку, чтобы получать последние статьи, видео и коды скидок Easy2Digital.
- Подпишитесь на наше ежемесячное членство через Patreon, чтобы пользоваться эксклюзивными преимуществами ( www.patreon.com/louisludigital ).
