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 REST APIを使用してリストの情報を取得し、headerにナビを作る

SharePointで作成したリストの情報をREST APIを使用して取得してみましょう。今回は、APIで取得した情報を、headerにリンクとして差し込んでみます。サイト全体共通のナビでも、リストを使用すると、一か所で管理できるので便利です。目次1 前提条件2 1.REST APIで情報を取得2.1 REST APIのURL2.2 データを取得する処理3 2.取得した情報をheaderに表示前提条件 SharePoint Online モダンUI カスタムJSが使用で […]

2025年3月26日

WordPress

WordPressで権限やユーザーごとに管理画面のサイドメニュー表示を切り分ける

デフォルトだといろいろな項目が表示されているWordPressの管理画面のサイドメニュー。慣れていない人にはわかりづらいですよね。また、権限によってデフォルトで非表示にしてくれたりもしますが、この部分は見せたくないな…ということも多いと思います。今回はWordPressで権限やユーザーごとにサイドメニューの表示を変更する方法をご紹介します。目次1 権限の種類について2 function.phpに記述する2.1 サイドメニューの非表示用のコード2.2 権限ごとに振り分け […]

2025年3月26日

プログラミング

jQuery+PHPで大容量ファイルを分割アップロードするお話

ファイルのアップロードを行う際に注意しないといけないのが「アップロード容量」と「タイムアウト」です。どちらもサーバーの設定に関わるところでレンタルサーバーでは対処しきれないところもあり、大容量にするとそれだけアップロードに時間がかかりタイムアウトが発生しやすくなります。そこでフロント側で分割してファイルをアップし、バックエンド側で受け取った後に結合するようにするとよいでしょう注意すべき点として通常のPOSTでの送信ではないため、あらかじめそこら辺を考慮した処理が必要とな […]

2025年2月20日

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

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

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

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

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

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

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

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

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

PHPで実装する

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

YoutubeChannelのご紹介

関連記事

SharePoint REST APIを使用してリストの情報を取得し、headerにナビを作る

WordPressで権限やユーザーごとに管理画面のサイドメニュー表示を切り分ける

jQuery+PHPで大容量ファイルを分割アップロードするお話