JavaScript アプリケーションからの認証済みリクエストの送信

このページでは、ローカルで実行されている JavaScript アプリケーションから、Cloud Endpoints Frameworks を使用して作成された REST API に認証済みリクエストを送信する方法について説明します。この JavaScript アプリケーションは、Google ログインの使用方法と、リクエストで Google ID トークンを送信してユーザーを認証する方法を示します。JavaScript アプリケーションがリクエストを送信すると、Endpoints Frameworks がユーザーを認証してから、App Engine スタンダード環境で実行されているバックエンドコードにリクエストを渡します。

前提条件

サンプル JavaScript アプリケーションを実行するには:

Python での Endpoints Frameworks スタートガイドのサンプル API をデプロイしておく必要があります。API にリクエストを送信するの手順に従って API にリクエストを送信し、正常なレスポンスが返されることを確認します。

サンプル JavaScript コードに追加する必要があるため、サンプル API 用に作成した Google Cloud プロジェクト ID を確認します。プロジェクト ID を確認する方法がわからない場合は、プロジェクトの一覧表示をご覧ください。
ローカルのパソコン上に、JavaScript コードが含まれるサンプル index.html ファイルを提供するウェブサーバーが必要です。このページでは Python を使用して単純なサーバーを実行するための手順を説明しますが、どのウェブサーバーにも使用できます。

サンプル JavaScript クライアントコードをダウンロードする

ローカルマシンにサンプルのクローンを作成します。
```
git clone https://github.com/GoogleCloudPlatform/web-docs-samples
```
JavaScript クライアントを含むディレクトリに移動します。
```
cd web-docs-samples/endpoints-frameworks
```

OAuth 2.0 クライアント ID を作成する

サンプルで認証を行うための準備として、OAuth 2.0 クライアント ID をサンプル JavaScript コードとバックエンドコードで構成する必要があります。JavaScript アプリはこのクライアント ID を使用して Google の OAuth 2.0 サーバーから Google ID トークンを取得し、この ID トークンをリクエストに含めて送信します。Endpoints Frameworks は、JavaScript アプリからのリクエストに含まれる ID トークンを認証する際に、クライアント ID を使用します。

クライアント ID を作成するには:

Google Cloud Console で、[認証情報] ページに移動します。

[ドメインの確認] ページに移動
プロジェクトリストから、サンプル API 用に作成したプロジェクトを選択します。
[認証情報を作成] ボタンをクリックし、[OAuth クライアント ID] を選択します。今回初めてこのプロジェクトでクライアント ID を作成する場合は、次のサブステップを使用して同意画面でプロダクト名を設定します。それ以外の場合は、次の手順に進んでください。
1. [同意画面を構成] ボタンをクリックします。
2. [アプリケーション名] フィールドに名前を入力します。
3. [保存] をクリックします。
[アプリケーションの種類] で、[ウェブアプリケーション] をクリックします。
[承認済みの JavaScript 生成元] フィールドに次のように入力します。
```
http://localhost:8080
```
[作成] をクリックします。
クライアント ID をコピーします。完全なクライアント ID は次のようになりますが、プロジェクト内のウェブアプリケーションによって異なります。

271473851874-mtll5dk2vultovbtilt31hakqbinpuvd.apps.googleusercontent.com

クライアント ID の作成方法については、OAuth 2.0 の設定をご覧ください。

バックエンドコードを構成して再デプロイする

JavaScript アプリケーションから送信されたリクエストを Cloud Endpoints Frameworks で認証するには、前の手順で作成したクライアント ID をサンプルコードに追加し、更新された OpenAPI ドキュメントとアプリケーションのバックエンドコードを再デプロイします。

以下の手順では、Python での Endpoints Frameworks スタートガイドに従ってすでにサンプル API をデプロイしていることを前提とします。以下の手順を開始する前に、API にリクエストを送信するの手順に従って API にリクエストを送信し、正常なレスポンスが返されることを確認してください。

バックエンドコードを構成して再デプロイするには:

