AWS API Gatewayチュートリアルの手順3

この機能は委任を使用します。2017年6月8日より、アドオンを使用していないテナントでは、デフォルトで委任が無効になります。委任を必要とするアドオンを使用中のレガシーテナントは、引き続きこの機能を使用できます。今後、委任機能が変更されるか、サービスから削除されることがあれば、使用中のお客様が余裕を持って移行できるよう、あらかじめお知らせします。また、委任はカスタムドメインの使用をサポートしていないため、委任に依存する機能をカスタムドメインと共に使うとうまく機能しない可能性があります。

手順3：アプリケーションの構築

この手順では、AngularJS frameworkおよび静的Webサイトとして機能するように構成されたAWS S3バケットを使用して、シングルページのサーバーレスアプリケーションを構築します。

1.サンプルアプリケーションのセットアップ

シンプルなスターターアプリについては、このチュートリアル固有のサンプルプロジェクトをダウンロードして始めてください。Auth0資格情報を事前構成するためにログインします。

このシードプロジェクトのコンテンツをpetsという名前のローカルフォルダーにコピーします。これは、チュートリアルのリマインダーとして使用します。このフォルダー内で、auth0-variables.jsをAuth0アプリケーションAUTH0_CLIENT_IDおよびAUTH0_CLIENT_ID（この情報はアプリケーションのManagement Dashboardで利用可能）で更新します。

AWS S3バケット

静的Webサイトとして機能するように構成してAWS S3バケットを作成してください。セットアッププロセス中に、Webサイトにコンテンツを提供するために、petsフォルダーのコンテンツをS3バケットにコピーします。

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

aws s3 cp --recursive --acl "public-read" ./ s3://{yourBucket}/

Was this helpful?

進める前に、ユーザー名-パスワード-認証（または使用しているアプリケーションと関連するデータベース接続）接続と関連するユーザーが少なくとも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つ目のロールをコーディングし、ロール選択を強制する、より良い方法をご紹介します。

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

Was this helpful?

ロールおよびプリンシパル文字列の変更

ロールおよびプリンシパル文字列（提供された関数に含まれるifステートメントの最後の2列）を変更するには、Rulesを介して適切な値を指定してください。

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

Was this helpful?

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"
}

Was this helpful?

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

AWS APIサービスでペットを表示

まず最初に行うことは、エンドユーザーにペットを表示することです。

APIコードを追加してAPIを呼び出す

サービスへのコールを追加するためにAPIコードを追加するには、前にダウンロードしたapiGateway-js-sdk.zipのコンテンツをpetsディレクトリにコピーします。コンテンツには以下が含まれます。

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

ダウンロードを確認するには、AWS API Gatewayチュートリアルの手順2を参照してください。

petsディレクトリにはすでにREADME.mdがあるため、ディレクトリ内の両方のファイルを維持するために、ファイルの１つの名前を変更する必要があります。APIゲートウェイのREADME.mdは、Auth0アプリケーションのAPIアプリケーションの使用方法について説明しています。

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

<!-- scripts for aws api gateway include after you create your package from aws for api gateway. -->
<script type="text/javascript" src="/docs/lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="/docs/lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="/docs/lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="/docs/lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="/docs/lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="/docs/lib/moment/moment.js"></script>
<script type="text/javascript" src="/docs/lib/url-template/url-template.js"></script>
<script type="text/javascript" src="/docs/lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="/docs/lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="/docs/lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="/docs/lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="/docs/apigClient.js"></script>

Was this helpful?

apigClient.jsを開くと、ダウンロード済みのライブラリーが、APIメソッドにpetsPostおよびpetsGetなどのラッパーを作成していることを確認できます。これらの生成されたコードを変更する必要はありません。

getPetsメソッドを構成する

homeフォルダーのhome.jsを開き、getPetsのコンテンツをペットデータを取得するメソッドで更新します（us-east-1で実行していない場合は、地域を更新してください）。

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

Was this helpful?

更新済みのコードを、S3バケットにコピーします。ページをリフレッシュして、2つの動物が表示されていることを確認します（前に説明したテストをAPIで実行した場合、これらのペットが作成されました）。

AWS APIサービスでペットを更新

現在、APIゲートウェイでAuth0アプリケーションが機能しているので、petsテーブルを更新するためのメソッドを追加します。

putPetsメソッドロジックを変更して、API関数を使用してペットを更新します。この関数は、ペットの追加と削除の両方に使用されます。

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

Was this helpful?

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

ログアウトし、ログインし直します
Pet TypeおよびPet Priceの値に入力します。
［Save（保存）］をクリックしてデータをポストします。

「We have a <Pet Type> for sale for <Pet Price>（<Pet Price>で販売されている<Pet Type>がいます）」のメッセージと、左側に赤色の［REMOVE（削除）］ボタンが表示されます。

セキュリティを追加するために、putPetsメソッドの始めにgetSecureApiClient関数を追加します。

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

Was this helpful?

コードを、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' // The region you are working out of.
    });
  }

Was this helpful?

カスタマイズ

AWS API Gatewayチュートリアルの手順3

手順3：アプリケーションの構築

1.サンプルアプリケーションのセットアップ

AWS S3バケット

AWSトークンを取得するために委任を使用する

ロールおよびプリンシパル文字列の変更

AWS APIサービスでペットを表示

APIコードを追加してAPIを呼び出す

getPetsメソッドを構成する

AWS APIサービスでペットを更新