RailsアプリでTwitterログインを実装する方法：OmniAuth-Twitter完全ガイド

このチュートリアルでは、RailsアプリケーションのユーザーがTwitterアカウントを使ってログインできるようにする方法を解説します。OAuthなどのツールのおかげで、この実装はとても簡単に行えるようになりました。

今回は、OmniAuth用のTwitterストラテジーを含む「OmniAuth-Twitter」を使用します。

それでは始めましょう!

はじめに:プロジェクトの準備

まずはRailsアプリケーションを生成します。ターミナルで以下のコマンドを実行してください。

rails new Tuts-Social -T

次にGemfileを開き、bootstrap gemを追加します。

#Gemfile
...

gem 'bootstrap-sass'

以下のコマンドでgemをインストールしましょう。

bundle install

app/assets/stylesheets/application.css を app/assets/stylesheets/application.scss にリネームします。

完了したら、Bootstrapを読み込むために以下のコードを追加します。

#app/assets/stylesheets/application.scss
...
@import 'bootstrap-sprockets';
@import 'bootstrap';

ナビゲーションバーの作成

ナビゲーションコードを格納するため、_navigation.html.erb という名前のパーシャルを作成します。パーシャルは app/views/layouts ディレクトリに配置してください。

IDEに以下のコードを入力します。Bootstrapを使用して、アプリケーション用のナビゲーションバーを作成しています。

#app/views/layouts/_navigation.html.erb

<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <%= link_to 'Tuts Social', root_path, class: 'navbar-brand' %>
    </div>
    <div id="navbar">
 
    <ul class="nav navbar-nav pull-right">
      <li><%= link_to 'Home', root_path %></li>
  </ul>
    </div>
  </div>
</nav>

このナビゲーションを実際に使用するには、アプリケーションレイアウト内でレンダリングする必要があります。アプリケーションレイアウトを以下のように修正しましょう。

#app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Tuts Social</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= render "layouts/navigation" %>
    <div id="flash">
      <% flash.each do |key, value| %>
        <div class="flash <%= key %>"><%= value %></div>
      <% end %>
    </div>
    <div class="container-fluid">
      <%= yield %>
    </div>
  </body>
</html>

トップページの作成

次に、indexアクションを持つ PagesController を生成します。ターミナルで以下のコマンドを実行してください。

rails generate controller Pages index

生成されたindexビューを以下のように編集します。

#app/views/pages/index.html.erb 

<div class="jumbotron">
  <h1>Welcome to Tuts Social!</h1>
  <p>Thanks for checking us out!</p>
</div>

上記のコードでは jumbotron というクラスを使用しています。これはBootstrapのコンポーネントで、ビューポートを拡張してマーケティングメッセージを目立たせるのに役立ちます。詳細についてはBootstrap公式ドキュメントをご覧ください。

続いて、ルーティングファイルを開いて root_path を追加します。

#config/routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html

  root to: "pages#index"
end

OmniAuth-Twitterのセットアップ

まず、新しいTwitterアプリケーションを作成する必要があります。Twitterデベロッパーのページにアクセスしてアプリを作成し、必要な情報をすべて入力してください。

RailsアプリでTwitterログインを実装する方法：OmniAuth-Twitter完全ガイド

コールバックURLには、ウェブサイトのアドレスに「auth/twitter/callback」を加えたものを入力します。ローカル環境で開発している場合は、https://127.0.0.1:3000/auth/twitter/callback を指定してください。

登録が完了すると、Twitter上のアプリ情報ページへリダイレクトされます。Keys and Access Tokens(キーとアクセストークン)タブに移動してキーを取得し、Consumer KeyとConsumer Secretをコピーして安全な場所に保管しておきましょう。すぐに使用します。

コールバックURLについて

コールバックURLとは、認証と承認が成功した後に、ユーザーがアプリ内でリダイレクトされるURLのことです(リクエストにはユーザーのデータやトークンも含まれます)。すべてのOmniAuthストラテジーは、コールバックURLが「/auth/:provider/callback」と一致することを想定しています。:provider にはストラテジー名が入ります。今回の場合、イニシャライザで指定する通り、ストラテジーは「twitter」になります。

