Laravelで二要素認証をサクッと実装してみた - PHPカンファレンス沖縄2022

Transcript

1. 株式会社Nextat
 sawada
 Laravelで
 二要素認証を
 　　　と実装してみた
 さくっ

2. 自己紹介
 • 株式会社Nextat
 • 元銀行員
 • 未経験エンジニア界隈(?)
 • エンジニア歴2年ちょっと
 • PHP(Laravel)の経験1年ちょっと
 • 最近Nagoya Frontend User Groupの管理人になりました
 株式会社Nextat
 https://nextat.co.jp/ 
 
 Nagoya Frontend User Group 
 https://nfug.connpass.com/ 
 
 初登壇です！
3. 目次
 1. 二要素（段階）認証とは？
 2. Google2FAとは？
 3. 実装環境
 4. アカウント登録の実装
 5. 認証の実装
 6. おまけ

4. 目次
 1. 二要素（段階）認証とは？
 2. Google2FAとは？
 3. 実装環境
 4. アカウント登録の実装
 5. 認証の実装
 6. おまけ

5. 知識
 ID/Password 秘密の質問 スマホ・タブレット 身分証明書 ICカード 指紋 顔 静脈 ２つの要素を組み合わせる認証
 二要素認証とは？
 所有
 生体

6. 知識
 ID/Password 秘密の質問 スマホ・タブレット 身分証明書 ICカード 指紋 顔 静脈 要素問わず２つの方法を組み合わせる認証
 二段階認証とは？
 所有
 生体

7. 目次
 1. 二要素（段階）認証とは？
 2. Google2FAとは？
 3. 実装環境
 4. アカウント登録の実装
 5. 認証の実装
 6. おまけ

8. • Google認証システムを利用した２要素（段 階）認証です
 • 例の６桁の数字（One Time Password、以 降OTP）を入力するやつです
 • OTPはHOTPとTOTPの２つの生成方法が あります
 Google2FAとは？
 Google認証システム 
 （Google Authenticator） 
 HOTP
 
 H・・・Hash-based Message Authentication Code 
 シークレットキーとカウンターの値を 用いて生成
 TOTP
 
 T・・・Time-based
 シークレットキーとタイムスタンプを 用いて生成
 

9. Google2FAをアプリケーションに導入するにあたって
 大きく以下の２つの処理が必要になります
 Google認証システムへのア カウントの登録
 1
 ID・Password認証後
 OTPによる追加の認証
 2

10. 目次
 1. 二要素（段階）認証とは？
 2. Google2FAとは？
 3. 実装環境
 4. アカウント登録の実装
 5. 認証の実装
 6. おまけ

11. 環境・使用ライブラリ
 • Laravel Framework: 9.24.0
 • PHP: 8.1.8
 • antonioribeiro/google2fa: 8.0.1
 • endroid/qr-code: 4.4.9
 
 
 レポジトリURL
 https://github.com/antonioribeiro/google2fa 
 https://github.com/endroid/qr-code 

12. 前提
 • もともとID・Password認証を行っているアプリケーションを想定
 • LaravelはWeb APIとして使用
 • 認証はusersテーブル（Laravelが標準で用意）を使用
 • usersテーブルに以下のカラムを追加
 ◦ google2fa_secret
 ◦ google2fa_timestamp 

13. 目次
 1. 二要素（段階）認証とは？
 2. Google2FAとは？
 3. 実装環境
 4. アカウント登録の実装
 5. 認証の実装
 6. おまけ

14. Google2FAをアプリケーションに導入するにあたって
 大きく以下の２つの処理が必要になります
 Google認証システムへのア カウントの登録
 1
 ID・Password認証後
 OTPによる追加の認証
 2

