DEV Community: Serhii

Оплата в один клик с Minter Link

Serhii — Fri, 25 Sep 2020 14:02:35 +0000

Оплата товаров, услуг или любых действий на вашем сайте в один клик при помощи криптовалюты Minter. Без переключения в консоль, без необходимости вспоминать seed-фразу, без необходимости вводить что-либо в payload.

Эта статья рассматривает оплату c использованием Minter блокчейна: безопасный способ оплатить что угодно на сайте в один клик при помощи расширения Minter Link.

Как это работает

Основная идея в том, что Minter Link позволяет упростить процесс оплаты для пользователя. Не нужно вводить точную сумму, не нужно вписывать payload, весь процесс упрощен до нажатия одной кнопки: "Оплатить" или "Отказаться". Рассмотрим процесс по шагам.

Браузерное расширение Minter Link

Minter Link — это браузерное расширение, доступное для Google Chrome. Основная функция расширения — мультикошелек для Minter блокчейна. После установки вы получаете возможность управлять кошельками, отправлять и получать монеты в сети Minter.

Но Minter Link, помимо этого, позволяет взаимодействовать со страницами, которые вы просматриваете в браузере. Разработчики сайтов могут получать мгновенные обновление от вашего кошелька (если вы дали такое разрешение) и делать запросы на оплату и цифровую подпись сообщений. Для этого существует библиотека Minter Connect.

JavaScript библиотека Minter Connect

Minter Connect — это мостик между вашим приложением и браузерным расширением Minter Link. Библиотека, с одной стороны, позволяет получать данные о статусе расширения и данные о публичном адресе, с другой — позволяет запрашивать у пользователя разрешение на доступ к публичному адресу, криптографическую подпись и делать запросы на отправку транзакций.

Подробнее о том, как пользоваться библиотекой — на странице репозитория на GitHub

Minter Link Payment Flow

Шаг нулевой: подготовить БД (back end)

Создадим модели для товаров и заказов. У каждого товара буду поля price и coin, у заказа — itemId и hash.

Шаг первый: запросить `orderId` (front end)

Сделаем запрос на backend c itemId товара, который мы хотим оплатить и получим назад уникальный orderId заказа.

Порядок действия такой:

проверяем наличие расширения (установлено или нет)
проверяем статус расширения (разблокировано или нет)
если кошелек разблокирован — делаем запрос на backend, получаем назад orderId

Шаг третий: сформировать запрос (front end)

Сформируем paymentData, чтобы сделать запрос к расширению: payload (ID заказа), адрес для оплаты, сумму и монету оплаты.

Шаг четвертый: отправить запрос на оплату (front end)

Отправим запрос в расширение, куда передадим paymentData При успешной оплате получим назад хеш транзакции в блокчейне.

Шаг пятый: подготовим обработчик транзакций (back end)

На стороне сервера создадим сервис, который будет слушать все транзакции из блокчейна, нас интересуют транзакции с типом 0x01 (Send) и адресатом — нашим кошельком, который мы указали в четвертом шаге.

У каждой транзакции мы проверим payload и ищем там наш orderId. Если транзакция найдена, у нее совпадает адрес, payload, сумма и монета — обновим у заказа hash.

Примеры кода

HTML

<!-- Расширение не установлено -->
<p if="!isMinterLinkInstalled">Minter Link is not installed</p>

<!-- Расширение заблокировано -->
<p if="isMinterLinkInstalled && !isMinterLinkUnlocked">Minter Link is locked</p>

<button onclick="pay(1)" if="isMinterLinkInstalled && isMinterLinkUnlocked">Purchase</button>

JavaScript

import MinterConnect, { MinterLinkObservableProps } from 'minter-connect'

let isMinterLinkInstalled = false
let isMinterLinkUnlocked = false
let minterPublicAddress = ''
let isAuthenticated = false

// Устанавливаем соединение с расширением
const minterConnect = new MinterConnect('My awesome application')

// Подписываемся на события
minterConnect.subscribe(MinterLinkObservableProps.IsInstalled, (value) => {
  isMinterLinkInstalled = value
})

minterConnect.subscribe(MinterLinkObservableProps.IsUnlocked, (value) => {
  isMinterLinkUnlocked = value
})

async function pay (itemId) {
  if (!isMinterLinkInstalled) return
  if (!isMinterLinkUnlocked) return

  try {
    const orderId = await api.makeOrder(itemId)
    const paymentData = {
      address: 'Mx...',          // наш адрес для оплаты
      amount: '999',             // цена
      coin: 'BIP',               // монета
      payload: response.data.id  // orderId
    }

    await minterConnect.paymentRequest(paymentData)
  } catch (e) {
    console.error(e)
  }
}

Node.JS

