55
45

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-05-15

追記⚠️(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ログインを試しながら開発をできます。

55
45
0

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
55
45