LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

Rails Twitter認証備忘録(2021年7月)

最初に

まだ自分の開発がひと段落していないため、大雑把に書いています。そのうちわかりやすく書き直そうと思うので、ご容赦ください(m_ _m)

TwitterAPI callback urls

今回はlocalで設定
sshot 2 22.08.51.png

gem

gem 'omniauth-twitter'
gem "omniauth-rails_csrf_protection" #脆弱性対策のためのgemらしい

omniauth.rb

initializers配下に置きます。自分は恥ずかしながらconfig配下において一日無駄にしました:sob:
どこをいじってもうまくいかないはずです:sob:
皆さんは自分のようなミスを犯さないように気をつけましょう。

#config/initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
    provider :twitter, 'api_key', 'api_secret_key', callback_url: "http://127.0.0.1:3000/auth/twitter/callback"
end

urlに遷移!

getだといけないみたいなのでpostのためのbuttonを好きな場所に設置

<%= button_to "Connect to Twitter" , "/auth/twitter", method: :post %>

twitterぽい画面が表示されてからこんなエラーが出たらOK
sshot.png

Rails APIの場合

追加でやること

  • 念の為CORS設定
  • OauthのSessionをignoreする記述追加
  • buttonを作る(おまけ)

CORS設定

正直関係ない気がするけどやっていく

Gemfileの29行目あたりをコメントイン

gem 'rack-cors'

bundleして,

cors.rbのコメントアウトを外す

#config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '通信する予定のフロントのurl'#例 'http://localhost:3000'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

OauthのSessionをignore

これを追記しないとエラーが出るので以下を追加

#config/application.rb
config.session_store :cookie_store, key: '_interslice_session'
config.middleware.use ActionDispatch::Cookies # Required for all session management
config.middleware.use ActionDispatch::Session::CookieStore, config.session_options

参考

POSTのボタン作成

知識が浅いので、curlコマンドやpostman使ってもエラーが出るだけでフロントにPOSTボタンが欲しい。でも、まだフロント側を開発してない、だからAPIモードでもviewが欲しいって時に自分はこうしましました。

なんでもいいのでコントローラを作る

rails g controller test
#app/controllers/test_controller.rb
class TestController < ActionController::Base #ActionController::Baseに変更する
   def index
   end
end

viewが作成されてないので自分で作ります。

mkdir app/views/test
touch app/views/test/index.html.erb
#app/views/test/index.html.erb
<%= button_to "Connect to Twitter" , "/auth/twitter", method: :post %>

最後にrouteingを設定して完了

root to: "test#index"

これで問題なくボタンが表示されるはずです!
http://localhost:3000/

今回のポイント

  • 脆弱性対策のためのgem、 omniauth-rails_csrf_protection を追記する
  • リクエストはpostで.
  • 自分のようなミスは犯さない.

参考記事&動画

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0