ソーシャルログインを学ぶ

もなこ

個人開発アプリでgoogleログイン認証を導入したいので、メモをまとめていく

やりたいこと
・sorceryでログイン機能実装済。ここにgoogleログイン認証を追加で導入したい。

もなこ

ロボらんてくんにソーシャルログインの理解に何が必要か質問

ソーシャルログインを理解するまでの学習手順

基本的な認証の理解
- ユーザー登録、ログイン、ログアウトの仕組みを学ぶ。
- Cookieやセッションの概念を理解する。
実際に実装してみる
- シンプルな認証機能を持つWebアプリケーションを作成する。
- Ruby on RailsならDeviseという便利なgemがある
セキュリティの基本を学ぶ
- パスワードのハッシュ化やCSRF対策など、セキュリティの基本を学ぶ。
ソーシャルログインの仕組みを学ぶ
- OAuthやOpenID Connectの基本を理解する。
- ソーシャルログインのフローを学ぶ（例：OAuthの認可コードフロー）。
ソーシャルログインの実装
- 実際にソーシャルログイン機能を持つアプリケーションを作成する。
- Railsならomniauthというgemが用意されている
実践と応用
-学んだ内容を応用して、複数のソーシャルログイン（例えば、Google、Facebook、Twitterなど）を実装してみる。

もなこ

Rails×Sorcery×Google認証
テストアプリで実装できたので備忘録として残しておく
初学者のため間違いがある前提で...

もなこ

Google認証とは

ソーシャルログインのひとつ。ソーシャルログインは、SNSアカウントを用いて、webサイトやwebサービスにログインできるようにする仕組み。

Googleアカウントを持っていると、そのアカウントでサービスにログインできる機能。

ソーシャルログインでは、「OAuth」や「OpenID connect」などの国際的に標準化されている認可プロトコルを利用し、IDやパスワードなしでアクセスできる。

もなこ

 OAuthとは・認可のフレームワーク（認可の仕組みを使いやすくまとめたもの）

・サードパーティーアプリがHTTPサービスへ限定的にアクセスできるようにする

・ID/パスワードなしでアクセスできる（アクセストークン）
簡単いうと、「許可証（アクセストークン）を発行する仕組み」
Google認証ではOAuth2.0が使われている

「Googleでログイン」ボタンを押すと、

①ログインしたいアカウントを選択する画面の後に

②「許可しますか？」画面が出てくる。

この流れがOAuth。

ウェブサーバー アプリケーションに OAuth 2.0 を使用する
Googleアカウントでログインを許可した（アクセストークンを発行した）からといって、サードパーティーアプリ側に全ての情報を開示するわけではない。
アクセストークンには【スコープ】という、「誰の・どのリソースに・何の操作が出来るか」という指定出来る機能 がある。サードパーティーアプリはスコープで許可されている動作だけが出来る。
【OAuthで可能になったこと】
・セキュリティ向上。IDやパスワードを入れないのでパスワード漏洩のリスクがない。

・パスワード変更の必要がない。認可サーバーで許可したOAuthを削除すればよい。
OAuthを理解するためにしたこと

OAuthについて調べるとYoutubeが一番分かりやすかった。

特にこの順番で視聴すると理解しやすかったと思う。
https://youtu.be/EicBQvXOMcE?si=Q3VKM0jDq90Ywrpi
https://youtu.be/w4gUaBMDm7A?si=cnIZU0nih3r6J7yn

もなこ

Google認証を実装

sorceryインストール済、基本的なログイン認証機能（Userモデル作成済）実装済からスタート

大まかな流れ

Googleログインの公式ドキュメントを読む
Google APIの設定, client ID と client secret を取得
sorceryのwikiでExternalのページを読む
手順通りに進める
Google認証用にコード変更
エラーに対処

実際に行った手順
1~2はこちらの記事で詳細に説明してくださっているのでほぼ同じように設定。

sorceryのwikiでExternalのページを読む
・sorceryは外部認証プロバイダー（今回はGoogleログインをするための認可サーバー）と統合するための機能を既に持っている
・その仕組みを利用する手順が「External」に記載されている
・GitHubのsorcery➔wikiタブ➔Rails Tutorials:External
手順通りに進める
Google認証用にコード変更

sorceryの設定

# config/initializers/sorcery.rb
Rails.application.config.sorcery.submodules = [:external]

Rails.application.config.sorcery.configure do |config|

  # -- external --
  config.external_providers = [:google]
  config.google.key = ENV['GOOGLE_CLIENT_ID']
  config.google.secret = ENV['GOOGLE_CLIENT_SECRET']
  config.google.callback_url = "http://localhost:3000/oauth/callback?provider=google"
  config.google.user_info_mapping = { email: "email", name: "name" }
  ...

  # --- user config ---
  config.user_config do |user|
  ...

  # -- external --
    user.authentications_class = Authentication
    ...
  end
  ...
end

ログインボタンを表示するビューページ

# app/views/ビューページのリンク
<%= link_to 'Login with Google', auth_at_provider_path(provider: :google) %>

今回はテストのため、rootに設定したトップページにログインボタンを表示させた。
そのため、コントローラやルーティング設定もwikiの通りに設定した。

ルーティングの記法を少しだけ変更したので念のため記載しておく

# config/routes.rb
  root 'staticpages#top'

  post "oauth/callback", to: "oauths#callback"
  get "oauth/callback", to: "oauths#callback"
  get "oauth/:provider", to: "oauths#oauth", as: :auth_at_provider

エラ―対応
auth_at_provider_pathがNoMethodエラー
・ログインボタンを表示させたいビューページにコードを記載して、webで当該ページにアクセスすると「NoMethodエラー」が表示された
・wikiではビューページにリンクコードを記載➔コントローラ作成➔ルーティング設定➔の手順。リンクコードを記載しただけでwebページを確認しようとしたため、エラーとなっていた。
コントローラ作成とルーティング設定を行うとエラー解消。

エラー 400: redirect_uri_mismatch
・表示されたログインボタンを押すと__「アクセスをブロック: このアプリのリクエストは無効です」__と大きく表示され、横に詳細が記載されている。

【原因】
承認リクエストで渡された redirect_uri が、OAuth クライアント ID の承認済みのリダイレクト URI と一致していない
エラー詳細
【解決策】
「承認済みのリダイレクト URI」を確認、修正する。
GoogleAPIを設定した画面で認証情報➔OAuth2.0クライアントID➔作成したID選択➔承認済みのURI
# config/initializers/sorcery.rbで設定したconfig.google.callback_url = "http://localhost:3000/oauth/callback?provider=google"になっているか確認。違って入れば同じにして保存。

今回は開発環境で行ったので本番環境では承認済みURIに追加する必要がある

ちなみに、Googleアカウントでログインして、コンソールで確認するとDBに保存されてた。

もなこ

参考にさせていただいた記事

このスクラップは2024/07/15にクローズされました