概要
- Google Authenticator（日本の名称はGoogle認証システム）を組み込む調査が目的です。
- QRコードをスキャンするのが一般的なので画像を取り扱います。確認しやすいようにWebアプリケーションタイプにしてみました。
サンプルWebアプリについて
- 動作
- 内部でランダムなSecretを発行
- 対応するQRコード画像を生成、表示（サイト名＝DemoSite、アカウントID＝GoogleAuthenticateDemo@example.com）
- 対応する6桁のトークンを表示。1秒ごとにアップデートしています。
- 仕様上、30秒ごとにトークンが変化します。
- ソースはgithubで公開してあります。
- 動作スクリーンショットとスマホの画面の状態
ローカルで動かす手順
- LinuxでPython3系な環境があれば3分で動きます
- 手順
$ git clone git@github.com:shinsaka/googleauthenticator_demo.git
$ cd googleauthenticator_demo
$ pip install -r requirements.txt
$ python manage.py migrate
$ python manage.py runserver 0.0.0.0:8000
- Webブラウザで http://localhost:8000/ へアクセス
Herokuで動かす手順
- Herokuアカウントがあれば3分で動きます（一旦手元にソースをcloneしてからpushするので手元環境は必要です）
- 下記手順の
<appname>を適当な文字列に置き換えて実行します
$ git clone git@github.com:shinsaka/googleauthenticator_demo.git
$ cd googleauthenticator_demo
$ heroku apps:create <appname>
$ heroku git:remote --app <appname>
$ git push heroku master
$ heroku run --app <appname> python manage.py migrate
- Webブラウザで https://<appname>.herokuapp.com/ へアクセス
実際に組み込む場合
- QRコードを表示して、スマホなどのデバイスでスキャン・登録する部分はこのまま使う感じで良さそうです。
- 今回はトークン自体を表示していますが、ユーザーが入力したトークンをチェックする場合は
valid_totp()メソッドを使うべきです。- 前後のトークンとも比較してくれる動作になります。
- このトークンは時間ベースのため、サーバーとスマホの時計が一致している必要がありますが、-30秒～+30秒のズレは吸収するような動作になります。