【改定】OIDC本 「5.1 リライングパーティの事前登録」

本ドキュメントについて

本ドキュメントはAuth屋の技術同人誌「OAuth、OAuth認証、OpenID Connectの違いを整理して理解できる本」の「5.1 リライング・パーティの事前登録」の章を 2022/12/28 時点のGoogle Cloud の画面に置き換えたものです。
また、審査中のアプリへのアクセス権限のポリシーが執筆当時とはかわっており、テストユーザーとして Google アカウントを登録する必要があります。その点については「3. OAuth同意画面の作成」の中で説明します。

5.1 リライング・パーティの事前登録


まずはリライング・パーティを Google に登録し、クライアント ID とクライアントシークレットの発行を受けます。登録の流れは以下のとおりです。
1. Google Cloud の利用規約の同意
2. プロジェクトの作成
3. 認証画面の作成
4. OAuth クライアント ID の作成
これらの登録は Google Developer Console(以降、デベロッパーコンソール) にて行い ます。

1. Google Cloud の利用規約の同意

デベロッパーコンソール (https://console.developers.google.com) にブラウザでアクセスして下さい。デベロッパーコンソールに初めてアクセスすると図 5.1 の Google Cloud の利用規約同意画面が表示されるので利用規約にチェックを入れ、居住国を選択 して「同意して続行」を押して下さい。
なお、 Google Cloud とは、Google がクラウド上で提供するサー ビス群の総称です。

図 5.1 GDC 初回アクセス

2. プロジェクトの作成

利用規約に同意すると「図5.2 デベロッパーコンソールのトップ」画面 が表示されるので「プロジェクトの選択」を押してください。

図5.2 デベロッパーコンソールトップ

「図 5.3 プロジェクトの選択」の画面が表示されます。右上の「新しいプロジェクト」を押し て下さい。

図 5.3 プロジェクトの選択

次に「 図 5.4 新しいプロジェクト」の画面が表示されますので「プロジェクト名」に適当 な名前を入力し、「作成」ボタンを押します。

図 5.4 新しいプロジェクト

3. OAuth 同意画面の作成

図 5.5 のプロジェクトトップ画面が表示されるのでここでは左ペインにある「OAuth 同意画面」を押して下さい。

図 5.5 プロジェクトトップ

「図 5.6 OAuth 同意画面」が表示されます。「User Type」で外部を選択し、「作成」を押してください。

図 5.6 OAuth同意画面

「図 5.7 OAuth 同意画面2」が表示されるので、以下を入力してください。

  • 「アプリ名」に適当なアプリ名を入力(図では「piyo」)

  • 「ユーザーサポートメール」を選択

  • 「デベロッパーの連絡先情報」のメールアドレスにメールアドレスを入力(ご自身のメールアドレスを入力してください。「ユーザーサポートメール」と同じでも大丈夫です。)

すべて、入力したら「保存したら次へ」を押してください。

図 5.7 OAuth同意画面2

「図5.8 スコープ」の画面が表示されるので「スコープを追加または削除」を押してください。

図5.8 スコープ

「図 5.9 選択したスコープの更新」の画面が表示されるので「フィルタ」に「userinfo」と入力してください。候補に「https://www.googleapis.com/auth/userinfo.profile」がでるので、クリックしてください。

図 5.9 選択したスコープの更新

「選択したスコープの更新2」の画面になるので「範囲」が「…/auth/userinfo.profile」のものにチェックを入れ、更新を押します。

図 5.10 選択したスコープの更新2

「図 5.11 スコープ2」の画面になるので「保存して次へ」を押します。

図 5.11 スコープ2

「図 5.12 テストユーザー」の画面が表示されるので「+ ADD USERS」を押します。

図 5.12 テストユーザー

図 5.13 ユーザーを追加の画面が表示されるので、ご自身のGoogleアカウント(gmail)を登録してください。Google アカウントを登録したら、「追加」を押します。
後ほど、チュートリアルでアプリにログインする際にはこのGoogleアカウントを使ってください。今、作成しているアプリは審査を通っていないため、ここで追加したユーザーのみがログイン可能です。

図 5.13 ユーザーを追加

「図 5.14 テストユーザー2」の画面になるので、「ユーザー情報」に先程登録した Google アカウントが表示されていることを確認して、「保存して次へ」を押します。

図 5.14 テストユーザー2

4. OAuth クライアントIDの作成

左ペインから「認証情報」を選択すると、「図 5.15 プロジェクトトップ」の画面が表示されるので「+ 認証情報を作成」を押します。

図 5.15 プロジェクトトップ

「図 5.16 認証情報を作成」の選択肢が表示されるので「OAuth クライアント ID」をクリックします。

図 5.16 認証情報の作成

「図 5.17 OAuth クライアント ID の作成」の画面が表示されるので以下を入力します。

  • 「アプリケーションの種類」から「ウェブアプリケーション」を選択

  • 「名前」に任意の名前を入力(図では「ウェブクライアント1」)

  • 「承認済みのJavaScript生成元」には「http://127.0.0.1」を入力

  • 「承認済みのリダクリレクトURI」には「http://127.0.01/callback」を入力

図 5.17 OAuth クライアント ID の作成

リダイレクト URI のホスト (IP アドレス) が 127.0.0.1 となっているので「サービスが 稼働してないのにいいのかな」と疑問に思った方がいるかもしれません。疑問を抱かれたと おり、リダイレクトするとブラウザには「そのようなページはありません」といったエラー が表示されます。ですが、ブラウザのアドレスバーには必要な情報が入っているのでチュー トリアルを進める上では問題ありません。今回はその情報を手でコピペして curl コマンド を使って、次のリクエストを作成します。後で実際に手を動かせばわかると思うので、今は 気にせず読みすすめてください。

「作成」ボタンを押すと、図 5.18 に示すダイアログでクライアント ID、クライアントシークレットが発行されます。それぞれの値は認可サーバーへのリクエストを作成する際に使 うので、記録しておいて下さい。

図 5.18 OAuth クライアントを作成しました

「図 5.19 認証情報」の画面が表示されるので、作成したクライアントIDのアプリが表示されていることを確認してください。

図 5.19 認証情報

これでリライング・パーティの登録とクライアント ID、クライアントシークレットの発 行が完了しました。いよいよ、次の節からは実際に ID アクセストークンを取得していきます。

この記事が気に入ったらサポートをしてみませんか?