2022年3月9日

松本

プレーンなPHPで2段階認証（Google Authenticator）を導入するお話

facebook
twitter

最近はログインID/PW方式だけではセキュリティ的に厳しいと言うことで様々な認証方式が使われています。

SMSを使ったSMS認証もあるのですが、最近はOTP（One Time Password）を用いた認証方式が増えてきています。
スクウェア・エニックスのOTPはネットゲームを行うユーザーには有名でしょうか

1 なんかめちゃくちゃ大変そう…
2 スマホアプリで認証システムをダウンロードする
3 「PHPGangsta/GoogleAuthenticator」をインストールする
4 PHPで実装する
5 実際にどういう場面で使う？
6 YoutubeChannelのご紹介

なんかめちゃくちゃ大変そう…

専用サーバーが必要とか色々大変そうに思いますよね。
ところがGoogleはこのあたりの仕様を公開しており、それを使ったライブラリが公開されているので簡単に実装ができます。

スマホアプリで認証システムをダウンロードする

Googleが公開している「Google 認証システム」を使用します。

Android版はこちら

iOS版はこちら

「PHPGangsta/GoogleAuthenticator」をインストールする

使うライブラリは「PHPGangsta/GoogleAuthenticator」と呼ばれるものです。

インストールです方法ですが、以前に導入した「Composer」を使います。

composer show --available phpgangsta/googleauthenticator
composer require --prefer-dist phpgangsta/googleauthenticator:dev-master

1 2	composer show --available phpgangsta/googleauthenticator composer require --prefer-dist phpgangsta/googleauthenticator:dev-master

これでインストールができます。
めちゃくちゃ簡単ですね。

PHPで実装する

それでは実装します。
最低限の実装ですのでバリデーションチェックとかは入れてません。
処理も簡単なので最初から全部出します。

require_once __DIR__ . '/../vendor/autoload.php';

session_start();

// Google認証システムで表示される認証名です
$auth_title = "2段階認証";
$secret = "";

$ga = new PHPGangsta_GoogleAuthenticator();

// 本来はユーザーごとにsecretを発行してDBなどに保存し、最初のログイン処理で$secretを呼び出す。
// ない場合は「$ga->createSecret();」で生成して保存します。 
if(isset($_SESSION["secret"])){
    $secret = $_SESSION["secret"];
}
if($secret == ""){
    $secret = $ga->createSecret();
    $_SESSION["secret"] = $secret;
}

// QRコードのURLを生成する
$qrCodeUrl = $ga->getQRCodeGoogleUrl($auth_title, $secret);

$checkResult = false;
$is_valid = false;
$oneCode = "";
// コードを入力された場合はvarifyCodeで認証する。
if(isset($_POST["oneCode"]) && isset($_POST["oneCode"]) != ""){
    $is_valid = true;
    $oneCode = $_POST["oneCode"];
    $checkResult = $ga->verifyCode($secret, $oneCode, 2);    // 2 = 2*30sec clock tolerance
}

require_once __DIR__ . '/../vendor/autoload.php';

session_start();

// Google認証システムで表示される認証名です

$auth_title = "2段階認証";

$secret = "";

$ga = new PHPGangsta_GoogleAuthenticator();

// 本来はユーザーごとにsecretを発行してDBなどに保存し、最初のログイン処理で$secretを呼び出す。

// ない場合は「$ga->createSecret();」で生成して保存します。

if(isset($_SESSION["secret"])){

$secret = $_SESSION["secret"];

}

if($secret == ""){

$secret = $ga->createSecret();

$_SESSION["secret"] = $secret;

}

// QRコードのURLを生成する

$qrCodeUrl = $ga->getQRCodeGoogleUrl($auth_title, $secret);

$checkResult = false;

$is_valid = false;

$oneCode = "";

// コードを入力された場合はvarifyCodeで認証する。

if(isset($_POST["oneCode"]) && isset($_POST["oneCode"]) != ""){

$is_valid = true;

$oneCode = $_POST["oneCode"];

$checkResult = $ga->verifyCode($secret, $oneCode, 2); // 2 = 2*30sec clock tolerance

}

大前提として「2段階認証」と言うことで本当はログイン後にこの処理を入れてください。
流れとしては「通常のログイン画面」→「ログイン完了後にOTP認証」→「認証後に画面遷移」となります。

HTML表示部は以下の感じです。
見栄えをよくするためbootstrapを使ってますが、何でもOKです

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>2段階認証</title>
  </head>
  <body>
      <div class="container">

        <?php if($is_valid): ?>
            <?php if($checkResult): ?>
            <div class="alert alert-success" role="alert">
                認証OK
            </div>
            <?php else: ?>
            <div class="alert alert-warning" role="alert">
                認証NG
            </div>        
            <?php endif; ?>
        <?php else: ?>
            <img src="<?php echo $qrCodeUrl; ?>" class="img-thumbnail">
        <?php endif; ?>

      <form action="./" method="POST">
        <div class="form-group">
            <label for="exampleInputPassword1">パスフレーズ</label>
            <input type="text" class="form-control" id="exampleInputPassword1" name="oneCode" value="<?php echo $oneCode; ?>" placeholder="6桁" maxlength="6" minlength="6">
        </div>
        <button type="submit" name="cmd" value="confirm" class="btn btn-primary">認証</button>
    </form>      

        <?php echo "Secret is: ".$secret."\n\n"; ?>

      </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

