flask + nextjsで「googleでログイン」を実装する場合の全体像が掴めていません

実現したいこと

前提

webサービスを個人開発しています。
DBはsqlite3、バックエンドはflask、フロントエンドはnextjsです。
本番環境ではdockerを導入し、DBにはMySQL、webサーバーにはnginxを使う予定です。

webサービスでは、googleアカウントでログインしたユーザーのみが見ることのできるページを作るつもりです。googleでログイン以外のログイン方法は実装するつもりはないです。
また、googleアカウントでログインしていても一部の登録したアカウントのみがアクセスできるページも作る予定です。これについては、googleのサーバーからログインに使用したメールアドレスを受け取りメールアドレスでフィルタリングできると思うので心配していません。

そのため、「Googleでログイン」を実装したいです。
特に、セキュアな実装をしたいです。

発生している問題・エラーメッセージ

私がログイン機能付きのwebサービスを作るのが初めてなので、googleでログインを実装する場合の全体像についてわかっていません。

例えば、ユーザー名とパスワードでログインする場合の全体像は下のようになると思います。

  1. バックエンド側のDBにユーザー名とパスワードのハッシュのペアを保存する
  2. フロントエンドのformに入力したユーザー名とパスワードをREST APIを使ってバックエンドに送信
  3. バックエンドは受け取ったパスワードをハッシュ関数に渡してハッシュを比較して認証する
  4. バックエンドのリソース(DBに入ってるデータや画像等)にアクセス制限をかけることができる

また、具体的な実装も、Flask ログイン機能 CRUDとセットで実装してみたの redirectrender_template の代わりに login: okのようなレスポンスを返してフロントエンド側でログイン成功 or 失敗の画面を表示すればできると思います。
そして、バックエンドがログイン状態を判断して画像などのリソースを渡すかどうかを決め、アクセス制限のあるページをフロントエンドが描画することはできなくなります。

しかし、「Googleでログイン」する場合はフロントエンド、バックエンド、Googleの認可サーバーの3つが存在するので、上のような時系列順のデータの流れやその実装方法がわからないです。

また、ログイン機能のみFirebaseを活用できるならそれが一番楽だと思っているのですが、同じく全体像がわからないです。

どうかよろしくお願いします

補足情報(FW/ツールのバージョンなど)

ローカル環境

ubuntu 22.04 Desktop
flask (pip installした最新のバージョン)
nextjs (yarn add した最新のバージョン)

コメントを投稿

0 コメント