async function makeOrder (itemId) {
  const item = await getItemById(itemId)
  const order = new Order({
    itemId,
    price: item.price,
    coin: item.coin
  })

  order.save()

  return order.id
}

// Функция, которая будет перебирать транзакции из блокчейна
async function handleTransaction (transaction) {
  // Тип транзакции должен быть Send
  if (transcation.type !== '0x01') return
  // Адресат должен быть нашим кошельком
  if (transcation.data.to !== 'Mx...') return

  const orderId = transaction.payload.trim()
  const order = await getOrderById(orderId)

  // Несуществующий заказ
  if (!order) return
  // Заказ уже оплачен
  if (order.hash) return
  // Сумма не совпадает
  if (order.price !== tx.data.value) return
  // Монета не совпадает
  if (order.coin !== tx.data.coin) return

  // Все хорошо, это наш заказ!
  order.hash = transaction.hash
  order.save()

  // Дальше ваша бизнес логика: отправляем письмо об успешной оплате, начисляем бонусные баллы, уведомляем frontend о смене статуса заказа и т.д.
}

async function getItemById (itemId) {
  return db.getItemById(itemId)
}

async function getOrderById (orderId) {
  return db.getOrderById(orderId)
}

Плюсы и минусы

Это просто, удобно и безопасно.

Повышенная безопасность. Приватный ключ кошелька хранится в расширении пользователя локально в зашифрованном виде. Атаковать напрямую локальное хранилище очень сложно, у каждого расширения свое изолированное окружение и даже в случае утечки зашифрованной строки с приватным ключом потребуется очень много ресурсов, чтобы расшифровать строку, закодированную AES c 256-битным ключом.
Упрощенный UX. Вместо того, чтобы вводить данные карты или копировать данные заказа и затем вводить его у себя в кошельке, пользователю нужно нажать всего одну кнопку. Не нужно ничего запоминать, все "ключи" лежат у него прямо в браузере.
Конфиденциальность. Все хранится локально, никакие данные не передаются третьим лицам.

Вам потребуется проделать некоторую работу, чтобы мотивировать пользователей вашего сайта установить расширение Minter Link и пользоваться им для оплаты. Взамен пользователи получат удобный кошелек и возможность платить в одни клик.

Вы же, как владелец сайта, получите список адресов, который можно использовать для построения базы лояльных пользователей. Поскольку вы точно знаете с какого адреса была произведена оплата, вы можете использовать эти адреса для выплаты кешбека или предоставления персональных скидок в будущем.

Ничто не мешает вам использовать Minter Link как дополнительный способ оплаты, в дополнение к классическим способам вроде пластиковой карты или мобильных платежей.

От минусов никуда не деться, серебряной пули не существует.

От пользователя требуется установить Minter Link. Если аудитория вашего сайта не интересуется криптовалютами и блокчейн-технологиями — скорее всего о Minter они не слышали и вам это не нужно.
Потребуется потратить некоторое время на доработку кода. Упрощенный пример выглядит просто, но дьявол кроется в деталях. Если у вас уже есть работающий сложный сайт, интеграция нового способа оплаты может потребовать усилий и времени.
Это не работает на мобильных устройствах. Популярные мобильные браузеры не поддерживают установку расширений. Есть несколько экспериментальных браузеров, которые это умеют, но ими пользуются далеко не все, так что об этом лучше пока забыть.

Спасибо за внимание.

Читайте также: Логин в один клик при помощи Minter Link.

Логин в один клик с Minter Link

Serhii — Fri, 25 Sep 2020 14:02:18 +0000

Чем проще регистрация на вашем сайте - тем больше людей ей воспользуются. Людей отталкивает необходимость заполнять длинные формы с большим количеством полей. Аутентификация через соц. сети в один клик - это то, к чему пришли все популярные сайты.

Эта статья рассматривает метод аутентификации c использованием Minter блокчейна: безопасный способ войти на сайт в один клик при помощи расширения Minter Link.

Как это работает

Основная идея состоит в том, что криптография позволяет нам проверить является ли человек владельцем аккаунта при помощи криптографической подписи. Зная только публичный ключ владельца, мы можем убедиться что сообщение подписано им при помощи приватного ключа. Рассмотрим процесс по шагам.

Браузерное расширение Minter Link

JavaScript библиотека Minter Connect

Minter Connect — это мостик между вашим приложением и браузерным расширением Minter Link. Библиотека, с одной стороны, позволяет получать данные о статусе расширения и данные о публичном адресе, с другой — позволяет запрашивать у пользователя разрешение на доступ к публичному адресу, криптографическую подпись и делать запросы на отправку транзакций.

Подробнее о том, как пользоваться библиотекой — на странице репозитория https://github.com/minterscan/minter_connect