Gemのインストール

Gemfile を開き、omniauth-twitter gemを追加します。

#Gemfile
...

gem 'omniauth-twitter'

次に、config/initializersディレクトリにOmniAuth用のイニシャライザを作成します。ここにOmniAuthの設定を記述します。以下のようにしましょう。

#config/initializers/omniauth.rb

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :twitter, ENV['TWITTER_KEY'], ENV['TWITTER_SECRET']
end

認証情報の安全な管理(dotenv-rails)

ここで、先ほど安全な場所に保管しておいたキーとアクセストークンが必要になります。これらは機密情報なので、コードをコミットするときに公開リポジトリへプッシュされないよう、適切に管理しなければなりません。

そこで便利なのがdotenv-railsというgemです。Gemfileを開いて以下のように追加しましょう。

#Gemfile

...
group :development, :test do
  ...
  gem 'dotenv-rails'
...

以下のコマンドでgemをインストールします。

bundle install

アプリケーションのホームディレクトリに .env というファイルを作成します。

ファイルを開き、キーとトークンを以下のように追記してください。

#.env

TWITTER_KEY=xxxxxxxxxxxxxx
TWITTER_SECRET=xxxxxxxxxxxxxx

次に .gitignore を開き、先ほど作成したファイルを追加します。

#.gitignore

...
# Ignore .env used for storing keys and access tokens
.env

これで、キーとアクセストークンは安全になりました!dotenv-rails の使い方についてさらに詳しく知りたい場合は、GitHubページを参照してください。

サインインリンクの設置

次にルーティングの作業です。ルーティングファイルを開いて、以下のルートを追加します。

#config/routes.rb

...
  get '/auth/:provider/callback', to: 'sessions#create'

Twitterでのサインイン用リンクをナビゲーションに追加しましょう。ナビゲーションファイルを開いて、以下のように修正します。

<nav class="navbar navbar-default">
    <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Tuts Social</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
    	<ul class="nav navbar-nav navbar-right">
        <li><%= link_to 'Home', root_path %></li>
        <% if current_user %>
          <li>Signed in as <%= current_user.name %></li>
        <% else %>
          <li><%= link_to "Sign in with Twitter", "/auth/twitter" %></li>
        <% end %>
    	</ul>
    </div>
  </div>
</nav>

上記のコードでは、ユーザーが未ログインの場合にのみ、Twitterログインへのリンクが表示されるようになっています。

セッションの作成

ユーザーのログイン処理を扱うためのSessionsControllerが必要です。controllersディレクトリにファイルを作成し、以下のように記述します。

createアクションは、ユーザー向けのセッションを作成し、アプリケーションへのログインを可能にします。これがないと、ユーザーはログインする手段を持ちません。

#app/controllers/sessions_controller.rb

class SessionsController < ApplicationController
  def create
    @user = User.find_or_create_from_auth_hash(auth_hash)
    session[:user_id] = @user.id
    redirect_to root_path
  end

  protected

  def auth_hash
    request.env['omniauth.auth']
  end
end

この時点で、current_user メソッドも必要になります。このメソッドによって、ユーザーがログイン中かどうかを判定できます。

app/controllers/application_controller.rb を開いて、以下のコードを追加してください。

#app/controllers/application_controller.rb

...
  def current_user
    @current_user ||= User.find(session[:user_id]) if session[:user_id]
  end
  helper_method :current_user
...

Userモデルの作成

続いて、Usersモデルを生成します。以下のコマンドを実行してください。

rails generate model User provider:string uid:string name:string token:string secret:string profile_image:string

これにより、以下のようなマイグレーションファイルが生成されます。

#xxxxxx_create_users.rb

class CreateUsers < ActiveRecord::Migration[5.0]
  def change
    create_table :users do |t|
      t.string :provider
      t.string :uid
      t.string :name
      t.string :token
      t.string :secret
      t.string :profile_image

      t.timestamps
    end
  end
end

以下のコマンドでデータベースをマイグレーションしましょう。

rake db:migrate

Userモデルを開いて、以下のように編集します。

