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

gw-advent.9wick.com

まずはツイッターログインまで作ります。

Rubyを使う

Rubyのバージョンを選んでインストールする。
※2.7以上は色々有るので、2.6系の最新版2.6.6 にする。

1. 一応rbenvをアップデートする。
2. インストールできるバージョンの確認をする
3. 2.6.6をインストールする。
4. 2.6.6 に設定する。
5. バージョンを確認する。

brew upgrade rbenvrbenv install -listrbenv install 2.6.6rbenv global 2.6.6$ ruby -v

ruby 2.6.6p146 (2020-03-31 revision 67876)

railsを選ぶ

gem をアップデートする。

gem update --systemgem -v

今のところ最新版は3.1.2 のようです。

次にRailsのバージョンを選んでインストールする。
インストール可能なrailsを確認する。

gem list ^rails$ -r -a

今のところ最新版は6.0.2.2 のようです。
rails (6.0.2.2, 6.0.2.1, 6.0.2, 6.0.1, 6.0.0, 5.2.4.2,

gem install rails -v 6.0.2.2rails -v

最新版Rails 6.0.2.2 が入りました。

rails起動まで

新規にプロジェクトを作り、とりあえず起動するまでやる。

rails new profile_cardcd profile_cardrails db:migraterails server

起動した。

=> Booting Puma=> Rails 6.0.2.2 application starting in development=> Run `rails server --help` for more startup optionsPuma starting in single mode...* Version 4.3.3 (ruby 2.6.6-p146), codename: Mysterious Traveller* Min threads: 5, max threads: 5* Environment: development* Listening on tcp://[::1]:3000* Listening on tcp://127.0.0.1:3000Use Ctrl-C to stop

ツイッターログインする

※Twitter Developerは登録済みです。

Gemを入れる

Gemfile に以下の1つを追加する。

gem 'devise'

Gemをインストールする。

bundle install

devise関連の設定をする

rails generate devise:install

だらだらとメッセージが出てきます。

Running via Spring preloader in process 3607      create  config/initializers/devise.rb      create  config/locales/devise.en.yml===============================================================================

とりあえず無視します。（雑やな・・・）
先にユーザーモデルを作ってしまいます。

rails generate devise userrake db:migraterails server

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

ログイン画面が出ました。

omniauth-twitterなどの追加

Gemfile に以下を追加する。

gem 'omniauth-twitter'

追加したらGemをインストールする。

bundle install

userモデルの変更

次にuserモデルに、OmniAuthで必要なuidとproviderを追加します。

rails generate migration AddColumnsToUsers uid:string provider:stringrake db:migrate

devise.rbの変更

config.omniauth のところにツイッターログインの情報を書き込みます。
'API KEY'と 'API SECRET'はTwitter Developerの情報を書き入れます。

config/initializers/devise.rb

  config.omniauth :twitter, 'API KEY', 'API SECRET', callback_url: "http://127.0.0.1:3000/users/auth/twitter/callback"

userモデルの変更

Userモデルの対応はstackoverflowを参考に対応する。
stackoverflow.com

app/models/user.rb

devce に, :omniauthable を追加して、first_or_create でユーザーが存在するときにユーザーを返して、そうでないときはユーザー作成するようにします。

  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]    end  end  private  def self.dummy_email(auth)    "#{auth.uid}-#{auth.provider}@example.com"  end

routesの設定

devise_for にコールバック先を教える記述をします。
config/routes.rb を編集します。

  devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' }

コールバックの作成

mkdir -p app/controllers/users/ でディレクトリを作成してから、 app/controllers/users/omniauth_callbacks_controller.rb を編集します。

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController  def twitter    @user = User.from_omniauth(request.env["omniauth.auth"])    if @user.persisted?      sign_in_and_redirect @user, event: :authentication #this will throw if @user is not activated      set_flash_message(:notice, :success, kind: "Twitter") if is_navigational_format?    else      session["devise.twitter_data"] = request.env["omniauth.auth"].except("extra")      redirect_to new_user_registration_url    end  end  def failure    redirect_to root_path  endend

参考qiita.com

データベースに入るか確認

サーバーを起動します。

rails server

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

Sign in withTwitterのリンクをクリックするとツイッター認証後、home画面無いというエラーで終わりますが、認証はできています。
データベースに情報が入っているか確認します。

sqlite3 db/development.sqlite3select * from users;

データーが入りました。

omniauthの脆弱性対応

Gemfile に以下を追加する。

gem 'omniauth-rails_csrf_protection'

追加したらGemをインストールする。

bundle install

Viewを編集できるようする。

rails generate devise:views users

config/initializers/devise.rb

# config.scoped_views = false をconfig.scoped_views = trueに変更する。

vim app/views/users/shared/_links.html.erb<%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider) %><br />を<%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), method: :post %><br />に変更する。

次の記事はこちらです。
kawahara-ci.hatenablog.com