2015/5/22に行われたAWS上で構築するRESTfulアプリ勉強会～Web開発ワークショップ～【第5回】で使用した資料です。

1. CakePHPで実装する
ログイン機能
AWS上で構築するRESTfulアプリ勉強会
～Web開発ワークショップ～【第5回】

2. 概要

3. 概要
1. ログインとは
2. やりたいこと
3. 今回追加する機能

4. 概要
1. ログインとは
2. やりたいこと
3. 今回追加する機能

5. 「ログイン」
＝認証 (本人確認)

6. 「ログイン」
＝承認 (認可)

7. 「ログイン」
＝知っている人(認証)
はアクセス許可(承認)
する

8. 「ログイン機能を作る」
認証処理と承認処理
の2つを作ること！

9. 概要
1. ログインとは
2. やりたいこと
3. 今回追加する機能

10. ログインしないと
TODOが見られな
いようにする

11. 概要
1. ログインとは
2. やりたいこと
3. 今回追加する機能

12. 今回追加する機能
1. ユーザ登録
2. ログイン
3. ヘッダ表示(ユーザ名)
4. ログアウト

13. ユーザ登録・ログイン画面

14. ヘッダ表示(TODO一覧画面)

15. ヘッダ表示(TODO詳細画面)

16. ログアウト

17. ワークショップ

18. 本日のメニュー
1. 事前準備
2. Lesson1
サーバサイド開発
3. Lesson2
クライアントサイド開発

19. 本日のメニュー
1. 事前準備
2. Lesson1
サーバサイド開発
3. Lesson2
クライアントサイド開発

20. 事前準備
• gitのブランチを整える
• ユーザ登録用テーブルを作
成する

21. gitのブランチを整える
■masterブランチを前回の内容
を終えた状態にする
■masterブランチを元に、今回
の作業用である、
「vol/05」ブランチを作成する
どう整えるのか

22. 人によって手順が違い
ます！（重要）
■前回の内容を途中までやった方
■前回の内容を完了した方
■今回から参加の方
gitのブランチを整える

23. http://
goo.gl/WEHXqX
ジーオーオー.ジーエル/
ダブリューイーエイチエックスキューエックス
ここに詳しく
書いております！

24. ユーザ登録用テーブルを作成する
■phpMyAdminを使用する
ユーザ登録用テーブル
「users」を作成
■項目は、
•id
•username
•name
•password

25. phpMyAdmin
http://(PublicIP)/phpMyAdmin

26. 本日のメニュー
1. 事前準備
2. Lesson1
サーバサイド開発
3. Lesson2
クライアントサイド開発

27. Lesson1 サーバサイド開発
REST,SPA流
■ポイント

28. ログイン画面表示
までの動き

29. 通常の
Webページの場合
(REST,SPAでなく、
サーバサイドでページ生成)

30. (CakePHPの既定の動作)
ブラウザ サーバサーバ