<!doctype html>

<head>

</head>

<body>

<?php if($is_valid): ?>

<?php if($checkResult): ?>

認証OK

</div>

<?php else: ?>

認証NG

</div>

<?php endif; ?>

<?php else: ?>

<img src="<?php echo $qrCodeUrl; ?>" class="img-thumbnail">

<?php endif; ?>

<label for="exampleInputPassword1">パスフレーズ</label>

<input type="text" class="form-control" id="exampleInputPassword1" name="oneCode" value="<?php echo $oneCode; ?>" placeholder="6桁" maxlength="6" minlength="6">

</div>

</form>

<?php echo "Secret is: ".$secret."\n\n"; ?>

</div>

<!--

-->

</body>

</html>

$qrCodeUrlを<img >タグで指定すると、QRコードが生成されます。
このQRコードを「Google認証システム」で読み取ると、6桁のコードが表示されるので、そのコードを入力してもらい、認証ボタンを押すことで判定します。
ここでは「認証OK」「認証NG」と表示していますが、実際はPHP側で判定を行い、処理を行います。

実際にどういう場面で使う？

実装は簡単ですし、導入するだけでログインセキュリティは上がると思います。
今ある会員ログインシステムがあるとすると、設定画面から「２段階認証」機能を作り
ONにした場合は$secretを発行してQRコードを表示し、「Google認証システム」に登録して
認証できたら使用可能という感じでしょうか

私が思った懸念事項は2点

スマホサイトやアプリの場合、アプリやブラウザと「Google認証システム」を行ったり来たりするので、少しめんどくさくなる
機種変更などで「Google認証システム」を初期化した場合、2段階認証が行えなくなり、解除もできなくなる

ですね。特に後者に関しては「強制解除」のフローを作っておかないと、ログインも解除もできなくなるので、大変なことになります。

一応前述のスクウェア・エニックスのOTPでは「強制解除コード」を発行して、これを入力することで2段階認証を解除することができます。
解除コードを忘れた場合は運営に問い合わせることで解除することができますが、これは時間がかかりますね。

とはいえ、使い方によっては実装の割にログインセキュリティは飛躍的に上がるので、検討の価値はありそうです。

YoutubeChannelのご紹介

同様の内容を、動画でご覧になれます。

https://youtu.be/D8HFYftxzUc

執筆者：松本[ エンジニア ]

プログラミング

SharePoint CSSとJSを入力できるWEBパーツを作る（モダンUI向け・SPFx）

SharePointのモダンUIで、SharePoint Framework（以降SPFx）という技術を使用し、CSSとJSを入力できる独自WEBパーツを作ります。旧来のクラシックUIではスクリプトエディターと呼ばれていたWEBパーツを再現します。目次1 前提条件2 WEBパーツの作成手順3 1.環境構築4 2.SPFxプロジェクトを作成4.1 VSCodeでフォルダを開く4.2 ターミナルを開いてコマンドを入力4.3 質問1：プロジェクトの名前を入力4.4 質問24.5 […]

2025年12月15日

Webサイト制作

SharePointとは？社内DXを始めよう！

目次1 SharePointって一言でいうと何？2 簡単ってどれくらい？3 パーツは色々用意されています。4 ファイルに個人情報が含まれているんだけど…5 簡単なのはわかったけど、やっぱり手間がかかる6 実際によくあるつまづきポイント7 SharePointを魅力に感じたら8 活用事例のご紹介 SharePointって一言でいうと何？ SharePointは、 “社内の人だけ見れるWebサイトを簡単につくれるクラウドサービス”です。「このページを見れ […]

2025年12月15日

プログラミング

SharePointではできないこと 4選

「これってSharePointでできないの!?」なんていう瞬間、開発やカスタマイズの現場では意外と多くあります。SharePointはとても柔軟なプラットフォームですが、実は“万能ツール”ではありません。「コードを書けば何とかなる」と思って構築を進めると、モダンページの仕様や制限に阻まれて苦い思いをすることもしばしば。今回は、実際のプロジェクトや運用の中で見えてきた「SharePointではできないこと」をまとめて紹介します。目次1 1.CSSとJSが直接使えない1.1 ク […]

2025年10月10日

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

プレーンなPHPで2段階認証（Google Authenticator）を導入するお話

なんかめちゃくちゃ大変そう…

スマホアプリで認証システムをダウンロードする

「PHPGangsta/GoogleAuthenticator」をインストールする

PHPで実装する

実際にどういう場面で使う？

YoutubeChannelのご紹介

関連記事

SharePoint CSSとJSを入力できるWEBパーツを作る（モダンUI向け・SPFx）

SharePointとは？社内DXを始めよう！

SharePointではできないこと 4選