#app/models/user.rb

class User < ApplicationRecord
  def self.find_or_create_from_auth_hash(auth_hash)
    user = where(provider: auth_hash.provider, uid: auth_hash.uid).first_or_create
    user.update(
      name: auth_hash.info.nickname,
      profile_image: auth_hash.info.image,
      token: auth_hash.credentials.token,
      secret: auth_hash.credentials.secret
    )
    user
  end
end

上記のコードでは、ユーザーに関する一部の情報を保存しています。具体的には、名前(name)、プロフィール画像(profile_image)、トークン(token)、シークレット(secret)です。アプリケーションでより多くの情報が必要な場合は、OmniAuth-Twitterのページで取得可能なデータを確認してみてください。

セッションの削除(ログアウト)

アプリケーションでは、ユーザーがログアウトできる仕組みも提供したいところです。そのためには、SessionsController に destroy アクションを追加し、ナビゲーションにログアウトリンクを設置します。

SessionsController に destroy アクションを追加しましょう。

#app/controllers/sessions_controller.rb

...
  def destroy
    if current_user
      session.delete(:user_id)
      flash[:success] = "Sucessfully logged out!"
    end
    redirect_to root_path
  end
...

続いて、ログアウト用のリンクをナビゲーションに追加します。最終的なナビゲーションは以下のようになります。

#app/views/layouts/_navigation.html.erb

<nav class="navbar navbar-default">
    <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Tuts Social</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
    	<ul class="nav navbar-nav navbar-right">
        <li><%= link_to 'Home', root_path %></li>
        <% if current_user %>
          <li>Signed in as <%= current_user.name %></li>
          <li><%= link_to 'Log Out', logout_path, method: :delete %></li>
        <% else %>
          <li><%= link_to "Sign in with Twitter", "/auth/twitter" %></li>
        <% end %>
    	</ul>
    </div>
  </div>
</nav>

最後に、config/routes.rbを開いて、作成したアクションに対応するルートを更新します。

#config/routes.rb

...
  delete '/logout', to: 'sessions#destroy'
...

Railsサーバーを起動し、ブラウザで https://localhost:3000 にアクセスして、動作を確認してみてください。

まとめ

このチュートリアルでは、RailsアプリケーションにOmniAuth-Twitterを導入する方法を学びました。UserモデルでOmniAuth-Twitterを使ってユーザーデータを取得する方法や、SessionControllerを作成してユーザーのログイン・ログアウトを処理する方法を確認しました。

今後の記事では、Facebook、Google、LinkedInでも同じようにソーシャルログインを実装する方法を紹介する予定です。お楽しみに!

RailsとCarrierWaveを使ったファイルアップロードの実装ガイド

RailsでClearanceを使った認証機能の実装方法

RubyのStructとOpenStructの使い方を徹底解説！値オブジェクトを簡単に作る方法
Rubyには、関連する属性をまとめて保持する「値オブジェクト」を手軽に作れるStructという組み込みクラスが用意されています。本記事では、Structの基本的な使い方から注意点、そしてOpenStructとの違いまで詳しく解説します。そもそもStructとは何か？ StructはRubyに組み込まれたクラスで、新しいクラスを動的に生成し、値オブジェクト（Value Object）を作成するために使われます。値オブジェクトとは、関連性のある複数の属性をひとまとめにして扱うためのオブジェクトです。具体例を挙げてみましょう。 2つの座標（xとy）を持つPointというデータを表したい場合、この
Androidの「Google Now on Tap」活用ガイド：使い方を徹底解説
Google Now on Tapとは？テクノロジーは日々進化し、私たちの生活をより便利にするためにアップデートが続けられています。せっかくなら、その最新機能について学び、上手に活用してみませんか。Googleは最近、自社アプリに「Google Now on Tap」という新機能を追加しました。この機能では、スマートフォンでの操作内容に関連した情報カードが自動的にポップアップ表示されます。例えば、最寄りの映画館を探しているときには、Google Now on Tapがカード形式で映画館への経路や所要時間を表示してくれます。また、あるバンドを検索すれば、そのバンドのアルバム情報や今後のライブ予定