AWS Cloud9でTwitter認証(omniauth)ログインをテストした際にハマった点と解決方法

ども。引き続きRuby on Railsで遊んでるのですが、今回はTwitter認証によるログインでハマった点と、その解決策について書いていきます。

そもそもTwitter認証とは

Webサービスにログインするときに、昔はメールアドレス＆パスワードを入力してログインしてましたが、昨今はTwitterやFacebook経由でログインできるアレです。

Twitterの場合、↓のような画面を経由してログインできます。サービス利用者側はいちいちメルアドとパスワード入れなくてもログインできて楽というものがありますが、作る側としてはメルアドみたいな個人情報を保持しとかなくても良いっていうのは結構メリット大きいなと感じてます。
f:id:gattsu09:20180627225027p:plain

Ruby on Railsでの設定方法

2018年6月27日現在、以下Qiita様の記事の通り設定すれば後述するエラーが発生した箇所以外はうまく行きました。感謝。
qiita.com

ハマった箇所

そんで、先述したQiita様の記事に従い設定し、いざTwitterログインのリンクをクリックしたところ、以下エラーが発生しました。

調べたところ、Twitter開発用のページでアプリ登録を行う際に設定する際のコールバック用URLが誤っているときに出るエラーの模様。

403 Forbidden
Extracted source (around line #236):
             
    self.token_request(http_method, uri.path, token, request_options, arguments)
  when (400..499)
    raise OAuth::Unauthorized, response
  else
    response.error!
  end

解決方法

元記事では、ローカルで動かす場合はWebsite、及びCallbackには「172.0.0.1:3000」と書く必要があるとの記載があり、この通りに設定していました。が、これが良くなかった模様。（まぁ、後から考えてみればローカル環境ではないので、あたりまえなのですが…）

https://apps.twitter.com/app/new で設定をする。ローカルで動かすときのためにWebsiteにはhttp://localhost:3000 ではなく、http://127.0.0.1:3000 と書かないとうまく行きません。
あと、Callback URLはhttp://127.0.0.1:3000/auth/twitter/callback にしておく。
ここで取得できるAPI KeyとAPI Secretは後々使うのでメモしておく。

具体的には、「http://localhost:3000」の部分をCloud9のプレビュー画面に表示されるURLに置き換えて設定すればTwitter認証ログインに成功しました。

・以下赤枠部分をコピーし、
f:id:gattsu09:20180627231806p:plain