# 三点認証（フロント）

## ウィザード
https://mui.com/material-ui/react-stepper/

## API通信について
* 石橋さんの作ってくださったバックエンドからデータを取得
* フロントでのデータ取得、表示確認完了　→　反映済み

## 端末名取得について
* javascriptにて端末名の取得はできなそう...
→　そもそも端末名を取ってくるのは問題あり？
* 現行のPKTouchはPHP？

1. URLに埋め込んでパラメータとして取得
2. PHPなど別のサーバを立てて通信を行い、持ってくる
3. 証明書にアクセス可能ならそこから抜き取る
4. バックエンド側で取得する（濃厚）

## QRコードリーダーについて
どれも読み取り自体は可能
1. react-web-qr-reader(現在利用中)
* QRコード用ということもあり、カメラ領域の縦横比率は1:1で固定

2. jsqr
* react版に置き換える作業必要

3. react-zxing
* 実装は簡単だがカメラ比が端末によって固定されそう
→　下記使用例のwidthはあたらない

import { useState } from "react";
import { useZxing } from "react-zxing";
import * as React from "react";
import { Grid } from "@mui/material";

const BarcodeScanner = () => {
    const [result, setResult] = useState("");
    const { ref } = useZxing({
        onResult(result) {
            setResult(result.getText());
        },
    });

    return (
        <>
            <video
                ref={ref}
                style={{
                    width: "800px",
                    height: "300px",
                }}
            />

            <p>
                <span>Last result:</span>
                <span>{result}</span>
            </p>
        </>
    );
};

const TopPage = () => {
    return (
        <>
            <div>scan</div>
            <BarcodeScanner />
        </>
    );
};
export default TopPage;

読み取り用
https://docs.google.com/presentation/d/16QkCmzL-hK7n--_Bx05AR9241322FPzXUfRPsTa9Z1A/edit#slide=id.p

## バイブレーションについて
* android端末での利用は可能だが、iosのsafariでは非対応
→　https://developer.mozilla.org/ja/docs/Web/API/Vibration_API

## 音について
* codesondboxでは実装できたが、vscodeにてビルド後には音がでない。
→　原因不明...
https://tomroth.com.au/react-sound/
codesoundbox:　https://codesandbox.io/s/20210929-732-1-published-forked-sdg205