Googleサインインを使ってみた【React×Fastapi】①準備編

Googleサインインを使用したきっかけ

webアプリケーションを作成している中で、ログイン機能を作ってみたいと考えるようになりました。しかし、自分でユーザー管理の仕組みを一から構築するのは手間がかかります。そこで、Googleサインインを活用すれば運用や実装の負担を軽減できるのではないかと考えたのがきっかけです。

準備

フロントエンドはReact、バックエンドはFastapiで作成します。

環境

・Python 3.12.13
・node.js v24.18.1
私の場合はdockerコンテナを使用して環境構築していますが、node.jsとpython3が使えれば基本的には問題ないかと思います。

パッケージ管理ツール
・uv 0.12.0 (x86_64-unknown-linux-gnu)
・npm 11.16.0

Google Cloud ConsoleでのOAuth設定

1. Google Cloud コンソールへアクセス

2. 画面左のハンバーガーメニューから「APIとサービス」> 「認証情報」をクリック

3. 「認証情報を作成」をクリックし、「OauthクライアントID」クリック
   

4. 各種項目を設定し、作成をクリック
   ・アプリケーションの種類→webアプリケーション
   ・名前→任意の名称
   ・承認済みの JavaScript 生成元→http://127.0.0.1:5173

5.クライアントIDを控えておく
＊今回の方式ではクライアントシークレットは使用しません。

ここまで準備となります

次回

次回は作成したクライアントIDを使用して動作確認していきます。