투케이2K

439. (javaScript) 자바스크립트 aws4fetch 사용해 AWS4Signer 헤더 생성 및 ListThings 사물 생성 리스트 조회 수행 본문

JavaScript

439. (javaScript) 자바스크립트 aws4fetch 사용해 AWS4Signer 헤더 생성 및 ListThings 사물 생성 리스트 조회 수행

투케이2K 2025. 11. 8. 16:37
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / AWS / Iot Core / AWS4Signer


- 사전) AWS4Signer 설명 : 

  >> AWS SigV4 는 AWS API 요청에 인증 정보를 추가하기 위한 AWS 서명 프로토콜입니다

  >> AWS SigV4 는 HTTP Authorization 헤더에서 또는 URL의 쿼리 문자열로 표현될 수 있습니다

  >> AWS SigV4 요청에 서명하는 이유 : 

    - 요청자의 ID 확인 : 인증된 요청에는 액세스 키(액세스 키 ID, 비밀 액세스 키)를 사용하여 만든 서명이 필요합니다

    - 전송 중인 데이터 보호 : 요청이 전송되는 동안 훼손되는 것을 방지하기 위해 일부 요청 요소를 사용하여 요청의 해시(다이제스트)를 계산하고 결과 해시 값을 요청의 일부로 포함합니다

    - 잠재적 재생 공격으로부터 보호 : 대부분의 경우 요청서의 타임스탬프 시간으로부터 5분 이내에 AWS에 요청이 도착해야 합니다 (그렇지 않으면 AWS가 요청을 거부합니다)

  >> AWS SigV4 서명 요청 프로세스 : 

    - 요청 세부 정보를 기반으로 표준 요청 생성

    - AWS 자격 증명을 사용하여 서명 계산

    - 이 서명을 요청에 Authorization 헤더로 추가

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- [CDN 주소 설정] -->    
    <!-- <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1416.0.min.js"></script> -->
    <!-- <script src="https://unpkg.com/amazon-kinesis-video-streams-webrtc/dist/kvs-webrtc.min.js"></script> -->  







    <!-- [자바스크립트 코드 지정] : ESM Import 방식 사용 -->
    <script type="module">

        // --------------------------------------------------------------------------------------------------------------

        
        /*
        -----------------------------------------------------------
        import aws4 from "https://esm.sh/aws4fetch@1.0.17"; 설명 정리
        -----------------------------------------------------------
        1. aws4fetch 는 브라우저/Node 환경 모두에서 사용할 수 있는 AWS SigV4 서명 라이브러리 모듈입니다

        >> 참고 사이트 : https://jsr.io/@mhart/aws4fetch
        -----------------------------------------------------------
        2. aws4fetch 는 AWS 서비스 REST API 호출 시 필요한 AWS Signature Version 4 헤더를 자동으로 만들어 줍니다
        -----------------------------------------------------------
        3. aws4fetch 는 브라우저에서 AWS SDK 없이도 직접 REST API를 호출할 수 있게 해줍니다
        -----------------------------------------------------------
        4. aws.fetch(url, options) : 내부적으로 fetch()를 호출하고 SigV4 서명을 자동 적용합니다
        -----------------------------------------------------------
        5. aws4fetch 호출 시 생성 되는 자동 헤더 : Authorization, X-Amz-Date, X-Amz-Security-Token 등 필요한 모든 SigV4 헤더 생성
        -----------------------------------------------------------
        */     

        import aws4 from "https://esm.sh/aws4fetch@1.0.17";

        const { AwsClient } = aws4;

        // --------------------------------------------------------------------------------------------------------------

        // [전역 변수 선언]
        const region = 'ap-northeast-2'; // [AWS 리전]
        const accessKey = 'AK..A6'; // [IAM 액세스 키]
        const secretKey = 'mP..5J'; // [IAM 시크릿 키]

        // --------------------------------------------------------------------------------------------------------------

        // [html 최초 로드 및 이벤트 상시 대기 실시]
        window.onload = async function() {
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [start]");
            console.log("=========================================");
            console.log("");

            try {

              // -----------------------------------------
              // [AwsClient 초기화 수행]
              // -----------------------------------------
              const aws = new AwsClient({
                accessKeyId: accessKey,
                secretAccessKey: secretKey,
                service: "iot",
                region: region,
              });


              // -----------------------------------------
              // [fetch API 요청 객체 초기화 수행]
              // -----------------------------------------
              const response = await aws.fetch(
                "https://iot.ap-northeast-2.amazonaws.com/things?maxResults=5",
                { method: "GET" }
              );


              // -----------------------------------------
              // [fetch API 응답 결과 확인]
              // -----------------------------------------
              /*
              {"nextToken":"AQJdtoF..z/Dj+9g==","things":[{"attributes":{},"thingArn":"arn:aws:iot:ap-northeast-2:123456789012:thing/TWOK_123","thingName":"TWOK_123","thingTypeName":"DEVICE","version":1}]}
              */
             // -----------------------------------------
              console.log("");
              console.log("=========================================");
              console.log("[AwsClient] : [Response]");
              console.log("-----------------------------------------");
              console.log(JSON.stringify(await response.json()));
              console.log("=========================================");
              console.log("");

            }
            catch (exception) {
              console.error("");
              console.error("=========================================");
              console.error("[window onload] : [Exception] : 예외 상황 발생");
              console.error("-----------------------------------------");
              console.error(exception.message);
              console.error("=========================================");
              console.error("");
            }

        };

        // --------------------------------------------------------------------------------------------------------------

    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[Aws Signature Version 4] Aws SigV4 인증 및 서명 프로토콜 설명 - AWS4Signer API 호출 시 서명 사용

https://kkh0977.tistory.com/8009

https://blog.naver.com/kkh0977/223874467995?trackingCode=blog_bloghome_searchlist


[Aws 사이트 : API 요청용 AWS Signature Version 4]

https://docs.aws.amazon.com/ko_kr/IAM/latest/UserGuide/reference_sigv.html


[AWS API 요청에 대한 Signature Version 4 서명 문제 해결]

https://docs.aws.amazon.com/ko_kr/IAM/latest/UserGuide/reference_sigv-troubleshooting.html


[디바이스 섀도우 REST API]

https://docs.aws.amazon.com/ko_kr/iot/latest/developerguide/device-shadow-rest-api.html#API_ListNamedShadowsForThing


[안드로이드 AWS 특정 사물 Shadow Json Payload 조회 API 호출 시 AWS4Signer 인증 헤더 생성 방법]

https://blog.naver.com/kkh0977/223944660287

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

441. (javaScript) 자바스크립트 aws4fetch 사용해 AWS4Signer 헤더 생성 및 UpdateThingShadow 사물 Shadow 생성 및 업데이트 요청  (0) 2025.11.09
440. (javaScript) 자바스크립트 aws4fetch 사용해 AWS4Signer 헤더 생성 및 GetThingShadow 사물 Shadow Json 페이로드 정보 조회  (0) 2025.11.08
438. (javaScript) 자바스크립트 AWS Iot Core 에 생성 된 Thing Info 사물 정보 조회 - DescribeThing  (0) 2025.11.08
437. (javaScript) 자바스크립트 AWS Iot Core 에 생성 된 템플릿 리스트 목록 조회 - ListProvisioningTemplates  (0) 2025.11.06
436. (javaScript) 자바스크립트 AWS Iot Core 에 생성 된 특정 템플릿 정보 조회 - DescribeProvisioningTemplate  (0) 2025.11.05
'JavaScript' Related Articles more
Comments