Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/08/24 14:00

 前回まで、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アプリケーションの作成
Twitterアプリケーションの作成

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

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

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

Settingsの更新
Settingsの更新

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

Permissionsの更新
Permissionsの更新

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

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

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 竹馬 力(チクバ ツトム)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:これだけは押さえておきたい! Rails開発で使えるgemパッケージ/ツール
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5