Twitterログイン 401 Authorization Required

# 概要

SorceryのExternalを使ってTwitterログイン機能を実装中のエラー解消。
とりあえず[この記事](https://qiita.com/hirokishirai/items/5a43977a38ecd922bfb9)を参考に解消しようとしたけど無理だったのでデバッグしていくことにした。

### ブラウザのエラー画面
ログインボタンで`OauthsController/oauth`へリクエスト、コールバックで`401 Authorization Required`
[![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/d0fca72ddd037a7845399ddd6ae21108.png)](https://startup-technology.gyazo.com/d0fca72ddd037a7845399ddd6ae21108)

### ログをみる
**log/development.log**

[![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/5cd6e2a7c44074d07bd59e32b06169ca.png)](https://startup-technology.gyazo.com/5cd6e2a7c44074d07bd59e32b06169ca)

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

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

### binding.pryで止めてみる

[![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/9476e5e489b85918f6166990b3169906.png)](https://startup-technology.gyazo.com/9476e5e489b85918f6166990b3169906)

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

### consumer.rbでpry

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

[![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/891c3828023ccd812cff794bfd64d322.png)](https://startup-technology.gyazo.com/891c3828023ccd812cff794bfd64d322)

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

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

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

[![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/891c3828023ccd812cff794bfd64d322.png)](https://startup-technology.gyazo.com/891c3828023ccd812cff794bfd64d322)

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

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

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

[![Image from Gyazo](https://t.gyazo.com/teams/startup-technology/52209423356f964d014f9ae1e84a7581.png)](https://startup-technology.gyazo.com/52209423356f964d014f9ae1e84a7581)

`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](https://i.gyazo.com/00f519459f4120f6c79e04b4951bc175.png)](https://gyazo.com/00f519459f4120f6c79e04b4951bc175)

[アプリケーション側で設定してるコールバックURL]
[![Image from Gyazo](https://i.gyazo.com/964e3c4b92958879da8be657e4d9a4e0.png)](https://gyazo.com/964e3c4b92958879da8be657e4d9a4e0)

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

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

[この記事](https://qiita.com/kitaro0729/items/44214f9f81d3ebda58bd)を参考にセットアップする。
一時的にドメインを取得できる？感じのツールだと認識している。

```
$ 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](https://i.gyazo.com/1ce486992ff33d7a9367859bd9c3cccd.png)](https://gyazo.com/1ce486992ff33d7a9367859bd9c3cccd)

アプリケーションのコールバックURLも更新
[![Image from Gyazo](https://i.gyazo.com/55f5cfd97fda963c1caae2913d61bc68.png)](https://gyazo.com/55f5cfd97fda963c1caae2913d61bc68)

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

```
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`にアクセスするとエラーでるから気をつけて。