OmniAuthを使ってみる

2015-02-11
#ruby

以前twitter_oauthというgemを使ってTwitter認証を試したが、他のウェブサービスを使って認証もしてみたいので、OmniAuthというgemを使ってみることにする。

OmniAuthでググるとRailsを使ったサンプルばかりが引っかかって、よりシンプルな使い方がなかなか探しづらかったのだが、An example sinatra omniauth client appを参考にしたらできた。

アプリはHerokuを使ってデプロイする。言語はRuby、フレームワークはSinatraを使う。

コード, デモ Deploy

OmniAuthのセットアップ

Gemfileに必要なファイルを追加する：

Gemfile

source 'https://rubygems.org'
gem 'sinatra'
gem 'omniauth'
gem 'omniauth-oauth2'
gem 'omniauth-twitter'
gem 'json'
  • JSONは認証結果を分かりやすく表示するためだけに使っていて、実際には必要ない
  • omniauth-oauth2を追加しないと NoMethod join for String などというエラーが出てしまい、動かなかった

app.rb

require 'rubygems'
require 'sinatra'
require 'omniauth'
require 'omniauth-twitter'

class SinatraApp < Sinatra::Base
  configure do
    set :sessions, true
    set :inline_templates, true
  end

  use OmniAuth::Builder do
    provider :twitter, ENV['TWITTER_KEY'], ENV['TWITTER_SECRET']
  end

  get '/' do
    erb "<a href='/auth/twitter'>Login with Twitter</a><br>"
  end


  get '/auth/:provider/callback' do
    result = request.env['omniauth.auth']
    erb "<a href='/'>Top</a><br>
         <h1>#{params[:provider]}</h1>
         <pre>#{JSON.pretty_generate(result)}</pre>"
  end
end

SinatraApp.run! if __FILE__ == $0
  • トップページにTwitterログインへのリンク(/auth/twitter)を表示してやる
  • /auth/twitterに飛ばすと、OmniAuthが勝手に認証処理を始めてくれる（Integrating OmniAuth Into Your Application）
  • 認証が成功すると/auth/twitter/callbackに飛んできて、request.env['omniauth.auth']に結果が入っているので、そこでユーザのTwitterアカウントの情報を取得できる
    • request.env['omniauth.auth']['info']['nickname']に名前、など
  • 失敗した時は/auth/failureなどに飛ばされる
  • omniauthはtwitter_oauthに比べて、自分でリクエストトークンやアクセストークンを処理しなくていいからすげー楽ちんだなぁ

ログアウト

アプリの認証を行った後トップページに行くと「ログアウト」ができるようにしている。 これは単にアプリ側のセッションに保存している情報ををクリアするだけで、認証先アプリとの 連携を切っているわけではない。連携を切るにはTwitter（や他のサービスの場合にはそのサイト）の 設定画面で行う必要がある。

他のウェブサービスでもログインできるようにする

OmniAuthではいろんなウェブサービスに対応できるようになっている（それぞれを戦略と呼ぶ）。追加する手順は（例えばgithub用には）、

  1. それぞれのウェブサービスで、認証を使うアプリを新規登録する（後述）
  2. Gemfileに必要なgemファイルを追加する（gem 'omniauth-github'など）
  • Gemfileを更新したらbundle installを実行する
  1. Rubyスクリプトから読み込む（require 'omniauth-github'）
  2. OmniAuth::Builderに登録する（provider :github, ENV['GITHUB_KEY'], ENV['GITHUB_SECRET']）
  • ローカルテスト用にexport GITHUB_KEY='...'; export GITHUB_SECRET_KEY='...'、herokuデプロイ用にheroku config:add GITHUB_KEY=...でそれぞれの環境変数に定義してやる

ウェブサービスに認証アプリを登録

github

  • Settings > Applicationsで、「Register new application」でアプリを作成
  • アプリ名、ホームページURL、アプリの説明などは適当に
  • 「Authorization callback URL」には、ローカルテスト中はhttp://localhost:4567/auth/github/callbackを指定する

Facebook

  • Facebook Developersから、 [My Apps] > [+ Add a New App] > [ウェブサイト]でアプリを作成
    • 名前を適当に設定
    • ウェザードで順に設定する画面になるが、最上段の[My Apps]をクリックしてやるとアプリができている
  • 作成したアプリを選んで、Settings > [+ Add Platform] > Website でアプリを登録する
    • Site URLとMobile Site URLの２つが登録できるので、例えば１つはローカルテスト用にhttp://localhost:4567/を登録してやることもできる

Google+

  • Google Developers Consoleで[プロジェクトを生成]で作成
  • APIと認証 > 認証情報 > OAuth > 新しいクライアントIDを作成 で認証用のIDとシークレットキーを取得し、リダイレクトURLを登録できる

関連記事

新着記事