ゼロからはじめる サーバーサイド

第2回STANDS / @chatii0079

自己紹介• STANDS (スタンヅ) 代表

• ずっとフリーで仕事してます

• 稲葉 太一

• PHPer歴は長い

• ネットワーク構築や Windows Serverの設定とか

• 特殊なのだと電話とかカメラの設置設定

• 引出しは多い

• http://chatii.net

• Twitter: @chatii0079

• ちゃちいさんと呼んでください

前回のおはなし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 で実装すべきか

本日の献立

Web API

OAuth

OpenID

Ajax とか (時間あれば)

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

Web API とはそもそも API って何？

Application Programming Interface (アプリケーション・プログラミング・インターフェース)の略。

あるプログラムの機能/データを他のプログラムから呼び出す規約のこと。

Windows アプリケーションを作るとき…いちからウィンドウを表示するプログラムを作る…のは面倒！ でも、Windows API を呼び出せば、短いコードで簡単に！

べんり!!

Web API とはじゃあ Web API は？

インターネット経由で他の Web サービスのデータを取得したり、機能を使うことができる。 JSON や XML などの形式で取得でき、JavaScript や サーバーサイド言語でうまく取り扱えるようになっている。

認証が必要な場合も。キーを取得したり OAuthで認可を得る。

Web APIサーバー/クライアントのどちらもWeb API を利用できる !

Web API を提供するシステムはその中でデータを用意したり、処理を行って、結果を返してあげる

Web API とはたとえば…

Google Maps API を使って、移動距離/時間を呼び出す

はてなブックマーク件数取得API を使って、 はてブ数を取得する

Amazon Product Advertising API を使って、 商品情報を取得する

Web API とは使ってみる

TechBuzz Space から 新宿駅 までの ルート検索 http://bit.ly/zeross-sample

Google 検索で 「サーバーサイド」の サジェスト取得http://bit.ly/zeross-sample2

どんな API があるのか、どういうふうに使うのかはしっかりドキュメントを読みましょう！

TechBuzz Space から 新宿駅 までのルート検索

Google 検索で 「サーバーサイド」のサジェスト取得

OAuth(おー おーす)

OAuth の使い道Web API を使う権限を認可

OAuth にはログイン機能はない

ユーザーは「Resource Owner」

OAuth を使った API を提供しているサービスは 「OAuth Server」

OAuth Server の API を利用するサービスは 「OAuth Client」

OAuth Server のリソースを使うための認可

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

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

• フロー開始 • OAuth Client • 「Twitter でログインする」

• 認可のリクエスト • OAuth Client から OAuth Server へリダイレクト

• アクセス権限の付与 • OAuth Server

• 「○○があなたのアカウントを利用することを許可しますか？ • 「連携アプリを認証」

• 認可レスポンス • OAuth Server から OAuth Client へリダイレクト • リダイレクト URL にアクセス権限付与のトークンを含む

• アクセストークンとの交換 • OAuth Client は、取得したトークンを Access Token と交換

• 以後、API へアクセスできる • アクセストークンが期限切れ または 無効化されるまで

OAuth 認証？「Twitter でログインする」？

OAuth にはログイン機能はない

半分正解、半分間違い

「OAuth 使って Twitter/Facebook のアカウントでログインできるようにしよう！」

なぜ？答えは後ほど。

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

OpenID とはBASIC 認証の替わり？

ユーザー中心の分散 ID 認証システム

ブラウザベースの認証

OpenID を使ってログインしようとする

OpenID 対応のプロバイダーはエンドユーザーを 認証する

その結果、【URL】を ID として返す

OpenID とはYahoo! JAPAN の OpenID を使ってみる

「Yahoo! Japan IDやパスワードはOpenID対応サイトには送信されません」

• 認証だけしてもしょうがない…？ • API の利用やモバイルには不便 • 強固な暗号化をサポートしない

OpenID と OAuth の違い

OpenID と OAuth の違い認証 と 認可

認証: Authentication (おーせんてぃけーしょん)

ID が正しくそのユーザーのものか

認可: Authorize (おーそらいず)

ID の使うサービスに適切な権限を付与

OpenID と OAuth の違いひらたくいうと

OpenID

ユーザーの認証情報をやりとり

OAuth

OAuth Server の API へアクセスを実現

OAuth は 認証のやり方を決めていない

OAuth 認証？「Twitter でログインする」？

OAuth にはログイン機能はない

半分正解、半分間違い

「OAuth 使って Twitter/Facebook のアカウントでログインできるようにしよう！」

なぜ？

OAuth 認証？「半分正解、半分間違い」？

OAuth は API へのアクセス権限を付与するもので、 本人認証の機能を持っていない

「ソーシャルログイン」の実装として、API のアクセス権限と取得しつつユーザーアカウントとして使ってしまおう

「ツイート読み込む権限を取得しないと」

「フォロワーしている人を読み込む権限を取得しないと」

余計な権限を与える/もらうっていうのはセキュアじゃないよね

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

OpenID Connectひらたくいうと

OAuth をベースに OpenID を実現する

ソーシャルアカウントで【認証】をセキュアにできる

もちろんネイティブアプリでも使える

OpenID Connect対応サービス

などなど

OpenID ConnectOpenID ではできなかったことが

対応サービスにひも付くユーザー情報も取り出す

氏名、ふりがな

メールアドレス

住所など…

サービス側が提供するもの

会員登録フォームを作らなくて良くなる未来？

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

Ajax とかAjax はもう枯れてる？

Ajax で非同期通信!!

非同期通信って？

画面遷移せずに GET/POST できる

みんな大好き jQuery で簡単に実装できる

でも問題も

サーバーからクライアントへの通信ができない

Ajax とかAjax のかわり？

Comet で非同期通信!!

Ajax とどう違う？

サーバーからクライアントへの通信 (Push) ができる

はやらなかった

Ajax とかAjax/Comet の問題点

サーバーとのコネクションが

Ajax は複数使うのでリソース使いまくり

Comet はコネクション張りっぱなし

サーバーへの負荷が大きい

HTTP 1.1 通信の仕組みなので、サーバーサイド/クライアントサイドでどうにかするのは「小手先」の対応

Ajax とかAjax/Comet のかわり？

WebSocket

Ajax とかWebSocket とは

Comet のようなリアルタイム通信 長時間接続が前提

接続中は、 クライアントからサーバーの通信 サーバーからクライアントの通信

接続は 1 回 で何回でも送受信可能 最初は HTTP を使い接続を確立、その後 WebSocket ws://example.com/hoge

サーバーにやさしい

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

Ajax とかWebSocket を使う？

サーバー側の実装 各言語 で WebSocket のライブラリが公開されている

多分有名なのは… Node.js Socket.IO http://socket.io/

参考資料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