Railsの定番gem「devise」「OmniAuth」で、Twitter連携を実装しよう

これだけは押さえておきたい！ Rails開発で使えるgemパッケージ／ツール 第4回

　前回まで、OmniAuthが提供する機能の概要を確認するとともに、実際にdeviseと連携して、RailsアプリにFacebook連携機能を実装し、動作確認を行いました。また、dotenv-railsを導入して環境変数を.envに定義して使えることも確認しました。今回は、引き続きTwitter連携の機能を実装しながら、ユーザー情報を編集できるようにしていきます。

SNS認証用リンクのビュー

　Twitter連携を実装する前に、現時点でログイン画面にアクセスすると既にTwitter連携用の［Sign in with Twitter］リンクが表示されている箇所の処理を確認しておきます。

ログイン画面

　まずログイン画面に対応するビューを確認します。

［リスト 1］app/views/devise/sessions/new.html.erb

…（中略）…
<%= render "devise/shared/links" %>

　ファイルの末尾に定義されている通り、パーシャルによって切り出されていることが分かります。続いて該当ファイルを確認します。

［リスト 2］app/views/devise/shared/_links.html.erb

…（中略）…
<%- if devise_mapping.omniauthable? %>
  <%- resource_class.omniauth_providers.each do |provider| %>
    <%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider) %><br />
  <% end -%>
<% end -%>

　パーシャル末尾のブロックの1行目では、Omniauthableモジュールが有効になっているかどうかを判定しています。具体的には、UserモデルでDSLのdeviseに:omniauthableが定義されているかどうかを確認します。既にFacebook連携時の対応で有効にしているため、ここではtrueが返ります。

　2行目以降のeachブロックで、Userモデルのomniauth_providersに指定されたSNS連携の対象メディアごとにループして［Sign in with［メディア名］］リンクを生成しています。以下、Userモデル冒頭のdeviseの定義部分を再掲しておきます。

［リスト 3］app/models/user.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable,
         :omniauthable, omniauth_providers: [:twitter, :facebook]

　なお、現時点で［Sign in with Twitter］リンクをクリックすると、「Not found. Authentication passthru.」とエラーメッセージが表示されます。これを解消するには、Facebook連携でconfig/initializers/devise.rbにアプリID／シークレットキーを設定したように、Twitterでも同様の設定を行う必要があります。

Twitter開発者サイト上でアプリを追加

　Twitter連携をできるようにするため、Twitter Application Managementからアプリを追加します。Twitterにログインして開発者サイトにアクセスし、右上の［Create New App］ボタンをクリックするとアプリケーションの作成画面に遷移します。ここでは以下の通り入力しました。

Twitterアプリケーションの作成

　このままだとFacebook同様、メールアドレスを取得することができないので、追加の設定を行います。登録完了後、［Settings］タブをクリックして［Privacy Policy URL］［Terms of Service URL］テキストボックスに任意のURLを入力して［Update Settings］ボタンをクリックします。

　なお、これらの設定項目は、そのサイトのプライバシーポリシーと利用規約が記述されたURLです。メールアドレスは個人情報にあたるので、本番運用時にはその取り扱いに関するサイトの取り決めが記述されたページを別途用意する必要があります。

　ここでは本番公開しないサンプルアプリなので任意のURLで埋める対応で問題ありません。以下の通り入力しました。

Settingsの更新

　続いて［Permissions］タブをクリックし「Additional Permissions」にある［Request email addresses from users］チェックボックスをクリックしてチェックをONにした状態で［Update Settings］ボタンをクリックします。

Permissionsの更新

　［Keys and Access Tokens］タブをクリックし「Application Settings」に記載されている「Consumer Key (API Key)」の値と「Consumer Secret (API Secret)」の値をメモしておきます。

APIキー／シークレットをメモ

　これで一通り必要なTwitterアプリの設定は完了です。