如何将aws访问和密钥与aws sqs sdk v3一起用于angular？

Question

I'm trying to add sqs in my Angular app so my back end can send notification to my front end. I found this example, but they don't explain how to login.

The repo with the source is here: https://github.com/awsdocs/aws-doc-sdk-examples/blob/master/javascriptv3/example_code/sqs/src/sqs_receivemessage.ts

I installed also the sdk like this npm i @aws-sdk/client-sqs but in the npm repo they don't explain how to configure the authent.

How could i do?

/* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
ABOUT THIS NODE.JS EXAMPLE: This example works with AWS SDK for JavaScript version 3 (v3),
which is available at https://github.com/aws/aws-sdk-js-v3. This example is in the 'AWS SDK for JavaScript v3 Developer Guide' at
https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/sqs-examples-send-receive-messages.html.
Purpose:
sqs_receivemessage.ts demonstrates how to receive and delete a message from an Amazon SQS queue.
Inputs (replace in code):
- REGION
- SQS_QUEUE_URl
Running the code:
ts-node sqs_receivemessage.js
 */
// snippet-start:[sqs.JavaScript.messages.receiveMessageV3]

// Import required AWS SDK clients and commands for Node.js
const {
  SQSClient,
  ReceiveMessageCommand,
  DeleteMessageCommand,
} = require("@aws-sdk/client-sqs");

// Set the AWS Region
const REGION = "REGION"; //e.g. "us-east-1"

// Set the parameters
const queueURL = "SQS_QUEUE_URL"; //SQS_QUEUE_URL; e.g., 'https://sqs.REGION.amazonaws.com/ACCOUNT-ID/QUEUE-NAME'
const params = {
  AttributeNames: ["SentTimestamp"],
  MaxNumberOfMessages: 10,
  MessageAttributeNames: ["All"],
  QueueUrl: queueURL,
  VisibilityTimeout: 20,
  WaitTimeSeconds: 0,
};

// Create SQS service object
const sqs = new SQSClient({ region: REGION });

const run = async () => {
  try {
    const data = await sqs.send(new ReceiveMessageCommand(params));
    if (data.Messages) {
      var deleteParams = {
        QueueUrl: queueURL,
        ReceiptHandle: data.Messages[0].ReceiptHandle,
      };
      try {
        const data = await sqs.send(new DeleteMessageCommand(deleteParams));
        console.log("Message deleted", data);
      } catch (err) {
        console.log("Error", err);
      }
    } else {
      console.log("No messages to delete");
    }
  } catch (err) {
    console.log("Receive Error", err);
  }
};
run();
// snippet-end:[sqs.JavaScript.messages.receiveMessageV3]

EDIT I added in the file "C:\Users\koste\.aws\config"

[default]
aws_access_key_id=AKIA4LUIXXXXXY3SE3RO
aws_secret_access_key=yJKM96KISxxxxxxxxxxxxxOhajncWXe0YXo
region = eu-west-3

[sqs-dev]
aws_access_key_id=AKIAXXXXXXXXXXG46ZUET
aws_secret_access_key=XgGq2mbxxxxxxxLRfchaxw0FvAKVWpuXO0
region = eu-west-3

Still not working. I got in the console

Receive Error ReferenceError: process is not defined
    loadSharedConfigFiles index.js:11
    parseKnownFiles index.js:102
    fromIni index.js:31
    memoize memoize.js:22
    step tslib.es6.js:102
    verb tslib.es6.js:83
    __awaiter tslib.es6.js:76
    ZoneAwarePromise Angular
    __awaiter tslib.es6.js:72
    memoize memoize.js:16
    signRequest SignatureV4.js:169
    step tslib.es6.js:102
    verb tslib.es6.js:83
    __awaiter tslib.es6.js:76
    ZoneAwarePromise Angular
    __awaiter tslib.es6.js:72
    signRequest SignatureV4.js:165
    sign SignatureV4.js:85
    step tslib.es6.js:102
    verb tslib.es6.js:83
    __awaiter tslib.es6.js:76
    ZoneAwarePromise Angular
    __awaiter tslib.es6.js:72
    sign SignatureV4.js:76
    awsAuthMiddleware middleware.js:31
    step tslib.es6.js:102
    verb tslib.es6.js:83
    fulfilled tslib.es6.js:73
    Angular 21
    RxJS 21
    ZoneAwarePromise Angular
    toPromise RxJS
    signIn auth.service.ts:211
    fulfilled tslib.es6.js:73
    Angular 22
    streamCollector index.js:6
    collectBody Aws_json1_1.js:3514
    collectBodyString Aws_json1_1.js:3518
    parseBody Aws_json1_1.js:3533
    deserializeAws_json1_1GetCredentialsForIdentityCommand Aws_json1_1.js:724
    step tslib.es6.js:100
    verb tslib.es6.js:81
    __awaiter tslib.es6.js:74
    ZoneAwarePromise Angular
    __awaiter tslib.es6.js:70
    deserializeAws_json1_1GetCredentialsForIdentityCommand Aws_json1_1.js:716
    deserialize GetCredentialsForIdentityCommand.js:32
    deserializerMiddleware deserializerMiddleware.js:7
    fulfilled tslib.es6.js:71
    Angular 11

EDIT 2

I even set the env variable and still get the same issue

set AWS_ACCESS_KEY_ID=AKIA4XXXXXXXXXXXXX6ZUET
set AWS_SECRET_ACCESS_KEY=XgGq2mbYQvnXXXXXXXXXXXXXXXXXXXXXXXXO0

EDIT 3 I look into the sdk and the process variable is used in the sdk but is not declared, that's why i have the error

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var os_1 = require("os");
var path_1 = require("path");
var fs_1 = require("fs");
exports.ENV_CREDENTIALS_PATH = "AWS_SHARED_CREDENTIALS_FILE";
exports.ENV_CONFIG_PATH = "AWS_CONFIG_FILE";
var swallowError = function () { return ({}); };
function loadSharedConfigFiles(init) {
    if (init === void 0) { init = {}; }
    var _a = init.filepath, filepath = _a === void 0 ? process.env[exports.ENV_CREDENTIALS_PATH] ||
        path_1.join(getHomeDir(), ".aws", "credentials") : _a, _b = init.configFilepath, configFilepath = _b === void 0 ? process.env[exports.ENV_CONFIG_PATH] ||
        path_1.join(getHomeDir(), ".aws", "config") : _b;

Answer 1

This content is part of the AWS SDK for JavaScript DEV Guide where all of these concepts, such as handling credentials, are explained. Refer to the DEV Guide .

If you do not know how to get up and running with the API, please refer to the Getting Started section. Cred specific information is located here:

https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-your-credentials.html

Once you are successful, then you can look at more complete examples, such the content under the Cross-service examples section.

Answer 2

Solution is here: https://github.com/aws/aws-sdk-js-v3/issues/2386#event-4744209781

It is not possible to use credentials file for browser.