本日はGoogle Authenticatorを使って多要素認証ができる仕組みを作ってみます。

MFA、多要素認証とは

多要素認証（たようそにんしょう、英語: Multi-Factor Authentication、英: MFA）は、アクセス権限を得るのに必要な本人確認のための複数の種類の要素（証拠）をユーザーに要求する認証方式である。

必要な要素が二つの場合は、二要素認証（にようそにんしょう、英語: Two-Factor Authentication、英: 2FA）、二段階認証（にだんかいにんしょう）とも呼ばれる。

引用元：多要素認証

とのことです。

ログイン後、本当にその本人かどうか確認するために手元のスマフォで再度認証プロセスを行うときに使われます。ユーザーIDとパスワードを入力しただけでは本人かどうか確認ができないので、Google Authenticatorのようなアプリを使って本人しか知ることのできない数値を入力してもらい確認する方法です。

このページにて仕組みがわかりやすく説明されています。 https://www.google.com/landing/2step/#tab=how-it-works

Google Authenticatorとは

Google Authenticatorは、Googleが開発した二段階認証(二要素認証)を行うトークンソフトウェアである。Authenticatorは、Googleログイン時の二段階認証に必要な6桁の数字コードを生成する。また、LastPassやDropboxといった他社製のアプリケーションの二段階認証にも対応する。

引用元：Google Authenticator

とのことです。

ユーザー用アプリは iOSはこちら https://apps.apple.com/jp/app/google-authenticator/id388497605

Androidはこちら https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=ja

からダウンロードすることができます。

パッケージのダウンロード

今回はこちらのnugetパッケージを使います。

PMCからインストールする場合は下記のコマンドで

Install-Package GoogleAuthenticator

Nuget Managerからインストールする場合はこちら

プロジェクトURLはこちらです

BrandonPotter/GoogleAuthenticator

こちらの記事を参考に進めていきます。

Implementing Free Two-Factor Authentication in .NET using Google Authenticator

コードの解説

認証用の情報を下記のコードで作成します。

TwoFactorAuthenticator tfa = new TwoFactorAuthenticator();
var setupInfo = tfa.GenerateSetupCode("MyExampleApp", "user@example.com", _secretKey, false, 300);

string qrCodeImageUrl = setupInfo.QrCodeSetupImageUrl;
string manualEntrySetupCode = setupInfo.ManualEntryKey;

GenerateSetupCode の引数は下記です

tfa.GenerateSetupCode("MyExampleApp", "user@example.com", _secretKey, false, 300)

MyApp 任意のアプリ名

user@example.com メールユーザーのメールアドレス

SuperSecretKeyGoesHere 秘密の文字列

false 秘密の文字列をbase32にするかどうか

300 QR コードのpixcel

QRコードを表示するページ

コードを表示するページは下記です。

[Route("/")]
public IActionResult Index()
{
   TwoFactorAuthenticator tfa = new TwoFactorAuthenticator();
   var setupInfo = tfa.GenerateSetupCode("MyExampleApp", "user@example.com", _secretKey, false, 300);

   string qrCodeImageUrl = setupInfo.QrCodeSetupImageUrl;
   string manualEntrySetupCode = setupInfo.ManualEntryKey;

   ViewData["qrCodeImageUrl"] = qrCodeImageUrl;
   ViewData["manualEntrySetupCode"] = manualEntrySetupCode;

   return View();
}

@{
   ViewData["Title"] = "Home Page";
}
<div class="text-center py-3">

    <div class="row">
        <div class="col-md-4">

        </div>
        <div class="col-md-4">
            <img src="@ViewData["qrCodeImageUrl"]" style="width:100%;" />

            <div class="py-2 text-center">
                @ViewData["manualEntrySetupCode"]
            </div>

            <form method="post" action="/Authenticate">
                @Html.AntiForgeryToken()
                <div class="py-2 input-group">
                    <input type="text" class="form-control" name="code" />
                    <div class="input-group-append">
                        <button class="btn btn-secondary">Validate</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
   
</div>

コード確認するページ

QRコードをGoogle Authenticatorで読取りコードを取得、そのコードを入力した際にコードを確認するには下記のコードを参照ください。

[Route("/Authenticate")]
public IActionResult Result(string code)
{

   TwoFactorAuthenticator tfa = new TwoFactorAuthenticator();
   bool isCorrectPIN = tfa.ValidateTwoFactorPIN(_secretKey, code);

   if (isCorrectPIN)
   {
      ViewData["Result"] = "OK";
    }
    else
    {
       ViewData["Result"] = "NOT OK";
     }

     return View();
}

@{
    ViewData["Title"] = "Result";
}
<div class="text-center py-3">
    @ViewData["Result"]
</div>

<div class="py-4">
    <a href="/">Back to top</a>
</div>

サンプルコード

サンプルコードをあげましたのでご参照ください。 google-authenticator-example-01