LoginSignup
4

More than 3 years have passed since last update.

Twitterログイン 401 Authorization Required

Last updated at Posted at 2020-05-04

概要

SorceryのExternalを使ってTwitterログイン機能を実装中のエラー解消。
とりあえずこの記事を参考に解消しようとしたけど無理だったのでデバッグしていくことにした。

ブラウザのエラー画面

ログインボタンでOauthsController/oauthへリクエスト、コールバックで401 Authorization Required
Image from Gyazo

ログをみる

log/development.log

Image from Gyazo

うまくリダイレクトできてないようだが原因がわからない

Unpermitted parameters: :oauth_token, :oauth_verifierがあるのでOauthsController/auth_paramsへ追加してみるもエラーは変わらず。

binding.pryで止めてみる

Image from Gyazo

login_from(provider)ここでtrueでもfalseでもnilでもなくエラーが入っている?
最終行にfrom/Users/...consumer.rb:236とあるのでgemの中を見に行く。

consumer.rbでpry

1回目
Twitter側に行く際の挙動?

Image from Gyazo

response 200
response.body oauth_tokenとoauth_token_secretが格納されている

問題なさそうなのでexitで抜ける

2回目
Twitter側で認証処理をする?

Image from Gyazo

response 200
response.body oauth_tokenとoauth_token_secretが格納されている

1回目と全く同じ
exitで抜ける

3回目
アプリ側に戻ってくる(コールバック)時の処理?

Image from Gyazo

response 401 Authorization Required
response.body Error processing your OAuth request: Invalid oauth_verifier parameter

やっと検索できそうなエラーメッセージが出てきたので検索。

Error processing your OAuth request: Invalid oauth_verifier parameter

片っ端から見ていったけどどれもうまくいかない。
コールバック処理っぽい時にエラー出てたのでそこら辺を見ていくことに。

コールバックあたりをごにょごにょ

[Twitter Developerに登録してるコールバックURL]
Image from Gyazo

[アプリケーション側で設定してるコールバックURL]
Image from Gyazo

クエリがついてるかついてないかだけでURLの整合性は取れている。
ここで詰みかける。
他のURLでも試そうと思いngrokなるものを使ってみた。

ngrokでローカル環境を外部に公開

この記事を参考にセットアップする。
一時的にドメインを取得できる?感じのツールだと認識している。

$ brew cask install ngrok
$ ngrok http 3000

ngrok by @inconshreveable                                                                                                                                         (Ctrl+C to quit)

Session Status                online
Session Expires               5 hours, 17 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://377716c9.ngrok.io -> http://localhost:3000
Forwarding                    https://377716c9.ngrok.io -> http://localhost:3000

Twitter Developereを更新
Image from Gyazo

アプリケーションのコールバックURLも更新
Image from Gyazo

サーバー再起動を忘れずに

ctrl + c
$ rails s

http://377716c9.ngrok.ioへアクセス
ログインしてみると・・・成功した!!!!!!!!!!!!
なんで?

解決

2つの違いを比べてみるとコールバックURLが完全一致してるかどうかだけ。
試しにhttp://localhost:3000/ではなくhttp://127.0.0.1:3000/にアクセスしてログインすると成功した。

127.0.0.1はIPアドレスでそのドメインがlocalhostなので同じ意味だろうと高を括っていたのが原因でした。

※ SorceryのGithubだとコールバックURLがhttp://0.0.0.0:3000/oauth/callback?provider=facebookになってるから、この設定でhttp://localhost:3000にアクセスするとエラーでるから気をつけて。

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
4