python-docs-samples リポジトリのクローンを作成したディレクトリで、Python サンプルが格納されているディレクトリに移動します。
```
cd YOUR_WORKING_DIRECTORY/python-docs-samples/appengine/standard/endpoints-frameworks-v2/echo
```
テキストエディタで main.py ファイルを開きます。
get_user_email 関数のデコレータで、your-oauth-client-id.com を先ほど作成したクライアント ID に置き換えます。
main.py ファイルを保存します。
サンプルのメインディレクトリにいることを確認します。
```
python-docs-samples/appengine/standard/endpoints-frameworks-v2/echo
```
クライアント ID が含まれるように OpenAPI ドキュメントを再生成します。次のコマンドで、YOUR_PROJECT_ID はサンプル API 用に作成したプロジェクトに置き換えます。
```
python lib/endpoints/endpointscfg.py get_openapi_spec main.EchoApi \
    --hostname YOUR_PROJECT_ID.appspot.com
```
正常に完了すると、次のメッセージが表示されます。
```
OpenAPI spec written to ./echov1openapi.json
```
Google Cloud CLI（gcloud）が、Google Cloud にある対象のデータとサービスへのアクセスが許可されていることを確認します。
```
gcloud auth login
```
Google Cloud CLI のデフォルトプロジェクトを設定します。YOUR_PROJECT_ID は、サンプル API 用に作成したプロジェクトに置き換えます。
```
gcloud config set project YOUR_PROJECT_ID
```

更新された OpenAPI ドキュメントをデプロイします。

gcloud endpoints services deploy echov1openapi.json

正常に完了すると、次のような行が出力されます。

Service Configuration [2018-02-13r2] uploaded for service [example-project-12345.appspot.com]

新しいサービス構成 ID をコピーします。
テキストで app.yaml ファイルを開きます。ENDPOINTS_SERVICE_VERSION フィールドの値は、新しいサービス構成 ID で置き換えます。例:
```
ENDPOINTS_SERVICE_NAME: example-project-12345.appspot.com
ENDPOINTS_SERVICE_VERSION: 2018-02-13r2
```
app.yaml ファイルを保存します。
バックエンドコードを再デプロイします。
```
gcloud app deploy
```

JavaScript コードを構成する

JavaScript コードを構成するには:

web-docs-samples/endpoints-frameworks ディレクトリで、main.js ファイルをテキストエディタで開きます。

initGoogleAuth 関数で、YOUR_CLIENT_ID を作成したクライアント ID に置き換えます。

endpoints-frameworks/main.js

GitHub で表示

function initGoogleAuth (clientId = 'YOUR_CLIENT_ID') {
  gapi.auth2.init({
    client_id: clientId,
    scope: 'https://www.googleapis.com/auth/userinfo.email'
  }).then(() => {
    document.getElementById('sign-in-btn').disabled = false;
  }).catch(err => {
    console.log(err);
  });
}

sendSampleRequest 関数で、YOUR_PROJECT_ID をサンプル API 用に作成したプロジェクト ID に置き換えます。

endpoints-frameworks/main.js

GitHub で表示

function sendSampleRequest (projectId = 'YOUR_PROJECT_ID') {
  var user = gapi.auth2.getAuthInstance().currentUser.get();
  var idToken = user.getAuthResponse().id_token;
  var endpoint = `https://${projectId}.appspot.com/_ah/api/echo/v1/email`;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', endpoint + '?access_token=' + encodeURIComponent(idToken));
  xhr.onreadystatechange = function () {
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
      window.alert(xhr.responseText);
    }
  };
  xhr.send();
}

認証済みリクエストを送信する

web-docs-samples リポジトリのクローンを作成したディレクトリで、JavaScript サンプルを含むディレクトリに移動します。
```
cd YOUR_WORKING_DIRECTORY/web-docs-samples/endpoints-frameworks
```
index.html を提供するウェブサーバーをポート 8080 で起動します。次の例では、Python のシンプルなサーバーを使用します。
```
python -m http.server 8080
```
ブラウザに「localhost:8080」と入力します。

