OAuth and SNS

OAuth & SNS
Geek Bar #6
中央大学飯尾淳

Copyright © Jun Iio 2
目標
●
SNSから取得したアカウントでデータを管理で
きるウェブアプリを作成する
●
SNSから個人情報が簡単にぶっこ抜かれる怖さ
を知る
●
上の2つは表裏一体．今日は性善説に従い解説
します

簡単にアクセスしてませんか？

手順
●
Sinatraを知る
●
ユーザ管理しないWebアプリを作ってみる
●
ユーザ管理のためにOAuthを導入する
●
「Facebookでログイン」を試してみる
– どんな情報が得られるだろうか

Sinatraとは
●
RubyによるWebフレームワーク
●
Ruby on Rails よりシンプル，単純
– ルーティングベースの記述
– Railsで活用する様々な技術が使える
– Sinatraで理解しておけばRailsへ移行しやすい
●
以下のチュートリアルでは ruby と bundler を
使うので，使える環境を用意してください

演習1
●
作業ディレクトリを用意してください
●
そのディレクトリの中に，myapp.rb という
ファイルと Gemfile というファイルを2つ作り
ます
●
今回は…
– ローカル環境でサーバを立てて，
– ローカルのクライアントからアクセスします

Hello World
●
myapp.rb の中身
require 'sinatra'
class SinatraApp < Sinatra::Base
get '/' do
"Hello World!"
end
end
SinatraApp.run! if __FILE__ == $0

Hello World
●
Gemfileとは？
– ライブラリ管理用の
ファイル
●
Gemfileの中身
source :rubygems
gem 'sinatra'
gem 'thin'
●
作業
$ bundle install --path vendor/bundle
$ ruby myapp.rb
（bundle exec ruby myapp.rb）
thinサーバを
使うとき用

サーバの起動
止めるときは
Ctrl + C を2回

ブラウザで確認
http://localhost:4567/ にアクセスしてみよう

ルーティング処理

erb（テンプレート処理）

ユーザー管理に必要なもの
●
ユーザーID
– 個別のユーザーを内部で識別するために必要
●
認証システム
– 特定のユーザーがその人であることを認証
– 個別の実装は面倒くさい，セキュリティ的に不安
●
OAuth（オース）の仕組みを利用
– SNSなどが提供
– 認証はSNS側で実施
– 個別にアクセスできるトークンを利用可能

OAuthのしくみ

演習2
●
OAuthのしくみ…「ちょー面倒くさい」
– OmniAuth … ライブラリ（gem）の利用
●
そこで演習
– 先ほどと違う作業ディレクトリを用意してください
– サンプルプログラムをダウンロード，展開してくだ
さい（GitHubに置いておきました）
– https://github.com/iiojun/oauth_example
●
環境設定
– $ bundle install --path vendor/bundle

developers.facebook.com

新しいアプリを追加

新しいアプリIDを作成

セキュリティチェック

アプリの生成

アプリIDとapp secretの取得

アプリ側への埋め込み

Facebookログインの追加

Facebookログインの設定

サーバー起動
●
準備が整ったので，
– サーバーを起動する
– http://localhost:4567/ にアクセス
– 「Login with facebook」をクリック

FB側の対応

認証後に得られる情報

ログイン／ログアウトの確認
●
ログインしていない状態で…
http://localhost:4567/protected
にアクセス
●
ログインする
●
ログインした状態で…
http://localhost:4567/protected
にアクセス
●
ログアウトする
●
再び http://localhost:4567/protected にア
クセスするとどうなるか？

login/logout管理の仕組み

login/logout管理の仕組み (cont'd)
ここでアカウント情報
を取得し，セッション
トークンに紐付けて
おけばokですね！

Twitterで認証／Githubで認証など

まとめ
●
Sinatraを導入しました
●
ユーザ管理しないWebアプリを作ってみました
●
ユーザ管理のためにOAuthを導入しました
●
「Facebookでログイン」を試してみました

OAuth and SNS

Recommended

Recommended

More Related Content

Similar to OAuth and SNS

Similar to OAuth and SNS (20)

More from Jun Iio

More from Jun Iio (20)

Recently uploaded

Recently uploaded (10)

OAuth and SNS