laravel ✕ OAuthを試すためにGoogleでクライアントIDやクライアントシークレットを取得してみる

## 概要

laravelを用いてOAuth系の実装をしてみたい。
Socialiteというlaravelのライブラリを使うことで楽に実装できるらしいので入れてみた。
どうやら.envに

- `GOOGLE_CLIENT_ID`
- `GOOGLE_CLIENT_SECRET`
- `GOOGLE_REDIRECT_URI`

などのキーバリューを設定する必要があるらしく、 `GOOGLE_REDIRECT_URI`以外はGoogle側で操作をして取得する必要があるらしい。

クライアントキーとクライアントシークレットを取得する方法を簡単にまとめる。

## 前提

laravelのバージョンは12

## 先に決めておくこと

- サポート連絡先メールアドレス or Googleグループ
- OAuthプロジェクトの設定変更通知先メールアドレス

## 方法

1. Google Cloud → APIとサービス → サイドバーの「OAuth同意画面」をクリック

    ![CleanShot 2025-05-28 at 15.18.23@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/12249ad2-7608-4363-8a46-5f5515f20850.jpeg)

1. 「開始」をクリック

    ![CleanShot 2025-05-28 at 15.19.07@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f87fdbf4-57ca-44b9-a605-a0d2437b1679.jpeg)

1. アプリ名・ユーザーサポートメールをそれぞれ設定し「次へ」をクリック（「ユーザーサポートメール」とは権限委譲の同意モーダルに表示される問い合わせ先メールアドレスのことっぽい（※1) 。商用利用する場合は受信ボックスを確認する週間のあるメールアドレスであることが望ましそう。ただし、メールアドレスはGoogle Cloudにログイン中のもののみプルダウンで選択できるっぽい。この欄で任意のメールアドレスを設定する事はできない。別途、サポート先として存在していればGoogleグループを設定することはできるっぽい）

    ![CleanShot 2025-05-28 at 15.26.10@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/22adf368-b270-41f9-b0df-caa167e7f32d.jpeg)

1. 対象を「内部」と「外部」から選び「次へ」をクリック
    - 内部：社内ツールなどの開発時に使用、自身のアカウントが所属しているGoogle Cloudのメンバー以外はアクセスする事ができない
    - 外部：一般公開されるツールの開発時に使用、Googleアカウントを持つ全てのユーザーがアクセス可能、本番環境移行時にはアプリの確認が必要になる場合あり、こちらを選択して作成したからといって急にフルオープンで公開されることはない模様

    ![CleanShot 2025-05-28 at 15.36.04@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/3a5e87bd-75ee-42b1-ada6-66199de3f70d.jpeg)

1. OAuthプロジェクトの設定変更が行われたときに通知するメールアドレスを設定し「次へ」をクリック

    ![CleanShot 2025-05-28 at 15.38.12@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/1008ab6e-fcc1-4ca6-94cf-1c57f38c61e9.jpeg)

1. ポリシーを確認し、ご自身の責任の元で同意し「続行」をクリック

    ![CleanShot 2025-05-28 at 15.39.42@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/b9ed575e-531e-48f1-a6b6-f28057fe07d4.jpeg)

1. 「作成」をクリック

    ![CleanShot 2025-05-28 at 15.40.04@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/d372e3b5-6cd1-46ea-8cb0-d26f7d0e7a9c.jpeg)

1. 「OAuthクライアントを作成」をクリック

    ![CleanShot 2025-05-28 at 15.41.48@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/27e75b7c-db29-401c-9497-f4cde37d0bfa.jpeg)

1. 「アプリケーションの種類」をプルダウンから選択、今回はlaravelのウェブアプリで使うので「Webアプリケーション」を選択、「名前」に任意のものを設定して「作成」をクリック

    ![CleanShot 2025-05-28 at 15.43.57@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/8960942e-2d7f-422b-9f8d-8b3f018dd857.jpeg)

1. クライアントIDの作成完了

    ![CleanShot 2025-05-28 at 15.44.38@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/dce744e2-8486-4724-82ea-68de32c5b167.jpeg)

1. クライアントの一覧でクライアント名をクリック

    ![CleanShot 2025-05-28 at 15.51.49@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/ee244a2e-e079-4b57-834d-be520aaba53a.jpeg)

1. 右上の「i」のアイコンをクリック

    ![CleanShot 2025-05-28 at 15.52.42@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/57744df5-e847-46c0-9fb4-a14531d725f3.jpeg)

1. クライアントシークレットの確認完了

    ![CleanShot 2025-05-28 at 15.53.42@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/3948942b-5c1c-4bbe-895b-3510343ac4c6.jpeg)

※1 こちらで設定したメールアドレスはOAuthを用いた初回の権限委譲時に下記のようにディベロッパーの情報として表示されることがあるっぽい。下記スクショはテスト状態での表示なので本運用時と表示文言は異なる可能性がある。

![CleanShot 2025-05-31 at 12.11.18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/cee2e54a-8c95-41d2-aaca-47413a3e5fce.jpeg)
![CleanShot 2025-05-31 at 12.08.43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/31301909-d85d-4c8f-83cf-a603d9642867.jpeg)

## 追記

GoogleやMicrosoftの認証サーバーのみを使うなら[Socialite Providers](https://socialiteproviders.com/usage/#_1-installation)は不要

## 参考文献

https://support.google.com/cloud/answer/15549049?hl=ja&visit_id=638840100248939699-800160575&rd=1#user-support-email&zippy=%2Cuser-support-email

https://support.google.com/cloud/answer/15549945?sjid=1046780982609885059-NC#user-type&zippy=%2Cexternal%2Cinternal