【WordPress】OAuthクライアントIDの作成手順　Google Auth Platform

　Google Sitekitの導入にあたり、Googleアカウントの連携というところで今回のようなOAuth（オーオース）クライアントIDというものが必要になってきたため、作成や設定の手順になります。

　WebサービスやブログでGoogleログインを導入したり、Google API（Analytics、Drive、Gmail など）を利用する際には、OAuthクライアントIDの作成が必須になるそうなのですが、SiteKitからだとエラーで進めなかったため、「どこに設定があるの？」というところで調べたので、やり方としてまとめました。

　OAuthとはなんぞや？というところですが、簡単に言うと『他サービスへ必要な権限だけを渡す仕組み』のことを言うそうです。ワードプレスに分類するのもどうかとは思ったんですが、ワードプレスでアドセンスの設定を進めてくにあたり出てきたものなので、一旦にこちらに置きます。

・

・

・

OAuthクライアントID作成手順

Google Cloud プロジェクトを作成

確認場所（赤枠部分）

1.Google Cloud Console にアクセスします。

Google Cloud Platform

Google Cloud Platform lets you build, deploy, and scale applications, websites, and services on the same infrastructure …

console.cloud.google.com

・・・

2.プロジェクト作成をクリックします。

・・・

3.プロジェクトを作成に必要な項目を入力して、作成ボタンを押します。

・プロジェクト名は任意のもの。（後から変更できます。）

・リソースは組織なしのままで良いようです。

・・・

4.プロジェクト作成完了。

完了するとこのような画面になり、赤枠の開始ボタンから次の設定が可能です。

『OAuth同意画面を設定』の手順に繋がっていきますので、この作成から続けて頂いてもいいですし、一旦作業中断する場合は、次の手順から出来ます。

・

・

・

OAuth同意画面を設定

確認場所（赤枠部分）

1.Google Auth Platform を開く

　左メニューから「APIとサービス」→「OAuth同意画面」を選択しクリックします。

・アプリ名は任意のもの。

・ユーザー名は使用しているメールアドレスを入力。

・・・

2.アプリ情報を入力

　アプリ名、サポートメールなどを入力し、ユーザータイプ（外部／テスト）を選択します。

・アプリは任意のもの。

・ユーザーサポートメールは自分が使用するメールアドレスを入力。

・・・

3.対象を選択。

・外部を選択。（内部だと組織内でしか見れないため。）

・・・

4.連絡先情報を入力。

・使用しているメールアドレスを入力。

・・・

5.作成を押して完了。

・

・

・

OAuthクライアントを作成

確認場所（赤枠部分）

1.クライアントを作成をクリックします。

・・・

2.アプリケーションの種類と名前を入力。

・「アプリケーションの種類」は、「ウェブアプリケーション」を選択します。

※今回はウェブサイトのみのため、「ウェブアプリケーション」にしています。その他、〇〇ストアといったアプリストアで展開しているようなアプリは、別途確認が必要です。

・名前は任意のものでよいそうです。（後から変更可能です。）

・・・

3.JavaScript origins（生成元） とリダイレクトURLを入力します。

・・・

4.Client ID と Secret を控える。

『作成』ボタンを押すと、下記のようなダイアログがでます。

Client ID と Client Secret は、コピーしてメモ帳などで保存します。

Secret は後から再表示できませんので、控えておいた方がよいです。

分からなくなった場合は、IDの新規登録自体は別で作れますので、分からなくなった方を削除して新たに作り直す形になります。

・

・

・

以下、手順の補足メモ書き（実際に迷いやすいポイント）

OAuth同意画面で設定する項目

• アプリ名
• サポートメール
• 開発者連絡先メール
• ホームページURL
• プライバシーポリシーURL
• 利用規約URL（任意）
• ユーザータイプ（外部／テスト）

※ブランディング画面で行う。テストモードの場合、ログインできるのは「テストユーザーに登録したメールアドレスのみ」

・・・

OAuthクライアント作成時の重要ポイント

承認済みの JavaScript origins

• https://example.com
• http://localhost:3000（開発環境） ※HTTPS必須（localhostのみ例外）

・・・

承認済みのリダイレクトURI

例：NextAuth.js / Auth.js

• https://example.com/api/auth/callback/google
• http://localhost:3000/api/auth/callback/google

※末尾の「/」は入れない。の有無でエラーになるため、正確に入力すること。

・・・

Client Secret は再表示不可

　作成直後に必ず控えておくこと。 Google Secret Manager や環境変数で安全に管理するのが推奨。

・

・

・

後書き

　ワードプレスのSiteKit設定の画面からGoogleアカウント連携にあたり設定のボタンが表示されるのですが、そちらからだとエラーが出てしまって接続進めなかったため、設定にあたり下記サイト様を参考にさせて頂きました。（多分、タイムラグなだけだと思います。）同じように迷われた方いらっしゃいましたら、参考になれば幸いです。

・

・

・