【改定】雰囲気OAuth本「6.1 クライアントの登録」

Auth屋

本ドキュメントについて

本ドキュメントはAuth屋の技術同人誌「雰囲気でOAuth2.0を使っているエンジニアがOAuth2.0を整理して、手を動かしながら学べる本」および、その商業版である「雰囲気で使わずきちんと理解する！整理してOAuth2.0を使うためのチュートリアルガイド」の「6.1 章 クライアントの登録」の章を 2022/12/28 時点のGoogle Cloud の画面に置き換えたものです。
また、審査中のアプリへのアクセス方法が執筆当時とはかわっています。その点については「補足: テストユーザーの追加」をご覧ください。

6.1 クライアントの登録

まずは画像編集アプリを Google に登録し、クライアント ID とクライアントシークレットの発行を受けます。登録の流れは次のとおりです。

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

  2. プロジェクトの作成

  3. Photos Library API の有効化

  4. 認証画面の作成

  5. OAuth クライアント ID の作成
    これらの登録は Google Developer Console(以降、デベロッパーコンソール) にて行います。

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


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

図6.1 GDC 初回アクセス

2. プロジェクトの作成


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

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

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


図6.3 プロジェクト選択

次に「図 6.4 新しいプロジェクト」の画面が表示されますので、「プロジェクト名」 に「FunikiProject」と入力します。プロジェクト名を入力したら「作成」ボタンを 押します。

図6.4 新しいプロジェクト

3. Photos Library APIの有効化

「図6.5 API とサービス」の画面が表示されますので、「+ API とサービスを有効化」を選択してください。

図 6.5  APIとサービス


次に「図 6.6  API ライブラリー」の画面が表示されますので、検索窓に Photoと入力して下さい。


図 6.6 API ライブラリー

図 6.7 のような検索結果が表示されますので、その中から「Photos Library API」 を選択して下さい。

図 6.7 API 検索結果

図 6.8 の「Photos Library API」の画面が表示されますので、「有効にする」を選択して下さい。

図 6.8 Photos Library API

4. OAuth 同意画面の作成

Photos Library API を有効にすると、図 6.9 の Photos Library API の設定画面が表示されます。
右上の「認証情報作成」ボタンを押してください。

図 6.9 Photos Library APIの設定画面


図 6.10 使用するAPI の画面が表示されるので、Photos Library APIが選択されていることを確認して、ユーザーデータにチェックを入れて、「次へ」を押します。

図 6.10 使用する API

「図 6.11 OAuth同意画面」の設定の「アプリ名」に「image-edit」と入力します。ユーザーサポートメールからメールアドレスを選択します。デベロッパーの連絡先情報には自分のメールアドレスを入力してください。(ユーザーサポートメールと同じでもよいです)
入力したら、「保存して次へ」を押してください。

図 6.11 OAuth同意画面

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

図6.12 スコープ

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

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

「図 6.14 選択したスコープの更新2」 の画面が表示されるのでPhotos Library APIにチェックを入れて「更新」を押します。

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

図6.12 スコープの画面が表示されるので、図6.15の「保存して次へ」を押します。

図 6.15 保存して次へ



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

図6.16 OAuth クライアントIDの画面な表示されるので、以下を入力します。

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

  • 「名前」はデフォルトの「ウェブクライアント1」のまま

  • 「認証済みのJavaScript生成元」は「http://127.0.0.1」

  • 「承認済みのリダイレクトURI」は「http://127.0.0.1/callback」

図 6.16 OAuth クライアントID

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

「図 6.17 認証情報」 の画面の「ダウンロード」を押して認証情報をダウンロードします。ダウンロードが完了したら「完了」を押します。

図6.17 認証情報

ダウンロードしたファイルには以下のような情報が含まれています。ここの client_id と client_secret は後ほどアクセストークンを取得するのに使います。

{
  "web": {
    "client_id": "614630967196-...6187359rbf15cq9.apps.googleusercontent.com",
    "project_id": "funikiproject-246807",
    "auth_uri": "https://accounts.google.com/o/oauth2/auth",
    "token_uri": "https://oauth2.googleapis.com/token",
    "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
    "client_secret": "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cUWVL",
    "redirect_uris": [
      "http://127.0.0.1/callback"
    ],
    "javascript_origins": [
      "http://127.0.0.1"
    ]
  }
}

左ペインの「認証情報」をおして、登録した「ウェブクライアント1」ができていることを確認してください。

図 6.18 認証情報トップ

補足: テスターユーザーの追加

審査を通っていないアプリを利用するためにはテストユーザーとして事前に登録する必要があります。
左ペインのOAuth同意画面を選択し、ユーザーの種類を「外部」にして、テストユーザーの「+ ADD USERS」を押してください。

図6.19 テストユーザーの追加

図 6.20 の画面が開くので、ご自身のGoogleアカウント(gmail)を登録してください。Google アカウントを登録したら、保存を押します。

図 6.20 ユーザーを追加

後ほど、チュートリアルで image-edit アプリにログインする際にはこのGoogleアカウントを使ってください。それ以外のアカウントはアプリ審査を通っていない image-edit アプリにはアクセスできません。

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