CakePHPで実装する
ログイン機能
AWS上で構築するRESTfulアプリ勉強会
~Web開発ワークショップ~【第5回】
概要
概要
1. ログインとは
2. やりたいこと
3. 今回追加する機能
概要
1. ログインとは
2. やりたいこと
3. 今回追加する機能
「ログイン」
=認証 (本人確認)
「ログイン」
=承認 (認可)
「ログイン」
=知っている人(認証)
はアクセス許可(承認)
する
「ログイン機能を作る」
認証処理と承認処理
の2つを作ること!
概要
1. ログインとは
2. やりたいこと
3. 今回追加する機能
ログインしないと
TODOが見られな
いようにする
概要
1. ログインとは
2. やりたいこと
3. 今回追加する機能
今回追加する機能
1. ユーザ登録
2. ログイン
3. ヘッダ表示(ユーザ名)
4. ログアウト
ユーザ登録・ログイン画面
ヘッダ表示(TODO一覧画面)
ヘッダ表示(TODO詳細画面)
ログアウト
ワークショップ
本日のメニュー
1. 事前準備
2. Lesson1
サーバサイド開発
3. Lesson2
 クライアントサイド開発
本日のメニュー
1. 事前準備
2. Lesson1
サーバサイド開発
3. Lesson2
 クライアントサイド開発
事前準備
• gitのブランチを整える
• ユーザ登録用テーブルを作
成する
gitのブランチを整える
■masterブランチを前回の内容
を終えた状態にする
■masterブランチを元に、今回
の作業用である、
「vol/05」ブランチを作成する
どう整えるのか
人によって手順が違い
ます!(重要)
■前回の内容を途中までやった方
■前回の内容を完了した方
■今回から参加の方
gitのブランチを整える
http://
goo.gl/WEHXqX
ジーオーオー.ジーエル/
ダブリューイーエイチエックスキューエックス
ここに詳しく
書いております!
ユーザ登録用テーブルを作成する
■phpMyAdminを使用する
ユーザ登録用テーブル
 「users」を作成
■項目は、
•id
•username
•name
•password
phpMyAdmin
http://(PublicIP)/phpMyAdmin
本日のメニュー
1. 事前準備
2. Lesson1
サーバサイド開発
3. Lesson2
 クライアントサイド開発
