AWS Cognitoを使わずに多要素認証を実装したいんよ

こんにちは。エンジニアブログの楽しさを知ったと同時にクソリプをもらってネット社会の恐ろしさを知った、むっそです。

先日スタートアップ転職あるあるという、科学的根拠も情報の出典もあまり書いていないようなN=1のポエムが、大変恐縮ながらちょっとばかりおバズりいたしました。不確実性の高い時代だからかこういう体験談ってみんな好きなんですかね。
**物好きなかたもいるんですね。**

https://qiita.com/muson0110/items/b0a997e8b3221a2786d5


# はじめに
じつは上のリンクの記事の中にちょっとだけ伏線があって、こんなことを書きました。

> 入社1日目でバグ修正させられたり、多要素認証実装しろとか言われたり、なんなんってなります。(経験談)

そうです。**多要素認証です。(伏線回収決め顔)**

なので今回は多要素認証を実装してみたという記事を書いてみようかと思います。仕事では**フロントエンドをReact、バックエンドをPythonで書いていて、主にAWSのインフラを使って開発**をしておりまして、なにかと多要素認証の記事は役に立つんじゃないかと思います。


# 多要素認証？なにそれ
野村総合研究所の定義から引用すると

```
ID・パスワードなどの「知識情報」および「所持情報」「生体情報」という
認証の3要素の中から、2つ以上の異なる認証要素を用いて認証する方法
```
ということです。

https://www.nri.com/jp/knowledge/glossary/lst/ta/multi_factor_authentication


所持情報とは携帯電話、ハードウェアトークンといった**ユーザーが所有している情報**であり、生体情報とは指紋、静脈などの**ユーザーの身体的な情報**ですね。

なんかのアプリにログインしたあとにSMSでパスワードが送られてきて、送られたコードを入力するみたいなことは誰しもやった経験があるんじゃないかなと思います。それも多要素認証ですね。

2022年2月10日の記事によると多要素認証を実装している企業の割合が少ないようで
**Microsoftが「君らそろそろやばない？」** って言ってる記事を見つけました。
今後より一層、多要素認証を実装する機会は増えてきそうですね。

https://www.itmedia.co.jp/news/articles/2202/10/news067.html


# AWSでの多要素認証方式

自分たちのAWS環境で開発しているソフトウェアサービスで多要素認証を提供しようとしたときに、実装方法としては主に2種類あります。</br>

[SMS(Short Message Service)認証](https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/user-pool-settings-mfa-sms-text-message.html)</br>
携帯電話宛てに4桁や6桁のショートコード（ワンタイムパスワード）が送信され、そのコードを入力してアプリやシステムにログインする仕組み

[TOTP(Time-based One-Time Password)認証](https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/user-pool-settings-mfa-totp.html)</br>
サーバーとクライアントで同じ秘密鍵を共有して、その秘密鍵と時間を元に30秒間有効なワンタイムパスワードを生成する。クライアント側がショートコード（ワンタイムパスワード）をサーバーに送信して、一致していればログインできる仕組み

</br>

ただ **「SMS認証は危険なのではないか」** という記事を見かけたりするので、この記事でもTOTP認証に限定して書いていこうと思います。

https://www.lifehacker.jp/article/232050please-stop-using-text-messaging-to-receive-login-codes/


# AWSでTOTP認証をさくっと実装できる？
秘密鍵とか出てきて、実装が難しそうに見えるのですが、AWSには一応**AWS Cognitoというユーザー認証/承認/管理サービス**はあってTOTP認証も実装はできるのですが、AWS Cognitoを使わずに独自に多要素認証を実装したい場面がいくつかあるのではないかと思います。

</br>

**AWS Cognitoを使わずにTOTP認証を実装したいケース例**

* **AWS CognitoフェデレーティッドユーザーにMFAを設定したい場合</br>**
※ 現時点ではフェデレーティッドユーザーに MFA を設定できないみたいです。

https://aws.amazon.com/jp/premiumsupport/knowledge-center/cognito-user-pool-totp-mfa/

* **AWS Cognitoを使用するよりも独自にアルゴリズムを実装するアーキテクチャのほうが効率が良い場合**

* **AWS Cognitoになにがなんでも触りたくない場合**

* **ログイン管理でそもそもAWS Cognitoを使用してないのでPythonで多要素認証をサクッと実装したい場合**

