SNS認証用リンクのビュー
Twitter連携を実装する前に、現時点でログイン画面にアクセスすると既にTwitter連携用の［Sign in with Twitter］リンクが表示されている箇所の処理を確認しておきます。
まずログイン画面に対応するビューを確認します。
…（中略）… <%= render "devise/shared/links" %>
ファイルの末尾に定義されている通り、パーシャルによって切り出されていることが分かります。続いて該当ファイルを確認します。
…（中略）…
<%- 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の定義部分を再掲しておきます。
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］ボタンをクリックするとアプリケーションの作成画面に遷移します。ここでは以下の通り入力しました。
このままだとFacebook同様、メールアドレスを取得することができないので、追加の設定を行います。登録完了後、［Settings］タブをクリックして［Privacy Policy URL］［Terms of Service URL］テキストボックスに任意のURLを入力して［Update Settings］ボタンをクリックします。
なお、これらの設定項目は、そのサイトのプライバシーポリシーと利用規約が記述されたURLです。メールアドレスは個人情報にあたるので、本番運用時にはその取り扱いに関するサイトの取り決めが記述されたページを別途用意する必要があります。
ここでは本番公開しないサンプルアプリなので任意のURLで埋める対応で問題ありません。以下の通り入力しました。
続いて［Permissions］タブをクリックし「Additional Permissions」にある［Request email addresses from users］チェックボックスをクリックしてチェックをONにした状態で［Update Settings］ボタンをクリックします。
［Keys and Access Tokens］タブをクリックし「Application Settings」に記載されている「Consumer Key (API Key)」の値と「Consumer Secret (API Secret)」の値をメモしておきます。
これで一通り必要なTwitterアプリの設定は完了です。
