1. ゼロからはじめる
サーバーサイド
第2回
STANDS / @chatii0079

2. 自己紹介
•
STANDS (スタンヅ) 代表
•
ずっとフリーで仕事してます
•
稲葉 太一
•
PHPer歴は長い
•
ネットワーク構築や Windows Server
の設定とか
•
特殊なのだと電話とかカメラの設置設定
•
引出しは多い
•
http://chatii.net
•
Twitter: @chatii0079
•
ちゃちいさんと呼んでください

3. 前回のおはなし
データベース
Web サーバーとは
Apache, nginx, IIS…
HTTP で通信
暗号化通信の HTTPS
!
サーバーサイド
プログラミング
Java, Perl, PHP, Python,
Ruby, ASP.NET (C#, etc…)
RDBMS
MySQL, Postgresql, Oracle,
Microsoft SQL Server…
NoSQL (Not only SQL)
MongoDB, Redis…
!
ブラウザのページ取得
静的/動的の違い
GET/POST
GET で実装すべきか、POST
で実装すべきか

4. 本日の献立
Web API
OAuth
OpenID
Ajax とか (時間あれば)

5. Web API
(うぇぶ えーぴーあい)

6. Web API とは
そもそも API って何？
Application Programming Interface (アプリケー
ション・プログラミング・インターフェース)の略。
あるプログラムの機能/データを他のプログラムか
ら呼び出す規約のこと。
Windows アプリケーションを作るとき…
いちからウィンドウを表示するプログラムを作る…のは面倒！
でも、Windows API を呼び出せば、短いコードで簡単に！
べんり!!

7. Web API とは
じゃあ Web API は？
インターネット経由で他の Web サービスのデー
タを取得したり、機能を使うことができる。
JSON や XML などの形式で取得でき、
JavaScript や サーバーサイド言語でうまく取り
扱えるようになっている。
認証が必要な場合も。
キーを取得したり OAuthで認可を得る。

8. Web API
サーバー/クライアントのどち
らもWeb API を利用できる
!
Web API を提供するシステ
ムはその中でデータを用意し
たり、処理を行って、結果を
返してあげる

9. Web API とは
たとえば…
Google Maps API を使って、
移動距離/時間を呼び出す
はてなブックマーク件数取得API を使って、
はてブ数を取得する
Amazon Product Advertising API を使って、
商品情報を取得する

10. Web API とは
使ってみる
TechBuzz Space から 新宿駅 までの
ルート検索
http://bit.ly/zeross-sample
Google 検索で 「サーバーサイド」の
サジェスト取得
http://bit.ly/zeross-sample2
どんな API があるのか、どういうふうに使うのかは
しっかりドキュメントを読みましょう！

11. TechBuzz Space から 新宿駅 までの
Google 検索で 「サーバーサイド」の
ルート検索
サジェスト取得

12. OAuth
(おー おーす)

13. OAuth の使い道
Web API を使う権限を認可
OAuth にはログイン機能はない
ユーザーは「Resource Owner」
OAuth を使った API を提供しているサービスは
「OAuth Server」
OAuth Server の API を利用するサービスは
「OAuth Client」
OAuth Server のリソースを使うための認可

14. OAuth の流れ
Twitter を使う場合の例

15. OAuth の流れ
Twitter を使う場合の例
•
フロー開始
•
•
OAuth Client
•
認可レスポンス
「Twitter でログインする」
•
OAuth Client から OAuth Server
へリダイレクト
•
OAuth Server
•
「○○があなたのアカウントを
利用することを許可しますか？
•
「連携アプリを認証」
•
リダイレクト URL にアクセス
権限付与のトークンを含む
アクセストークンとの交換
•
アクセス権限の付与
•
OAuth Server から OAuth Client
へリダイレクト
•
認可のリクエスト
•
•
•
OAuth Client は、取得したトーク
ンを Access Token と交換
以後、API へアクセスできる
•
アクセストークンが期限切れ また
は 無効化されるまで

16. OAuth 認証？
「Twitter でログインする」？
「OAuth 使って Twitter/Facebook の
アカウントでログインできるようにしよう！」
OAuth にはログイン機能はない
半分正解、半分間違い
なぜ？答えは後ほど。

17. OpenID
(おーぷん あいでぃー)

18. OpenID とは
BASIC 認証の替わり？
ユーザー中心の分散 ID 認証システム
ブラウザベースの認証
OpenID を使ってログインしようとする
OpenID 対応のプロバイダーはエンドユーザーを
認証する
その結果、【URL】を ID として返す

19. OpenID とは
Yahoo! JAPAN の OpenID を使ってみる
「Yahoo! Japan IDやパスワードはOpenID対応サイトには送信されません」
•
認証だけしてもしょうがない…？
•
API の利用やモバイルには不便
•
強固な暗号化をサポートしない

20. OpenID と OAuth の
違い

21. OpenID と OAuth の違い
認証 と 認可
認証: Authentication
(おーせんてぃけーしょん)
ID が正しくそのユーザーのものか
認可: Authorize
(おーそらいず)
ID の使うサービスに適切な権限を付与

22. OpenID と OAuth の違い
ひらたくいうと
OpenID
ユーザーの認証情報をやりとり
OAuth
OAuth Server の API へアクセスを実現
OAuth は 認証のやり方を決めていない

23. OAuth 認証？
「Twitter でログインする」？
「OAuth 使って Twitter/Facebook の
アカウントでログインできるようにしよう！」
OAuth にはログイン機能はない
半分正解、半分間違い
なぜ？

24. OAuth 認証？
「半分正解、半分間違い」？
OAuth は API へのアクセス権限を付与するもので、
本人認証の機能を持っていない
「ソーシャルログイン」の実装として、API のアクセス
権限と取得しつつユーザーアカウントとして使ってしまおう
「ツイート読み込む権限を取得しないと」
「フォロワーしている人を読み込む権限を取得しないと」
余計な権限を与える/もらうっていうのは
セキュアじゃないよね

25. OpenID Connect
(おーぷん あいでぃー こねくと)

26. OpenID Connect
ひらたくいうと
OAuth をベースに OpenID を実現する
ソーシャルアカウントで【認証】を
セキュアにできる
もちろんネイティブアプリでも使える

27. OpenID Connect
対応サービス
などなど

28. OpenID Connect
OpenID ではできなかったことが
対応サービスにひも付くユーザー情報も取り出す
氏名、ふりがな
メールアドレス
住所など…
サービス側が提供するもの
会員登録フォームを作らなくて良くなる未来？

29. Ajax とか
(えいじゃっくす とか)

30. Ajax とか
Ajax はもう枯れてる？
Ajax で非同期通信!!
非同期通信って？
画面遷移せずに GET/POST できる
みんな大好き jQuery で簡単に実装できる
でも問題も
サーバーからクライアントへの通信ができない

31. Ajax とか
Ajax のかわり？
Comet で非同期通信!!
Ajax とどう違う？
サーバーからクライアントへの通信 (Push) ができる
はやらなかった

32. Ajax とか
Ajax/Comet の問題点
サーバーとのコネクションが
Ajax は複数使うのでリソース使いまくり
Comet はコネクション張りっぱなし
サーバーへの負荷が大きい
HTTP 1.1 通信の仕組みなので、サーバーサイド/クライ
アントサイドでどうにかするのは「小手先」の対応

33. Ajax とか
Ajax/Comet のかわり？
WebSocket

34. Ajax とか
WebSocket とは
Comet のようなリアルタイム通信
長時間接続が前提
接続中は、
クライアントからサーバーの通信
サーバーからクライアントの通信
接続は 1 回 で何回でも送受信可能
最初は HTTP を使い接続を確立、その後 WebSocket
ws://example.com/hoge
サーバーにやさしい

35. Ajax とか
WebSocket を使う？
ブラウザの対応状況
クライアント側は、
Internet Explorer 10（含むモバイル）、
Mozilla Firefox 6 (Firefox for Mobile 7)、
Google Chrome 4 (含むモバイル)、
Safari 5 (含むiOS 4.2以降)、
Opera 12.10（含むモバイル）、
Android 4.4、BlackBerry 7 (要設定)
で実装されている。
出典 http://ja.wikipedia.org/wiki/WebSocket#.E5.AE.9F.E8.A3.85.E7.8A.B6.E6.B3.81

36. Ajax とか
WebSocket を使う？
サーバー側の実装
各言語 で WebSocket のライブラリが公開されている
多分有名なのは…
Node.js
Socket.IO http://socket.io/

37. 参考資料
SOAP，WSDL，REST――Web APIの基礎技術を学ぶ
http://itpro.nikkeibp.co.jp/article/COLUMN/20060928/249253/
YAPC::Tokyo 2013 ritou OpenID Connect
http://www.slideshare.net/ritou/yapc2013-ritou-oidc
なぜOpenID Connectが必要となったのか、その歴史的背景
http://www.slideshare.net/tkudo/openid-connect-devlove
非技術者のためのOAuth認証(?)とOpenIDの違い入門
http://www.sakimura.org/2011/05/1087/
単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる
http://www.sakimura.org/2012/02/1487/
SPAを実現するために必要な通信技術
http://www.slideshare.net/yusukenaka52/spa-30482031
双方向通信を実現！ WebSocketを使いこなそう
http://www.atmarkit.co.jp/ait/articles/1111/11/news135.html
WebSocket - Wikipedia
http://ja.wikipedia.org/wiki/WebSocket