Facebook
localhost

Facebookログインがhttps必須になったので、localhost開発でも対応する


追記⚠️(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」をしっかりと指定しなければエラーします。

スクリーンショット 2018-05-15 17.20.05.png


ngrokを使用


ngrokとは

localhostで動くものを外部に公開できます。

ネット上には有料・無料の情報が両方ありますが、バージョンの違いによるものです。

実際に使ったところバージョン1系はまだ無料のようです。


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」をしっかりと指定しなければエラーします。

スクリーンショット 2018-05-15 17.20.05.png

以上でlocalhostでもFacebookログインを試しながら開発をできます。