LoginSignup
0
0

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-07-14

最初に

まだ自分の開発がひと段落していないため、大雑把に書いています。そのうちわかりやすく書き直そうと思うので、ご容赦ください(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で.
  • 自分のようなミスは犯さない.

参考記事&動画

0
0
0

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
  3. You can use dark theme
What you can do with signing up
0
0