部分区域不支持Version 2授权，如何用AngularJS生成V4认证头调用Rest API？

Got it, let's walk through how to build a Version 4 authentication header for your REST API calls using AngularJS. I’ve tackled this exact scenario before, so here’s a practical, step-by-step breakdown with reusable code you can adapt to your project.

Prerequisites #

First, you’ll need a way to handle SHA-256 hashing and HMAC signatures. The most straightforward option for AngularJS projects is CryptoJS—it’s lightweight, widely supported, and easy to integrate. You can include it via CDN or npm:

Option 1: CDN Include #

Add this script tag to your HTML before your AngularJS code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

Option 2: npm Install #

If you’re using a build tool:

npm install crypto-js

Then import it in your AngularJS service file:

const CryptoJS = require("crypto-js");

Step 1: Create a Reusable Authentication Service #

AngularJS services are perfect for encapsulating this logic—you’ll be able to call it from any controller or other service. Here’s a complete service that handles all parts of the V4 signing process:

angular.module('yourAppName').service('v4AuthService', function() {
    this.generateAuthHeaders = function(config) {
        // Pull in required config values
        const { accessKey, secretKey, region, service, method, url, payload = '' } = config;
        const timestamp = new Date(); // Use current time, or pass a specific one if needed

        // 1. Format dates for AWS
        const dateStamp = timestamp.toISOString().split('T')[0].replace(/-/g, ''); // YYYYMMDD
        const amzDate = timestamp.toISOString().replace(/[:-]/g, '').split('.')[0] + 'Z'; // ISO 8601 format

        // 2. Parse the target URL
        const parsedUrl = new URL(url);
        const host = parsedUrl.host;
        const canonicalUri = encodeURI(parsedUrl.pathname).replace(/%2F/g, '/'); // Ensure proper path encoding

        // 3. Handle query strings (empty if none; sort/encode if you have params)
        const canonicalQueryString = ''; 
        // If you have query params, sort them alphabetically, encode key-value pairs, then join with &

        // 4. Build canonical headers (must match what's sent in the request)
        const canonicalHeaders = [
            `host:${host}`,
            `x-amz-date:${amzDate}`
        ].join('\n') + '\n'; // Trailing newline is required

        // 5. List signed headers (matches canonical headers, semicolon-separated)
        const signedHeaders = 'host;x-amz-date';

        // 6. Hash the request payload
        const payloadHash = CryptoJS.SHA256(payload).toString(CryptoJS.enc.Hex);

        // 7. Build the canonical request (the base string we'll sign)
        const canonicalRequest = [
            method.toUpperCase(),
            canonicalUri,
            canonicalQueryString,
            canonicalHeaders,
            signedHeaders,
            payloadHash
        ].join('\n');

        // 8. Build the string to sign
        const algorithm = 'AWS4-HMAC-SHA256';
        const credentialScope = `${dateStamp}/${region}/${service}/aws4_request`;
        const stringToSign = [
            algorithm,
            amzDate,
            credentialScope,
            CryptoJS.SHA256(canonicalRequest).toString(CryptoJS.enc.Hex)
        ].join('\n');

        // 9. Generate the signing key (derived from secret key)
        const getSignatureKey = (key, date, regionName, serviceName) => {
            const kDate = CryptoJS.HmacSHA256(date, `AWS4${key}`);
            const kRegion = CryptoJS.HmacSHA256(regionName, kDate);
            const kService = CryptoJS.HmacSHA256(serviceName, kRegion);
            const kSigning = CryptoJS.HmacSHA256('aws4_request', kService);
            return kSigning;
        };
        const signingKey = getSignatureKey(secretKey, dateStamp, region, service);

        // 10. Calculate the final signature
        const signature = CryptoJS.HmacSHA256(stringToSign, signingKey).toString(CryptoJS.enc.Hex);

        // 11. Assemble the Authorization header
        const authHeader = `${algorithm} Credential=${accessKey}/${credentialScope}, SignedHeaders=${signedHeaders}, Signature=${signature}`;

        // Return all required headers for the API call
        return {
            'Authorization': authHeader,
            'x-amz-date': amzDate,
            'x-amz-content-sha256': payloadHash
        };
    };
});

Step 2: Use the Service in Your API Calls #

Now you can inject this service into your controllers or other services to sign requests with $http:

angular.module('yourAppName').controller('ApiController', function($http, v4AuthService) {
    const apiConfig = {
        accessKey: 'YOUR_ACCESS_KEY',
        secretKey: 'YOUR_SECRET_KEY',
        region: 'us-east-1', // Replace with your API's region
        service: 'execute-api', // Replace with your service type (e.g., s3, dynamodb)
        method: 'GET',
        url: 'https://your-api-endpoint.com/your-resource',
        payload: '' // For POST/PUT, use JSON.stringify(yourRequestBody)
    };

    // Generate auth headers
    const authHeaders = v4AuthService.generateAuthHeaders(apiConfig);

    // Make the API request
    $http({
        method: apiConfig.method,
        url: apiConfig.url,
        headers: authHeaders,
        data: apiConfig.payload // Include this only for POST/PUT requests
    }).then(response => {
        console.log('Success:', response.data);
    }).catch(error => {
        console.error('API Error:', error);
    });
});

Critical Notes to Avoid Mistakes #

• Payload Matching: If you’re sending a request body (POST/PUT), ensure the payload parameter is exactly the same string as what’s sent in the data field. Use JSON.stringify() for JSON bodies to avoid formatting mismatches.
• Query Parameters: If your URL has query params, you must sort them alphabetically, URL-encode each key-value pair, and join them with & for the canonicalQueryString—AWS’s signing process is strict about this.
• Time Sync: AWS rejects requests with timestamps more than 5 minutes off from their servers. Make sure your client’s clock is synchronized (or pass a trusted timestamp from your backend).
• Security Warning: Never hardcode your secret key in frontend code! If this is a public web app, proxy your API calls through a backend service that handles the V4 signing. This example is safe for internal tools, desktop apps, or backend-to-backend calls only.

内容的提问来源于stack exchange，提问作者Vishesh