투케이2K

169. (TWOK/UTIL) [Web/JavaScript] jose 라이브러리 사용해 JWE 헤더 토큰 인증 암복호화 모듈 클래스 본문

투케이2K 유틸파일

169. (TWOK/UTIL) [Web/JavaScript] jose 라이브러리 사용해 JWE 헤더 토큰 인증 암복호화 모듈 클래스

투케이2K 2025. 9. 14. 20:35
728x90

[설 명]

​

프로그램 : Web / JavaScript

​

설 명 : [Web/JavaScript] jose 라이브러리 사용해 JWE 헤더 토큰 인증 암복호화 모듈 클래스

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / jose / JWE / HTTP / Header / Authorization


- 사전) JWE JSON 웹 암호화 설명 : 

  >> JWE 은 웹 토큰 (JWT) 을 전송할 때 민감한 정보를 보호하는 데 사용하는 암호화, 복호화 메커니즘입니다

  >> JWE 은 데이터에 기밀성을 추가하며, 신뢰할 수 없는 네트워크를 통해 민감한 정보를 전송할 때 매우 유용합니다

  >> 클라이언트는 미리 정의 된 키 합의 프로토콜을 통해 JWE 암호화 및 복호화를 수행할 수 있습니다

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





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

<!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://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">

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

      // [import 라이브러리 모듈 : script type="module"]

      import * as jose from 'https://cdn.jsdelivr.net/npm/jose@5.3.0/+esm';

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

      // [html 최초 로드 및 이벤트 상시 대기 실시]
      window.onload = async function() {
          console.log("-");
          console.log("=========================================");
          console.log("[window onload] : [start]");
          console.log("=========================================");
          console.log("-");
          
          
          // -----------------------------------------
          // [1] : 현재 날짜 및 시간 및 타임 스탬프 값 확인
          // -----------------------------------------
          var nowTimeStamp = Date.now(); // 밀리세컨드 13자리 확인 실시
          var nowDate = new Date(nowTimeStamp); // 타임 스탬프 >> Date 로 변환
          var nowFormat = moment(nowDate).format("YYYY-MM-DD HH:mm:ss"); // 24시간 형태 날짜 및 시간 확인

          var plusDate = moment().add(1, "hours"); // 1시간 더하기 (만료 시간)
          var plusTimeStamp = Number(plusDate);
          var plusFormat = moment(plusTimeStamp).format("YYYY-MM-DD HH:mm:ss"); // 24시간 형태 날짜 및 시간 확인

          console.log("-");
          console.log("=========================================");
          console.log("[date] : [compare]");
          console.log("---------------------------------------");
          console.log("nowTimeStamp :: " + nowTimeStamp); 
          console.log("---------------------------------------");
          console.log("nowFormat :: " + nowFormat);
          console.log("---------------------------------------");
          console.log("plusTimeStamp :: " + plusTimeStamp); 
          console.log("---------------------------------------");
          console.log("plusFormat :: " + plusFormat);
          console.log("=========================================");
          console.log("-");


          // -----------------------------------------
          // [2] : JWE 암호화 : SecretKey 지정
          // -----------------------------------------          
          const encodeSecretKey = new TextEncoder().encode('1234567890123456'); // String to Byte

          const header = { // [헤더 정보]
            alg: 'A128GCMKW', 
            enc: 'A128GCM'              
          };

          var object = { // [페이로드 정보] : {"exp":1745195533,"iat":1745191933,"iss":"CLIENT","userId":"TWOK","userName":"투케이"}
            exp: plusTimeStamp, // [만료 시간]
            iat: nowTimeStamp, // [발급 시간]
            iss: "CLIENT", // [발급자]
            userId: "TWOK",
            userName: "투케이"
          };

          var jsonData = JSON.stringify(object);
          const payload = new TextEncoder().encode(jsonData);

          const encodeJweString = await new jose.CompactEncrypt(payload).setProtectedHeader(header).encrypt(encodeSecretKey);

          console.log("-");
          console.log("=========================================");
          console.log("[jwe] : [Encode]");

          console.log("---------------------------------------");
          console.log(encodeJweString);					
          console.log("=========================================");
          console.log("-");          


          // -----------------------------------------
          // [3] : JWE 복호화 : SecretKey 지정
          // -----------------------------------------
          // {"exp":1745195533,"iat":1745191933,"iss":"CLIENT","userId":"TWOK","userName":"투케이"}
          // -----------------------------------------
          const decodeSecretKey = new TextEncoder().encode('1234567890123456'); // String to Byte

          const decodeJweString = encodeJweString
          
          const { plaintext } = await jose.compactDecrypt(decodeJweString, decodeSecretKey);
          const decodeData = new TextDecoder().decode(plaintext);

          console.log("-");
          console.log("=========================================");
          console.log("[jwe] : [Decode]");
          console.log("---------------------------------------");
          console.log(decodeData);					
          console.log("=========================================");
          console.log("-");


          // -----------------------------------------
          // [4] : JWE 인증 테스트 API 호출 수행
          // -----------------------------------------
          // 개발 - 계약 번호 조회 (GET) : https://dev.twok.co.kr:32009/api/v1/agent/contract/{contractNo}
          // -----------------------------------------
          var reqURL = "https://dev.twok.co.kr:32009/api/v1/agent/contract/1111111111"

          console.log("-");
          console.log("=========================================");
          console.log("[http] : [request]");
          console.log("---------------------------------------");
          console.log(reqURL);					
          console.log("=========================================");
          console.log("-");

          $.ajax({                        
                // [요청 시작 부분]
                url: reqURL, // 주소
                type: "GET", // 전송 타입
                async: true, // 비동기 여부
                timeout: 10000, // 타임 아웃 설정 (1000 = 1초)
                dataType: "TEXT", // 응답받을 데이터 타입 (XML, JSON, TEXT, HTML, JSONP)
                beforeSend : function(xhr){ // 다중 헤더 추가 실시
                  xhr.setRequestHeader("Authorization", "Bearer " + encodeJweString); // Authorization Jwe 값 추가
                  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8"); //헤더의 Content-Type을 설정		
                },
                                
                // [응답 확인 부분]
                success: function(response) {
                  console.log("-");
                  console.log("=========================================");
                  console.log("[http] : [success]");
                  console.log("---------------------------------------");
                  console.log(response);					
                  console.log("=========================================");
                  console.log("-"); 
                  
                  // ---------------------------------
                  // [Response Data Example]
                  // ---------------------------------
                  // {
                  //   "resultCode": 0,
                  //   "resultMsg": "성공",
                  //   "data": {
                  //     "companyName": "MyCompany",
                  //     "userName": "홍길동",
                  //     "phoneNo": "01012341234"
                  //   }
                  // }
                  // ---------------------------------

                },
                                
                // [에러 확인 부분]
                error: function(xhr) {
                  console.log("-");
                  console.log("=========================================");
                  console.log("[http] : [error]");
                  console.log("---------------------------------------");
                  console.log(xhr);					
                  console.log("=========================================");
                  console.log("-");
                },
                                
                // [완료 확인 부분]
                complete:function(data, textStatus) {
                  console.log("-");
                  console.log("=========================================");
                  console.log("[http] : [complete]");
                  console.log("---------------------------------------");
                  console.log(textStatus);					
                  console.log("=========================================");
                  console.log("-");             
                }
            });          

      };

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

    </script>


