> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-fix-docs-5528-php-updates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# AWS API Gatewayチュートリアルの手順3
> Amazon API Gatewayチュートリアルの手順3
この機能は委任を使用します。2017年6月8日より、アドオンを使用していないテナントでは、デフォルトで委任が無効になります。委任を必要とするアドオンを使用中のレガシーテナントは、引き続きこの機能を使用できます。今後、委任機能が変更されるか、サービスから削除されることがあれば、使用中のお客様が余裕を持って移行できるよう、あらかじめお知らせします。また、委任はカスタムドメインの使用をサポートしていないため、委任に依存する機能をカスタムドメインと共に使うとうまく機能しない可能性があります。
## 手順3：アプリケーションの構築
この手順では、AngularJS frameworkおよび静的Webサイトとして機能するように構成されたAWS S3バケットを使用して、シングルページのサーバーレスアプリケーションを構築します。
### 1.サンプルアプリケーションのセットアップ
シンプルなスターターアプリについては、このチュートリアル固有の[サンプルプロジェクトをダウンロード](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)で利用可能）で更新します。
#### AWS S3バケット
[静的Webサイトとして機能するように構成してAWS S3バケットを作成](http://docs.aws.amazon.com/gettingstarted/latest/swh/website-hosting-intro.html)してください。セットアッププロセス中に、Webサイトにコンテンツを提供するために、`pets`フォルダーのコンテンツをS3バケットにコピーします。
既存のバケットを使用する場合は、以下のコマンドを使用して、AWS CLIのファイルを移動できます。
```bash lines theme={null}
aws s3 cp --recursive --acl "public-read" ./ s3://{yourBucket}/
```
進める前に、ユーザー名-パスワード-認証（または使用しているアプリケーションと関連するデータベース接続）接続と関連するユーザーが少なくとも1名いることを確認してください。サンプルアプリの機能性およびAWSとの統合を完全に利用するには、認証をテストしてアクセスを得るために、そのユーザーが必要になります。
最後になりますが、アプリケーションの［Settings（設定）］ページの **［Allowed Origins（許可されたオリジン）］** フィールドにURLを提供することで、Auth0がWebサイトからの認証を許可することを確認してください。WebサイトのURLはこのようになっているはずです。
`http://your-bucket.s3-website-us-east-1.amazonaws.com`
URLが分からない場合は、S3バケットの **［Properties（プロパティ）］** タブのリストで確認できます。
先に進める前に、アプリケーションへのログインをテストします。ブラウザーで`http://your-bucket-domain/index.html`を開きます。ログインしたら、「getPets not implemented（getPetsが実装されていません）」という警告ボックスが表示されます。
また、ペットを確認するためのページが表示されます。
### AWSトークンを取得するために委任を使用する
この時点で、Auth0の認証をセットアップし、OpenID JWTが手元にあります。生成されたコードのディレクトリ構造は以下です。
Auth0の委任機能を使用して、Auth0 IDトークンに基づいたAWSアクセストークンを取得できます。バックエンドでは、Auth0がIDトークンを認証し、その後構成したアドオンに基づいてSAMLを使用します。
`auth.signin`でサインイン後にIDトークンからAWS委任トークンを取得するために、以下のように`pets/login/login.js`を更新します。ソーシャル接続を使用してログインしていないユーザーを管理者として取り扱っていることにご注意ください。後で、2つ目のロールをコーディングし、ロール選択を強制する、より良い方法をご紹介します。
```js lines expandable theme={null}
auth.signin(params, function(profile, token) {
//Set user as admin if they did not use a social login.
profile.isAdmin = !profile.identities[0].isSocial;
store.set('profile', profile);
store.set('token', token);
// get delegation token from identity token.
var options = getOptionsForRole(profile.isAdmin, token);
// TODO: Step 3: Enable this section once you setup AWS delegation.
/*
auth.getToken(options)
.then(
function(delegation) {
store.set('awstoken', delegation.Credentials);
$location.path("/");
},
function(err) {
console.log('failed to acquire delegation token', err);
});
*/
// TODO: Step 3: Remove this redirect after you add the get token API.
$location.path("/");
}, function(error) {
console.log("There was an error logging in", error);
});
```
#### roleおよびprincipal文字列の変更
`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') {
// set AWS settings
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"
}
```
これらの値が表示されない場合は、Amazon Web ServicesのアドオンがAuth0アプリケーションのAddonsタブで有効になっていることを確認してください。
### AWS APIサービスでペットを表示
まず最初に行うことは、エンドユーザーにペットを表示することです。
#### APIコードを追加してAPIを呼び出す
サービスへのコールを追加するためにAPIコードを追加するには、前にダウンロードしたapiGateway-js-sdk.zipのコンテンツを`pets`ディレクトリにコピーします。コンテンツには以下が含まれます。
* `apiClient.js`;
* `lib`フォルダー
* `README.md`.
ダウンロードを確認するには、[AWS API Gatewayチュートリアルの手順2](/docs/ja-jp/customize/integrations/aws/aws-api-gateway-delegation/aws-api-gateway-delegation-2#deploy-the-api)を参照してください。
`pets`ディレクトリにはすでに`README.md`があるため、ディレクトリ内の両方のファイルを維持するために、ファイルの１つの名前を変更する必要があります。APIゲートウェイの`README.md`は、Auth0アプリケーションのAPIアプリケーションの使用方法について説明しています。
`pets`フォルダーのルートにある`index.html`ファイルを開き、API readmeの上部にリスト表示されているスクリプトすべてを`index.html`に追加します。
```html lines theme={null}
```
`apigClient.js`を開くと、ダウンロード済みのライブラリーが、APIメソッドに`petsPost`および`petsGet`などのラッパーを作成していることを確認できます。これらの生成されたコードを変更する必要はありません。
#### getPetsメソッドを構成する
`home`フォルダーの`home.js`を開き、`getPets`のコンテンツをペットデータを取得するメソッドで更新します（`us-east-1`で実行していない場合は、地域を更新してください）。
```javascript lines theme={null}
function getPets() {
// this is unauthenticated
var apigClient = apigClientFactory.newClient({
region: 'us-east-1' // The region where the API is deployed
});
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で実行した場合、これらのペットが作成されました）。
### AWS APIサービスでペットを更新
現在、APIゲートウェイでAuth0アプリケーションが機能しているので、`pets`テーブルを更新するためのメソッドを追加します。
`putPets`メソッドロジックを変更して、API関数を使用してペットを更新します。この関数は、ペットの追加と削除の両方に使用されます。
```javascript lines theme={null}
function putPets(updatedPets) {
var body = {pets: updatedPets};
var apigClient = apigClientFactory.newClient({
region: 'us-east-1' // set this to the region you are running in.
});
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（保存）］** をクリックしてデータをポストします。
「We have a `` for sale for ``（``で販売されている``がいます）」のメッセージと、左側に赤色の **［REMOVE（削除）］** ボタンが表示されます。
セキュリティを追加するために、`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' // The region you are working out of.
});
}
```