2018年10月30日火曜日

Twitter の OAuth を使ってログイン機能を作ってみた

概要
環境
Twitter アプリの作成
ライブラリインストール
サンプルアプリ
- 説明
動作確認
最後に

概要

Twitter の OAuth 機能を使って Web アプリにログイン機能を付けてみました
アプリは Sinatra で作成します

環境

macOS 10.14
Ruby 2.5.1p57
- oauth 0.5.4
- twitter 6.2.0

Twitter アプリの作成

https://developer.twitter.com/en/apps から作成します
アプリを作成するのにいろいろと情報を登録しなければいけなくなったので頑張って登録します
App Details はこんな感じです
ポイントはコールバック用の URL で http://localhost:9292/redirect に設定しあとでアプリ側で実装します

Permissions は Read and Write にしました
ログインだけであれば Read だけで OK です

アプリを作成したら Keys and tokens から Consumer API Keys の API key と API secret key をメモしておきます

ライブラリインストール

bundle init
vim Gemfile

gem "oauth"
gem "sinatra"
gem "twitter"

bundle install --path vendor

oauth でログインしたあとに Twitter API をコールするためのアクセストークンを使って API をコールします

サンプルアプリ

vim config.ru

require './app'
run TwitterOAuth

vim app.rb

require 'sinatra'
require 'oauth'
require 'twitter'

class TwitterOAuth < Sinatra::Base
  TWITTER_API_KEY = 'api-key'
  TWITTER_API_SECRET = 'api-secret'
  TWITTER_CALLBACK = 'http://localhost:9292/redirect'

  enable :sessions

  helpers do
    def oauth
      OAuth::Consumer.new(
        TWITTER_API_KEY,
        TWITTER_API_SECRET,
        :site => 'https://api.twitter.com',
        :schema => :header,
        :method => :post,
        :request_token_path => '/oauth/request_token',
        :access_token_path => '/oauth/access_token',
        :authorize_path => '/oauth/authorize'
      )
    end
  end

  get '/' do
    request_token = oauth.get_request_token(:oauth_callback => TWITTER_CALLBACK)
    session[:token] = request_token.token
    session[:secret] = request_token.secret
    redirect request_token.authorize_url
  end

  get '/redirect' do
    oauth_client = oauth
    request_token = OAuth::RequestToken.new(oauth_client, session[:token], session[:secret])
    access_token = oauth_client.get_access_token(request_token, :oauth_verifier => params[:oauth_verifier])
    # access_token.params['screen_name']
    twitter_client = Twitter::REST::Client.new do |config|
      config.consumer_key = TWITTER_API_KEY
      config.consumer_secret = TWITTER_API_SECRET
      config.access_token = access_token.token
      config.access_token_secret = access_token.secret
    end
    "Logged in #{twitter_client.user.name}"
  end
end

説明

まず / にアクセスすると oauth.get_request_token を使ってログイン認証用の URL を取得し認証画面にリダイレクトされます

そこで Twitter 認証すると /redirect に飛ばされ認証時に渡される :oauth_verifier を使って oauth_client.get_access_token でトークンを取得します
あとは Twitter API のクライアントを使ってユーザ情報を取得しています

動作確認

ログインしていないと初めは認証画面が表示されます
認証に成功するとアプリからのアクセスを許可するか確認する画面になるので許可します

あとは localhost に戻ってきて Twitter API がコールされユーザ名がブラウザに表示されると思います

最後に

Twitter の OAuth を使って Web アプリのログイン機能を実装してみました
今回は oauth というライブラリを使いましたが Twitter の場合、使えるライブラリは他にもいろいろあるようです (omniauth-twitter, Twitter ライブラリを使ってもできるようです)
この辺りは環境に合わせて好きなものを選択すれば良いと思います

Twitter の場合アクセストークンにシークレットもあるのが他の OAuth と少し違うところかなと思います
また権限も API 単位というわけではなく大雑把に Read or Write という感じで設定するのも他と異なる点かなと思います

hawksnowlog