</head>


<body>

</body>

</html>

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





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

[JWE (JSON Web Encryption) JSON 웹 암호화 설명]

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


[자바스크립트 jose 라이브러리 사용해 JWE 토큰 암호화 및 복호화 수행 - AES128 , A128GCMKW]

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


[안드로이드 Http Api 호출 시 JWE (JSON Web Encryption) 암호화 및 복호화 , 사용자 인증 처리 로직]

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


[Android : C_JWE_Encryption_Module : JWE 웹 암호화 (JSON Web Encryption) 암복호화 클래스]

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


[IOS : C_JWE_Encryption_Module : JWE 웹 암호화 (JSON Web Encryption) 암복호화 클래스]

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

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

'투케이2K 유틸파일' 카테고리의 다른 글

171. (TWOK/UTIL) [Web/JavaScript] AWS KVS HLS 비디오 스트림 채널 생성 수행 - createStream  (0) 2025.09.14
170. (TWOK/UTIL) [Web/JavaScript] AWS KVS WebRTC 신호 채널 생성 수행 - createSignalingChannel  (0) 2025.09.14
168. (TWOK/UTIL) [Web/JavaScript] AWS STS 임시 자격 증명 사용해 S3 파일 다운로드 Get Pre-SignedUrl 확인 수행  (0) 2025.09.14
167. (TWOK/UTIL) [Web/JavaScript] AWS Kvs WebRtc 뷰어 Viewer 실시간 비디오 및 오디오 영상 통화 수행  (0) 2025.09.14
166. (TWOK/UTIL) [Android/Java] C_FFmpeg_Module - FFmpeg 비디오 동영상 트랜스 코딩 관련 클래스 파일  (0) 2025.09.13
'투케이2K 유틸파일' Related Articles more
Comments