SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

ユーザー情報の編集

 ここまでの作業で、Facebookだけでなく、Twitterでも連携してユーザー登録を行うことができるようになりました。ここからは、登録したユーザー情報を編集可能にしていきます。

これから作成するユーザー情報の編集画面
これから作成するユーザー情報の編集画面

氏名の表示

 ユーザー情報を編集可能にする前に、ログイン後のトップページにメールアドレスだけでなく、氏名も表示するようにします。

[リスト 6]app/views/home/index.html.erb
…(中略)…
<div>name: <%= current_user.name %></div>
<div>email: <%= current_user.email %></div>

 これでログインした状態でアクセスするとSNSから取得した氏名が表示されます。

 なお、氏名に入ってくるデータはSNS上で登録されているものに依存します。Userモデルの実装の通り、auth.info.nameでSNSから取得される情報となります。

[リスト 7]app/models/user.rb
…(中略)…
    def find_or_create_for_oauth(auth)
      find_or_create_by!(email: auth.info.email) do |user|
        user.provider = auth.provider
        user.uid = auth.uid
        #user.name = auth.info.name#
…(中略)…

 なお、Facebookの場合、漢字で登録している場合、姓と名が逆さまになって取得されてしまいます。より実践的にするためには、last_name(姓)とfirst_name(名)を取得するなどの工夫が必要である点に注意してください。

ヘッダーにリンクを追加

 以下のコマンドでルーティングを確認するとユーザー情報編集画面へのPrefixはedit_user_registrationであることが確認できます。

bin/rails routes

 ▼

…(中略)…
edit_user_registration GET      /users/edit(.:format)                                                                    users/registrations#edit
…(中略)…

 ログイン時に表示されるヘッダーに、ユーザー情報編集画面へのリンクを追加します。

[リスト 8]app/views/layouts/application.html.erb
…(中略)…
        <% if user_signed_in? %>
          <%= link_to 'logout', destroy_user_session_path, method: :delete %>
          <%= link_to 'edit', edit_user_registration_path %> # 追加
        <% else %>
…(中略)…

 ヘッダー修正後の表示は以下の通りです。

ヘッダー修正後のトップページ
ヘッダー修正後のトップページ

氏名を登録/編集可能にする

 はじめに、氏名(users.name)を登録/編集可能にするためにユーザー情報の登録画面と編集画面のビューをそれぞれ修正します。

[リスト 9]app/views/devise/registrations/new.html.erb
<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name, autofocus: true, autocomplete: "off" %>
  </div>
…(中略)…

 登録画面の表示は以下の通りです。

氏名が追加されたユーザー登録画面
氏名が追加されたユーザー登録画面

 続いて編集画面のビューの修正を行います。

[リスト 10]app/views/devise/registrations/new.html.erb
<h2>Edit <%= resource_name.to_s.humanize %></h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
  <%= devise_error_messages! %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name, autofocus: true, autocomplete: "off" %>
  </div>
…(中略)…

 編集画面の表示は以下の通りです。

氏名が追加されたユーザー情報編集画面
氏名が追加されたユーザー情報編集画面

 次に、氏名(name)の登録/編集を許可するStrong Parametersの設定をコントローラーに追加します。deviseでは、このための設定を行うメソッドが事前にコメントアウトされた状態で用意されています。

[Note]Strong Parameters(ストロングパラメーター)とは

 フォームから送信(POST)されたデータのうち、指定したものだけに限定するための仕組みです。Rails4から組み込まれています。

 対象のコントローラーを以下の通り修正します。

[リスト 11]app/controllers/users/registrations_controller.rb
…(中略)…
class Users::RegistrationsController < Devise::RegistrationsController
  before_action :configure_sign_up_params, only: [:create] # コメントアウトを外す
  before_action :configure_account_update_params, only: [:update] # コメントアウトを外す
…(中略)…
  protected # コメントアウトを外す

  # If you have extra params to permit, append them to the sanitizer.
  def configure_sign_up_params # コメントアウトを外す
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end # コメントアウトを外す

  # If you have extra params to permit, append them to the sanitizer.
  def configure_account_update_params # コメントアウトを外す
    devise_parameter_sanitizer.permit(:account_update, keys: [:name])
  end # コメントアウトを外す
…(中略)…

 configure_sign_up_paramsメソッドのdevise_parameter_sanitizerには認証に使うモデル(ここではUserモデル)のフォームオブジェクトが代入されています。permitの第1引数に登録フローであることを示す:sign_upが指定されています。第2引数の:keysをキーとするハッシュの値には、デフォルトでは[:attribute]が指定されています。この:attributeを更新したい認証用モデルの属性を配列で指定するように変更してください。この場合はnameが対象となるので:nameに書き換えています。

ユーザー情報編集の動作確認

 さて、これでユーザー登録/編集時に氏名(name)を登録または更新することができるようになりました。前述の方法同様、pumaサーバーを起動します。

bin/bundle exec puma -C config/puma.rb

 「https://127.0.0.1:9292」にアクセスしてログイン状態が保たれていなければログイン画面にリダイレクトするので、再度[Sign in with Twitter]リンクをクリックしてください。ログインするとヘッダーに[edit]リンクが表示され、名前(name)とメールアドレス(email)が表示されることが確認できます。

氏名を表示したログイン後のトップページ
氏名を表示したログイン後のトップページ

 [edit]リンクをクリックして氏名を変更してみます。deviseのデフォルトではユーザー情報を何かしら変更する場合パスワードの入力が必要です。SNS認証した後にUserモデルのfind_or_create_for_oauthメソッドで、パスワードを生成してログに出力しています。

[リスト 12]app/models/user.rb
    def find_or_create_for_oauth(auth)
      find_or_create_by!(email: auth.info.email) do |user|
        user.provider = auth.provider
        user.uid = auth.uid
        user.name = auth.info.name
        user.email = auth.info.email
        password = Devise.friendly_token[0, 20]
        logger.debug password # ログ出力箇所
        user.password = password
      end
    end

 編集画面で氏名(Name)をデフォルトの値からここでは「tchikuba」に変更し、log/development.logファイルからパスワードの出力をコピーして[Current password]テキストボックスにパスワードを入力して、[Update]ボタンをクリックします。

 編集に成功すると「Your account has been updated successfully.」というメッセージとともに氏名(name)が更新されていることが画面上からも確認できます。

氏名更新後のトップページ
氏名更新後のトップページ

まとめ

 ここまで、deviseで作成したアプリにOmniAuthを追加してFacebook/Twitter連携機能を実装し動作確認までを行いました。基本的な使い方はここで紹介した通りでよいのですが、例えばFacebookとTwitterで動作を変更するなどカスタマイズするには自分でコードを記述する必要が出てくるので注意が必要です。

 逆にdeviseやOmniAuthが提供するレールに乗れば、かなり簡単にユーザー認証機能やSNS連携機能を実装することができます。

 次回は、ページネーションを実現する定番gem「Kaminari」を紹介する予定です。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
これだけは押さえておきたい! Rails開発で使えるgemパッケージ/ツール連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11019 2018/08/24 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング