本番環境でGoogle認証を有効にする
前回の動画でビデオ講座プラットフォームのデプロイができましたので、Google認証を本番環境でも動くようにしていきます。現状でGoogleログインボタンを押すと「アクセス無効です」と表示されてしまうので、これを解消します。
Google Cloud Platformで設定を更新
Google Cloud Platformのコンソールを開き、以前作成したプロジェクトを選択します(私の場合は VideoPlatformCCA でした)。Webクライアント をクリックすると、現在の設定画面が開きます。
承認済みリダイレクトURIを追加する
「承認済みのリダイレクトURI」に現在は localhost のURLが指定されています。本番環境用のURLを追加していきますが、開発環境でログインしたい場面もあるので、localhostのURLは残したままで構いません。
- URIを追加 をクリック
- localhost用のURIをコピーし、ドメイン部分(ホストネーム)をVercelで発行された
vercel.appサブドメインに置き換える https://から始まるURLにして保存
承認済みのJavaScript生成元の項目は設定しなくても動作します。
動作確認
実際にGoogleでログインしてみます。よく見る認証画面に切り替わり、管理者アカウントで入ると、管理者画面の閲覧やコース管理ができるようになっています。本番環境でも実際に動作することが確認できます。
メールアドレスとパスワード認証について
今回はGoogle認証のみなので、これだけの設定で済みます。メールアドレスとパスワードで認証する場合は、メールアドレスとパスワードをどこに保存するかという問題が出てきます。基本的には 自分のデータベースには保存しない方が安全 です。漏洩したときのセキュリティリスクが大きいためです。
そのため、認証専用の外部サービスを使うのが楽で安全です。例えば以下のような選択肢があります。
- Clerk
- Supabase Authentication
- BetterAuth(今回のライブラリ)
これらのサービスはパスワードやメールアドレスをハッシュ化・暗号化した状態で保存してくれます。今回はGoogle認証だけなので、そこまで厳重に外部サービスで管理しなくても問題ないでしょう。
他の認証プロバイダ
Google以外にもGitHub、LINE、Apple Sign in、TikTokなど、BetterAuthでさまざまな認証プロバイダが利用できます。BetterAuthのドキュメントで「プロバイダー」を検索するとサイドバーに各種プロバイダの設定方法が記載されています。導入したい方はぜひドキュメントを参考にしてみてください。
続いての動画では、まだテスト環境で動いているStripe決済を本番環境に移行する方法を紹介します。サンドボックス環境では実際のお金が動かないので、本番に切り替える手順を解説していきます。