omniauth-twitter を使う

sinatra

omniauth-twitter がやってくれること

  • /auth/twitter で認証しにいく
  • 成功なら /auth/twitter/callback に戻ってくる
  • 失敗なら /auth/failure に戻ってくる

具体的には、

use OmniAuth::Builder　すると、get /auth/twitter のルーティングを拾い、api.twitter.com やユーザとのやりとりの後、認証できれば /auth/twitter/callback、失敗すれば /auth/failure に帰ってきます。ユーザ情報その他は env['omniauth.auth'] に入ってます。いろいろ入っていますが、

  • provider: "twitter"
  • uid: "1000xxxxxxxxxx"
  • credentials
    • secret: "xxxx"
    • token: "xxxx"
  • info
    • name: "ataru_kodaka"
    • nickname: "小高　あたる"

などが重要なところかと。たとえば、token = env['omniauth.auth'].credentials.token で取れます。

こちらがやることは、

  • twitter でログイン などのリンクをはる
  • get '/auth/twitter/callback' で env['omniauth.auth'] からid, name, token, secret などを拾う
  • /auth/failure で認証失敗処理

をやればいいですね。

サンプルコード

require 'sinatra/base'
require 'sinatra/reloader'

require 'omniauth'
require 'omniauth-twitter'

module TwitterAuth
  class Application < Sinatra::Base
    configure do
      register Sinatra::Reloader
      enable :sessions
    end

    helpers do
      include ERB::Util
      enable :inline_templates
    end

    consumer_key = "key"
    consumer_secret = "sekret"
    
    use OmniAuth::Builder do
      provider :twitter, consumer_key, consumer_secret
    end  

    ################
    get '/' do
      erb "hello world"
    end

    get '/auth/twitter/callback' do
      auth = env['omniauth.auth']
      erb auth.inspect
    end

    get '/auth/failure' do
      erb "login failed"
    end
  end
end
__END__
@@layout
<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
  <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="navbar navbar-default">
    <ul class="nav navbar-nav">
      <li>
        <a href="/">top</a>
      <li>
        <a href="/auth/twitter">login</a>
    </ul>
  </div>
  <div class="container">
    <div class="panel panel-primary">
      <div class="panel-heading">title</div>
      <div class="panel-body">
        something here
        <%= yield %>
        <hr>
        <%= env['omniauth.auth'].inspect %>
      </div>
    </div>
  </div>
</body>
</html>