Railsでomniauth-twitterを利用してTwitter認証を実装する

投稿者: | 2019年2月8日

こんにちは。

GMOアドマーケティングのR.Sです。

 

今回は、前回のブログ「新しいRailsプロジェクトを作成してdeviseを実装する」のメールアドレスでのログイン機能に引き続き、「omniauth-twitter」を利用したTwitterログイン機能をプラスする手順を紹介します。

前回の続きとして扱うので、deviseによる認証が既に実装されている前提で進めていきます。

 

動作環境

  • Rails 5.2.2
  • devise 4.5.0
  • oauth 0.5.4
  • omniauth 1.8.1
  • omniauth-oauth 1.1.0
  • omniauth-twitter 1.4.0

 

Gemのインストール

Gemfileに利用するgemを記載します。

$ bundle installを実行してgemをインストールします。

 

Userモデルに必要なカラムを追加

Userモデルにツイッターログイン用のカラムを追加します。

追加するのは

  • ツイッターログインということを保存する provider
  • ユーザー毎に異なる uid
  • ツイッターのIDを保存する username

の3つです。自由に変更しても大丈夫です。

$ bundle exec rails g migration AddColumnsToUsers provider:string uid:string username:string

と、実行してマイグレーションファイルを生成します。

作成されたマイグレーションファイルを編集して、uidとproviderの組み合わせでユーザーが一意に定まるようにUNIQUEインデックスを設定します。

編集したらマイグレーションを実行します。

$ bundle exec rake db:migrate

これでカラムが追加され、モデルの準備が整いました。

 

Twitter Application Managementの準備

次はTwitter側の準備です。アカウントにログインして、Twitter Application Managementでアプリケーションを作成します。

(新しくアプリケーションを作成するには、デベロッパーアカウントの申請が必要です。)

作成できたら、「Details」からアプリケーションの設定をします。

右上の「Edit」を押して、項目に従って設定してください。(Required)と書いてある項目は必須となっていますが、後から変更可能なので深く考えなくても大丈夫です。

  • ポイント1

Allow this application to be used to sign in with Twitter という項目の「Enable Sign in with Twitter」にチェックを入れてログインを許可する

  • ポイント2

CallbackURLは以下の2つを設定する

http://localhost:3000/users/auth/twitter/callback

http://localhost:3000/users/omniauth_callbacks

上段は $ bundle exec rake routesコマンドで user_twitter_omniouth_callbacks のルーティングを確認したものです。

下段は後ほどつくるコールバック用コントローラーのURLです。

両方とも、usersの部分はルーティングに合わせて変更してください。

設定が完了したらSaveボタンを押して、設定完了です。

 

APIキーの準備

Twitter Application ManagementのKeys and Tokensタブでは、APIキーを確認できます。

キーを確認したら、config/initializers/devise.rb を編集してキーを追記します。

シークレットキーはGitHubなどに公開しないように注意が必要です。

また、開発環境と本番環境を分ける場合は、dotenvというgemを使ってファイルを分けるのが良いと思います。

(たくさんの説明がコメントアウトしてあるので、それを翻訳するとなんとなくdeviseのことがわかった気持ちになれます。)

 

Userモデルの編集

モジュールを追加

omniauth用のモジュール「omniauthable」を追加します。

 

findメソッドを追加

uidとproviderはUNIQUEインデックスを設定したため、組み合わせは一意です。

それを利用してログインしようとしているユーザーを取得します。探した組み合わせが存在しない場合はレコードを作成します。

 

ダミーのメールアドレスを用意

deviseでのログインにはメールアドレスが必須なので、ツイッターでのログインもメールアドレスを保存する必要があります。

ダミーのアドレスを用意して、それを保存します。

 

編集後は以下の通りです。

findメソッド内のauth.info.nicknameauth["info"]["nickname"]としても大丈夫です。

 

Userコントローラにコールバック処理を実装する

まずは以下を実行します。

$ bundle exec rails g controller omniauth_callbacks

作成されたomniauth_callbacks_controller.rb というファイルを下記のように編集します。

編集する前はApplicationControllerを継承していますがOmniauthCallbacksControllerを継承するように変更することに注意です。

omniauth.authという変数に入っている情報を元にユーザーが登録されているか判別して、登録されていたらログインする、登録されていない場合は登録ページに遷移するようにします。

 

ルーティングの設定

deviseを実装したときに設定されていたルーティングを、先ほど設定したOAuthのコールバック用のルーティングに変更します。

これでツイッターログインの準備が整いました!

 

サーバーを起動して、localhostに接続、

ログイン画面に遷移後、「Sign in with twitter」を押すとログイン出来ます!

 

これでツイッターログインの実装の紹介は終わりです。

deviseのときと同様、割と簡単にログイン機能が実装できるし、とても自由度が高いところが良いと思いました。

ツイッターIDだけでなくプロフィール画像や説明欄の内容なども簡単に取得できます。

詳しくはomniauth-twitterのAuthentication Hashのところに書いてあるので見てみてください。

 

(しかし、gemの相性もあるのか、ハマったポイントもあったので以下に書いておきます。)

 

ハマりポイント

前回と今回のブログでは、deviseを実装後、omniauth-twitterを実装という順番で紹介しました。

逆の順番で実装しようとしていた時にハマりポイントがあったので紹介します。

user_signed_in? などのヘルパーメソッドが常にfalseを返す

アプリケーションコントローラを確認してください。

deviseの実装前にログイン機能を実装していると、current_userというメソッドを自身で用意していることが多いと思います。その場合、deviseの実装時に用意されたcurrent_userが機能しないため、current_userを利用したメソッドが常にfalseを返すようになります。

自身で用意した方のメソッド名を変えるか、削除することで解決できます!

 

invalid_credentialsというエラーが出る

config/initializers/omniauth.rb の中身はいじらない。

deviseを使わずにomniauth-twitterを実装するときは書き込むことがありますが、deviseではそれを推奨していません。

deviseの公式ドキュメントのWikiOmniAuth:Overviewの部分に記載があります。

 

以上、ハマりポイントでした。公式ドキュメント読むのが最も大切だと感じました。

カテゴリー: Ruby