31. (CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists

32. (CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
「誰?」

33. (CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists

34. (CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
ログイン画面で
名前教えて!

35. (CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)
ログイン画面で
名前教えて!

36. (CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)

37. (CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)
わかりました！

38. (CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)
③ GET users/login
わかりました！

39. (CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)
③ GET users/login

40. (CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)
③ GET users/login
④ 200 OK

41. (CakePHPの既定の動作)
ブラウザ サーバサーバ
① GET todo_lists
② 302 Found
(Location users/login)
③ GET users/login
④ 200 OKログイン画面
表示

42. REST,SPAの場合

43. Javascript サーバサーバ

44. Javascript サーバサーバ
① GET todo_lists.json

45. Javascript サーバサーバ
① GET todo_lists.json
「誰?」

46. Javascript サーバサーバ
① GET todo_lists.json

47. Javascript サーバサーバ
① GET todo_lists.json
② 401 Unauthorized

48. Javascript サーバサーバ
① GET todo_lists.json
② 401 Unauthorized
ログインが必要！

49. Javascript サーバサーバ
① GET todo_lists.json
② 401 Unauthorized

50. Javascript サーバサーバ
① GET todo_lists.json
② 401 Unauthorizedログイン画面
表示

51. まとめ

52. まとめ
■通常のWebページ

53. まとめ
■通常のWebページ
サーバのリダイレクト指示により
ブラウザがリダイレクト先を要求、
サーバがログイン画面を返す

54. まとめ
■通常のWebページ
■REST, SPA
サーバのリダイレクト指示により
ブラウザがリダイレクト先を要求、
サーバがログイン画面を返す

55. まとめ
■通常のWebページ
■REST, SPA
サーバのリダイレクト指示により
ブラウザがリダイレクト先を要求、
サーバがログイン画面を返す
サーバに拒否されたことを受け、
Javascriptがログイン画面を表示

56. ■REST, SPA
サーバに拒否されたことを受け、
Javascriptがログイン画面を表示
リダイレクト(302)
CakePHPの既定の動作
→許可なし(401)に変更する

57. 作成する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

58. 本日のメニュー
1. 事前準備
2. Lesson1
サーバサイド開発
3. Lesson2
クライアントサイド開発

59. Javascript
で全部やる
■ポイント
Lesson2 クライアントサイド開発

60. まとめ（再掲）
■通常のWebページ
■REST, SPA
サーバのリダイレクト指示により
ブラウザがリダイレクト先を要求、
サーバがログイン画面を返す
サーバに拒否されたことを受け、
Javascriptがログイン画面を表示

61. ■通常のWebページ
サーバのリダイレクト指示により
ブラウザがリダイレクト先を要求、
サーバがログイン画面を返す

62. ■通常のWebページ
サーバのリダイレクト指示により
ブラウザがリダイレクト先を要求、
サーバがログイン画面を返す
サーバとブラウザが
面倒みてくれる

63. ■REST, SPA
サーバに拒否されたことを受け、
Javascriptがログイン画面を表示

64. サーバは拒否するだけ、
ブラウザは何もしない
■REST, SPA
サーバに拒否されたことを受け、
Javascriptがログイン画面を表示

65. サーバはクライアントの質問に答えるだけ、
クライアントはその答えを見て判断、が基本
■Javascriptで全部やる

66. 今回は、起動時にログイン
済みかどうかサーバに確認
するようにします。
■Javascriptで全部やる

67. ■Javascriptで全部やる
ログイン済みなら、ヘッダに表示するユーザ情報が
返ってきます。

68. TODO一覧画面表示
未ログイン
ログイン済み
ブラウザで「…/rest-study/」
をたたく
サーバに、ログ
イン済みか確認
ログイン画面表示
起動時
■Javascriptで全部やる

69. Lesson2 クライアントサイド開発
Ajaxはその名の通り
「非同期」である
■ハマりどころ

70. 未ログイン
ログイン済み
サーバに、ログ
イン済みか確認
■ログイン確認
「非同期」なのでこんな
単純じゃない

71. XHR
サーバ■ログイン確認
Controller
起動時の処理
ルーティング開始まで待機

72. ①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ■ログイン確認
Controller
起動時の処理
ルーティング開始まで待機

73. ①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
■ログイン確認
Controller
起動時の処理
ルーティング開始まで待機

74. ①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
■ログイン確認
Controller
起動時の処理
ルーティング開始まで待機

75. ①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
■ログイン確認
Controller
起動時の処理
ルーティング開始まで待機

76. ①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
Controller
起動時の処理
ルーティング開始まで待機

77. ①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
ユーザ情報
Controller
起動時の処理
ルーティング開始まで待機

78. ①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
⑤ルーティング
を有効にする
ユーザ情報
Controller
起動時の処理
ルーティング開始まで待機

79. ①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
⑤ルーティング
を有効にする
ユーザ情報
Controller
起動時の処理
ルーティング開始まで待機

80. ①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
⑥TODO一覧画面を表示する
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
⑤ルーティング
を有効にする
ユーザ情報
Controller
起動時の処理
ルーティング開始まで待機

81. ①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
⑥TODO一覧画面を表示する
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
⑤ルーティング
を有効にする
ユーザ情報
⑦ログイン済み/未ロ
グインを確認
Controller
起動時の処理
ルーティング開始まで待機

82. ①サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
⑥TODO一覧画面を表示する
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
⑤ルーティング
を有効にする
ユーザ情報
⑦ログイン済み/未ロ
グインを確認
Controller
起動時の処理
ルーティング開始まで待機

83. ①サーバに、ログイン済みか
どうかの確認要求を送信する
TODO一覧画面表示
未ログイン
ログイン済み
ログイン画面表示
XHR
サーバ
⑥TODO一覧画面を表示する
②関数実行
③CallBack
④サーバからの応
答を保持しておく
■ログイン確認
⑤ルーティング
を有効にする
ユーザ情報
⑦ログイン済み/未ロ
グインを確認
Controller
起動時の処理
ルーティング開始まで待機

84. ■どうハマったか？
①ルーティング
を有効にする
起動時の処理
前回までのプログラム
最初にルーティングを
有効にしている

85. XHR
サーバ
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機

86. XHR
サーバ
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする

87. ②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする

88. ②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする

89. ②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする

90. ④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする

91. ⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする

92. ⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする

93. ⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする

94. ⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
未ログイン
ログイン画面表示
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする

95. ⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
未ログイン
ログイン画面表示
XHR
サーバ
③関数実行
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする

96. ⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
未ログイン
ログイン画面表示
XHR
サーバ
③関数実行
⑥CallBack
⑦サーバからの応
答を保持しておく
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする

97. ⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
未ログイン
ログイン画面表示
XHR
サーバ
③関数実行
⑥CallBack
⑦サーバからの応
答を保持しておく
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
ユーザ情報

98. ログイン済み
TODO一覧画面表示
⑤ログイン済み/未ロ
グインを確認
④TODO一覧画面を表示する
②サーバに、ログイン済みか
どうかの確認要求を送信する
未ログイン
ログイン画面表示
XHR
サーバ
③関数実行
⑥CallBack
⑦サーバからの応
答を保持しておく
■こうハマる
Controller
起動時の処理
ルーティング開始まで待機
①ルーティングを有効にする
ユーザ情報

99. Lesson2 クライアントサイド開発
ログイン後、詳細ボタン
クリック時はどうか？

100. ■TODO詳細画面に遷移
ユーザ情報
Controller
XHR
サーバ

101. ①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
Controller
XHR
サーバ

102. ①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ

103. ①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ

104. ③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ

105. ④TODO１件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ

106. ④TODO１件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行

107. ④TODO１件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行

108. ④TODO１件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行

109. ④TODO１件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行
⑥CallBack
TODO1件表示

110. ④TODO１件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行

111. ④TODO１件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行

112. ④TODO１件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行
Ajaxエラーハンドラ
③CallBack

113. ④TODO１件取得
③TODO詳細画面表示
ログイン済み
①TODO詳細画面を表示する
■TODO詳細画面に遷移
ユーザ情報
②ログイン済み/未ロ
グインを確認
Controller
XHR
サーバ
⑤関数実行
ログイン画面表示
Ajaxエラーハンドラ
③CallBack

114. マニュアル(Qiita)
http://
goo.gl/VGqHYB
ジーオーオー.ジーエル/
ブイジーキューエイチワイビー

115. マニュアル(Qiita)
http://
goo.gl/VGqHYB
ジーオーオー.ジーエル/
ブイジーキューエイチワイビー
はじめましょう！