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

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

プログラミング

【PHP8】関数を作るときにしっかりと型宣言をするお話

目次1 天国でもあり地獄のようなPHPの変数事情2 関数も型宣言する時代天国でもあり地獄のようなPHPの変数事情 PHPは昔から良くも悪くも変数の型に対して寛容でした。いきなり型宣言をせずに使えますし、なんなら $hoge .= “宣言しなくても追加”; ですら怒られないくらいでした。ただ、PHP5あたりからうっすらとまずいよねってことになり、PHP5系では非推奨、PHP8以降になると、warningとしてしっかりとアラートが出るようになりました […]

2024年7月22日

プログラミング

【PHP】古いWordPressで絵文字を使えるようにするお話

WordPressはLAMP環境で動くCMSとして昔から有名ですが、昔から使われているサイトの場合、絵文字が使えないことがあります。今回はそういう場合の絵文字を使えるようにしてみましょう目次1 MySQLのバージョンを調べる2 テーブルの照合順序を変更する3 最近の事情 MySQLのバージョンを調べる使えるようにしましょうといいつつ、実は大前提があります。それはMySQLのバージョンが5.5以降であることです。それ未満のバージョンは「utf8mb4」にできないため、 […]

2024年7月18日

Webサイト制作

【さくらのレンタルサーバー】環境ごとにPHPのバージョンを変更するお話

最近何かとAI関係で話題の「さくらインターネット」ですが、レンタルサーバーはコスパもよく、かなり使いやすいサービスだと思います。特にWordPressなどのLAMP環境に最適化された環境であり、PHPもいろいろなバージョンを選ぶことができます。変更方法も簡単でコンパネからボタン一つでできるので楽ちんですね。ただ当然なのですがマルチドメインで運用している場合もすべての環境にPHPのバージョンが一斉に反映されてしまいます。それはそれで便利なのですが、例えばこの環境のみバー […]

2024年7月18日

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

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

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

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

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

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

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

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

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

PHPで実装する

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

YoutubeChannelのご紹介

関連記事

【PHP8】関数を作るときにしっかりと型宣言をするお話

【PHP】古いWordPressで絵文字を使えるようにするお話

【さくらのレンタルサーバー】環境ごとにPHPのバージョンを変更するお話