追記⚠️（2018/08/05）
正直ngrokを毎回通すの面倒だなと思っていたら 素晴らしい記事を見つけました。
私もこれからpumaでは↓の方法でやるつもりです。
Rails5 + pumaのローカル環境でSSL/HTTPSを有効にする
SSL証明書とは何かなど、もっと勉強しなければですね😅
追記終わり
結論だけ知りたい方へ
- ngrokを使うとlocalhostで動くものを外部に公開できます。
- しかもhttpsのURLがランダムで付与されるので、実質的にhttps通信によるFacebookログインが可能になります。
Macの場合以下でインストール可能
$ brew cask install ngrok
実行は、以下。
$ ngrok http 3000
この3000はportナンバーなので適宜変更が必要です。
Facebookの管理画面の項目をngrokで得たURLに合わせて修正します。
背景
Facebookログインにhttps通信が必須となりました。
通常の開発環境でのlocalhostではhttp通信ですので、Facebookログインが実装できません。
Facebookのデベロッパー管理画面
以下の「HTTPSを強制」のところを「いいえ」にできなくなっています。
また、「有効なOAuthリダイレクトURI」をしっかりと指定しなければエラーします。
ngrokを使用
ngrokとは
localhostで動くものを外部に公開できます。
ネット上には有料・無料の情報が両方ありますが、バージョンの違いによるものです。
実際に使ったところバージョン１系はまだ無料のようです。
ngrokのインストール
Macの場合以下でインストール可能
$ brew cask install ngrok
ngrok実行
$ ngrok http 3000
3000は今回localhostで使用しているポート番号。
環境ごとに変更する必要があります。
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Session Expires 2 hours, 28 minutes
Version 2.2.8
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://80149e9e.ngrok.io -> localhost:3000
Forwarding https://80149e9e.ngrok.io -> localhost:3000
Connections ttl opn rt1 rt5 p50 p90
24 0 0.00 0.00 20.81 37.58
HTTP Requests
-------------
GET / 200 OK
GET /users/auth/facebook/callback 302 Found
GET /users/auth/facebook 302 Found
GET /favicon.ico 200 OK
GET / 200 OK
GET /users/auth/facebook/callback 500 Internal Server Error
GET /users/auth/facebook 302 Found
GET /favicon.ico 200 OK
GET /favicon.ico 200 OK
GET / 200 OK
Facebook側の設定
設定>ベーシック画面
アプリドメインのところにngrokを実行した結果のドメインを入力します。
上の例ですと、
80149e9e.ngrok.io ngrok.io
の様に入力します。
Facebookログイン設定画面
以下の様にします。
「有効なOAuthリダイレクトURI」をしっかりと指定しなければエラーします。
以上でlocalhostでもFacebookログインを試しながら開発をできます。