トークンを用いた API コールの追加

サインインしてトークンを取得したら、これらのトークンを使用して API Gateway 上の保護された API へのアクセスすることができます。

[id_token を利用した Cognito オーソライザーが有効化されている API があることを確認してください。オーソライザー設定から OAuth スコープを削除します。完了したら、本番ステージにデプロイします。]

handson

  1. API を呼び出して結果をレンダリングするための html レイアウトを追加します。

    <div id="callapis" class="w3-container w3-padding-large w3-grey tab" style="display:none">
<button type="submit" class="w3-button w3-black w3-margin-bottom" onclick="callAPIGW()">Call APIGW</button>
<div class="w3-section">
  <pre class="" id="apiresponse"></pre>
</div>
</div>
    1. 以下の関数を追加すると、認証されたユーザーの ID トークンを使用して API を呼び出すことができます。TYPE_YOUR_API_GATEWAY_ENDPOINT_URL を API GW エンドポイント URL に置き換えます。次のような名前になっているはずです。”https://[namerandom].execute-api.ap-southeast-2.amazonaws.com/prod/pets”
    /**
* Call protected APIGW endpoint
*
*Important:
*Make sure apigw cognito authorizer configuration is complete
*Make sure api accepts id-token (no oauth scope defined in authorization)
*You can only use id-token since custom scopes are not supported when sdk is used
*/
function callAPIGW(){

apiGatewayUrl = "__TYPE_YOUR_API_GATEWAY_ENDPOINT_URL__";

// set ID Token in "Authorization" header
const headers = {
	'Content-Type': 'application/json',
'Authorization': cognitoUser.signInUserSession.idToken.jwtToken
}

axios.get(apiGatewayUrl, { headers: headers }).then((response) => {
console.log(response.data);
$("#apiresponse").html('<b>Response</b><br>'+JSON.stringify(response.data,null, 2));
}).catch(function (error) {
console.error(error);
});
}

API の呼び出しをテストできるようになりました。サインインして Cognitoからトークンを取得したら、Call APIs タブに移動して Call APIGW ボタンをクリックします。

handson

handson

::alert[CORS エラーを受け取った場合は、200 と 401 のレスポンスコードの両方で「Access-Control-Allow-Origin」ヘッダーを返すように API が設定されていることを確認してください (トークンが無効、期限切れ、または見つからない場合は 401 を受け取ります)。]

handson