# 设置适用于 S3 的存储浏览器
<a name="setup-storagebrowser"></a>

要将最终用户与 Amazon S3 *位置* 相连，您必须先设置身份验证和授权方法。使用存储浏览器设置身份验证和授权方法有三种方法：
+ [方法 1：管理客户和第三方合作伙伴的数据访问权限](#setup-storagebrowser-method1)
+ [方法 2：管理您 AWS 账户的 IAM 主体的数据访问权限](#setup-storagebrowser-method2)
+ [方法 3：大规模管理数据访问权限](#setup-storagebrowser-method3)

## 方法 1：管理客户和第三方合作伙伴的数据访问权限
<a name="setup-storagebrowser-method1"></a>

使用此方法，您可以使用 [AWS Amplify Auth](https://docs.amplify.aws/react/build-a-backend/auth/set-up-auth/) 来管理文件的访问控制和安全性。当您想将客户或第三方合作伙伴与 S3 中的数据相连时，此方法非常适合。使用此选项，您的客户可以使用社交或企业身份提供者进行身份验证。

您可以将 AWS Amplify Auth 与配置为使用 Amplify Storage 的 S3 存储桶结合使用，来向最终用户和第三方合作伙伴提供 IAM 凭证。AWS AmplifyAuth 建立在 [Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) 的基础上，Amazon Cognito 是一项完全托管式客户身份和访问管理服务，其中，您可以通过内置的用户目录或企业目录或使用者身份提供者对用户进行身份验证和授权。Amplify 授权模型定义了当前经过身份验证的用户可以访问哪些前缀。有关如何为 AWS Amplify 设置授权的更多信息，请参阅 [Set up storage](https://docs.amplify.aws/react/build-a-backend/storage/set-up-storage/)。

要使用 Amplify 身份验证和存储方法初始化组件，请将以下代码段添加到您的 Web 应用程序中：

```
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 主体的数据访问权限
<a name="setup-storagebrowser-method2"></a>

如果您想直接管理 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 访问权限管控实例，来将 S3 通用存储桶和前缀的权限映射到指定的 IAM 身份。然后，存储浏览器组件（必须在获取 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 操作，来获取对身份请求者的可用授权，并在组件中填充位置。在您获得 `s3:GetDataAccess` 权限后，存储浏览器组件将使用这些凭证来请求对 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：大规模管理数据访问权限
<a name="setup-storagebrowser-method3"></a>

如果您想将 [S3 访问权限管控](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants.html)实例与 IAM Identity Center 关联，以获得更具可扩展性的解决方案（例如向整个公司提供数据访问权限），则可以代表当前经过身份验证的用户从 Amazon S3 请求数据。例如，您可以向公司目录中的用户组授予访问 S3 中数据的权限。这种方法可让您集中管理用户和组的 S3 访问权限管控权限，包括托管在外部提供商（例如 Microsoft Entra、Okta 等）上的用户和组的权限。

使用此方法时，[integration with the IAM Identity Center](https://docs.aws.amazon.com/singlesignon/latest/userguide/trustedidentitypropagation.html) 可让您使用现有的用户目录。IAM Identity Center 可信身份传播的另一个好处是：[Amazon S3 的每个 AWS CloudTrail 数据事件](https://docs.aws.amazon.com/AmazonS3/latest/userguide/enable-cloudtrail-logging-for-s3.html)均包含对访问 S3 数据的最终用户身份的直接引用。

如果您的应用程序支持 OAuth 2.0，并且用户需要从这些应用程序访问 AWS 服务，建议您使用可信身份传播。通过可信身份传播，用户可以登录应用程序，而该应用程序可以在任何旨在访问 AWS 服务中数据的请求中传递用户的身份。此应用程序代表任何经过身份验证的用户与 IAM Identity Center 进行交互。有关更多信息，请参阅 [Using trusted identity propagation with customer managed applications](https://docs.aws.amazon.com/singlesignon/latest/userguide/trustedidentitypropagation-using-customermanagedapps-setup.html)。

[Trusted identity propagation](https://docs.aws.amazon.com//singlesignon/latest/userguide/trustedidentitypropagation-overview.html) 是一项 AWS IAM Identity Center 功能，已连接的 AWS 服务的管理员可以使用它来授予和审计对服务数据的访问权限。对这些数据的访问权限基于用户属性，例如组关联。设置可信身份传播要求已连接的 AWS 服务的管理员和 IAM Identity Center 管理员之间进行协作。有关更多信息，请参阅 [Prerequisites and considerations](https://docs.aws.amazon.com//singlesignon/latest/userguide/trustedidentitypropagation-overall-prerequisites.html)。

### 设置
<a name="setup-workflow-storagebrowser-method3"></a>

要在 AWS 管理控制台中使用 [S3 访问权限管控](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants.html)和 [IAM Identity Center trusted identity propagation](https://docs.aws.amazon.com/singlesignon/latest/userguide/trustedidentitypropagation.html) 设置存储浏览器身份验证，应用程序必须代表当前经过身份验证的用户从 Amazon S3 请求数据。通过这种方法，您可以为公司目录中的用户或用户组提供对 S3 存储桶、前缀或对象的直接访问权限。这意味着您的应用程序无需将任何用户映射到 IAM 主体。

以下工作流程概述了使用 IAM Identity Center 和 S3 访问权限管控来设置适用于 S3 的存储浏览器的步骤：


| Steps | 说明 | 
| --- | --- | 
| 1 | [为您的 AWS Organizations 启用 IAM Identity Center](#enable-iam-idc-org) | 
| 2 | [配置 AWS Identity and Access Management Identity Center 联合身份验证](#configure-iam-idc)  | 
| 3 | [在 AWS Identity and Access Management Identity Center 控制台中添加可信令牌发布者](#add-trusted-token-issuer-idc) 可信令牌发布者表示您在 IAM Identity Center 中的身份提供者（IdP），同时使其能够识别您的应用程序经过身份验证的用户的身份令牌。  | 
| 4 | [为 `bootstrap` 应用程序和 `identity bearer` 创建 IAM 角色](#create-iam-role-bootstrap)  | 
| 5 | [在 IAM Identity Center 中创建和配置应用程序](#create-app-iam-idc) 此应用程序代表经过身份验证的用户与 IAM Identity Center 进行交互。  | 
| 6 | [将 S3 访问权限管控添加为身份传播的可信应用程序](#add-s3-ag-app) 此步骤将您的应用程序连接到 S3 访问权限管控，以便它可以代表经过身份验证的用户向 S3 访问权限管控提出请求。  | 
| 7 | [创建对用户或组的授权](#create-grant-user-group) 此步骤将 AWS Identity and Access Management Identity Center 中的用户与跨域身份管理系统（SCIM）同步。SCIM 使您的 IAM Identity Center 身份与身份提供者（IdP）的身份保持同步。  | 
| 8 | [创建适用于 S3 的存储浏览器组件](#create-storage-browser-component)  | 

### 为您的 AWS Organizations 启用 IAM Identity Center
<a name="enable-iam-idc-org"></a>

要为您的 AWS Organizations 启用 IAM Identity Center，请执行以下步骤：

1. 使用以下方法之一登录 AWS 管理控制台：

   1. ****AWS 新用户（根用户）**：**通过选择根用户并输入您的 AWS 账户电子邮件地址，以账户所有者身份登录。在下一页，输入您的密码。

   1. ****已经在使用 AWS（IAM 凭证）**：**使用具有管理权限的 IAM 凭证登录。

1. 打开 [IAM Identity Center 控制台](https://console.aws.amazon.com/singlesignon)。

1. 在**启用 IAM Identity Center**下，选择**启用**。
**注意**  
IAM Identity Center 要求设置 AWS Organizations。如果您未设置组织，则可以选择让 AWS 自动为您创建一个组织。选择**创建 AWS 组织**完成此过程。

1. 然后选择**使用 AWS Organizations 启用**。

1. 选择**继续**。

1. （可选）添加要与此组织实例关联的任何标签。

1. （可选）配置委托管理。
**注意**  
如果您正在使用多账户环境，我们建议您配置委托管理。通过委托管理，您可以限制 AWS Organizations 中需要访问管理账户的人数。有关更多信息，请参阅 [Delegated administration](https://docs.aws.amazon.com/singlesignon/latest/userguide/delegated-admin.html)。

1. 选择**保存**。

AWS Organizations 会自动向与管理账户关联的地址发送验证电子邮件。在您接收到验证电子邮件之前可能会有一段延迟。请确保在验证电子邮件到期之前 24 小时内验证电子邮件地址。

### 配置 AWS Identity and Access Management Identity Center 联合身份验证
<a name="configure-iam-idc"></a>

要将适用于 S3 的存储浏览器用于公司目录用户，您必须将 IAM Identity Center 配置为使用外部身份提供者（IdP）。您可以使用您选择的首选身份提供者。但请注意，每个身份提供者使用不同的配置设置。有关使用不同外部身份提供者的教程，请参阅 [IAM Identity Center source tutorials](https://docs.aws.amazon.com/singlesignon/latest/userguide/tutorials.html)。

**注意**  
请务必记录您配置的身份提供者的发布者 URL 和受众属性，因为您需要在后续步骤中引用它。如果您没有配置 IdP 所需的访问权限，则可能需要联系外部 IdP 的管理员来获取访问权限。

### 在 AWS Identity and Access Management Identity Center 控制台中添加可信令牌发布者
<a name="add-trusted-token-issuer-idc"></a>

可信令牌发布者在 AWS Identity and Access Management Identity Center 中表示外部身份提供者，并识别应用程序经过身份验证的用户的令牌。您的 AWS Organizations 中 IAM Identity Center 实例的账户所有者必须执行这些步骤。这些步骤可以在 IAM Identity Center 控制台中完成，也可以通过编程方式完成。

要在 AWS Identity and Access Management Identity Center 控制台中添加可信令牌发布者，请执行以下步骤：

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. 在**可信令牌发布者名称**下，输入可信令牌发布者的名称。当为身份传播配置应用程序资源时，该名称将出现在您可以在*步骤 8* 中选择的可信令牌发布者列表中。

1. 将**映射属性**更新为首选应用程序属性，其中每个身份提供者属性都映射到一个 IAM Identity Center 属性。例如，您可能希望 [map the application attribute](https://docs.aws.amazon.com/singlesignon/latest/userguide/mapawsssoattributestoapp.html) `email` 到 IAM Identity Center 用户属性 `email`。要查看 IAM Identity Center 中支持的用户属性列表，请参阅 [Attribute mappings for AWS Managed Microsoft AD directory](https://docs.aws.amazon.com/singlesignon/latest/userguide/attributemappingsconcept.html) 中的表。

1. （可选）如果要添加资源标签，请输入键和值对。要添加多个资源标签，请选择**添加新标签**以生成新条目并输入键和值对。

1. 选择**创建可信令牌发布者**。

1. 创建完可信令牌发布者后，请联系应用程序管理员，告知他们可信令牌发布者的名称，以便他们可以确认可信令牌发布者在适用的控制台中可见。

1. 确保应用程序管理员在适用的控制台中选择此可信令牌发布者，才能允许用户从为可信身份传播配置的应用程序中访问该应用程序。

### 为 `bootstrap` 应用程序和 `identity bearer` 创建 IAM 角色
<a name="create-iam-role-bootstrap"></a>

为确保 `bootstrap` 应用程序和 `identity bearer` 用户可以正常相互协作，请务必 [create two IAM roles](https://docs.aws.amazon.com/managedservices/latest/onboardingguide/create-iam-role.html)。`bootstrap` 应用程序需要一个 IAM 角色，而另一个 IAM 角色必须用于身份持有者，或访问通过 S3 访问权限管控请求访问权限的 Web 应用程序的最终用户。`bootstrap` 应用程序接收身份提供者颁发的令牌并调用 `CreateTokenWithIAM` API，同时将此令牌与 Identity Center 发布的令牌交换。

创建具有如下权限的 IAM 角色，例如 `bootstrap-role`。以下示例 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"
    }]
}
```

然后，创建第二个 IAM 角色（例如 `identity-bearer-role`），身份凭证代理程序使用该角色生成 IAM 凭证。适用于 S3 的存储浏览器组件使用从身份凭证代理程序返回到 Web 应用程序的 IAM 凭证来支持访问 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 Identity Center 中创建和配置应用程序
<a name="create-app-iam-idc"></a>

**注意**  
开始之前，请确保您已在上一步中创建所需的 IAM 角色。您需要在此步骤中指定其中一个 IAM 角色。

要在 AWS IAM Identity Center 中创建和配置客户托管式应用程序，请执行以下步骤：

1. 打开 [IAM Identity Center 控制台](https://console.aws.amazon.com/singlesignon)。

1. 选择**应用程序**。

1. 选择**客户托管**选项卡。

1. 选择**添加应用程序**。

1. 在**选择应用程序类型**页面，选择**设置首选项**下的**我有想设置的应用程序**。

1. 在**应用程序类型**下，选择 **OAuth 2.0**。

1. 选择**下一步**。将显示**指定应用程序**页面。

1. 在**应用程序名称和描述**部分下，输入应用程序的**显示名称**，如 **storage-browser-oauth**。

1. 输入 **Description**（描述）。应用程序描述显示在 IAM Identity Center 控制台和 API 请求中，但不显示在 AWS 访问门户中。

1. 在**用户和组分配方法**下，选择**不需要分配**。此选项可让所有经授权的 IAM Identity Center 用户和组访问此应用程序。

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 Web 令牌（JWT）的受众，它是可信令牌发布者用来标识此应用程序的名称。
**注意**  
您可能需要联系外部 IdP 的管理员以获取此信息。

1. 选择**下一步**。将显示**指定身份验证凭证**页面。

1. 在**配置方法**下，选择**输入一个或多个 IAM 角色**。

1. 在**输入 IAM 角色**下，为身份持有者令牌添加 [IAM 角色](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles.html)或 Amazon 资源名称（ARN）。您必须输入您在上一步中为身份凭证代理程序应用程序创建的 IAM 角色（例如 **bootstrap-role**）。

1. 选择**下一步**。

1. 在**查看和配置**页面上，检查应用程序配置的详细信息。如果您需要修改任何设置，请对于要编辑和进行更改的部分选择**编辑**。

1. 选择**提交**。将显示您刚添加的应用程序的详细信息页面。

设置应用程序后，您的用户可以基于 [permission sets that you’ve created](https://docs.aws.amazon.com/singlesignon/latest/userguide/get-started-create-a-permission-set.html) 和 [user access that you’ve assigned](https://docs.aws.amazon.com/singlesignon/latest/userguide/get-started-assign-account-access-user.html)，从其 AWS 访问门户中访问您的应用程序。

### 将 S3 访问权限管控添加为身份传播的可信应用程序
<a name="add-s3-ag-app"></a>

设置客户托管式应用程序后，您必须为身份传播指定 S3 访问权限管控。S3 访问权限管控提供凭证供用户访问 Amazon S3 数据。当您登录到客户托管式应用程序时，S3 访问权限管控会将您的用户身份传递给可信应用程序。

 **先决条件：**在执行这些步骤之前，请确保您已设置 S3 访问权限管控（例如[创建 S3 访问权限管控实例](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 访问权限管控](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants-get-started.html)。

要向客户托管式应用程序中添加用于身份传播的 S3 访问权限管控，请执行以下步骤：

1. 打开 [IAM Identity Center 控制台](https://console.aws.amazon.com/singlesignon)。

1. 选择**应用程序**。

1. 选择**客户托管**选项卡。

1. 在**客户托管的应用程序**列表中，选择要对其发起访问请求的 OAuth 2.0 应用程序。这是用户将登录的应用程序。

1. 在**详细信息页面**的**用于身份传播的可信应用程序**下，选择**指定可信应用程序**。

1. 在设置类型下，选择单个应用程序并指定访问权限，然后选择**下一步**。

1. 在**选择服务**页面上，选择 **S3 访问权限管控**。S3 访问权限管控具有的应用程序可供您定义您自己的 Web 应用程序以实现可信身份传播。

1. 选择**下一步**。您将在下一个步骤中选择应用程序。

1. 在**选择应用程序**页面，选择**单个应用程序**，对于每个可以接收访问请求的应用程序选中此复选框，然后选择**下一步**。

1. 在**配置访问权限**页面的**配置方法**下，选择以下任一项：
   + **选择每个应用程序的访问权限** - 选择此选项可为每个应用程序配置不同的访问权限级别。选择要为其配置访问权限级别的应用程序，然后选择**编辑访问权限**。在**要应用的访问权限级别**中，根据需要更改访问权限级别，然后选择**保存更改**。
   + ****对所有应用程序应用相同的访问权限级别**：**如果不需要针对每个应用程序配置访问权限级别，请选择此选项。

1. 选择**下一步**。

1. 在**审查配置**页面中，审查您所做的选择。
**注意**  
您希望确保已向您的用户授予 `s3:access_grants:read_write` 权限。此权限使您的用户能够检索凭证以访问 Amazon S3。请务必使用您之前创建的 IAM 策略或 S3 访问权限管控，来限制对写入操作的访问权限。

1. 要进行更改，请为要更改的配置部分选择**编辑**。然后，进行所需的更改并选择**保存更改**。

1. 选择**可信应用程序**以添加用于身份传播的可信应用程序。

### 创建对用户或组的授权
<a name="create-grant-user-group"></a>

在此步骤中，您将使用 IAM Identity Center 来预置您的用户。您可以使用 SCIM 来 [automated or manual provisioning of users and groups](https://docs.aws.amazon.com/singlesignon/latest/userguide/provision-automatically.html)。SCIM 使您的 IAM Identity Center 身份与身份提供者（IdP）的身份保持同步。这包括 IdP 和 IAM Identity Center 之间的任何用户预置、更新和取消预置。

**注意**  
此步骤是必需的，因为在将 S3 访问权限管控与 IAM Identity Center 结合使用时，不使用本地 IAM Identity Center 用户。相反，用户必须从身份提供者与 IAM Identity Center 同步。

要将来自身份提供者的用户与 IAM Identity Center 同步，请执行以下步骤：

1. [Enable automatic provisioning](https://docs.aws.amazon.com/singlesignon/latest/userguide/how-to-with-scim.html)。

1. [Generate an access token](https://docs.aws.amazon.com/singlesignon/latest/userguide/generate-token.html)。

有关如何针对您的特定应用场景使用 IAM Identity Center 设置身份提供者的示例，请参阅 [IAM Identity Center Identity source tutorials](https://docs.aws.amazon.com/singlesignon/latest/userguide/tutorials.html)。

### 创建适用于 S3 的存储浏览器组件
<a name="create-storage-browser-component"></a>

设置 IAM Identity Center 实例并在 S3 访问权限管控中创建授权后，打开您的 React 应用程序。在 React 应用程序中，使用 `createManagedAuthAdapter` 来设置授权规则。您必须提供凭证提供商，才能返回您从 IAM Identity Center 获得的凭证。然后，您可以调用 `createStorageBrowser` 来初始化适用于 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) => {},
  })
});
```



接着，创建一种机制，将 Web 应用程序中的 JSON Web 令牌（JWT）与 IAM Identity Center 中的 IAM 凭证交换。有关如何交换 JWT 的更多信息，请参阅以下资源：
+ *AWS 存储博客* 中的 [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 存储博客* 中的 [Scaling data access with S3 Access Grants](https://aws.amazon.com/blogs/storage/scaling-data-access-with-amazon-s3-access-grants/) 博文
+ *AWS 讲习会参与平台* 上的 [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 Web 令牌（JWT）交换，请执行以下步骤：

1. 从授权标头中检索传入请求的 JSON Web 令牌。

1. 使用指定的 JSON Web 密钥集（JWKS）URL 中的公有密钥验证令牌。

1. 验证令牌的到期时间、发布者、主体和受众声明。

要将身份提供者的 JSON Web 令牌与 AWS IAM 凭证交换，请执行以下步骤：

**提示**  
确保避免记录任何敏感信息。对于缺少授权、令牌过期和其它异常，我们建议您使用错误处理控件。有关更多信息，请参阅 *AWS 计算博客* 中的 [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 Web 令牌交换为 IAM Identity Center 令牌。
**注意**  
使用 IdP JSON Web 令牌后，无法再次使用该令牌。必须使用新令牌与 IAM Identity Center 进行交换。

1. 使用 [AssumeRole](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRole.html) API 操作通过 IAM Identity Center 令牌代入临时角色。请务必使用身份持有者角色，也称为携带身份上下文的角色（例如 **identity-bearer-role**），来请求凭证。

1. 将 IAM 凭证返回给 Web 应用程序。
**注意**  
确保您已设置了正确的日志记录机制。响应以带有相应 HTTP 状态代码的标准化 JSON 格式返回。