> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Amazon API Gateway チュートリアルのステップ 3

# AWS API Gateway チュートリアル ステップ 3

<Warning>
  この機能ではデリゲーションを使用します。既定では、2017 年 6 月 8 日時点でアドオンを使用していないテナントでは、デリゲーションは無効になっています。現在、デリゲーションを必要とするアドオンを使用しているレガシーテナントは、この機能を引き続き利用できます。今後、デリゲーション機能が変更される、またはサービスから削除される場合は、現在利用しているお客様に事前に通知し、移行のための十分な期間が設けられます。さらに、デリゲーションはカスタムドメインの利用をサポートしていないため、これに依存する機能はカスタムドメインと併用すると完全には動作しない可能性がある点に注意してください。
</Warning>

<div id="step-3-build-the-application">
  ## ステップ 3 - アプリケーションをビルドする
</div>

このステップでは、AngularJS フレームワークを使用してシングルページのサーバーレスアプリケーションを構築し、それを静的ウェブサイトとして動作するように設定した AWS S3 バケットから配信します。

<div id="step-1-set-up-your-sample-application">
  ### ステップ 1. サンプルアプリケーションを設定する
</div>

シンプルなスターターアプリとして、このチュートリアル用の[サンプルプロジェクトをダウンロード](https://github.com/auth0/auth0-aws/tree/master/examples/api-gateway/client)して始めます。ログインすると、Auth0 の認証情報が事前に設定された状態になります。

このひな形プロジェクトの内容を、`pets` という名前のローカルフォルダーにコピーします。このフォルダーは、このチュートリアルの残りの手順で使用します。フォルダー内の `auth0-variables.js` を開き、Auth0 アプリケーションの `AUTH0_CLIENT_ID` と `AUTH0_CLIENT_ID` を更新します (この情報は、該当するアプリケーションの [Management Dashboard](https://manage.auth0.com/#/applications) で確認できます) 。

<div id="aws-s3-bucket">
  #### AWS S3 バケット
</div>

[静的ウェブサイトとして機能するように設定された AWS S3 バケットを作成](http://docs.aws.amazon.com/gettingstarted/latest/swh/website-hosting-intro.html)済みであることを確認してください。セットアップ中に、ウェブサイトのコンテンツとして `pets` フォルダーの内容を S3 バケットにコピーします。

既存のバケットを使用している場合は、次のコマンドを使用して AWS CLI でファイルを移動できます。

```bash lines theme={null}
aws s3 cp --recursive --acl "public-read" ./ s3://{yourBucket}/
```

先に進む前に、Username-Password-Authentication (または使用しているアプリケーションに関連付けられたデータベース接続) に、少なくとも 1 人のユーザーが関連付けられていることを確認してください。サンプルアプリと AWS との統合機能を十分に活用するには、そのユーザーを使って認証をテストし、アクセスできることを確認する必要があります。

最後に、アプリケーションの Settings ページにある **Allowed Origins** フィールドに URL を指定して、Auth0 が Web サイトからの認証を許可するようにしてください。Web サイトの URL は次のようになります。

`http://your-bucket.s3-website-us-east-1.amazonaws.com`

URL がわからない場合は、S3 バケットの **プロパティ** タブで確認できます。

さらに先に進む前に、アプリケーションへのログインをテストしてください。ブラウザーで `http://your-bucket-domain/index.html` を開きます。ログイン後、"getPets not implemented" と表示されたアラートボックスがポップアップ表示されるはずです。

また、ペットを表示するページも表示されるはずです。

<div id="use-delegation-to-get-an-aws-token">
  ### デリゲーションを使用して AWS トークンを取得する
</div>

この時点で、Auth0 で認証の設定は完了しており、<Tooltip tip="OpenID: アプリケーションがログイン情報を収集および保存することなく、ユーザーの本人確認を行えるようにする認証のためのオープン標準です。" cta="用語集を表示" href="/ja/docs/glossary?term=OpenID">OpenID</Tooltip> <Tooltip tip="OpenID: アプリケーションがログイン情報を収集および保存することなく、ユーザーの本人確認を行えるようにする認証のためのオープン標準です。" cta="用語集を表示" href="/ja/docs/glossary?term=JWT">JWT</Tooltip> を取得しています。生成されたコードのディレクトリ構造は次のとおりです。

<Frame>
  <img src="https://mintcdn.com/translations/MV7tE-x71x8RWRES/docs/images/cdy7uua7fh8z/5fYL14NE1L9WuzUyA0xTky/35e78ca14e6d0c5b36582b5b74a6fc55/aws-api-gateway-project.png?fit=max&auto=format&n=MV7tE-x71x8RWRES&q=85&s=19516d4cbc0347a1caf24023d06807f9" alt="AWS API Gateway - project directory" width="288" height="269" data-path="docs/images/cdy7uua7fh8z/5fYL14NE1L9WuzUyA0xTky/35e78ca14e6d0c5b36582b5b74a6fc55/aws-api-gateway-project.png" />
</Frame>

Auth0 のデリゲーション機能を使用すると、Auth0 の <Tooltip tip="ID Token: リソースへのアクセスではなく、クライアント自体を対象とした認証情報です。" cta="用語集を表示" href="/ja/docs/glossary?term=identity+token">IDトークン</Tooltip> に基づく AWS の <Tooltip tip="Access Token: API にアクセスするために使用される、不透明な文字列または JWT 形式の認可資格情報です。" cta="用語集を表示" href="/ja/docs/glossary?term=Access+Token">アクセストークン</Tooltip> を取得できます。内部では、Auth0 が IDトークンを検証し、その後、設定したアドオンに応じて <Tooltip tip="ID Token: リソースへのアクセスではなく、クライアント自体を対象とした認証情報です。" cta="用語集を表示" href="/ja/docs/glossary?term=SAML">SAML</Tooltip> を使用します。

`auth.signin` によるサインイン成功後に IDトークンから AWS デリゲーショントークンを取得できるよう、`pets/login/login.js` を次のように更新します。ここでは、ソーシャル接続を使用してログインしていないユーザーをすべて管理者として扱っています。後で 2 つ目のロールを実装し、ロール選択を適用するためのより適切な方法を示します。

```js lines expandable theme={null}
auth.signin(params, function(profile, token) {
  //ソーシャルログインを使用していない場合、ユーザーを管理者として設定する。
  profile.isAdmin = !profile.identities[0].isSocial;
  store.set('profile', profile);
  store.set('token', token);

  // IDトークンからデリゲーショントークンを取得する。
  var options = getOptionsForRole(profile.isAdmin, token);

  // TODO: ステップ3: AWSデリゲーションを設定したら、このセクションを有効にする。
  /*
  auth.getToken(options)
    .then(
      function(delegation)  {
        store.set('awstoken', delegation.Credentials);
        $location.path("/");
      },
    function(err) {
       console.log('デリゲーショントークンの取得に失敗しました', err);
  });
  */
  // TODO: ステップ3: トークン取得APIを追加したら、このリダイレクトを削除する。
  $location.path("/");

}, function(error) {
  console.log("ログイン中にエラーが発生しました", error);
});
```

<div id="modify-the-role-and-principal-strings">
  #### role と principal の文字列を変更する
</div>

`role` と `principal` の文字列 (指定した関数内の `if` 文の最後の 2 行) を変更するには、[Rules](https://manage.auth0.com/#/rules) で適切な値を指定します。

```javascript lines theme={null}
function (user, context, callback) {
  if (context.clientID === 'CLIENT_ID' &&
      context.protocol === 'delegation') {
    // AWS設定を設定する
    context.addonConfiguration = context.addonConfiguration || {};
    context.addonConfiguration.aws = context.addonConfiguration.aws || {};
    context.addonConfiguration.aws.principal = 'arn:aws:iam::[omitted]:saml-provider/auth0-provider';
    context.addonConfiguration.aws.role = 'arn:aws:iam::[omitted]:role/auth0-role';
  }

  callback(null, user, context);
}
```

必ず、`role` と `[principal]` の ARN 値を、使用している統合のものに更新してください。

更新したファイルを、Web サイト用の S3 バケットにコピーしてください。

必要に応じて、ブラウザーで `store.set('awstoken', delegation.Credentials);` にブレークポイントを設定できます。ログアウトしてから再度ログインし、ブレークポイントに到達したら `delegation.Credentials` を確認してください。AccessKeyId や SecretAccessKey など、見慣れた値が表示されます。

```js lines theme={null}
{
    AccessKeyId: "ASIAJB...BNQ",
    SecretAccessKey: "vS+b6...2Noav",
    SessionToken: "AQoDYBqsivOV...DdQW0gsKr8rgU=",
    Expiration: "2015-08-27T14:48:32.000Z"
}
```

これらの値が表示されない場合は、Auth0 アプリケーションの［Addons］タブで Amazon Web Services アドオンが有効になっていることを確認してください。

<div id="display-pets-with-the-aws-api-service">
  ### AWS API Service を使用してペットを表示する
</div>

最初に、エンドユーザーにペットを表示します。

<div id="add-the-api-code-to-call-your-api">
  #### API を呼び出すためのコードを追加する
</div>

サービスへの呼び出しを追加するための API コードを追加するには、先ほどダウンロードした `apiGateway-js-sdk.zip` の内容を `pets` ディレクトリーにコピーします。内容には次のものが含まれている必要があります。

* `apiClient.js`;
* `lib` フォルダー;
* `README.md`.

ダウンロードした内容を確認するには、[AWS API Gateway Tutorial Part 2](/ja/docs/customize/integrations/aws/aws-api-gateway-delegation/aws-api-gateway-delegation-2#deploy-the-api) を参照してください。

`pets` ディレクトリーにはすでに `README.md` があるため、両方のファイルをそのまま置いておくには、どちらか一方のファイル名を変更する必要があります。API Gateway の `README.md` には、Auth0 application から API アプリケーションを使用する方法が説明されています。

`pets` フォルダーのルートにある `index.html` ファイルを開き、API の readme の先頭に記載されているすべてのスクリプトを `index.html` に追加します。

```html lines theme={null}
<!-- aws api gateway 用のパッケージを作成した後に、以下のスクリプトをインクルードしてください。 -->
<script type="text/javascript" src="/lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="/lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="/lib/moment/moment.js"></script>
<script type="text/javascript" src="/lib/url-template/url-template.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="/lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="/apigClient.js"></script>
```

`apigClient.js` を開くと、ダウンロードしたライブラリによって、API メソッド用の `petsPost` や `petsGet` といったラッパーが生成されていることがわかります。この生成コードを変更する必要はありません。\`

<div id="configure-the-getpets-method">
  #### getPets メソッドを設定する
</div>

`home` フォルダー内の `home.js` を開き、`getPets` の内容を、ペットデータを取得するメソッドに更新します (`us-east-1` 以外で実行している場合は、リージョンも忘れずに更新してください) 。

```javascript lines theme={null}
function getPets() {
    // これは未認証です
    var apigClient = apigClientFactory.newClient({
        region: 'us-east-1' // APIがデプロイされているリージョン
    });

    apigClient.petsGet({},{})
      .then(function(response) {
        console.log(response);
        $scope.pets = response.data;
        $scope.$apply();
      }).catch(function (response) {
        alert('pets get failed');
        showError(response);
    });
}
```

更新したコードを S3 バケットにコピーします。ページを更新すると、2 匹のペットが一覧表示されます (前述の API テストを実行してこれらのペットを作成している場合) 。

<div id="update-pets-with-the-aws-api-service">
  ### AWS API Service で Pets を更新する
</div>

これで、API Gateway と連携する Auth0 Application の準備ができたので、`pets` テーブルを更新するメソッドを追加します。

API 関数を使って pets を更新するように、`putPets` メソッドのロジックを変更します。この関数は、pets の追加と削除の両方に使用します。

```javascript lines theme={null}
function putPets(updatedPets) {
    var body = {pets: updatedPets};

    var apigClient = apigClientFactory.newClient({
        region: 'us-east-1' // 使用しているリージョンに設定してください。
    });

    apigClient.petsPost({},body)
      .then(function(response) {
        console.log(response);
       }).catch(function (response) {
        alert('pets update failed');
        showError(response);
      });
}
```

更新したコードを S3 バケットにコピーします。次に、このメソッドをテストします。

1. ログアウトしてから、再度ログインします。
2. `Pet Type` と `Pet Price` に値を入力します。
3. **Save** をクリックしてデータを送信します。

左側に赤い **REMOVE** ボタンが付いた、"We have a `<Pet Type>` for sale for `<Pet Price>`" というメッセージが表示されるはずです。

セキュリティを強化するには、`putPets` メソッドの先頭に `getSecureApiClient` 関数を追加します。

```javascript lines theme={null}
function putPets(updatedPets) {
     var apigClient = getSecureApiClient();
}
```

コードを S3 バケットにコピーします。

用意されている `getSecureApiClient` 関数は、API に対するデリゲーションで取得した AWS トークンをローカルストレージから取得し、アクセスキー、シークレット、セッショントークンを使用します。

```javascript lines theme={null}
function getSecureApiClient() {
    var awstoken = store.get('awstoken');

    return apigClientFactory.newClient({
        accessKey: awstoken.AccessKeyId,
        secretKey: awstoken.SecretAccessKey,
        sessionToken: awstoken.SessionToken,
        region: 'us-east-1' // 使用しているリージョン。
    });
  }
```