如何在React中实现SigV4（Amazon签名）以发起API请求

方案1：使用AWS SDK v3的浏览器兼容模块 #

AWS SDK v3采用模块化设计，提供了浏览器可用的SigV4签名工具包，无需依赖Node.js环境的API。

1. 安装所需依赖：

npm install @aws-sdk/signature-v4 @aws-sdk/util-create-request @aws-sdk/util-format-url @aws-sdk/credential-provider-web-identity

2. 实现签名并发起请求的示例代码：

import { SignatureV4 } from "@aws-sdk/signature-v4";
import { createRequest } from "@aws-sdk/util-create-request";
import { formatUrl } from "@aws-sdk/util-format-url";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-web-identity";

// 配置AWS基础信息
const REGION = "你的AWS区域";
const API_ENDPOINT = "你的API Gateway端点";
const COGNITO_POOL_ID = "你的Cognito身份池ID";

// 从Cognito身份池获取临时凭证（也可通过Amplify的Auth模块获取）
const credentials = fromCognitoIdentityPool({
  clientConfig: { region: REGION },
  identityPoolId: COGNITO_POOL_ID,
});

// 初始化SigV4签名器
const sigv4 = new SignatureV4({
  credentials,
  region: REGION,
  service: "execute-api", // API Gateway对应的服务标识
});

// 构建并发起签名请求
async function sendSignedRequest() {
  const request = createRequest(
    new Request(`${API_ENDPOINT}/your-path`, {
      method: "GET",
      headers: { "Content-Type": "application/json" },
    })
  );

  const signedRequest = await sigv4.sign(request);
  const formattedUrl = formatUrl(signedRequest);
  
  const response = await fetch(formattedUrl, {
    method: signedRequest.method,
    headers: signedRequest.headers,
  });
  const data = await response.json();
  console.log(data);
}

方案2：正确使用Amplify自动处理SigV4签名 #

Amplify原生支持为AWS_IAM认证的API Gateway请求自动生成SigV4签名，只需确保配置正确：

1. 初始化Amplify（应用启动时）：

import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);
// 确保aws-exports.js中包含API Gateway配置，且对应API的authType为AWS_IAM

2. 使用Amplify API模块发起请求：

import { API } from 'aws-amplify';

async function fetchData() {
  try {
    const response = await API.get('你的API名称', '/your-path', {
      headers: { /* 自定义请求头 */ }
    });
    console.log(response);
  } catch (err) {
    console.error(err);
  }
}

注意：你的API Gateway必须配置为AWS_IAM认证类型，Amplify会自动从当前登录用户的凭证生成签名并附加到请求头。

方案3：使用第三方浏览器兼容库aws4fetch #

aws4fetch是专为浏览器环境设计的轻量SigV4签名工具，无需依赖Node.js核心API：

1. 安装依赖：

npm install aws4fetch

2. 示例代码：

import { AwsClient } from 'aws4fetch';

// 初始化客户端（可从Amplify/Cognito获取临时密钥替换固定密钥）
const aws = new AwsClient({
  accessKeyId: '你的访问密钥ID',
  secretAccessKey: '你的秘密访问密钥',
  region: '你的AWS区域'
});

async function sendSignedRequest() {
  const response = await aws.fetch(`${API_ENDPOINT}/your-path`, {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' }
  });
  const data = await response.json();
  console.log(data);
}

内容的提问来源于stack exchange，提问作者Carlos Alves Jorge