Twitter でログインする

2 年前ぐらいに Twitter の developer アカウントの申請をしていたのですが、長いこと放置していました。
(2 年前何をしようとして申し込んだのかはもう完全に忘れました。)

今回は、Twitter アカウントでのログインを試してみます。

目次

参考

前提

devise を使用して User モデルのログインができている前提です。

実装

omniauth を導入する

それでは、github 認証を行うにあたって必要な gem omniauth を導入してみます。
以下を Gemfile に追記します。

Genfile
1
2
gem 'omniauth'
gem 'omniauth-twitter', :github => 'arunagw/omniauth-twitter'

config/initializers/devise.rbに以下の記述をします。

config/initializers/devise.rb
1
2
3
4
5
6
7
8
Devise.setup do |config|
# 省略

# 控えておいたAPI KeyとAPI secret key を設定します。
config.omniauth :twitter, "API Key", "API secret key", scope: 'user,public_repo'

# 省略
end

続けてマイグレーションファイルを作成し、反映させます。

マイグレーションファイル
1
2
3
4
5
6
class AddColumnsToUsers < ActiveRecord::Migration[5.2]
def change
add_column :users, :provider, :string
add_column :users, :uid, :string
end
end

app/models/user.rb を以下のように編集します。

app/models/user.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class User < ApplicationRecord
# :omniauthable を追加します
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :validatable, :omniauthable

# providerとuidでuserを検索できるようにします
def self.find_for_twitter(auth)
user = User.find_or_create_by(provider: auth.provider, uid: auth.uid)

return user unless user.new_record?

user.uid = auth.uid
user.email = "#{auth.uid}-#{auth.provider}@fromtwitter.com"
user.password = Devise.friendly_token[0, 20]

user.save
user

end
end

続いて twitter 認証後に実行されるコールバック処理を作成します。
app/controllers/omniauth_collbacks_contoroller.rb を以下の通り作成します。

app/controllers/users/omniauth_collbacks_contoroller.rb
1
2
3
4
5
6
7
8
9
10
11
12
class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
def twitter
@user = User.find_for_twitter(request.env['omniauth.auth'])

if @user.persisted?
sign_in_and_redirect @user, event: :authentication
else
session["devise.twitter_data"] = request.env["omniauth.auth"]
redirect_to new_user_registration_url
end
end
end

作成したコールバック処理に転送されるように以下のようにルーティングを設定します。

config/routes.rb
1
2
3
4
5
6
7
Rails.application.routes.draw do
devise_for :users, :controllers => {
:omniauth_callbacks => "users/omniauth_callbacks"
}
get 'logind', to: 'logind#index'
root to: "home#index"
end

twitter 認証確認

用意ができたのでアプリケーションを起動し、http://localhost:3000/users/sign_in にアクセスします。


「Sign in with Twitter」をクリックします。

アクセス権の付与をチェックされるので、許可します。
するとリダイレクトされ、ログインが完了します。

github - arunagw/omniauth-twitterには、request.env['omniauth.auth']について詳細な情報があります。

こちらを見ると、アイコン画像の URL や色の設定まで取得できます。
Twitter の関連サービスみたいなものを作っていくときにこのあたりのデザインを合わせられると非常に強みになると感じます。


今回は twitter の認証でログインを実装してみました。
やっていて、そういえば前に github の認証をやってたことを思い出して、前に書いた記事が役に立ちました。

もう、11 月になりました。
寒くはなってきましたが、体調を崩さずやっていきたいところです。

ではでは。