【Rails 】omniauth-google-oauth2を使用したgoogle認証で詰まった部分の解決策


状況

プログラミングを勉強中です。
omniauth-google-oauth2を使用すればかなり簡単にユーザー登録における
google認証が実装できるということで、ポートフォリオに組み込んでいます。

自分自身が詰まったポイントが2点ありましたので、同じポイントでエラーが出ている方がいた場合を想定して
備忘録として残してみます。

尚、今回はローカル環境での動作確認しか行なっていません。
本番環境では 別途エラーが出る可能性もございますのでご了承ください。
また今回は、gemを使用するための事前準備としてのgoogleクライアントIDやクライアントシークレットの
取得方法については省略させていただいております。

環境

Mac OS
Rails 5.2.4.1
ruby 2.5.3

詰まったポイント1点目:gemを導入してもうまくいかない

google認証の動線としては、以下①、②の順番となります。

①下の方にログインリンクが出る

②Googleのログインページに飛ぶ

しかし私の場合は、google認証で使用する、gem 'omniauth-google-oauth2'をbundle install
したのですが、そもそも、②のgoogle認証のトップページに飛べない状況でした。
本来は上記の画像の様にリンクがログイン画面に出た後、Googleにログイン、という
ページに飛べるはずです。

詰まったポイント1点目(解決策):gem 'omniauth'の導入

ネットにアップいただいているgoogle認証系の記事だと、gem 'omniauth-google-oauth2'の
インストールのみで機能しているようなのですが、私の場合はうまく実装できなかったので、
gem 'omniauth'をbundle installしてみました。
その後、rails sでサーバーを起動しなおしました。

すると

Googleのページに接続できたものの、エラー 400: invalid_request
Invalid parameter value for redirect_uri: Missing scheme: /users/auth/google_oauth2/callback

と新たなエラーが出てしまいました。

詰まったポイント2点目:エラー 400

直訳すると、「無効なリクエスト
redirect_uriの無効なパラメーター値:スキームがありません:」という意味となります。

クライアントIDが有効なのか、リダイレクト先は正しいか等色々考えてだいぶ詰まったのですが、
結論下記のやり方でなんとか対処することができました。
(根本的な原因は特定できておりません・・)

詰まったポイント2点目(解決策):環境変数を使用せず、直接devise.rbにクライアントID,クライアントシークレット、リダイレクトURIを書き込む。

devise.rb

 config.omniauth :google_oauth2,'クライアントID','クライアントシークレット',
  scope: 'email',redirect_uri: "http://localhost:3000/users/auth/google_oauth2/callback"


ENVという表記は、環境変数を指定する際に記載するので、直接書き込む場合は不要です。
また、今回はローカル環境での実装を目的としているので、localhostのURIを指定しています。

こちらを記載して、rails s でサーバーを再起動すると、無事google認証でのユーザー登録が
成功しました!

※※5/13追記※※

②ですが環境変数の記載が誤っておりました。

.env

【修正前】
'ENV[GOOGLE_CLIENT_ID]'="hogehoge"
'ENV[GOOGLE_CLIENT_SECRET]'="foobar"

【修正後】
'GOOGLE_CLIENT_ID'="hogehoge"
'GOOGLE_CLIENT_SECRET'="foobar"

"hogehoge""foobar"はご自身で設定した値です。

ENVは、環境変数を呼び出すために必要であるため、
こちらを記載してしまうと正確に環境変数を設定することができません。

上記修正することで、うまく環境変数を呼び出すことができました。

まとめ

根本的なエラーの解決にはなっていないのですが、ひとまずローカル環境での実装という観点からすると
実装ができました。

クライアントID等をdevise.rbに直接書き込むとセキュリティ的な問題があるので、
追ってenvファイルに書き込んで、環境変数を使用して実装したいと思います。

不備があるようであれば、ご教授いただけますと幸いですm(__)m