# Storage Browser for Amazon S3 の使用
[Storage Browser for S3](https://aws.amazon.com/s3/features/storage-browser/) は、エンドユーザーに Amazon S3 に保存されたデータ用のシンプルなグラフィカルインターフェイスを提供するために、ウェブアプリケーションに追加できるオープンソースコンポーネントです。Storage Browser for S3 を使用すると、承認されたエンドユーザーに、S3 内のデータを独自のアプリケーションから直接参照、ダウンロード、アップロード、コピー、削除するためのアクセスを提供できます。
Storage Browser for S3 では、ファイルに対して `LIST`、`GET`、`PUT`、`COPY`、`UPLOAD`、および `DELETE` のオペレーションがサポートされています。高スループットのデータ転送を実現するために、Storage Browser for S3 には、エンドユーザーがアクセスを許可されているデータのみが表示され、アップロードリクエストが最適化されます。また、Storage Browser は、パフォーマンスを最適化してロード時間を短縮し、エンドユーザーがアップロードするデータのチェックサムを計算し、パブリックインターネット上でデータの整合性が (転送中に) 維持されたことを確認した後にオブジェクトを受け入れます。AWS セキュリティおよび ID サービス、または独自のマネージドサービスを使用して、エンドユーザーの ID に基づいてデータへのアクセスを制御できます。既存のアプリケーションの設計やブランドに合わせて Storage Browser をカスタマイズすることもできます。
Storage Browser for S3 は、React フレームワーク上のウェブおよびイントラネットアプリケーションでのみ使用できます。Storage Browser を使用して、S3 Glacier Flexible Retrieval、S3 Glacier Deep Archive、S3 Intelligent-Tiering Archive アクセス階層、および S3 Intelligent-Tiering Deep Archive アクセス階層を除くすべてのストレージクラスの Amazon S3 オブジェクトにアクセスできます。
Storage Browser for S3 は、[AWS Amplify React](https://ui.docs.amplify.aws/) ライブラリのウェブアプリケーションで使用できます。Storage Browser の詳細については、「[Storage Browser for S3](https://aws.amazon.com/s3/features/storage-browser/)」を参照してください。
**Topics**
+ [Storage Browser for S3 の使用](using-storagebrowser.md)
+ [Storage Browser for S3 のインストール](installing-storagebrowser.md)
+ [Storage Browser for S3 の設定](setup-storagebrowser.md)
+ [Storage Browser for S3 の設定](s3config-storagebrowser.md)
+ [Storage Browser for S3 のトラブルシューティング](troubleshooting-storagebrowser.md)
# Storage Browser for S3 の使用
Storage Browser for S3 の場合、*場所*とは S3 汎用バケットまたはプレフィックスのことで、[S3 Access Grants](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants.html)、IAM ポリシー、または独自のマネージド認可サービスを使用するアクセス権をエンドユーザーに付与します。エンドユーザーが特定の場所にアクセスすることを認証したら、その場所内の任意のデータを操作できます。
Storage Browser for S3 ユーザーインターフェイスには、次の 4 つのメインビューがあります。
+ **ホームページ:** ホームページには、ユーザーがアクセスできる S3 の場所と、それぞれのアクセス許可が一覧表示されます。これは、エンドユーザーがアクセスできるルートレベルの S3 リソースと、各 S3 の場所に対するアクセス許可 (READ/WRITE/READWRITE) を表示するユーザーの初期ビューです。
+ **場所の詳細:** このビューでは、ユーザーは S3 内のファイルとフォルダを参照し、ファイルをアップロードまたはダウンロードできます。(Storage Browser for S3 では、*オブジェクト*はファイル、*プレフィックス*と*バケット*はフォルダと呼ばれます。)
+ **場所のアクション:** ユーザーが Storage Browser でアクション (**[アップロード]** など) を選択すると、ファイルの場所の別のビューが開きます。
+ **縦の省略記号:** 縦の省略記号のアイコンは、アクションのドロップダウンリストを開きます。
Storage Browser for S3 を使用する場合は、次の制限事項に注意してください。
+ ドット (.) で始まる、または終わるフォルダはサポートされていません。
+ WRITE のみのアクセス許可を持つ S3 Access Grants はサポートされていません。
+ Storage Browser for S3 は、最大 160 GB のサイズのファイルに対する `PUT` オペレーションをサポートします。
+ Storage Browser for S3 は、5 GB 未満のファイルに対してのみ `COPY` オペレーションをサポートします。ファイルサイズが 5 GB を超えると、Storage Browser はリクエストに失敗します。
# Storage Browser for S3 のインストール
Storage Browser の使用を開始する最も簡単な方法は、GitHub のサンプルプロジェクトの 1 つをクローンすることです。これらのサンプルプロジェクトを利用すると、AWS Identity and Access Management 用の AWS サービスが事前に統合された、Storage Browser 向けの本番稼働用ウェブアプリケーションを簡単にデプロイして、承認されたエンドユーザーを S3 のデータにすばやく接続できます。
詳細については、「*Amplify Dev Center*」の「[Quick start](https://ui.docs.amplify.aws/react/connected-components/storage/storage-browser#quick-start)」を参照してください。
## GitHub からの Storage Browser for S3 のインストール
または、[https://github.com/aws-amplify](https://github.com/aws-amplify) GitHub リポジトリの最新バージョンの `aws-amplify/ui-react-storage` および `aws-amplify` パッケージから Storage Browser for S3 をインストールして、既存のアプリケーションへの Storage Browser の統合を開始することもできます。Storage Browser for S3 をインストールするときは、次の依存関係を `package.json` ファイルに追加してください。
```
"dependencies": {
"aws-amplify/ui-react-storage": "latest",
"aws-amplify": "latest",
}
```
または、Node Package Manager (NPM) を使用して依存関係を追加することもできます。
```
npm i --save @aws-amplify/ui-react-storage aws-amplify
```
# Storage Browser for S3 の設定
エンドユーザーを Amazon S3 の*場所*に接続するには、まず認証と認可の方法を設定する必要があります。Storage Browser で認証と認可の方法を設定するには、次の 3 つの方法があります。
+ [方法 1: 顧客およびサードパーティーパートナーのデータアクセスの管理](#setup-storagebrowser-method1)
+ [方法 2: AWS アカウント用 IAM プリンシパルのデータアクセスの管理](#setup-storagebrowser-method2)
+ [方法 3: 大規模なデータアクセスの管理](#setup-storagebrowser-method3)
## 方法 1: 顧客およびサードパーティーパートナーのデータアクセスの管理
この方法では、[AWS Amplify Auth](https://docs.amplify.aws/react/build-a-backend/auth/set-up-auth/) を使用してファイルのアクセスコントロールとセキュリティを管理できます。この方法は、顧客またはサードパーティーのパートナーを S3 のデータに接続する場合に最適です。このオプションを使用すると、顧客はソーシャル ID プロバイダーまたはエンタープライズ ID プロバイダーを使用して認証できます。
Amplify Storage を使用するように設定された S3 バケットで AWS Amplify Auth を使用して、エンドユーザーとサードパーティーのパートナーに IAM 認証情報を提供します。AWS AmplifyAuth は、フルマネージドの顧客 ID およびアクセス管理サービスである [Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) 上に構築されており、組み込みのユーザーディレクトリまたはエンタープライズディレクトリ、またはコンシューマー ID プロバイダーからユーザーを認証および認可できます。Amplify 認可モデルは、現在の認証済みユーザーがアクセスできるプレフィックスを定義します。AWS Amplify に対する認可を設定する方法の詳細については、「[Set up storage](https://docs.amplify.aws/react/build-a-backend/storage/set-up-storage/)」を参照してください。
Amplify 認証およびストレージメソッドを使用してコンポーネントを初期化するには、ウェブアプリケーションに次のコードスニペットを追加します。
```
import {
createAmplifyAuthAdapter,
createStorageBrowser,
} from '@aws-amplify/ui-react-storage/browser';
import "@aws-amplify/ui-react-storage/styles.css";
import config from './amplify_outputs.json';
Amplify.configure(config);
export const { StorageBrowser } = createStorageBrowser({
config: createAmplifyAuthAdapter(),
});
```
## 方法 2: AWS アカウント用 IAM プリンシパルのデータアクセスの管理
IAM プリンシパルまたは AWS アカウントへのアクセスを直接管理する場合は、[https://docs.aws.amazon.com/AmazonS3/latest/API/API_control_GetDataAccess.html](https://docs.aws.amazon.com/AmazonS3/latest/API/API_control_GetDataAccess.html) S3 API オペレーションを呼び出すアクセス許可を持つ IAM ロールを作成できます。これを設定するには、S3 Access Grants インスタンスを作成して、S3 汎用バケットとプレフィックスのアクセス許可を指定先の IAM ID にマッピングする必要があります。Storage Browser コンポーネント (IAM 認証情報を取得した後にクライアント側で呼び出す必要がある) は、次に [https://docs.aws.amazon.com/AmazonS3/latest/API/API_control_ListCallerAccessGrants.html](https://docs.aws.amazon.com/AmazonS3/latest/API/API_control_ListCallerAccessGrants.html) S3 API オペレーションを呼び出して、ID リクエスタに使用可能な権限を取得し、コンポーネント内の場所を入力します。`s3:GetDataAccess` アクセス許可を取得すると、Storage Browser コンポーネントはそれらの認証情報を使用して S3 へのデータアクセスをリクエストします。
```
import {
createManagedAuthAdapter,
createStorageBrowser,
} from '@aws-amplify/ui-react-storage/browser';
import "@aws-amplify/ui-react-storage/styles.css";
export const { StorageBrowser } = createStorageBrowser({
config: createManagedAuthAdapter({
credentialsProvider: async (options?: { forceRefresh?: boolean }) => {
// return your credentials object
return {
credentials: {
accessKeyId: 'my-access-key-id',
secretAccessKey: 'my-secret-access-key',
sessionToken: 'my-session-token',
expiration: new Date()
},
}
},
// AWS `region` and `accountId`
region: '',
accountId: '',
// call `onAuthStateChange` when end user auth state changes
// to clear sensitive data from the `StorageBrowser` state
registerAuthListener: (onAuthStateChange) => {},
})
});
```
## 方法 3: 大規模なデータアクセスの管理
[S3 Access Grants](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants.html) インスタンスを IAM アイデンティティセンターに関連付けて、よりスケーラブルなソリューション (会社全体にデータアクセスを提供するなど) を行う場合は、現在の認証済みユーザーに代わって Amazon S3 にデータをリクエストできます。例えば、企業ディレクトリ内のユーザーグループに S3 内のデータへのアクセスを許可できます。このアプローチにより、Microsoft Entra、Okta などの外部プロバイダーでホストされているアクセス許可など、ユーザーとグループの S3 Access Grants アクセス許可を一元管理できます。
この方法を使用する場合、[IAM アイデンティティセンターとの統合](https://docs.aws.amazon.com/singlesignon/latest/userguide/trustedidentitypropagation.html)により、既存のユーザーディレクトリを使用できます。IAM アイデンティティセンターの信頼できる ID の伝播のもう 1 つの利点は、[Amazon S3 の AWS CloudTrail データイベント](https://docs.aws.amazon.com/AmazonS3/latest/userguide/enable-cloudtrail-logging-for-s3.html)それぞれに、S3 データにアクセスしたエンドユーザー ID への直接参照が含まれていることです。
OAuth 2.0 をサポートするアプリケーションがあり、ユーザーがこれらのアプリケーションから AWS サービスにアクセスする必要がある場合、信頼できる ID の伝播を使用することをお勧めします。信頼できる ID の伝播を使用すると、ユーザーはアプリケーションにサインインでき、そのアプリケーションは AWS サービス内のデータにアクセスするすべてのリクエストにユーザーの ID を渡すことができます。このアプリケーションは、認証されたユーザーに代わって IAM アイデンティティセンターとやり取りします。詳細については、「[Using trusted identity propagation with customer managed applications](https://docs.aws.amazon.com/singlesignon/latest/userguide/trustedidentitypropagation-using-customermanagedapps-setup.html)」を参照してください。
[信頼された ID の伝播](https://docs.aws.amazon.com//singlesignon/latest/userguide/trustedidentitypropagation-overview.html)は、接続された AWS のサービス の管理者がサービスデータへのアクセスを許可および監査するために使用できる AWS IAM アイデンティティセンター 機能です。このデータへのアクセスは、グループの関連付けなどのユーザー属性に基づいています。信頼された ID の伝播を設定するには、接続された AWS のサービス の管理者と IAM アイデンティティセンターの管理者とのコラボレーションが必要です。詳細については、「[Prerequisites and considerations](https://docs.aws.amazon.com//singlesignon/latest/userguide/trustedidentitypropagation-overall-prerequisites.html)」を参照してください。
### セットアップ
[S3 Access Grants](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants.html) と [IAM アイデンティティセンターの信頼できる ID 伝播](https://docs.aws.amazon.com/singlesignon/latest/userguide/trustedidentitypropagation.html)を使用して AWS マネジメントコンソール で Storage Browser 認証を設定するには、アプリケーションが現在の認証済みユーザーに代わって Amazon S3 にデータをリクエストする必要があります。この方法では、企業ディレクトリのユーザーまたはユーザーのグループに S3 バケット、プレフィックス、またはオブジェクトへの直接アクセスを許可できます。つまり、アプリケーションはユーザーを IAM プリンシパルにマッピングする必要はありません。
次のワークフローは、IAM アイデンティティセンターと S3 Access Grants を使用して Storage Browser for S3 を設定する手順の概要を示しています。
| Steps | Description |
| --- | --- |
| 1 | [AWS Organizations で IAM アイデンティティセンターを有効にする](#enable-iam-idc-org) |
| 2 | [AWS Identity and Access Management アイデンティティセンターフェデレーションを設定する](#configure-iam-idc) |
| 3 | [AWS Identity and Access Management アイデンティティセンターコンソールで信頼できるトークン発行者を追加する](#add-trusted-token-issuer-idc) 信頼されたトークン発行者は、IAM アイデンティティセンター内の外部 ID プロバイダー (IdP) を表し、アプリケーションの認証済みユーザーの ID トークンを認識できるようにします。 |
| 4 | [`bootstrap` アプリケーションと `identity bearer` 用の IAM ロールを作成する](#create-iam-role-bootstrap) |
| 5 | [IAM アイデンティティセンターでアプリケーションを作成および設定する](#create-app-iam-idc) このアプリケーションは、認証されたユーザーに代わって IAM アイデンティティセンターとやり取りします。 |
| 6 | [S3 Access Grants を ID 伝播用の信頼されたアプリケーションとして追加する](#add-s3-ag-app) このステップでは、アプリケーションを S3 Access Grants に接続し、認証されたユーザーに代わって S3 Access Grants にリクエストできるようにします。 |
| 7 | [ユーザーまたはグループへの許可を作成する](#create-grant-user-group) このステップでは、AWS Identity and Access Management アイデンティティセンターのユーザーをクロスドメインアイデンティティ管理 (SCIM) のシステムと同期します。SCIM は、IAM アイデンティティセンターの ID と ID プロバイダー (IdP) の ID を同期させます。 |
| 8 | [Storage Browser for S3 コンポーネントを作成する](#create-storage-browser-component) |
### AWS Organizations で IAM アイデンティティセンターを有効にする
IAM アイデンティティセンターを有効にするには、以下の手順に従います。
1. 次のいずれかの方法を使用して、AWS マネジメントコンソールにサインインします。
1. ****[新規の AWS (ルートユーザー)]** –** [ルートユーザー] を選択し、AWS アカウント E メールアドレスを入力して、アカウント所有者としてサインインします。次のページでパスワードを入力します。
1. ****[既に使用している AWS (IAM 認証情報)]** —** 管理者権限を持つ IAM 認証情報を使用してサインインします。
1. [IAM Identity Center コンソール](https://console.aws.amazon.com/singlesignon) を開きます。
1. **[IAM Identity Center を有効にする]** で、**[有効にする]** を選択します。
**注記**
IAM アイデンティティセンターには AWS Organizations の設定が必要です。組織をまだ設定していない場合は、AWS が作成するように選択できます。このプロセスを完了するには、** AWS 組織の作成** を選択します。
1. **[AWS Organizations で有効化]** を選択します。
1. [**続行**] をクリックしてください。
1. (オプション) この組織インスタンスに関連付けるタグを追加します。
1. (オプション) 委任管理を設定します。
**注記**
マルチアカウント環境を使用している場合は、委任管理を設定することをお勧めします。委任管理では、AWS Organizations の管理アカウントへのアクセスを必要とするユーザーの数を制限できます。詳細については、「[Delegated admin](https://docs.aws.amazon.com/singlesignon/latest/userguide/delegated-admin.html)」を参照してください。
1. **[保存]** を選択します。
AWS Organizations は、管理アカウントに関連付けられているアドレスに確認 E メールを自動的に送信します。検証 E メールの受信には時間がかかる場合があります。検証 E メールの有効期限が切れる前に、必ず 24 時間以内に E メールアドレスを確認してください。
### AWS Identity and Access Management アイデンティティセンターフェデレーションを設定する
企業ディレクトリユーザーで Storage Browser for S3 を使用するには、外部 ID プロバイダー (IdP) を使用するように IAM アイデンティティセンターを設定する必要があります。選択した推奨 ID プロバイダーを使用できます。ただし、各 ID プロバイダーは異なる構成設定を使用することに注意してください。さまざまな外部 ID プロバイダーの使用に関するチュートリアルについては、「[IAM Identity Center source tutorials](https://docs.aws.amazon.com/singlesignon/latest/userguide/tutorials.html)」を参照してください。
**注記**
設定した ID プロバイダーの発行者 URL と対象者属性は、後のステップで参照する必要があるため、必ず記録してください。IdP の設定に必要なアクセス許可またはアクセス許可がない場合は、外部 IdP の管理者に連絡して取得する必要がある場合があります。
### AWS Identity and Access Management アイデンティティセンターコンソールで信頼できるトークン発行者を追加する
信頼できるトークン発行者は、AWS Identity and Access Management アイデンティティセンターの外部 ID プロバイダーを表し、アプリケーションの認証済みユーザーのトークンを認識します。AWS Organizations の IAM アイデンティティセンターインスタンスのアカウント所有者は、以下の手順を実行する必要があります。これらの手順は、IAM アイデンティティセンターコンソールまたはプログラムで実行できます。
AWS Identity and Access Management アイデンティティセンターコンソールで信頼できるトークン発行者を追加するには、次の手順を実行します。
1. [IAM Identity Center コンソール](https://console.aws.amazon.com/singlesignon) を開きます。
1. **[設定]** を選択します。
1. **[認証]** タブを選択します。
1. **[信頼できるトークン発行者]** セクションに移動し、次の詳細を入力します。
1. **[発行者 URL]** に、信頼できるトークン発行者として機能する外部 IdP の URL を入力します。この情報を取得するには、外部 IdP の管理者に連絡する必要がある場合があります。詳細については、「[Using applications with a trusted token issuer](https://docs.aws.amazon.com/singlesignon/latest/userguide/using-apps-with-trusted-token-issuer.html)」を参照してください。
1. **[信頼できるトークン発行者名]** に、信頼できるトークン発行者の名前を入力します。この名前は、アプリケーションリソースが ID の伝播用に設定されている場合、*ステップ 8* で選択できる信頼できるトークン発行者のリストに表示されます。
1. **[マップ属性]** を任意のアプリケーション属性に更新します。ここで、各 ID プロバイダー属性は IAM アイデンティティセンター属性にマッピングされます。例えば、IAM アイデンティティセンターのユーザー属性 `email` に[アプリケーション属性 `email` をマッピング](https://docs.aws.amazon.com/singlesignon/latest/userguide/mapawsssoattributestoapp.html)する場合があります。IAM アイデンティティセンターで許可されるユーザー属性のリストを確認するには、「[Attribute mappings for AWS Managed Microsoft AD directory](https://docs.aws.amazon.com/singlesignon/latest/userguide/attributemappingsconcept.html)」の表を参照してください。
1. (オプション) リソースタグを追加する場合は、キーと値のペアを入力します。複数のリソースタグを追加するには、**[新しいタグを追加]** を選択して新しいエントリを生成し、キーと値のペアを入力します。
1. [**信頼できるトークン発行者を作成**] を選択します。
1. 信頼できるトークン発行者の作成が完了したら、アプリケーション管理者に連絡して信頼できるトークン発行者の名前を伝えて、管理者が信頼できるトークン発行者が該当するコンソールに表示されることを確認できるようにします。
1. アプリケーション管理者が、必ず該当するコンソールでこの信頼できるトークン発行者を選択していることを確認してください。これにより、信頼できる ID が伝播されるように構成されたアプリケーションからユーザーがアプリケーションにアクセスできるようになります。
### `bootstrap` アプリケーションと `identity bearer` 用の IAM ロールを作成する
`bootstrap` アプリケーションと `identity bearer` ユーザーが適切に連携できるようにするには、必ず [IAM ロールを 2 つ作成](https://docs.aws.amazon.com/managedservices/latest/onboardingguide/create-iam-role.html)してください。`bootstrap` アプリケーションに 1 つの IAM ロールが必要であり、ID ベアラー、つまり S3 Access Grants を介してアクセスをリクエストするウェブアプリケーションにアクセスするエンドユーザーがもう 1 つの IAM ロールを使用する必要があります。`bootstrap` アプリケーションは、ID プロバイダーによって発行されたトークンを受け取り、`CreateTokenWithIAM` API を呼び出し、このトークンをアイデンティティセンターによって発行されたトークンと交換します。
次のようなアクセス許可を持つ `bootstrap-role` などの IAM ロールを作成します。次の IAM ポリシーの例では、トークン交換を実行するためのアクセス許可を `bootstrap-role` に付与します。
```
{
"Version": "2012-10-17",
"Statement": [{
"Action": [
"sso-oauth:CreateTokenWithIAM",
],
"Resource": "arn:${Partition}:sso::${AccountId}:application/${InstanceId}/${ApplicationId}",
"Effect": "Allow"
},
{
"Action": [
"sts:AssumeRole",
"sts:SetContext"
],
"Resource": "arn:aws:iam::${AccountId}:role/identity-bearer-role",
"Effect": "Allow"
}]
}
```
次に、ID ブローカーが IAM 認証情報の生成に使用する、2 番目の IAM ロール (`identity-bearer-role` など) を作成します。ID ブローカーからウェブアプリケーションに返される IAM 認証情報は、S3 データへのアクセスを許可するために Storage Browser for S3 コンポーネントによって使用されます。
```
{
"Action": [
"s3:GetDataAccess",
"s3:ListCallerAccessGrants",
],
"Resource": "arn:${Partition}:s3:${Region}:${Account}:access-grants/default",
"Effect": "Allow"
}
```
この IAM ロール (`identity-bearer-role`) は、次のステートメントを含む信頼ポリシーを使用する必要があります。
```
{
"Effect": "Allow",
"Principal": {
"AWS": "arn:${Partition}:iam::${Account}:role/${RoleNameWithPath}"
},
"Action": [
"sts:AssumeRole",
"sts:SetContext"
]
}
```
### IAM アイデンティティセンターでアプリケーションを作成および設定する
**注記**
開始する前に、前のステップで必要な IAM ロールが作成されていることを確認してください。このステップでは、これらの IAM ロールのいずれかを指定する必要があります。
AWS IAM アイデンティティセンターでカスタマーマネージドアプリケーションを作成して設定するには、次の手順を実行します。
1. [IAM Identity Center コンソール](https://console.aws.amazon.com/singlesignon) を開きます。
1. **[Applications]** (アプリケーション) を選択します。
1. [**カスタマーマネージド**] タブを選択します。
1. **[アプリケーションの追加]** を選択します。
1. [**アプリケーションタイプを選択**] ページの [**セットアッププリファレンス**] で、[**セットアップしたいアプリケーションがある**] を選択します。
1. [**アプリケーションタイプ**] で [**OAuth 2.0**] を選択します。
1. [**次へ**] を選択します。**[アプリケーションを指定]** ページが表示されます。
1. **[アプリケーションの名前と説明]** セクションで、**storage-browser-oauth** のようなアプリケーションの **[表示名]** を入力します。
1. [**Description**] を入力します。アプリケーションの説明は IAM アイデンティティセンターコンソールと API リクエストに表示されますが、AWS アクセスポータルには表示されません。
1. **[ユーザーとグループの割り当て方法]** で、**[割り当ては不要]** を選択します。このオプションは、権限のあるすべての IAM アイデンティティセンターユーザーとグループにこのアプリケーションへのアクセスを許可します。
1. **[AWS アクセスポータル]** で、ユーザーがアプリケーションにアクセスできるアプリケーション URL を入力します。
1. (オプション) リソースタグを追加する場合は、キーと値のペアを入力します。複数のリソースタグを追加するには、**[新しいタグを追加]** を選択して新しいエントリを生成し、キーと値のペアを入力します。
1. [**次へ**] を選択します。**[認証の指定ページ]** が表示されます。
1. **[信頼できるトークン発行者による認証]** で、チェックボックスを使用して、以前に作成した信頼できるトークン発行者を選択します。
1. **[選択した信頼できるトークン発行者を設定]** で、[[aud クレーム]](https://docs.aws.amazon.com/singlesignon/latest/userguide/trusted-token-issuer-configuration-settings.html#trusted-token-issuer-aud-claim) を入力します。**[aud クレーム]** は JSON ウェブトークン (JWT) の対象者を識別し、信頼できるトークン発行者がこのアプリケーションを識別するための名前です。
**注記**
この情報を取得するには、外部 IdP の管理者に連絡する必要がある場合があります。
1. [**次へ**] を選択します。**[認証情報の指定]** ページが表示されます。
1. **[設定方法]** で、**[1 つ以上の IAM ロールを入力]** を選択します。
1. **[IAM ロールを入力]** で、ID ベアラートークンの [IAM ロール](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles.html)または Amazon リソースネーム (ARN) を追加します。ID ブローカーアプリケーション用に前のステップで作成した IAM ロール (例: **bootstrap-role**) を入力する必要があります。
1. [**次へ**] を選択します。
1. **[確認と設定]** ページで、アプリケーション設定の詳細を確認します。設定を変更する必要がある場合は、**[編集]** を選択して変更するセクションの編集を選択します。
1. [**Submit**] を選択してください。追加したアプリケーションの詳細ページが表示されます。
アプリケーションの設定が完了したら、ユーザーは[作成したアクセス許可のセット](https://docs.aws.amazon.com/singlesignon/latest/userguide/get-started-create-a-permission-set.html)と[割り当てたユーザーアクセス](https://docs.aws.amazon.com/singlesignon/latest/userguide/get-started-assign-account-access-user.html)に基づき、AWS アクセスポータル内からアプリケーションにアクセスできます。
### S3 Access Grants を ID 伝播用の信頼されたアプリケーションとして追加する
カスタマーマネージドアプリケーションを設定したら、ID 伝播用に S3 Access Grants を指定する必要があります。S3 Access Grants は、ユーザーが Amazon S3 データにアクセスするための認証情報を提供します。カスタマーマネージドアプリケーションにサインインすると、S3 Access Grants はユーザーの ID を信頼できるアプリケーションに渡します。
**前提条件:** 以下の手順を実行する前に、S3 Access Grants が設定されていることを確認してください ([S3 Access Grants インスタンスの作成](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants-instance-create.html)や[場所の登録](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants-location-register.html)など)。詳細については、「[S3 Access Grants の開始方法](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants-get-started.html)」を参照してください。
ID 伝播用の S3 Access Grants をカスタマーマネージドアプリケーションに追加するには、次の手順を実行します。
1. [IAM Identity Center コンソール](https://console.aws.amazon.com/singlesignon) を開きます。
1. **[Applications]** (アプリケーション) を選択します。
1. [**カスタマーマネージド**] タブを選択します。
1. **[カスタマーマネージドアプリケーション]** リストで、アクセスのリクエストを開始する OAuth 2.0 アプリケーションを選択します。これはユーザーがサインインするアプリケーションです。
1. [**詳細ページ**] の [**ID の伝播のための信頼されたアプリケーション**] で、[**信頼されたアプリケーションを指定**] を選択します。
1. [セットアップタイプ] で、[個々のアプリケーションとアクセスの指定] を選択して、**[次へ]** を選択します。
1. **[サービスを選択]** ページで、**[S3 Access Grants]** を選択します。S3 Access Grants には、信頼できる ID の伝播用に独自のウェブアプリケーションを定義するために使用できるアプリケーションがあります。
1. [**次へ**] を選択します。次のステップで、アプリケーションを選択します。
1. **[アプリケーションを選択]** ページで、**[個々のアプリケーション]** を選択し、アクセスのリクエストを受信できる各アプリケーションのチェックボックスをオンにして、**[次へ]** を選択します。
1. **[アクセスを設定]** ページの **[設定方法]** で、次のいずれかを選択します。
+ **[アプリケーションごとにアクセスを選択]** — このオプションを選択すると、アプリケーションごとに異なるアクセスレベルを設定できます。アクセスレベルを設定するアプリケーションを選択し、**[アクセスを編集]** を選択します。**[適用するアクセスのレベル]** で、必要に応じてアクセスレベルを変更し、[**変更の保存**] を選択します。
+ ****[すべてのアプリケーションに同じアクセスレベルを適用]** —** アプリケーションごとにアクセスレベルを設定する必要がない場合は、このオプションを選択します。
1. [**次へ**] を選択します。
1. [**設定を確認**] ページで、選択した内容を確認します。
**注記**
ユーザーに `s3:access_grants:read_write` アクセス許可が付与されていることを必ず確認します。このアクセス許可により、ユーザーは Amazon S3 にアクセスするための認証情報を取得できます。書き込みオペレーションへのアクセスを制限するには、前に作成した IAM ポリシーまたは S3 Access Grants のいずれかを使用してください。
1. 変更を加えるには、変更する構成セクションの **[編集]** を選択します。次に、必要な変更を行い、**[変更を保存]** を選択します。
1. **[信頼されたアプリケーション]** を選択して、ID の伝播用に信頼されたアプリケーションを追加します。
### ユーザーまたはグループへの許可を作成する
このステップでは、IAM アイデンティティセンターを使用してユーザーをプロビジョニングします。SCIM は、[ユーザーとグループの自動または手動プロビジョニング](https://docs.aws.amazon.com/singlesignon/latest/userguide/provision-automatically.html)に使用できます。SCIM は、IAM アイデンティティセンターの ID と ID プロバイダー (IdP) の ID を同期させます。これには、IdP と IAM アイデンティティセンターの間で行われるユーザーのプロビジョニング、アップデート、デプロビジョニングが含まれます。
**注記**
S3 Access Grants を IAM アイデンティティセンターで使用すると、ローカルの IAM アイデンティティセンターのユーザーは使用されないため、このステップが必要になります。代わりに、ユーザーを ID プロバイダーから IAM アイデンティティセンターと同期する必要があります。
ID プロバイダーのユーザーを IAM アイデンティティセンターと同期するには、次の手順を実行します。
1. [自動プロビジョニングを有効にします](https://docs.aws.amazon.com/singlesignon/latest/userguide/how-to-with-scim.html)。
1. [アクセストークンを生成します](https://docs.aws.amazon.com/singlesignon/latest/userguide/generate-token.html)。
特定のユースケース用に IAM アイデンティティセンターを使用して ID プロバイダーを設定する方法の例については、「[IAM Identity Center Identity source tutorials](https://docs.aws.amazon.com/singlesignon/latest/userguide/tutorials.html)」を参照してください。
### Storage Browser for S3 コンポーネントを作成する
IAM アイデンティティセンターインスタンスを設定し、S3 Access Grants で許可を作成したら、React アプリケーションを開きます。React アプリケーションで、`createManagedAuthAdapter` を使用して承認ルールを設定します。IAM アイデンティティセンターから取得した認証情報を返すには、認証情報プロバイダーを指定する必要があります。次に、`createStorageBrowser` を呼び出して、Storage Browser for S3 コンポーネントを初期化できます。
```
import {
createManagedAuthAdapter,
createStorageBrowser,
} from '@aws-amplify/ui-react-storage/browser';
import '@aws-amplify/ui-react-storage/styles.css';
export const { StorageBrowser } = createStorageBrowser({
config: createManagedAuthAdapter({
credentialsProvider: async (options?: { forceRefresh?: boolean }) => {
// return your credentials object
return {
credentials: {
accessKeyId: 'my-access-key-id',
secretAccessKey: 'my-secret-access-key',
sessionToken: 'my-session-token',
expiration: new Date(),
},
}
},
// AWS `region` and `accountId` of the S3 Access Grants Instance.
region: '',
accountId: '',
// call `onAuthStateChange` when end user auth state changes
// to clear sensitive data from the `StorageBrowser` state
registerAuthListener: (onAuthStateChange) => {},
})
});
```
次に、ウェブアプリケーションの JSON ウェブトークン (JWT) を IAM アイデンティティセンターの IAM 認証情報と交換するメカニズムを作成します。JWT の交換方法の詳細については、次のリソースを参照してください。
+ *AWS Storage Blog* の「[How to develop a user-facing data application with IAM Identity Center and S3 Access Grants](https://aws.amazon.com/blogs/storage/how-to-develop-a-user-facing-data-application-with-iam-identity-center-and-s3-access-grants-part-2/)」の投稿
+ *AWS Storage Blog* の「[Scaling data access with S3 Access Grants](https://aws.amazon.com/blogs/storage/scaling-data-access-with-amazon-s3-access-grants/)」の投稿
+ *AWS workshop studio* の「[S3 Access Grants workshop](https://catalog.us-east-1.prod.workshops.aws/workshops/77b0af63-6ad2-4c94-bfc0-270eb9358c7a/en-US)」
+ *GitHub* の「[S3 Access Grants workshop](https://github.com/aws-samples/s3-access-grants-workshop)」
次に、認証情報の取得リクエストを処理する API エンドポイントを設定します。JSON ウェブトークン (JWT) 交換を検証するには、次の手順を実行します。
1. 受信リクエストの認可ヘッダーから JSON ウェブトークンを取得します。
1. 指定された JSON ウェブキーセット (JWKS) URL のパブリックキーを使用してトークンを検証します。
1. トークンの有効期限、発行者、件名、対象者のクレームを確認します。
ID プロバイダーの JSON ウェブトークンを AWS IAM 認証情報と交換するには、次の手順を実行します。
**ヒント**
機密情報をログに記録しないようにしてください。認可の不足、トークンの有効期限切れ、その他の例外には、エラー処理コントロールを使用することをお勧めします。詳細については、*AWS Compute Blog* の「[Implementing AWS Lambda error handling patterns ](https://aws.amazon.com/blogs/compute/implementing-aws-lambda-error-handling-patterns/)」の投稿を参照してください。
1. 必要な **[アクセス許可]** と **[スコープ]** のパラメータがリクエストで指定されていることを確認します。
1. [https://docs.aws.amazon.com/singlesignon/latest/OIDCAPIReference/API_CreateTokenWithIAM.html](https://docs.aws.amazon.com/singlesignon/latest/OIDCAPIReference/API_CreateTokenWithIAM.html) API を使用して、JSON ウェブトークンを IAM アイデンティティセンタートークンと交換します。
**注記**
IdP JSON ウェブトークンを使用した後は、再度使用することはできません。IAM アイデンティティセンターと交換するには、新しいトークンを使用する必要があります。
1. IAM アイデンティティセンタートークンを使用して一時的なロールを引き受けるには、[AssumeRole](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRole.html) API オペレーションを使用します。ID ベアラーロールを必ず使用してください。これは、認証情報をリクエストするために ID コンテキスト (**identity-bearer-role** など) を保持するロールとも呼ばれます。
1. IAM 認証情報をウェブアプリケーションに返します。
**注記**
適切なログ記録メカニズムが設定されていることを確認してください。レスポンスは、適切な HTTP ステータスコードを含む標準化された JSON 形式で返されます。
# Storage Browser for S3 の設定
S3 バケットへのアクセスを Storage Browser for S3 に許可するために、Storage Browser コンポーネントは Amazon S3 への REST API コールを行います。デフォルトでは、[Cross-Origin Resource Sharing (CORS)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html) は S3 バケットでは有効になっていません。そのため、Storage Browser がデータにアクセスしている S3 バケットごとに CORS を有効にする必要があります。
例えば、S3 バケットで CORS を有効にするには、次のように CORS ポリシーを更新できます。
```
[
{
"ID": "S3CORSRuleId1",
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD",
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"last-modified",
"content-type",
"content-length",
"etag",
"x-amz-version-id",
"x-amz-request-id",
"x-amz-id-2",
"x-amz-cf-id",
"x-amz-storage-class",
"date",
"access-control-expose-headers"
],
"MaxAgeSeconds": 3000
}
]
```
# Storage Browser for S3 のトラブルシューティング
Storage Browser for S3 で問題が発生した場合は、次のトラブルシューティングのヒントを確認してください。
+ 複数のリクエストに同じトークン (`idToken` または `accessToken`) を使用しないでください。トークンは再利用できません。これにより、リクエストが失敗します。
+ Storage Browser コンポーネントに提供する IAM 認証情報に、`s3:GetDataAccess` オペレーションを呼び出すためのアクセス許可が含まれていることを確認します。含まれていない場合、エンドユーザーはデータにアクセスできなくなります。
または、次のリソースを確認することもできます。
+ Storage Browser for S3 は AWS サポートによってサポートされています。サポートが必要な場合は、[AWS センター](https://console.aws.amazon.com/support/home#/)に問い合わせてください。
+ Storage Browser for S3 で問題が発生した場合、またはフィードバックを送信する場合は、「[Amplify GitHub ページ](https://github.com/aws-amplify/amplify-ui)」にアクセスしてください。
+ このプロジェクトで潜在的なセキュリティ上の問題を発見した場合、「[AWS 脆弱性レポートページ](https://aws.amazon.com/security/vulnerability-reporting/)」から AWS セキュリティに知らせてください。