このようなケースに当てはまっている方はぜひこの記事を参考程度に読んでいただければ嬉しいです。

PythonにはOne-Time Password Libraryというライブラリがありまして、そのライブラリを使用することで比較的容易にTOTP認証を実現できます。

https://github.com/pyauth/pyotp

上記ライブラリの力を借りても良いですし、インターネット上にはTOTPアルゴリズムを独自で実装しているような記事もあるので、独自に書いても良いと思います。

https://dev.classmethod.jp/articles/totp-implementation-pure-python/


# ざっくりTOTP認証の流れを説明
ざっくりTOTP認証の流れを説明すると、下記のような感じです。

**全ユーザーに多要素認証を強制しているウェブアプリやモバイルアプリを開発/運用しているソフトウェアエンジニアの気持ち**になって、お読みいただければ流れが理解しやすいかと思います。

</br>

**TOTP認証の流れ**

**1. ユーザー(クライアント側)がユーザーID/パスワードを入力してウェブアプリに初回ログインする**

**2. サーバー側でユーザーID/パスワードを認証する(1段階目の認証)**

**3. 多要素認証をするためにサーバー側で秘密鍵/QRコードを生成してユーザー側画面に出力**

```python:python
import pyotp
from utils import crypto_util
from utils.dynamodb import UserAttribute

# 秘密鍵生成して暗号化する
issuer = "サービス名(ウェブアプリの名前など)"
otp_secret_raw = pyotp.random_base32()
otp_secret = crypto_util.encrypt(otp_secret_raw)

# データベースに保存
#ここではDynamoDBに秘密鍵を入れてますがDBなら何でもよい
UserAttribute.update(
    expr="set mfa_secret=:mfa_secret",
    values={
        ":mfa_secret": otp_secret,
    },
)

# QRコードを出力
qrcode_str = pyotp.totp.TOTP(otp_secret_raw).provisioning_uri(
    name=email_address, issuer_name=issuer
)
response = {"statusCode": 200, "body": qrcode_str}
return response
```

