Sorceryのログイン機能のgemでGoogle認証機能を作っているけど、本番環境において「認証エラー」になり躓くあなたに

# 使用している環境(および注意点)
環境が異なっている場合、異なる対応になる可能性がございますので
ご注意ください

下記の環境及び説明にて、間違い及び訂正箇所ございましたら、ご連絡のほどよろしくお願いいたします

・バックエンド Rails 7.2.1, (ruby 3.2.3 (2024-01-18 revision 52bb2ac0a6) [x86_64-linux])

・インフラ fly.io,Google Cloud

・認証 Sorcery

・開発環境 Docker

状態
仮想環境でGoogle認証ができているという設定


# デプロイ後、Googleでログインを押下すると、下記のエラーで躓く場合
[![Image from Gyazo](https://i.gyazo.com/63945f03ec6b719bb0595141e0d3fe29.png)](https://gyazo.com/63945f03ec6b719bb0595141e0d3fe29)

下記の資料を参考に、対応してます

https://qiita.com/okada84108983/items/0c84c01b88072c004873#4-authentications%E3%83%86%E3%83%BC%E3%83%96%E3%83%ABauthentication%E3%83%A2%E3%83%87%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90


https://qiita.com/rei-dev99/items/42358fe71680c804d19c


# 本番環境の適用
実際は開発環境と本番環境でそれぞれ異なるurlにリダイレクトさせる必要があります

そのため、下記のGemをインストールする必要があります

### 1.以下にgem 'config'を使用した方法を記載
```Ruby
gem 'config'
```
これはRailsアプリケーションで設定管理を簡単に行うためのgemです
環境ごとに異なる設定を一元管理することができ、開発環境、テスト環境、本番環境で異なる設定値を使いたい場合に非常に便利です
gemfile記述後、bundle installを実行してインストールします

### 2.config/settings.ymlファイル に共通の設定を書き、環境ごとの設定を書き分る

config/settings/ディレクトリ下にdevelopment.ymlとproduction.ymlを作成し、
それぞれのファイルに開発環境、本番環境のcallback_urlを記載します
config/settings/development.yml(開発環境用)
```
sorcery:
    GOOGLE_CALLBACK_URL: 'http://localhost:3000/oauth/callback?provider=google'
```
config/settings/production.yml(本番環境用)
```
sorcery:
    GOOGLE_CALLBACK_URL: 'https://your_app_url/oauth/callback?provider=google'
```
なお、.envについては開発環境用でログインできているのを確認した後、
#### 本番環境のcallback_urlを記載してください


また、.gitigcoreに 
#### 下記が記載されているのも確認してください
.gitcoreに記載が漏れていると、Github上に.envの更新履歴漏洩の恐れがあります
.gitcoreはjavaのカプセル化のように、プライベートとして漏らしたくないパスやキーワードを隠すためにあります

.gitigcore
```
# 省略
# Ignore all environment files (except templates).
/.env*
!/.env*.erb
# 省略
```

sorcery.rbにはそれぞれの設定ができるよう下記のように記載してます
```Ruby
config.google.callback_url = ENV["GOOGLE_CALLBACK_URL"]
```
ここまでやっても残念なことに 
### 本番環境時上記で添付した認証エラーでブロックされます


そこで思い出したのが、
画像アップロード時AWS S3使ってデプロイ環境のfly.ioにS3_ACCESS_KEY_IDとS3_SECRET_ACCESS_KEYを設定したことです
```
fly secrets set AWS_ACCESS_KEY_ID=your-access-key-id AWS_SECRET_ACCESS_KEY=your-secret-access-key S3_BUCKET_NAME=your-bucket-name
```
まとめると
### GOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETとGOOGLE_CALLBACK_URとを設定しないと、Google認証ができない

のではないかと考えました

# Google APIの設定と環境変数の登録
環境変数（GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GOOGLE_CALLBACK_URL）を fly secrets を使ってFly.ioに登録します
```
fly secrets set GOOGLE_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXX
fly secrets set GOOGLE_CLIENT_ID=YYYYYYYYYYYYYYYYYYYYYYYYY
fly secrets set GOOGLE_CALLBACK_URL=ZZZZZZZZZZZZZZZZZZZZZZZZZZZ
```
環境変数（GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GOOGLE_CALLBACK_URL）の登録について決まった順番はございません

なおプライバシーなので、環境変数の情報はダミーにしております
これらの情報がないと、アプリがGoogleのサービスにアクセスできません
Google Cloud側の設定に関しては下記において詳しく書かれているので、ご確認ください
https://zenn.dev/shunjuio/articles/b9ffb6565b7409

登録成功したら、下記コマンドで登録されているかどうかを確認します
下記コマンドを打つと、情報が一覧として確認できます
```
fly secrets list
#以下省略
GOOGLE_CALLBACK_URL     XXXXXXXXXXXXXXXX        30s ago          
GOOGLE_CLIENT_ID        YYYYYYYYYYYYYYYY        2m1s ago         
GOOGLE_CLIENT_SECRET    ZZZZZZZZZZZZZZZZ        49s ago 
```
詳しく説明すると、一番左から環境変数名、要約番号、生成月日となります
# デプロイ再実行
fly.ioの環境で再度デプロイしなおします
```
fly deploy
```
Googleアカウントでログインできているのを確認します
[![Image from Gyazo](https://i.gyazo.com/39f444a3e58fbe9037fb64718c59640f.png)](https://gyazo.com/39f444a3e58fbe9037fb64718c59640f)

以上です

### 追加実装(独自ドメインでGoogle認証を作りたいあなたに)
fly.ioで独自ドメインを実装し、Google認証機能を追加したい場合について補足説明します
fly.ioで独自ドメインを実装する場合、下記の資料を参考に対応しております


https://qiita.com/muscle_gori02/items/dd53daf88acac8e243d7

今回は、独自ドメイン実装前にGoogle Cloud側の設定でGoogle認証機能を実装済みの認識で記事を記載します

# Google Cloud側の設定
Google Cloud プロジェクトの作成
[Google Cloud Console](https://console.cloud.google.com/cloud-resource-manager)にアクセスし、既存プロジェクトを確認します

ドロップダウン「三」から、有効なAPIとサービス→認証情報、
[![Image from Gyazo](https://i.gyazo.com/9c20286f59f11984bedc33e8bef18376.png)](https://gyazo.com/9c20286f59f11984bedc33e8bef18376)

対象のクライアントを押下し、承認済みのリダイレクト URIを独自ドメインに修正します

[![Image from Gyazo](https://i.gyazo.com/62f61d5bd4c899643cde883318c82a88.png)](https://gyazo.com/62f61d5bd4c899643cde883318c82a88)

# config/settings.ymlファイルの本番環境側のURLに修正変更
config/settings/production.yml(本番環境側)のGOOGLE_CALLBACK_URLを独自ドメインに修正します

# 3: Google APIの設定と環境変数の登録
環境変数（GOOGLE_CALLBACK_URL）を fly secrets を使ってFly.ioに登録
環境変数（GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET)は登録済みなので、そのままにしておきます
```
fly secrets set GOOGLE_CALLBACK_URL=ZZZZZZZZZZZZZZZZZZZZZZZZZZZ
```
# デプロイ再実行
fly.ioの環境で再度デプロイし直します
```
fly deploy
```
Googleアカウントで独自ドメインの状態でログインできているのを確認します

[![Image from Gyazo](https://i.gyazo.com/8521c37a9f8088975478c8af9a3bb49f.png)](https://gyazo.com/8521c37a9f8088975478c8af9a3bb49f)

[![Image from Gyazo](https://i.gyazo.com/a01103dc623613660d2ead375f96dfa1.png)](https://gyazo.com/a01103dc623613660d2ead375f96dfa1)

下記の画面のように独自ドメインでGoogleログイン機能が実装できているのを確認しました

同様の事態に遭って挫折している人が解決できるのを願っております