Minter Link Login Flow

Шаг нулевой: подготовить БД (back end)

Дополним модель пользователя сайта. У каждого пользователя добавим два поля: publicAddress и nonce. Учтем, что публичный адрес должен быть уникальным полем.

Шаг первый: сгенерировать `nonce` (back end)

Для каждого существующего пользователя сгенерируем nonce. Это должно быть случайное число или строка.

Шаг второй: получить `nonce` (front end)

Передадим на backend publicAddress и запросим свой nonce.

Для того, чтобы приложение имело доступ к публичному адресу, его необходимо сначала запросить (один раз). После подтверждения Minter Link добавит домен в список разрешенных и вы всегда сможете знать, что пользователь вернулся к вам на сайт (при условии, что Minter Link разблокирован).

Порядок действия такой:

проверяем наличие расширения (установлено или нет)
проверяем статус расширения (разблокировано или нет)
проверяем доступ к публичному адресу
если доступа нет — сначала запрашиваем его
если доступ есть — делаем запрос на backend, отправляя publicAddress и получаем назад nonce

Шаг третий: отправить запрос на подпись (front end)

Подписываем nonce своим приватным ключом. Для этого делаем вызов расширению и передаем ему nonce. Назад ожидаем получить подписанное сообщение (в HEX формате) и цифровую ECDSA подпись (также в HEX формате).

Шаг четвертый: проверить подпись (back end)

Проверяем подписанное сообщение при помощи публичного ключа и параметров подписи. Если сообщение действительно подписано владельцем публичного ключа — считаем что пользователь прошел аутентификацию. Формируем JWT и возвращаем его на frontend.

Шаг пятый: обновить `nonce` (back end)

Обновляем nonce. Чтобы предотвратить повторную аутентификацию с той же подписью (на случай, если она была скомпрометирована), мы сделаем так, что при следующей попытке входа на сайт пользователю понадобится подписать новое сообщение (новый nonce)

Примеры кода

HTML

<!-- Расширение не установлено -->
<p if="!isMinterLinkInstalled">Minter Link is not installed</p>

<!-- Расширение заблокировано -->
<p if="isMinterLinkInstalled && !isMinterLinkUnlocked">Minter Link is locked</p>

<div if="isMinterLinkInstalled && isMinterLinkUnlocked">
  <!-- Нет доступа к публичному адресу -->
  <button onclick="connect()" if="!minterPublicAddress">Connect</button>

  <!-- Есть доступ к публичному адресу -->
  <button onclick="login()" if="minterPublicAddress && !isAuthenticated">Login</button>

  <!-- Пользователь вошел на сайт -->
  <button onclick="logout()" if="isAuthenticated">Logout</button>
</div>

JavaScript

import MinterConnect, { MinterLinkObservableProps } from 'minter-connect'

let isMinterLinkInstalled = false
let isMinterLinkUnlocked = false
let minterPublicAddress = ''
let isAuthenticated = false

// Устанавливаем соединение с расширением
const minterConnect = new MinterConnect('My awesome application')

// Подписываемся на события
minterConnect.subscribe(MinterLinkObservableProps.IsInstalled, (value) => {
  isMinterLinkInstalled = value
})

minterConnect.subscribe(MinterLinkObservableProps.IsUnlocked, (value) => {
  isMinterLinkUnlocked = value
})

minterConnect.subscribe(MinterLinkObservableProps.Wallet, (value) => {
  minterPublicAddress = value
})

// Запрашиваем у пользователя доступ к публичному адресу
function connect () {
  if (!isMinterLinkInstalled) return
  if (!isMinterLinkUnlocked) return

  minterConnect.connectRequest()
}

async function login () {
  if (!isMinterLinkInstalled) return
  if (!isMinterLinkUnlocked) return
  if (!minterPublicAddress) return

  try {
    // Запрашиваем nonce на backend
    const nonce = await api.getNonce(minterPublicAddress)
    // Запрашиваем у пользователя криптографическую подпись
    const { message, signature } = await minterConnect.signRequest(nonce)
    // Проверяем подпись на backend
    const jwt = await api.auth(minterPublicAddress, signature)

    isAuthenticated = true
  } catch (e) {
    console.error(e)
  }
}

function logout () {
  isAuthenticated = false
}

Node.JS

import { mPrefixToHex } from 'minterjs-util'
import { pubToAddress } from 'ethereumjs-util/dist/account'
import { addHexPrefix, toBuffer, bufferToHex } from 'ethereumjs-util/dist/bytes'
import { hashPersonalMessage, ecrecover, fromRpcSig } from 'ethereumjs-util/dist/signature'

