第5回rest勉強会ログイン編

CakePHPで実装するログイン機能

AWS上で構築するRESTfulアプリ勉強会～Web開発ワークショップ～【第5回】

概要

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

「ログイン」

＝認証 (本人確認)

「ログイン」

＝承認 (認可)

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

「ログイン機能を作る」

認証処理と承認処理の2つを作ること！

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

今回追加する機能

1. ユーザ登録 2. ログイン 3. ヘッダ表示(ユーザ名) 4. ログアウト

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

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

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

ログアウト

ワークショップ

本日のメニュー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

Lesson1 サーバサイド開発

REST,SPA流■ポイント

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

通常の Webページの場合

(REST,SPAでなく、サーバサイドでページ生成)

(CakePHPの既定の動作)

ブラウザサーバサーバ



① GET　todo_lists




「誰?」




ログイン画面で名前教えて!




② 302 Found(Location users/login)

ログイン画面で名前教えて!





わかりました！





③ GET　users/login

わかりました！






④ 200 OK






④ 200 OKログイン画面表示

REST,SPAの場合

Javascript サーバサーバ


① GET　todo_lists.json



「誰?」



② 401 Unauthorized



② 401 Unauthorizedログインが必要！



② 401 Unauthorized



② 401 Unauthorizedログイン画面表示

まとめ

まとめ■通常のWebページ


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


■REST, SPA



■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

Javascript で全部やる

■ポイントLesson2 クライアントサイド開発

まとめ（再掲）■通常のWebページ

■REST, SPA


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

■通常のWebページ


■通常のWebページ


サーバとブラウザが面倒みてくれる

サーバは拒否するだけ、ブラウザは何もしない


サーバはクライアントの質問に答えるだけ、クライアントはその答えを見て判断、が基本

■Javascriptで全部やる

今回は、起動時にログイン済みかどうかサーバに確認するようにします。

■Javascriptで全部やる

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

TODO一覧画面表示

未ログイン

ログイン済み

ブラウザで「…/rest-study/」をたたく

サーバに、ログイン済みか確認

ログイン画面表示

起動時■Javascriptで全部やる

Lesson2 クライアントサイド開発

Ajaxはその名の通り「非同期」である

■ハマりどころ

未ログイン

ログイン済み

サーバに、ログイン済みか確認

■ログイン確認

「非同期」なのでこんな単純じゃない

XHR

サーバ ■ログイン確認

Controller

起動時の処理

ルーティング開始まで待機

①サーバに、ログイン済みかどうかの確認要求を送信する

XHR

サーバ ■ログイン確認

Controller

起動時の処理



XHR

サーバ ②関数実行


Controller

起動時の処理



XHR


③CallBack

④サーバからの応答を保持しておく


Controller

起動時の処理



XHR


③CallBack



ユーザ情報Controller

起動時の処理



XHR


③CallBack



⑤ルーティングを有効にする


起動時の処理



XHR

サーバ

⑥TODO一覧画面を表示する

②関数実行

③CallBack





起動時の処理



XHR

サーバ


②関数実行

③CallBack




ユーザ情報

⑦ログイン済み/未ログインを確認

Controller

起動時の処理



TODO一覧画面表示

未ログイン

ログイン済みログイン画面表示

XHR

サーバ


②関数実行

③CallBack




ユーザ情報

⑦ログイン済み/未ログインを確認

Controller

起動時の処理


■どうハマったか？

①ルーティングを有効にする

起動時の処理

前回までのプログラム

最初にルーティングを有効にしている

XHR

サーバ

■こうハマる

Controller

起動時の処理


②サーバに、ログイン済みかどうかの確認要求を送信する

XHR

サーバ

■こうハマる

Controller

起動時の処理




XHR

サーバ ③関数実行

■こうハマる

Controller

起動時の処理



④TODO一覧画面を表示する


XHR


■こうハマる

Controller

起動時の処理



⑤ログイン済み/未ログインを確認



XHR


■こうハマる

Controller

起動時の処理






未ログイン


XHR


■こうハマる

Controller

起動時の処理






未ログイン


XHR


⑥CallBack

⑦サーバからの応答を保持しておく

■こうハマる

Controller

起動時の処理






未ログイン


XHR


⑥CallBack


■こうハマる

Controller

起動時の処理



ユーザ情報

ログイン済みTODO一覧画面表示




未ログイン


XHR


⑥CallBack


■こうハマる

Controller

起動時の処理



ユーザ情報

Lesson2 クライアントサイド開発

ログイン後、詳細ボタンクリック時はどうか？

■TODO詳細画面に遷移


XHR

サーバ

①TODO詳細画面を表示する



XHR

サーバ



ユーザ情報

②ログイン済み/未ログインを確認

Controller

XHR

サーバ

③TODO詳細画面表示

ログイン済み



ユーザ情報


Controller

XHR

サーバ

④TODO１件取得


ログイン済み



ユーザ情報


Controller

XHR

サーバ

④TODO１件取得


ログイン済み



ユーザ情報


Controller

XHR

サーバ

⑤関数実行

④TODO１件取得


ログイン済み



ユーザ情報


Controller

XHR

サーバ

⑤関数実行⑥CallBack

TODO1件表示

④TODO１件取得


ログイン済み



ユーザ情報


Controller

XHR

サーバ

⑤関数実行

④TODO１件取得


ログイン済み



ユーザ情報


Controller

XHR

サーバ

⑤関数実行

Ajaxエラーハンドラ

③CallBack

④TODO１件取得


ログイン済み



ユーザ情報


Controller

XHR

サーバ

⑤関数実行


Ajaxエラーハンドラ

③CallBack

マニュアル(Qiita)

http://

goo.gl/VGqHYBジーオーオー.ジーエル/ ブイジーキューエイチワイビー

マニュアル(Qiita)

http://

goo.gl/VGqHYBジーオーオー.ジーエル/ ブイジーキューエイチワイビー

はじめましょう！

第5回rest勉強会 ログイン編

Software

第5回rest勉強会ログイン編