環境変数に設定した値と異なる値が取れてしまう問題
解決したいこと
NEXT.jsで問い合わせ機能を実装しており、そこでreCAPTCHAを実装している最中です。
環境変数に秘密鍵:RECAPTCHA_SECRET_KEYを設定しているのですが、RECAPTCHA_SECRET_KEYに設定した値と異なる値が取得されてしまっている状況にあります。
これの解決方法の一つは見つけたものの、これの原因が全くもってわからない状況。
原因がわかる方、教えてください。(おそらくキャッシュ関連なのかなとも考えているが確証がない)
発生している状況
const secretKey = process.env.RECAPTCHA_SECRET_KEY;
console.log("secretKey", secretKey);
const verificationUrl = `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${token}`;
なぜかreCAPTCHAエラーとなるので、調査した結果、secretKeyの値が環境変数に設定した値と異なる値であることまで確認した。
secretKey ***********************************cD5
実行した際に取得されている秘密鍵は末尾cD5のようになっています(秘密鍵なので末尾のみにしています)。
RECAPTCHA_SECRET_KEY=***********************************3n7
一方で、環境変数(.env.local)に設定しているものは末尾3n7となっており、この秘密鍵が異なるからreCAPTCHAがうまくいかないというところまで突き止めました。が、なぜこのように異なる値となっているか、原因が不明なのです。
ちなみに末尾3n7がreCAPTCHA側で設定されている値になります。
補足事項
今回実装する前に、公開鍵と秘密鍵を発行してreCAPTCHAの実装を試していました。その後、それらを削除して、新たに公開鍵と秘密鍵を発行したものを実装しようとしています。(もしかしたら末尾cD5は前の分なのかもしれませんが、今のところ記録が残っていない...)
自分で試したこと
- 秘密鍵を環境変数から取得するのではなく、直接コードに書く(本来やってはいけない手法)
→実行結果としては、reCAPTCHAが正しく機能し、reCAPTCHA後の機能が正しく機能した(末尾3n7で成功) - 環境変数の変数名を変更:RECAPTCHA_SECRET_KEY→RECAPTCHA_SECRET_KEY2
→api側のソースコードも同じように変数名を変更したところ、reCAPTCHAが正しく機能し、reCAPTCHA後の機能が正しく機能した(末尾3n7で成功)(暫定対応としてこれが今のところ有効ではある) - 上記対処でうまく行ったので、RECAPTCHA_SECRET_KEYに戻して実行
→実行結果としては、失敗している(末尾cD5となっている...) - ローカルサーバーを再起動
→末尾cD5となっている... - .nextフォルダを削除し再度実行
→末尾cD5となっている... - ターミナル再起動
→末尾cD5となっている... - ブラウザを変更(chrome→Safari)
→末尾cD5となっている... - PC再起動後に、再び実行
→末尾cD5となっている...
開発環境
macOS:Sequoia 15.3
ブラウザ:Google Chrome バージョン: 133.0.6943.98(Official Build)
reCAPTCHA タイプ:v3
Next.js:v15.1.5
暫定対応
現状、変数名を変えればうまくいくところまでは確認しているので、最悪は変数名を変更する対応を取ろうとは思っている。