**4. クライアント側はQRコードを読み取るために認証アプリをインストールする**
</br>[Microsoft Authenticator](https://play.google.com/store/apps/details?id=com.azure.authenticator&hl=ja&gl=US)
</br>[Google Authenticator](https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=ja&gl=US)

※上記どちらの認証アプリでも問題なくQRコードを読み取れます


**5. クライアント側でQRコードを読み取り多要素認証のコードを画面に入力する</br>**
こんな感じのフォーム

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532523/f835a75c-8aca-3754-aa88-0b93a5a52a1d.png" width="600px">

**6. サーバー側でデータベースに保持している秘密鍵から生成したワンタイムパスワードと、クライアント側で入力した認証コードが一致していればログインできる(2段階目の認証)</br>**

```python:python
import pyotp
from utils.dynamodb import UserAttribute

# ユーザーから認証コードを受け取る
mfa_code = "mfacode_from_user"

# データベースに保存してる秘密鍵を復号化
# ここではDynamoDBに入れてますが、DBなら何でもよい
otp_secret = UserAttribute.decrypt_mfa_secret
totp = pyotp.TOTP(otp_secret)
result = totp.verify(mfa_code)
if result:
    ## 認証成功
    response = {"statusCode": 200, "body": "success"}
    return response
```

**7. 2回目のログインからユーザー側は認証アプリの認証コードを入力してログインする</br>**
こんな感じ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532523/fdbf46c1-5b9d-be7a-9ef7-84c2348e0e7c.png" width="600px">


※**初回ログイン時のみ、ユーザー側はQRコードを認証アプリで読み込んで認証コードを入力するが、初回以降のログインは認証アプリの認証コードを入力するだけでログインできる。**
**サーバー側は初回だけQRコードを出力する**という実装になるので、その画面出力の違いを意識して実装する必要がある。

</br>

このような感じで手順を追うと
認証機能はフロントエンドとバックエンド行き来するので、フルスタックみが必要です...
**認証系の実装、私やりたくないです**って最初はなりました。笑


そんでまぁ実は上記の流れがこの記事の本質であり、重要なのはここだけと言ってしまっても良いのかもしれない、とも言い切れないかもしれないです。(どっち)

この後に書く内容は私の仕事でこういう場面に出くわしたので、それに対処するためにどのようにバックエンド(Python/DynamoDB)とフロントエンド(React/TypeScript)でTOTP認証を実現したのかって話になるのでまぁ例示してるだけです。**ここで書かれている内容以降の話は、私と同じような境遇の方にとってはまぁ有益な内容になるかなぁ**と思います。


# 多要素認証を実装した経緯(実例パート)
このあとの流れは私が仕事をしていてAWS Cognitoを使用せずにTOTP認証を実装する必要があったという実例紹介パートになります。

おおまかにいうと下記のような事情がありました。
* 自分が携わっている仕事での認証基盤はAWS Cognitoで作られていたのですが**フェデレーティッドユーザーに対して多要素認証を実装する必要があった**ため、AWS Cognitoを使わずにTOTP認証を実装する必要がありました。

* オーナー権限のユーザーが各一般ユーザーに対して多要素認証を有効にしたり、無効にしたり制御したいという要件がありました。つまり**多要素認証ログイン画面/API**に加えて、オーナー権限ユーザーが**各ユーザーの多要素認証設定を有効化/無効化するための画面/API**も追加で必要そうでした。

※多要素認証という言葉は長いので省略して**MFA(Multi-Factor Authentication)** と書くことがあります。ご了承ください。


# 実装アーキテクチャ
**フロントエンド側で[Amplify](https://docs.amplify.aws/lib/auth/mfa/q/platform/js/)を使っていたのでAmplifyで多要素認証させるか、バックエンド側APIで使用している[Python Cognito Client](https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/cognito-idp.html)で多要素認証させるか？** という悩みもあったのですが、
AmplifyだとPython Cognito Clientでは持っている**admin_*系の関数や機能が不足していそうだったため、多要素認証のメイン機能はバックエンド側APIに任せる方針**にしました。

**MFA設定画面アーキテクチャ**と**MFAログイン画面アーキテクチャ**の２つのアーキテクチャについてシーケンス図で書いたり日本語で表現してみました。**ただ実装コードを日本語で表現してみたのですが案外難しいので、ここのアーキテクチャを軽く見た後に、下のほうに書いてある実装コードを見に行くほうが理解しやすい**人もいると思うのでお好きな感じでお読みいただければと思います。

## MFA設定画面アーキテクチャ
まず**オーナー権限ユーザーが一般ユーザーのMFA設定を有効化したり無効化するための画面アーキテクチャ**です。
DynamoDBのテーブルやスキーマは後述します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532523/37db0c81-81f7-2fa7-3b29-b16b5f147fae.png" width="800px">

**1. /mfa/enableでMFA有効化</br>**
オーナー権限のユーザーが一般ユーザーの多要素認証を有効化したいときに、MFA設定画面にアクセスして **/mfa/enable APIにPUTリクエスト** を送信する

**2. UserAttributeテーブルの更新</br>**
DynamoDBのUserAttributeテーブルの</br>
**mfa_enableキー(MFAが有効化されているかどうかを表すフラグ)をTrue**にする

**3. 処理結果出力</br>**
**4. 処理結果出力</br>**


**5. /mfa/disableでMFA無効化</br>**
オーナー権限のユーザーが一般ユーザーの多要素認証を無効化したいときに、MFA設定画面にアクセスして **/mfa/disable APIにPUTリクエスト**を送信する

**6. UserAttributeテーブルの更新</br>**
DynamoDBのUserAttributeテーブルの</br>
**mfa_enableキー(MFAが有効化されているかどうかを表すフラグ)をFalse**にして</br>
**mfa_verifyキー(MFAの初回ログインが完了しているかどうかを表すフラグ)をFalse**にして</br>
**mfa_secretキー(TOTP認証のときに使う暗号化された秘密鍵の文字列)をNone**にする</br>

**7. 処理結果出力</br>**
**8. 処理結果出力</br>**


## MFAログイン画面アーキテクチャ
**続いて一般ユーザーがMFA設定からログイン処理を実施するための画面アーキテクチャです。**
DynamoDBのテーブルやスキーマは後述します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532523/d905f978-ac06-97b0-5095-3b56a15e203e.png" width="800px">

**1./mfa/loginでユーザーMFA設定の確認</br>**
ユーザーがMFAログイン画面にアクセスして **/mfa/login APIにPUTリクエスト**を送信する。

/mfa/login APIでUserAttributeテーブルの
**mfa_enableキー(MFAが有効化されているかどうかを表すフラグ)がFalseの場合、MFA設定ユーザーではないので処理を終了します。**

/mfa/login APIでUserAttributeテーブルの
**mfa_verifyキー(MFAの初回ログインが完了しているかどうかを表すフラグ)がFalseの場合、MFA初回ログインと判断して**秘密鍵/QRコードを生成してQRコードの文字列を返す。

/mfa/login APIでUserAttributeテーブルの **mfa_verifyキー(MFAの初回ログインが完了しているかどうかを表すフラグ)がTrueの場合、MFA設定済みログインと判断して**秘密鍵/QRコードなどは生成せず200番のステータスコードを返す。

**2.UserAttributeテーブルの更新(MFA初回ログインのみ)</br>**
MFA初回ログインのときはUserAttributeテーブルの
**mfa_secretキー(TOTP認証のときに使う暗号化された秘密鍵の文字列)に秘密鍵を登録する**

**3.処理結果出力</br>**
**4.処理結果出力</br>**

**5.ユーザーが認証コードを/mfa/verifyに送信</br>**
**/mfa/verify APIでUserAttributeテーブルのmfa_verifyキー(MFAの初回ログインが完了しているかどうかを表すフラグ)がFalseで、なおかつ認証コードが一致していた場合、MFA初回ログインと判断して**6.UserAttributeテーブルの更新をしてログイン処理を完了する。

**/mfa/verify APIでUserAttributeテーブルのmfa_verifyキー(MFAの初回ログインが完了しているかどうかを表すフラグ)がTrueで、なおかつ認証コードが一致していた場合、MFA設定済みログインと判断して**特になにもせずログイン処理を完了する。

**6.UserAttributeテーブルの更新(MFA初回ログインのみ)</br>**
MFA初回ログインのときは
**mfa_verifyキー(MFAの初回ログインが完了しているかどうかを表すフラグ)をTrueにする。**

**7.処理結果出力</br>**
**8.処理結果出力</br>**

</br>

MFA設定画面アーキテクチャとMFAログイン画面アーキテクチャをシーケンス図で書いたり日本語で表現しましたが、**うーん難しい。**
コードのロジックを日本語で書くとちょっと説明がくどい感じになってしまうので、下記の実際のコードを見て理解したほうがもしかしたらわかりやすいかもしれないですね。日本語ムズイお

---

# 実装の詳細
## DynamoDBのモデル(UserAttributeテーブル)と暗号化関連
DynamoDBのテーブルや型、秘密鍵の暗号化/復号化のコードは以下の通りです。

```python:models/user_attribute.py
from datetime import datetime
from typing import Any, Dict, List, Optional, Union

import boto3
from boto3.dynamodb.conditions import Key
from pydantic import BaseModel
from cryptography.fernet import Fernet
from settings import Settings

# 環境変数などで鍵を用意しておく
settings = Settings()
crypto_encoder = Fernet(settings.crypto_key)

def encrypt(value: str) -> str:
    return crypto_encoder.encrypt(value.encode("utf-8")).decode("utf-8")

def decrypt(value: str) -> str:
    return crypto_encoder.decrypt(value.encode("utf-8")).decode("utf-8")

# DynamoDBのスキーマ
class UserAttribute(BaseModel):
    __tablename__ = "user_attributes"
    user_id: str
    user_type: str
    user_role: Optional[str] = None
    email_address: str
    first_name: Optional[str] = None
    last_name: Optional[str] = None
    account_status: str
    created_at: int
    created_by: str
    updated_at: Optional[int]
    updated_by: Optional[str]

    # MFA関連のキー
    mfa_enable: Optional[bool] = False
    mfa_verify: bool = False
    mfa_secret: Optional[str] = None

    @classmethod
    def get_table(cls):
        return boto3.resource("dynamodb").Table(cls.__tablename__)

    @classmethod
    def find_by_email(cls, email: str) -> Optional[UserAttribute]:
        table = cls.get_table()
        user_response = table.scan(FilterExpression=Key("email_address").eq(email))
        user: List[dict] = user_response.get("Items", [])
        if not user:
            return None
        return UserAttribute.parse_obj(user)

    @property
    def decrypt_mfa_secret(self) -> str:
        if self.mfa_secret:
            return decrypt(self.mfa_secret)
        return ""

    def update(self, expr: str, values: dict):
        table = self.get_table()
        data = values.copy()
        data[":updated_at"] = datetime.now().timestamp()
        table.update_item(
            Key={"user_id": self.user_id},
            UpdateExpression=f"{expr}, updated_at=:updated_at",
            ExpressionAttributeValues=data,
            ReturnValues="UPDATED_NEW",
        )

```
## MFA設定画面(再掲)
まずMFA設定画面から実装していきましょう。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532523/37db0c81-81f7-2fa7-3b29-b16b5f147fae.png" width="800px">

## ユーザーの多要素認証を有効化する(/mfa/enable API)

```python:/api/mfa/enable.py
import json
from datetime import datetime
from typing import List
from botocore.exceptions import ClientError
from fastapi import APIRouter
from models.user_attribute import UserAttribute

router = APIRouter(prefix="/mfa")

# FastAPIを使っているがその他のフレームワークでも問題ない
@router.put("/enable")
def handler(email_address: str) -> dict:
    user_attr: UserAttribute = UserAttribute.find_by_email(email_address)
    # ユーザーのuser_attributesテーブルにmfa_enable:Trueを追加
    user_attr.update(
        expr="set mfa_enable=:mfa_enable",
        values={
            ":mfa_enable": True,
        },
    )
    response = {"label": "mfa_enable", "body": "successed"}
    return response
```

## ユーザーの多要素認証を無効化する(/mfa/disable API)

```python:/api/mfa/disable.py
import json
from datetime import datetime
from typing import Dict, List

import boto3
from fastapi import APIRouter
from models.user_attribute import UserAttribute

router = APIRouter(prefix="/mfa")

@router.put("/disable")
def handler(email_address: str) -> dict:
    user_attr: UserAttribute = UserAttribute.find_by_email(email_address)
    user_attr.update(
        expr="set mfa_enable=:mfa_enable, mfa_verify=:mfa_verify, mfa_secret=:mfa_secret",
        values={
            ":mfa_enable": False,
            ":mfa_verify": False,
            ":mfa_secret": None,
        },
    )
    response = {"label": "mfa_disable", "body": "successed"}
    return response

```

## MFA設定画面(ユーザーインターフェース)

Typescript/React側（フロントエンド）でのMFA設定画面です。
react routerなどで良い感じにMFA設定画面にルーティングしてあげてください。

https://reactrouter.com/docs/en/v6/getting-started/tutorial


```typescript:MfaEnablePage.tsx
import React from "react";
import { Box, Button, Typography } from "@mui/material";
import styled from "styled-components";
import { useSnackbar } from "notistack";
import axiosbase, { AxiosRequestConfig } from "axios";
import useSWR from "swr";

// styled-componentsを使ってCSS調整
const Div = styled.div`
  padding: 24px;
  background-color: #fdfcfc;
  width: 445px;
  border-radius: 6px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.04);
  border-color: #ccc;
  border-width: 1px;
  border-style: solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
`;

const Container = styled.div`
  background-color: #f0f0f0;
  color: #9ea0a5;
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

const Page = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
`;

const ButtonContainer = styled.div`
  text-align: center;
  justify-content: center;
`;

type enableResponseType = {
  data: {
    label: string;
    body: string;
  };
};

// UserAttributeテーブルの型情報
type RestUser = {
  user: {
    user_id: string;
    user_type: string;
    user_role: string | null;
    email_address: string;
    first_name: string | null;
    last_name: string | null;
    account_status: string;
    created_at: number;
    created_by: string;
    updated_at: number | null;
    updated_by: string | null;
    mfa_enable: boolean | null;
    mfa_verify: boolean;
    mfa_secret: string | null;
  };
};

// axiosでAPIをたたいているがSWRとかでも良い
export const api = axiosbase.create({
  baseURL: process.env.REACT_APP_BACKEND_API_URL,
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
});

api.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    return {
      ...config,
      headers: {
        ...config.headers,
        Authorization: `Bearer ${localStorage.getItem("authToken")}`,
      },
    };
  },
  (error) => Promise.reject(error)
);

const MfaEnablePage: React.FC = () => {
  // ローカル環境にて確認するためURLはローカルに向けている
  const BACKEND_API_URL = "http://127.0.0.1:8000";

  // RestAPI経由でUserAttributeテーブルを参照している
  const { data: user } = useSWR<RestUser>(`${BACKEND_API_URL}/user`);
  const userMfaEnable = user?.user.mfa_enable;
  const userEmail = user?.user.email_address;
  const { enqueueSnackbar } = useSnackbar();

  const onClickEnable = async () => {
    // ユーザーのMFA情報をもとにMFA無効化またはMFA有効化を実施する
    const mfaType = userMfaEnable === true ? "disable" : "disable";
    try {
      await api
        .put(`${BACKEND_API_URL}/mfa/${mfaType}`, {
          email_address: userEmail,
        })
        .then((res: enableResponseType) => {
          console.log(res);
          enqueueSnackbar("多要素認証設定が更新されました", {
            variant: "success",
          });
        });
    } catch (e) {
      console.error(e);
      enqueueSnackbar("多要素認証設定の更新に失敗しました", {
        variant: "error",
      });
    }
  };

  return (
    <Page>
      <Container>
        <Div>
          <ButtonContainer>
            <Box
              sx={{
                justifyContent: "center",
                alignItems: "center",
                width: "100%",
              }}
            >
              <Box>
                {userMfaEnable ? (
                  <Typography>
                    多要素認証を無効にしようとしています。
                  </Typography>
                ) : (
                  <Typography>
                    多要素認証を有効にしようとしています。
                  </Typography>
                )}
              </Box>
            </Box>
            <Box
              sx={{
                justifyContent: "center",
                alignItems: "center",
                width: "100%",
              }}
            >
              <Button
                type="submit"
                variant="contained"
                onClick={onClickEnable}
                sx={{ m: "10px", backgroundColor: "#F3A800" }}
              >
                {userMfaEnable ? (
                  <Typography>無効にする</Typography>
                ) : (
                  <Typography>有効にする</Typography>
                )}
              </Button>
            </Box>
          </ButtonContainer>
        </Div>
      </Container>
    </Page>
  );
};

export default MfaEnablePage;

```

## MFA設定画面の動作確認
めちゃくちゃ簡素なUIですが、有効にするボタンを押すとMFAが有効化して、無効にするボタンを押すとMFAが無効化します。
業務での使い方に合わせて、良い感じにフォームを作ってみてください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532523/8b1974d5-923c-564c-5130-6510229e29ec.png" width="700px">


## MFAログイン画面(再掲)
次にMFAログイン画面を実装していきます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532523/d905f978-ac06-97b0-5095-3b56a15e203e.png" width="800px">


## ユーザーの多要素認証設定を確認する(/mfa/login API)

```python:/api/mfa/login.py
from typing import Dict
import boto3
import pyotp
from fastapi import APIRouter
from models.user_attribute import UserAttribute, encrypt

router = APIRouter(prefix="/mfa")

@router.put("/login")
def handler(email_address: str) -> dict:
    user_attr: UserAttribute = UserAttribute.find_by_email(email_address)
    is_mfa = True if user_attr.mfa_enable else False
    is_verify = True if user_attr.mfa_verify else False

    if is_mfa:
      # MFAが有効化されているユーザー
      if is_verify:
          # MFA設定済みユーザー：特になにもしない
          response = {"label": "mfa_login", "body": "successed"}
          return response
      else:
          # MFA初回設定ユーザー：秘密鍵/QRコードを生成しDBに登録
          issuer = "ServiceName"
          otp_secret_raw = pyotp.random_base32()
          otp_secret = encrypt(otp_secret_raw)
          user_attr.update(
              expr="set mfa_secret=:mfa_secret",
              values={
                  ":mfa_secret": otp_secret,
              },
          )
          qrcode_str = pyotp.totp.TOTP(otp_secret_raw).provisioning_uri(
              name=email_address, issuer_name=issuer
          )
          response = {"label": "mfa_init_login", "body": qrcode_str}
          return response
    else:
      # MFAが無効化されているユーザー
      response = {"label": "no_mfa", "body": "failed"}
      return response
```

## ユーザーの認証コードを検証する(/mfa/verify API)

```python:/api/mfa/verify.py
from typing import Dict

import boto3
import pyotp
from fastapi import APIRouter
from fastapi.exceptions import HTTPException
from models.user_attribute import UserAttribute
from settings import Settings

router = APIRouter(prefix="/mfa")

@router.put("/verify")
def handler(email_address: str, access_token: str, mfa_code: str) -> MfaResponse:
    user_attr: UserAttribute = UserAttribute.find_by_email(email_address)
    is_verify = True if user_attr.mfa_verify else False
    otp_secret = user_attr.decrypt_mfa_secret
    totp = pyotp.TOTP(otp_secret)
    result = totp.verify(mfa_code)
    if result:
        ## 認証成功
        if is_verify:
            ## MFA設定済みユーザー：特になにもしない
            response = {"label": "mfa_verify", "body": "successed"}
            return response
        else:
            ## MFA初回設定ユーザー: mfa_verifyをTrueにする
            user_attr.update(
                expr="set mfa_verify=:mfa_verify",
                values={
                    ":mfa_verify": True,
                },
            )
            response = {"label": "mfa_init_verify", "body": "successed"}
            return response
    else:
        message = "Not Verify Error: failed to verify MFA"
        raise HTTPException(status_code=422, detail=message)
```

## MFAログイン画面(ユーザーインターフェース)
Typescript/React側（フロントエンド）でのMFAログイン画面です。
react routerなどで良い感じにMFAログイン画面にルーティングしてあげてください。

https://reactrouter.com/docs/en/v6/getting-started/tutorial


```typescript:MfaVerifyPage.tsx
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import { I18n } from "@aws-amplify/core";
import { useHistory } from "react-router-dom";
import axiosbase, { AxiosRequestConfig } from "axios";
import QRCode from "qrcode";
import { useForm, Controller, SubmitHandler } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Box, Button, Typography, TextField, FormControl } from "@mui/material";
import { z } from "zod";

// styled-componentsを使ってCSS調整
const Div = styled.div`
  padding: 24px;
  background-color: #fdfcfc;
  width: 445px;
  border-radius: 6px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.04);
  border-color: #ccc;
  border-width: 1px;
  border-style: solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
