# [github.com/mebjas/html5-qrcode](https://github.com/mebjas/html5-qrcode)

https://github.com/mebjas/html5-qrcode/blob/master/examples/react

🔥 🧨 #qr | html5-qrcode #react

## This article in progress...

![qr](https://pravosleva.pro/express-helper/chat/storage/uploads/ux-test/1696163081301.png)

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

> See also https://www.npmjs.com/package/qr-code-styling, **[TRY THIS](https://qr-code-styling.com/)**

> See also: [How to create a QR code in ExpressJS](https://gabrieleromanato.name/nodejs-create-a-qr-code-in-expressjs)

### _[pravosleva.pro/express-helper/qr/swagger/](https://pravosleva.pro/express-helper/qr/swagger/)_

![qr-exp](https://pravosleva.pro/static/img/qr_https_pravosleva_pro_express-helper_qr_swagger_.png)

### _Варианты авторизации по QR_

#### *v1*

- POST `/login`

> При успешной авторизации, создаём QR код с ссылкой и возможность перейти этой по ссылке успешно N раз.

*Response:*
```js
{
  ...data,
  qr,
  // содержащий ссылку на /auth/go-target с параметрами:
  // - logged_req_id
  // - hash
}
```
- static page `/auth/go-target? logged_req_id=<STRING>& hash=<STRING>`

Если клиент перешёл по ссылке с указанными параметрами и лимит аутентификации на доп устройствах не исчерпан, *проверим ему на слово и авторизуем **(NOTE: дыра в безопасности детектед!)***, актуализируя счётчик.
**Иначе варианты:**
- ☐ 1) чистим куку и отвечаем 500
- ☐ 2) или переводим на err page?
- ✔ 3) или чистим куку и редиректим и на авторизацию с хэшом (если найдем хэш по logged_req_id (id успешного запроса /login), если нет - можно 500; ***ПОПРАВКА: hash и logged_req_id в параметрах этого запроса - 500-я будет в случаях: 3.1) невалидного хэша либо logged_req_id***

<Alert header='Additional cookie' text='**urgent_auth_service_msg** cookie for 15 seconds (will be read on client for UI notification) ***httpOnly: false***' type='warning' />

# OLD [2021-03-26]

## 🧨 Express minimalism

Simplest middleware.

```js
import { Response as IResponse } from 'express'
import { ICustomRequest } from '~/utils/interfaces'
import QRCode from 'qrcode'
import { promisify } from 'es6-promisify'

const genDataUrl: (payload: string) => Promise<string> = promisify(QRCode.toDataURL.bind(QRCode))

export const tstGenerate = async (req: ICustomRequest, res: IResponse) => {
  const { payload } = req.query

  if (!payload) {
    return res
      .status(401)
      .json({ ok: false, message: 'Missing required parameter: "payload"' })
  }

  const dataUrl = await genDataUrl(String(payload))

  return res.status(200).json({
    ok: true,
    src: dataUrl,
  })
}
```

#express #qr code experience #auth

## [qrcode-monkey.com](https://www.qrcode-monkey.com/)

**[Chrome extension](https://chrome.google.com/webstore/detail/qrcode-monkey-free-qr-cod/gidoepdbdhacpopcmepkflghaalfapmk)**

[www.qrcode-monkey.com API](https://www.qrcode-monkey.com/qr-code-api-with-logo/)

```bash
curl 'https://qr-generator.qrcode.studio/qr/custom' \
  -H 'authority: qr-generator.qrcode.studio' \
  -H 'sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36' \
  -H 'content-type: text/plain;charset=UTF-8' \
  -H 'accept: */*' \
  -H 'origin: https://www.qrcode-monkey.com' \
  -H 'sec-fetch-site: cross-site' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-dest: empty' \
  -H 'referer: https://www.qrcode-monkey.com/' \
  -H 'accept-language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7' \
  --data-raw '{"data":"http://pravosleva.ru/express-helper/qr/swagger/","config":{"x": 10,"y":5,"body":"circular","eye":"frame13","eyeBall":"ball15","erf1":[],"erf2":[],"erf3":[],"brf1":[],"brf2":[],"brf3":[],"bodyColor":"#113151","bgColor":"#FFFFFF","eye1Color":"#113151","eye2Color":"#113151","eye3Color":"#113151","eyeBall1Color":"#113151","eyeBall2Color":"#113151","eyeBall3Color":"#113151","gradientColor1":null,"gradientColor2":null,"gradientType":"linear","gradientOnEyes":true,"logo":"","logoMode":"default"},"size":250,"download":"imageUrl","file":"png"}' \
  --compressed
```

qr

🔥 🧨 #qr | html5-qrcode #react

#express #qr code experience #auth

#qrCode #qrcodeMonkey | Online generator; Chrome extension