Lesson1 サーバサイド開発
REST,SPA流
■ポイント
ログイン画面表示
までの動き
通常の
Webページの場合
(REST,SPAでなく、
サーバサイドでページ生成)
(CakePHPの既定の動作)
ブラウザ サーバサーバ
(CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
(CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
「誰?」
(CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
(CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
ログイン画面で
名前教えて!
(CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)
ログイン画面で
名前教えて!
(CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)
(CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)
わかりました!
(CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)
③ GET users/login
わかりました!
(CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)
③ GET users/login
(CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)
③ GET users/login
④ 200 OK
(CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)
③ GET users/login
④ 200 OKログイン画面
表示
REST,SPAの場合
Javascript サーバサーバ
Javascript サーバサーバ
① GET todo_lists.json
Javascript サーバサーバ
① GET todo_lists.json
「誰?」
Javascript サーバサーバ
① GET todo_lists.json
Javascript サーバサーバ
① GET todo_lists.json
② 401 Unauthorized
Javascript サーバサーバ
① GET todo_lists.json
② 401 Unauthorized
ログインが必要!
Javascript サーバサーバ
① GET todo_lists.json
② 401 Unauthorized
Javascript サーバサーバ
① GET todo_lists.json
② 401 Unauthorizedログイン画面
表示
まとめ
まとめ
■通常のWebページ
まとめ
■通常のWebページ
サーバのリダイレクト指示により
ブラウザがリダイレクト先を要求、
サーバがログイン画面を返す
まとめ
■通常のWebページ
■REST, SPA
サーバのリダイレクト指示により
ブラウザがリダイレクト先を要求、
サーバがログイン画面を返す
まとめ
■通常のWebページ
■REST, SPA
サーバのリダイレクト指示により
ブラウザがリダイレクト先を要求、
サーバがログイン画面を返す
サーバに拒否されたことを受け、
Javascriptがログイン画面を表示
■REST, SPA
サーバに拒否されたことを受け、
Javascriptがログイン画面を表示
リダイレクト(302)
CakePHPの既定の動作
→許可なし(401)に変更する
作成するAPI一覧
URL(/rest-study/…)
Http
Method
処理 Controller Action
users/login.json POST ログインする UsersController login
users/logout.json POST ログアウトする UsersController logout
users/
loggedin.json
GET
ログインユーザ情報を取得
(ログイン中かどうかのチェック)
UsersController loggedIn
users/signup.json POST ユーザを登録する UsersController signUp
本日のメニュー
1. 事前準備
2. Lesson1
サーバサイド開発
3. Lesson2
 クライアントサイド開発
Javascript
で全部やる
■ポイント
Lesson2 クライアントサイド開発
まとめ(再掲)
■通常のWebページ
■REST, SPA
サーバのリダイレクト指示により
ブラウザがリダイレクト先を要求、
サーバがログイン画面を返す
サーバに拒否されたことを受け、
Javascriptがログイン画面を表示
■通常のWebページ
サーバのリダイレクト指示により
ブラウザがリダイレクト先を要求、
サーバがログイン画面を返す
■通常のWebページ
サーバのリダイレクト指示により
ブラウザがリダイレクト先を要求、
サーバがログイン画面を返す
サーバとブラウザが
面倒みてくれる
■REST, SPA
サーバに拒否されたことを受け、
Javascriptがログイン画面を表示
サーバは拒否するだけ、
ブラウザは何もしない
■REST, SPA
サーバに拒否されたことを受け、
Javascriptがログイン画面を表示
サーバはクライアントの質問に答えるだけ、
クライアントはその答えを見て判断、が基本
■Javascriptで全部やる
今回は、起動時にログイン
済みかどうかサーバに確認
するようにします。
■Javascriptで全部やる
■Javascriptで全部やる
ログイン済みなら、ヘッダに表示するユーザ情報が
返ってきます。
TODO一覧画面表示
未ログイン
ログイン済み
ブラウザで「…/rest-study/」
をたたく
サーバに、ログ
イン済みか確認
ログイン画面表示
起動時
■Javascriptで全部やる
Lesson2 クライアントサイド開発
Ajaxはその名の通り
「非同期」である
■ハマりどころ
未ログイン
ログイン済み
サーバに、ログ
イン済みか確認
■ログイン確認
「非同期」なのでこんな
単純じゃない
XHR
サーバ■ログイン確認
Controller
起動時の処理
ルーティング開始まで待機
①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ■ログイン確認
Controller
起動時の処理
ルーティング開始まで待機
①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
■ログイン確認
Controller
起動時の処理
ルーティング開始まで待機
①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
■ログイン確認
Controller
起動時の処理
ルーティング開始まで待機
①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
■ログイン確認
Controller
起動時の処理
ルーティング開始まで待機
①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
Controller
起動時の処理
ルーティング開始まで待機
①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
ユーザ情報
Controller
起動時の処理
ルーティング開始まで待機
①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
⑤ルーティング
を有効にする
ユーザ情報
Controller
起動時の処理
ルーティング開始まで待機
①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
⑤ルーティング
を有効にする
ユーザ情報
Controller
起動時の処理
ルーティング開始まで待機
①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
⑥TODO一覧画面を表示する
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
⑤ルーティング
を有効にする
ユーザ情報
Controller
起動時の処理
ルーティング開始まで待機
①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
⑥TODO一覧画面を表示する
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
⑤ルーティング
を有効にする
ユーザ情報
⑦ログイン済み/未ロ
グインを確認
Controller
起動時の処理
ルーティング開始まで待機
①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
⑥TODO一覧画面を表示する
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
⑤ルーティング
を有効にする
ユーザ情報
⑦ログイン済み/未ロ
グインを確認
Controller
起動時の処理
ルーティング開始まで待機
①サーバに、ログイン済みか
どうかの確認要求を送信する
TODO一覧画面表示
未ログイン
ログイン済み
ログイン画面表示
XHR
サーバ
⑥TODO一覧画面を表示する
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
⑤ルーティング
を有効にする
ユーザ情報
⑦ログイン済み/未ロ
グインを確認
Controller
起動時の処理
ルーティング開始まで待機
■どうハマったか?
①ルーティング
を有効にする
起動時の処理
前回までのプログラム
最初にルーティングを
有効にしている
XHR
サーバ
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
XHR
サーバ
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
未ログイン
ログイン画面表示
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
未ログイン
ログイン画面表示
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
未ログイン
ログイン画面表示
XHR
サーバ
③関数実行
⑥CallBack
⑦サーバからの応
答を保持しておく
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
未ログイン
ログイン画面表示
XHR
サーバ
③関数実行
⑥CallBack
⑦サーバからの応
答を保持しておく
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
ユーザ情報
ログイン済み
TODO一覧画面表示
⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
未ログイン
ログイン画面表示
XHR
サーバ
③関数実行
⑥CallBack
⑦サーバからの応
答を保持しておく
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
ユーザ情報
Lesson2 クライアントサイド開発
ログイン後、詳細ボタン
クリック時はどうか?
■TODO詳細画面に遷移
ユーザ情報
Controller
XHR
サーバ
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
Controller
XHR
サーバ
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
④TODO1件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
④TODO1件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行
④TODO1件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行
④TODO1件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行
④TODO1件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行
⑥CallBack
TODO1件表示
④TODO1件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行
④TODO1件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行
④TODO1件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行
Ajaxエラーハンドラ
③CallBack
④TODO1件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行
ログイン画面表示
Ajaxエラーハンドラ
③CallBack
マニュアル(Qiita)
http://
goo.gl/VGqHYB
ジーオーオー.ジーエル/
ブイジーキューエイチワイビー
マニュアル(Qiita)
http://
goo.gl/VGqHYB
ジーオーオー.ジーエル/
ブイジーキューエイチワイビー
はじめましょう!

第5回rest勉強会 ログイン編