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

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

前提条件

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

Java での 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 ドキュメントとアプリケーションのバックエンドコードを再デプロイします。

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

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

java-docs-samples リポジトリのクローンを作成したディレクトリで、Java サンプルを含むディレクトリに移動します。
```
cd YOUR_WORKING_DIRECTORY/java-docs-samples/appengine-java8/endpoints-v2-backend
```
テキストエディタで src/main/java/com/example/echo/Echo.java ファイルを開きます。

getUserEmail メソッドの @ApiMethod アノテーションで、属性 audiences と clientIds の YOUR_OAUTH_CLIENT_ID を、作成したクライアント ID に置き換えます。

appengine-java8/endpoints-v2-backend/src/main/java/com/example/echo/Echo.java

GitHub で表示

@ApiMethod(
    httpMethod = ApiMethod.HttpMethod.GET,
    authenticators = {EspAuthenticator.class},
    audiences = {"YOUR_OAUTH_CLIENT_ID"},
    clientIds = {"YOUR_OAUTH_CLIENT_ID"}
)
public Email getUserEmail(User user) throws UnauthorizedException {
  if (user == null) {
    throw new UnauthorizedException("Invalid credentials");
  }

  Email response = new Email();
  response.setEmail(user.getEmail());
  return response;
}

Echo.java ファイルを保存します。
プロジェクトを削除してから API をビルドします。
Maven
```
mvn clean package
```
Gradle
```
      gradle clean
      gradle build
```
クライアント ID を含むように OpenAPI ドキュメント openapi.json を作り直します。
Maven
```
mvn endpoints-framework:openApiDocs
```
Gradle
```
gradle endpointsOpenApiDocs
```
Google Cloud CLI（gcloud）が、Google Cloud にある対象のデータとサービスへのアクセスが許可されていることを確認します。
```
gcloud auth login
```
Google Cloud CLI のデフォルトプロジェクトを設定します。YOUR_PROJECT_ID をサンプル API 用に作成したプロジェクト ID に置き換えます。
```
gcloud config set project YOUR_PROJECT_ID
```
更新された OpenAPI ドキュメントをデプロイします。
```
gcloud endpoints services deploy target/openapi-docs/openapi.json
```
コマンドが終了するのを待ってから、アプリケーションを再デプロイします。
Maven
```
mvn appengine:deploy
```
Gradle
```
gradle appengineDeploy
```

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. バックエンドコードの getUserEmail メソッドが、ログイン時に使用されたユーザーアカウントのメールアドレスを返します。
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 を作成する

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

Maven

Gradle

Maven

Gradle

Maven

Gradle

JavaScript コードを構成する

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

JavaScript クライアントの概要

Auth の設定

ログイン

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

次のステップ

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

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

`Auth` の設定