function auth (address, signature) {
  const nonce = getNonce(publicKey)
  const isValifSignature = verifySignature(nonce, address, signature)

  if (!isValidSignature) throw new Error('Invalid signature')

  await updateNonce(minterPublicAddress)

  // Возвращаем JWT
  return jwt.sign(...)
}

function verifySignature (nonce, address, signature) {
  // Воссоздаем подписанное сообщение
  const msgBuffer = toBuffer(addHexPrefix(Buffer.from(nonce).toString('hex')))
  // Хешируем сообщение
  const msgHash = hashPersonalMessage(msgBuffer)
  // Получаем параметры ECDSA подписи
  const sigParams = fromRpcSig(signature)
  // Восстанавливаем из сообщения публичный ключ, используя параметры подписи, полученные от клиента
  const recoveredPublicKey = ecrecover(msgHash, sigParams.v, sigParams.r, sigParams.s)
  // Конвертируем публичный ключ в Mx адрес
  const recoveredAddress = pubToAddress(recoveredPublicKey)
  // Сравниваем полученный адрес и адрес, полученный от клиента
  const isValidSignature = mPrefixToHex(publicKey) === bufferToHex(recoveredAddress)

  return isValidSignature
}

async function getNonce (publicKey) {
  const user = await db.getUserByPublicKey(publicKey)

  return user.nonce
}

async function updateNonce (publicKey) {
  const user = await db.getUserByPublicKey(publicKey)

  user.nonce = Math.floor(Math.random() * 1000000)

  return user.save()
}

После того, как мы получили JWT, дальше работаем с ним как обычно. Ко всем приватным запросам к API добавляем в заголовок токен и проверяем его валидность на сервере. Кроме еще одного способа аутентификации в структуре приложения ничего больше не меняется.

Плюсы и минусы

Это просто, удобно и безопасно. Криптография позволяет удостовериться нам, что только владелец приватного ключа может подписать сообщение и мы легко можем это проверить, без прямого доступа к блокчейну, только на основе математики.

Повышенная безопасность. Приватный ключ кошелька хранится в расширении пользователя локально в зашифрованном виде. Атаковать напрямую локальное хранилище очень сложно, у каждого расширения свое изолированное окружение и даже в случае утечки зашифрованной строки с приватным ключом потребуется очень много ресурсов, чтобы расшифровать строку, закодированную AES c 256-битным ключом.
Упрощенный UX. Вместо того, чтобы вводить логин и пароль, пользователю нужно нажать всего одну кнопку (окей, две, в случае если это его первый визит на сайт). Не нужно ничего запоминать, все "ключи" лежат у него прямо в браузере.
Конфиденциальность. Все хранится локально, никакие данные не передаются третьим лицам.

Ничто не мешает вам использовать Minter Link как дополнительный способ аутентификации, в дополнение к классическому входу через почту и пароль и/или социальные сети.

От минусов никуда не деться, серебряной пули не существует.

От пользователя требуется установить Minter Link. Если аудитория вашего сайта не интересуется криптовалютами и блокчейн-технологиями — скорее всего о Minter они не слышали и вам это не нужно.
Потребуется потратить некоторое время на доработку кода. Упрощенный пример выглядит просто, но дьявол кроется в деталях. Если у вас уже есть работающий сложный сайт, интеграция нового способа аутентификации может потребовать усилий и времени.
Это не работает на мобильных устройствах. Популярные мобильные браузеры не поддерживают установку расширений. Есть несколько экспериментальных браузеров, которые это умеют, но ими пользуются далеко не все, так что об этом лучше пока забыть.

Спасибо за внимание.

Читайте также: Оплата в один клик при помощи Minter Link.

DEV Community: Serhii

Оплата в один клик с Minter Link

Как это работает

Браузерное расширение Minter Link

JavaScript библиотека Minter Connect

Minter Link Payment Flow

Шаг нулевой: подготовить БД (back end)

Шаг первый: запросить orderId (front end)

Шаг третий: сформировать запрос (front end)

Шаг четвертый: отправить запрос на оплату (front end)

Шаг пятый: подготовим обработчик транзакций (back end)

Примеры кода

Плюсы и минусы

Логин в один клик с Minter Link

Как это работает

Браузерное расширение Minter Link

JavaScript библиотека Minter Connect

Minter Link Login Flow

Шаг нулевой: подготовить БД (back end)

Шаг первый: сгенерировать nonce (back end)

Шаг второй: получить nonce (front end)

Шаг третий: отправить запрос на подпись (front end)

Шаг четвертый: проверить подпись (back end)

Шаг пятый: обновить nonce (back end)

Примеры кода

Плюсы и минусы

Шаг первый: запросить `orderId` (front end)

Шаг первый: сгенерировать `nonce` (back end)

Шаг второй: получить `nonce` (front end)

Шаг пятый: обновить `nonce` (back end)