Docker+Rails+webpacker ~facebook api を叩くためのssl設定~

twitter apiに引き続き今度はfacebookのgraph apiを叩きます. （まだ取得まで出来てませんがここまでをメモしておきます）.

※因みに twitter apiをrails側からではなくブラウザ側（Reactでfetch）したらcorsでエラー吐かれました. どうやらtwitter apiはcorsに対応していないよう...

d.hatena.ne.jp

↑ 古い記事ですが....

なので素直にrails側からデータ取得してReact側に流すことにしました.

Facebook API のためのssl設定
Graph API を開発者モードで動かす
これから

Facebook API のためのssl設定

facebook developers のサイトによると, graph api 利用にはhttps（ssl通信）が必要だそう.

developers.facebook.com

herokuにあげたら恐らく勝手にhttpsにしてくれるんだけど, localhostでやる分にはrailsはデフォルトでhttp通信になってます. なので auth/facebookにアクセスしても, アクセス元がhttpsでない?ためエラー吐かれてoauth認証出来ません.

そこで下の記事を参考にssl化します.

www.devmynd.com

force_sslの設定

Railsの app/config/environments/development.rb ファイルに,

config.force_ssl = true

を記述します. こうすることで, 全てのアクセスをhttpsにしてくれるらしい.

webpacker.ymlのssl設定

webpackはデフォルトでwebpack-dev-serverがhttp通信するそうなので, それもhttpsに変えます.

https://webpack.js.org/configuration/dev-server/#devserver-https

webpackの仕様

webpackerでは app/config/webpacker.yml でこの設定が出来ます. 以下のように書き換えます.

dev_server:
  # ここをtrueにする
  https: true
  host: 127.0.0.1
  port: 3035
  public: 127.0.0.1:3035

opensslで仮の証明書を作成

https通信を行う上ではsslサーバ証明書というものが必要になるので, それを作成します. 本来は認証局が発行するものらしいので, ここではあくまで動かすための仮のものということで.

# コンテナ起動
docker-compose up -d

# コンテナに入る
docker exec -it my-app bash

# ssl証明書作成
openssl genrsa -out server.key 2048
openssl req -new -x509 -key server.key -out server.crt -days 365

恐らくコンテナ入らなくても docker-compose run --rm web openssl .... でいける ?

Procfileの書き直し

以上が終わったら, Procfileを書き直します.

web: bundle exec rails s Puma -b 'ssl://0.0.0.0:3000?key=server.key&cert=server.crt'

webpack: bin/webpack-dev-server --hot

rails側で動くサーバに先ほど作成したserver.key と server.crt を埋め込みます. するとhttpsで通信できるようになります. ただし

1. 初回アクセス時は 127.0.0.1:3000 ではアクセスできない問題

=> 今まではこれで大丈夫でしたが, 今度からは https://127.0.0.1:3000 と明示しないとうまくいかない....

2. 初回アクセス時は信頼されてないと警告が出る

=> 信用するとすればアクセスできます.

Graph API を開発者モードで動かす

facebookのapiであるgraph api ではユーザに求める情報（許可範囲）が適切であるか、アプリ公開前にfacebookに認証してもらわないといけないみたいです. なのでそのままでは取得できる情報が限られます.

qiita.com

現在のアプリがユーザから取得可能な情報は

/me?fields=permissions でわかる.

なので開発時にはテストユーザと呼ばれるアプリを許可した架空のユーザを作成します. そのユーザからはfacebookの認証なしに任意に設定した情報を取得可能です.

やり方は,

1. 自分の作成したアプリを選択

2. 役割 → テストユーザ → 追加を選択

3. このアプリのテストユーザを許可「はい」→ 取得したい情報を選択

(ex.) user_post（ユーザの投稿情報）, user_photos（投稿写真）

リファレンス - Facebookログイン - ドキュメンテーション - 開発者向けFacebook

4. 編集 → パスワード変更

以上でこのアカウントでrailsアプリから auth/facebook にアクセスすると無事oauth認証画面に行きます.

因みに, .envファイルにfacebookのパスワードの記入も忘れずに.

これから

railsサイドからjavascriptのfetchみたいなのがうまくできなくてapi叩けてないので早く叩く.

あと悲報なのですが, instagramのapiはビジネスなんとかの審査通さないと利用できないみたいです........... 辛い