15. ユーザー
 フロントエンド
 バックエンド
 ID・Password認証は成功している前提（ログイン中） 
 シークレットキーを
 リクエスト
 シークレットキーを
 発行し、QRコードにした ものと一緒に返す
 OTPとシークレットキー を元に認証
 QRコードを表示
 Google認証システムで 読み取り、アカウント登 録
 6桁のOTPを入力
 OTPとシークレットキー を送信
 シークレットキーをユー ザーに紐づけて
 保存

16. ユーザー
 フロントエンド
 バックエンド
 ID・Password認証は成功している前提（ログイン中） 
 シークレットキーを
 リクエスト
 シークレットキーを
 発行し、QRコードにした ものと一緒に返す
 OTPとシークレットキー を元に認証
 QRコードを表示
 Google認証システムで 読み取り、アカウント登 録
 6桁のOTPを入力
 OTPとシークレットキー を送信
 シークレットキーをユー ザーに紐づけて
 保存

17. シークレットキー発行
 use PragmaRX\Google2FA\Google2FA; $google2fa = new Google2FA(); return $google2fa->generateSecretKey();
18. QRコード化
 $g2faUrl = $google2fa->getQRCodeUrl( '組織名', 'アカウント名, $google2fa->generateSecretKey() );
19. ユーザー
 フロントエンド
 バックエンド
 ID・Password認証は成功している前提（ログイン中） 
 シークレットキーを
 リクエスト
 シークレットキーを
 発行し、QRコードにした ものと一緒に返す
 OTPとシークレットキー を元に認証
 QRコードを表示
 Google認証システムで 読み取り、アカウント登 録
 6桁のOTPを入力
 OTPとシークレットキー を送信
 シークレットキーをユー ザーに紐づけて
 保存

20. OTPとシークレットキーを元に認証
 $code = $request->input('code'); $secret = $request->input('secret'); $valid = $google2fa->verifyKey($secret, $code); // $validはboolになる
21. $validの扱い
 （ライブラリが例外を投げてくれると完全に思い込んでて小一時間詰まったやつ、いねえよなぁ!!?） 
 if (!$vaild) { throw new 認証コードが不適切Exception(); }
22. ユーザー
 フロントエンド
 バックエンド
 ID・Password認証は成功している前提（ログイン中） 
 シークレットキーを
 リクエスト
 シークレットキーを
 発行し、QRコードにした ものと一緒に返す
 OTPとシークレットキー を元に認証
 QRコードを表示
 Google認証システムで 読み取り、アカウント登 録
 6桁のOTPを入力
 OTPとシークレットキー を送信
 シークレットキーをユー ザーに紐づけて
 保存

23. シークレットキーをユーザーに紐づけて保存
 $user->update( [ 'google2fa_secret' => $secret ] );
24. 目次
 1. 二要素（段階）認証とは？
 2. Google2FAとは？
 3. アカウント登録の実装
 4. 認証の実装
 5. おまけ

25. Google2FAをアプリケーションに導入するにあたって
 大きく以下の２つの処理が必要になります
 Google認証システムへのア カウントの登録
 1
 ID・Password認証後
 OTPによる追加の認証
 2

26. ID・Password認証
 開始
 ２要素認証 の設定がON
 OTPによる認証
 アクセストークン発行 
 終了
 Yes
 No
 認証の実装フローチャート

27. コードの流れ
 if (ID・Password認証が失敗した場合 ) { throw new UnauthenticatedException(); } if (ログインユーザーに２要素認証の設定がない場合 ) { return "アクセストークン発行 "; } if (OTPがリクエストにない場合 ) { throw new OTPを送ってねException(); } if (OTPが不適切な場合) { throw new UnauthenticatedException(); } return "アクセストークン発行 ";
28. おまけ
 ★二要素認証ができなくなった場合のリカバリ方法を用意しよう
 - ex. Googleの8桁のバックアップコード
 
 ★二要素認証をしたブラウザを覚えさせよう
 - ブラウザのCookieに持たせる
 

29. サンプルレポジトリ
 https://github.com/sawadango/google2fa_example
30. おわり
 ご清聴ありがとうございました！