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

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

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

​

ステップ 3 - アプリケーションをビルドする

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

​

ステップ 1. サンプルアプリケーションを設定する

シンプルなスターターアプリとして、このチュートリアル用のサンプルプロジェクトをダウンロードして始めます。ログインすると、Auth0 の認証情報が事前に設定された状態になります。

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

​

AWS S3 バケット

静的ウェブサイトとして機能するように設定された AWS S3 バケットを作成済みであることを確認してください。セットアップ中に、ウェブサイトのコンテンツとして pets フォルダーの内容を S3 バケットにコピーします。

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

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” と表示されたアラートボックスがポップアップ表示されるはずです。

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

​

デリゲーションを使用して AWS トークンを取得する

この時点で、Auth0 で認証の設定は完了しており、OpenID JWT を取得しています。生成されたコードのディレクトリ構造は次のとおりです。

Auth0 のデリゲーション機能を使用すると、Auth0 の IDトークン に基づく AWS の アクセストークン を取得できます。内部では、Auth0 が IDトークンを検証し、その後、設定したアドオンに応じて SAML を使用します。

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

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);
});

​

role と principal の文字列を変更する

role と principal の文字列 (指定した関数内の if 文の最後の 2 行) を変更するには、Rules で適切な値を指定します。

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 など、見慣れた値が表示されます。

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

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

​

AWS API Service を使用してペットを表示する

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

​

API を呼び出すためのコードを追加する

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

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

ダウンロードした内容を確認するには、AWS API Gateway Tutorial Part 2 を参照してください。

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

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

<!-- 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 といったラッパーが生成されていることがわかります。この生成コードを変更する必要はありません。`

​

getPets メソッドを設定する

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

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 テストを実行してこれらのペットを作成している場合) 。

​

AWS API Service で Pets を更新する

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

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

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 関数を追加します。

function putPets(updatedPets) {
     var apigClient = getSecureApiClient();
}

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

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

function getSecureApiClient() {
    var awstoken = store.get('awstoken');

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