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

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

マークアップ

背景に画像や動画を置いてパララックス効果で見せる

サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。簡単なものであれば簡単なcssで実現できます。目次1 背景画像をパララックス効果で見せる1.1 DEMO1.2 HTML1.3 CSS 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcss […]

2022年5月17日

スマホアプリ

Android Studioでベクター画像を登録しよう

Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。 Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。簡単なので、早速進めてみましょう。目次1 Android Studioを開こう2 ベクター画像の登録画面を開こう3 クリップ・アートで登録してみよう4 ロ […]

2022年4月22日

マークアップ

属性セレクターを使ってファイルごとにアイコンをつけよう！

例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。早速属性セレクターを使ってみよう属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。書き方としては「属性$=”値”」 […]

2022年4月12日

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

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

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

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

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

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

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

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

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

PHPで実装する

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

YoutubeChannelのご紹介

関連記事

背景に画像や動画を置いてパララックス効果で見せる

Android Studioでベクター画像を登録しよう

属性セレクターを使ってファイルごとにアイコンをつけよう！