[Rails] HerokuにデプロイしたらGoogleログイン機能が機能しなくなった

Googleアカウントのログイン機能が動かない

• RubyとRailsのバージョン

  • Ruby: 2.6.5
  • Rails: 6.0.2

• 行なったこと

  • Omniauthを導入し、Googleアカウントでログインする機能を実装
  • .envファイルを作成し、クライアントIDとシークレットIDをこちらに記載
  • .envファイルを.gitignore内に記載し、GitHubから見えないように設定
  • Herokuにデプロイ

DeviseやOmniauthが原因でHerokuにデプロイできない方はこちらの記事をご覧ください
https://qiita.com/TAKO-zhangyu/items/153321ab6b333b614e12

• 行いたいこと
  • デプロイした先の環境で、Googleアカウントを使ってログインできるようにする

状況

ローカル環境（localhost:3000）では機能していたGoogleアカウントでのログイン機能ですが、Herokuにデプロイしたサイトで見ると機能しなくなりました。

client_idが取得できないと表示されています。

Authorization Error

Error 400: invalid_request
Missing required parameter: client_id

Learn more

実際の画面↓

原因

Google oauthを使ったログイン機能の実装には、Google側から発行されたクライアントID （GOOGLE_CLIENT_ID）と、シークレットID （GOOGLE_CLIENT_SECRET）が必要です。

このコードはあまり見えるところに置くべきではないため、私は.envファイルを作成し、その中に書き込みました。
そして、この.envファイルは.gitignoreのなかに記載しているので、GitHubから見えない状態になっています。

しかし、同時にHerokuにも見えない状態になってしまっています。

なので、client_idが取得できないと表示されてしまいました。

Herokuにclient_idを知ってもらおう

1.　https://dashboard.heroku.com/apps に移動します。

2.　ログインします。

一度デプロイできている場合、そこに自分のアプリの名前が載っていると思います。

3.　自分のアプリの名前をクリックしてください。

すると、ページの上あたりにあるナビバーで確認すると、現在 Overview にいると思います。

4.　そのナビバーの最も右にある Setting をクリックしてください。

5.　上から２段目にある Reveal Config Vars というボタンをクリックしてください。

Config Varsがたくさん並んでいると思います。DATABASE_URLとか、LANGとかが並んでいるところです。

6.　その中に、Google側から発行されたIDを追加しましょう。

左側のKEY欄にGOOGLE_CLIENT_ID、右側のVALUE欄に発行されたIDを入力し、Addをクリックしてください。
シークレットIDも同じ要領で入力しましょう。

そうすると、治りました。

GitHubに見えないようにしているからHerokuからも見えないのは当たり前か、と腹落ちしました。参考になると嬉しいです。

プログラマーとしての就職活動中です。もしよければTwitterのフォローお願いいたします！
Twitter : https://twitter.com/tako_guangzhou