人生100年!生涯エンジニア人生!

楽しいエンジニア人生!

#GWアドベントカレンダー 「1つサービスを作る」の2日目記事 プロフィール画面作成

以下の GWアドベントカレンダー 「1つサービスを作る」の2日目記事です。

gw-advent.9wick.com

まずはプロフィール画面まで作ります。

プロフィール画面作成する

userモデルの変更

次にuserモデルに、Twitterで取得できる情報追加できるようにします。
そのために前に作成したマイグレーションファイルを上書きする。

rails generate migration AddColumnsToUsers uid:string provider:string name:string description:string location:string website:string image:string twitter:string --force
rails db:migrate:reset

app/models/user.rb を書き換える。

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

  def self.from_omniauth(auth)
    where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
      user.provider = auth.provider
      user.uid = auth.uid
      user.email = User.dummy_email(auth)
      user.password = Devise.friendly_token[0, 20]
      user.name = auth.info.name
      user.description = auth.info.description
      user.location = auth.info.location
      user.website = auth.info.urls.Website
      user.image = auth.info.image
      user.twitter = auth.info.urls.Twitter
    end
  end

  private

  def self.dummy_email(auth)
    "#{auth.uid}-#{auth.provider}@example.com"
  end
end

routes追加

config/routes.rb にusersを追加する。

  resources :users

users_controller追加

app/controllers/users_controller.rb を新規に作る。

class UsersController < ApplicationController

  def show
    @user = User.find(params[:id])
  end
end

View追加

app/views/users/show.html.erb を新規に作る。

<%= @user.name %><br/>
<%= @user.description %><br/>
<%= @user.location %><br/>
<%= @user.website %><br/>
<%= @user.image %><br/>
<%= @user.twitter %><br/>

確認する

以下にアクセスする。
http://localhost:3000/users/sign_up

Sign in with Twitterのリンクをクリックするとツイッター認証後、rootに飛んでしまいますが、プロフィール画面につなげるとTwitterから取得した情報が表示できます。

http://localhost:3000/users/1

f:id:hideaki_kawahara:20200501003151p:plain

deviceのリダイレクト先を変更する

こちらはまた今度対応します。