`;

const Container = styled.div`
  background-color: #f0f0f0;
  color: #9ea0a5;
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

const Page = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
`;

const ErrorMessageBox = styled.div`
  height: 24px;
  padding: 0 5px;
  text-align: center;
`;

const TextFieldWithLabel = styled.div`
  width: 100%;
  margin-top: 16px;
  .textField {
    width: 100%;
  }
`;

const NextButton = styled(Button)`
  color: white !important;
  font-weight: 600 !important;
  height: 40px;
  width: 100%;
  background: linear-gradient(0deg, #f38200, #f3a800);
  align-self: center;

  &:disabled {
    background: lightgray;
  }
`;

// 入力フォームの値チェック
const Schema = z.object({
  mfaCode: z
    .string({
      required_error: "必須入力項目です",
    })
    .length(6, { message: "6文字で記入してください" }),
});

type FormType = z.infer<typeof Schema>;

type ApiResponseType = {
  data: {
    label: string;
    body: string;
  };
};

// axiosでAPIをたたいているがSWRとかでも良い
export const api = axiosbase.create({
  baseURL: process.env.REACT_APP_BACKEND_API_URL,
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
});

api.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    return {
      ...config,
      headers: {
        ...config.headers,
        Authorization: `Bearer ${localStorage.getItem("authToken")}`,
      },
    };
  },
  (error) => Promise.reject(error)
);


const MfaVerifyPage: React.FC = () => {
  // ローカル環境にて確認するためURLはローカルに向けている
  const BACKEND_API_URL = "http://127.0.0.1:8000";
  const [authError, setAuthError] = useState<string>("");
  const [qrCode, setQrCode] = useState<string>("");
  const [noQrcodeFlag, setNoQrcodeFlag] = useState<boolean>(false);
  const history = useHistory();
  const { control, handleSubmit, formState } = useForm<FormType>({
    mode: "all",
    resolver: zodResolver(Schema),
  });

  // RestAPI経由でUserAttributeテーブルを参照している
  const { data: user } = useSWR<RestUser>(`${BACKEND_API_URL}/user`);
  const userEmail = user?.user.email_address;

  // QRコード生成関数
  const generateQR = async (qrUrl: string) => {
    try {
      const QrData = await QRCode.toDataURL(qrUrl);
      if (QrData) {
        setQrCode(QrData);
      }
    } catch (err) {
      console.error(err);
    }
  };

  // MFA初回ログインかどうか/mfa/loginに問い合わせる
  useEffect(() => {
    try {
      (async () => {
        await api
          .put(`${BACKEND_API_URL}/mfa/login`, {
            email_address: userEmail,
          })
          .then((res: ApiResponseType) => {
            if (res.data.label === "mfa_init_login") {
              // MFA初回ログインなのでQRコードを出力
              generateQR(res.data.body);
            } else if (res.data.label === "mfa_login") {
              // MFA設定済みなのでQRコードは出力しない
              setNoQrcodeFlag(true);
            } else if (res.data.label === "no_mfa") {
              // MFAが無効なのでログイン画面に戻す
              history.push("/login");
            }
          })
          .catch(() => {
            const message = "ページを再読み込みしてください";
            setAuthError(message);
          });
      })();
    } catch (e) {
      console.error(e);
      const message = "ページを再読み込みしてください";
      setAuthError(message);
    }
  }, []);

  // MFAコード入力後に/mfa/verifyに送信
  const onSubmit: SubmitHandler<FormType> = async (values) => {
    const { mfaCode } = values;
    try {
      await api
        .put(`${BACKEND_API_URL}/mfa/verify`, {
          email_address: userEmail,
          mfa_code: mfaCode,
        })
        .then((res: ApiResponseType) => {
          if (
            ["mfa_verify", "mfa_init_verify"].includes(
              res.data.label
            )
          ) {
            // MFA認証成功後はメインページに飛ぶ
            history.push("/main");
          }
        })
        .catch(() => {
          const message = "ワンタイムパスワードをもう一度入力ください";
          setAuthError(message);
        });
    } catch (e) {
      console.error(e);
      const message = "ワンタイムパスワードをもう一度入力ください";
      setAuthError(message);
    }
  };

  return (
    <Page>
      <Container>
        <Div>
          <Box />
          <form onSubmit={handleSubmit(onSubmit)}>
            <TextFieldWithLabel>
              {noQrcodeFlag ? (
                <Typography>
                  登録した認証アプリを起動してワンタイムパスワードを入力してください。
                </Typography>
              ) : (
                <Typography>
                  QRコードを認証アプリで読み込むことでワンタイムパスワードを出力することができます。
                </Typography>
              )}
              {qrCode ? (
                <Box sx={{ textAlign: "center" }}>
                  <img src={qrCode} />
                </Box>
              ) : null}
              <FormControl sx={{ width: "100%" }}>
                <Controller
                  name="mfaCode"
                  control={control}
                  render={({ field }) => {
                    return (
                      <TextField
                        color="error"
                        margin="none"
                        size="small"
                        placeholder="パスワード"
                        {...field}
                      />
                    );
                  }}
                />
                {formState.errors.mfaCode ? (
                  <Box
                    sx={{
                      color: "error.main",
                      fontSize: "14px",
                      mt: 1,
                      ml: 1,
                    }}
                    role="alert"
                  >
                    {formState.errors.mfaCode?.message}
                  </Box>
                ) : (
                  <Box
                    sx={{
                      m: 1,
                    }}
                  ></Box>
                )}
              </FormControl>
            </TextFieldWithLabel>
            <NextButton type="submit">次へ</NextButton>
            <ErrorMessageBox>
              <Typography
                sx={{ color: "red", height: "16px" }}
                variant="subtitle2"
              >
                {I18n.get(authError)}
              </Typography>
            </ErrorMessageBox>
          </form>
        </Div>
      </Container>
    </Page>
  );
};

export default MfaVerifyPage;

```

## MFAログイン画面の動作確認

* MFAの初回ログインはこのようにQRコードが出力されて、認証アプリでQRコードを読み取り認証コードを入力する(Google Authenticatorを使用)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532523/00bd747a-9c66-858d-7071-38dc4b706fc6.png" width="700px">

</br>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532523/ef94699b-55a1-d826-b277-3346c3204f03.png" width="300px">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532523/dd4c0e1a-3cce-3abe-22de-ac04148d496b.png" width="300px">

* MFA設定後のログイン(2回目以降)はこのようにQRコード読み取りはなく認証アプリでコードを入力する形になる。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2532523/69de8d0d-c9e2-5ad6-4cf8-08f9217c7184.png" width="700px">

---

# 終わりに
バックエンドやフロントエンドの実装を見ていただきありがとうございます。
ちょっとボリュームが多くて読むのが大変かと思いますが、私と同じように実装に困った誰かに響いてくれたらありがたいです。

実はAWS CognitoのTOTP認証も実装しているので、余力があるときに続編として記事を書こうと思いますが、ちょっと今回はフルスタックみが強くて記事を書くのが大変だったので、続編はもうすこしお待ちください笑