JavaScript アプリケーションが 2 つのボタンを表示します。
[Sign In] をクリックします。[Sign in with Google] ページが表示されます。
ログインした後、[Send sample request] ボタンをクリックします。初めてリクエストを送信するとき、App Engine の起動時に 20 秒ほど遅延が発生する場合があります。Endpoints Frameworks がリクエストを傍受し、クライアント ID（バックエンドコードで構成したもの）を使用してリクエストを認証します。認証が成功した場合、次のように処理が進みます。
1. Endpoints Frameworks は、App Engine で実行されているサンプルバックエンドにリクエストを渡します。
2. バックエンドコードの get_user_email メソッドが、ログイン時に使用されたユーザーアカウントのメールアドレスを返します。
3. JavaScript クライアントが、メールアドレスを含むダイアログボックスを表示します。

JavaScript クライアントの概要

この JavaScript クライアントは Google ログインを使用し、Google ログインが OAuth 2.0 のフローを管理します。このセクションでは、JavaScript クライアントコードの概要を示します。

`Auth` の設定

Google API プラットフォームライブラリを読み込んで gapi オブジェクトを作成します。

endpoints-frameworks/index.html

GitHub で表示
```
  <script src="https://apis.google.com/js/platform.js?onload=loadAuthClient" async defer></script>
</head>
```
Google API プラットフォームライブラリを読み込んだ後、auth2 ライブラリを読み込みます。

endpoints-frameworks/main.js

GitHub で表示
```
function loadAuthClient () {
  gapi.load('auth2', initGoogleAuth);
}
```

GoogleAuth オブジェクトを初期化します。

endpoints-frameworks/main.js

GitHub で表示

function initGoogleAuth (clientId = 'YOUR_CLIENT_ID') {
  gapi.auth2.init({
    client_id: clientId,
    scope: 'https://www.googleapis.com/auth/userinfo.email'
  }).then(() => {
    document.getElementById('sign-in-btn').disabled = false;
  }).catch(err => {
    console.log(err);
  });
}

GoogleAuth オブジェクトを初期化するとき、OAuth 2.0 クライアント ID と追加オプションを指定してオブジェクトを構成します。通常はアクセススコープを指定します。スコープを指定すると、アプリケーションからのアクセスリクエストは必要なリソースのみに限定されるようになり、ユーザーはアプリケーションに付与するアクセスレベルを制御できます。OAuth 2.0 認証の実装を開始する前に、アプリケーションがアクセス権限を必要とするスコープを設定しておくことをおすすめします。この例では、https://www.googleapis.com/auth/userinfo.email スコープへのアクセスをリクエストしています。このスコープは、ユーザーのメールアドレスを表示するためのアクセス権を付与します。

function signIn () {
  gapi.auth2.getAuthInstance().signIn().then(() => {
    document.getElementById('sign-in-btn').hidden = true;
    document.getElementById('sign-out-btn').hidden = false;
    document.getElementById('send-request-btn').disabled = false;
  }).catch(err => {
    console.log(err);
  });
}

ID トークンを指定してリクエストを発行する

ユーザーのログインが完了したら、ユーザーの ID トークンを含む Authorization ヘッダーを付けてリクエストを送信します。

endpoints-frameworks/main.js

GitHub で表示

function sendSampleRequest (projectId = 'YOUR_PROJECT_ID') {
  var user = gapi.auth2.getAuthInstance().currentUser.get();
  var idToken = user.getAuthResponse().id_token;
  var endpoint = `https://${projectId}.appspot.com/_ah/api/echo/v1/email`;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', endpoint + '?access_token=' + encodeURIComponent(idToken));
  xhr.onreadystatechange = function () {
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
      window.alert(xhr.responseText);
    }
  };
  xhr.send();
}

次のステップ

Google ログインの JavaScript クライアントリファレンスで Google ログインの詳細を確認する。

JavaScript アプリケーションからの認証済みリクエストの送信

前提条件

サンプル JavaScript クライアント コードをダウンロードする

OAuth 2.0 クライアント ID を作成する

バックエンド コードを構成して再デプロイする

JavaScript コードを構成する

認証済みリクエストを送信する

JavaScript クライアントの概要

Auth の設定

ログイン

ID トークンを指定してリクエストを発行する

次のステップ

サンプル JavaScript クライアントコードをダウンロードする

バックエンドコードを構成して再デプロイする

`Auth` の設定