<div id="readability-page-1" class="page"><div>
                                                <div id="SE-331f9cf7-2eb4-4150-86a7-71cd8010b20b">
                                    <p id="SE-48d6d6e4-bca7-4c9d-8788-16535f8bd55d"><span id="SE-a809bf0d-3a86-48fd-9b04-30a62932a36a">​</span></p><p id="SE-7f84f92d-421b-47f5-b8b8-98714d1eb2a8"><span id="SE-8bf8d4e0-efa2-4beb-92f1-2444564f8fce"><b>로그인 필요한 사이트 생성</b></span></p><p id="SE-83fded26-a015-48ed-bf72-f9921ad376b2"><span id="SE-60dd6923-75dd-4dfb-887b-d9deee4be8a2"> next 프로젝트를 생성합니다. </span></p>
                            </div>                                                                                <div id="SE-7ad09952-c5cc-4119-924d-66e2c5e24b0f">
                                    <p>amplify add auth
amplify push</p>
                                </div>                                <div id="SE-409f3b06-0f5a-4f55-81b6-a735f64b00bd">
                                    <p>npm install aws-amplify @aws-amplify/ui-react</p>
                                </div>                <div id="SE-066fc787-4041-44b0-90e3-3944b296e8f9">
                                    <p id="SE-586d8fd8-3c8f-4bdc-bd4c-c9b5ca2dc52f"><span id="SE-81f4a98c-8f00-43fa-bd7a-c344e5104273">​</span></p><p id="SE-1ea189b4-8391-494f-ae41-a17b5ab71ab6"><span id="SE-a4f6c20a-fed6-49ee-a528-e85347dfed37">next 프로젝트의 app/pages.tsx에 아래 코드를 입력합니다. </span></p>
                            </div>                <div id="SE-caa76f12-ed74-4eb7-96aa-6ae226b169e7">
                                    <p>import { Amplify } from 'aws-amplify';
import type { WithAuthenticatorProps } from '@aws-amplify/ui-react';
import { withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import config from './amplifyconfiguration.json';
Amplify.configure(config);

export function App({ signOut, user }: WithAuthenticatorProps) {
  return (
    &lt;&gt;
      &lt;h1&gt;Hello {user?.username}&lt;/h1&gt;

      &lt;p&gt;{user?.signInDetails?.loginId}&lt;/p&gt;
      &lt;p&gt;{user?.signInDetails?.authFlowType}&lt;/p&gt;
      &lt;p&gt;{user?.userId}&lt;/p&gt;
      &lt;button onClick={signOut}&gt;Sign out&lt;/button&gt;
    &lt;/&gt;
  );
}

export default withAuthenticator(App);</p>
                                </div>                <div id="SE-d80f2639-ae68-4032-87a3-21ab59c3fe04">
                                    <p id="SE-6ee7c1f8-a450-4d0d-87cd-018addff7596"><span id="SE-b2884923-678a-4c48-81c4-2b7dd1c3a7fd">​</span></p><p id="SE-46b5320f-4b8e-472a-8590-107a90b8d97c"><span id="SE-296c7759-43c1-4442-8ab3-161c35d07e03">코드를 실행하면 아래와 같은 화면을 확인할 수 있습니다.</span></p>
                            </div>                                                <div id="SE-4926c4c1-41f6-46b8-813c-52cb4c03e287">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-4926c4c1-41f6-46b8-813c-52cb4c03e287&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDA5MjFfMTM5/MDAxNzI2ODQ3MjUzMjQ0.6Ql-5m8Bkq4MVLDlKbtRUfUpihc_PXKst36TLwJIGzIg.JUEgHXSPyHirWCWI1LkeljzTIlg-etxaDbaQezOI4v8g.PNG/image.png&quot;, &quot;originalWidth&quot; : &quot;2880&quot;, &quot;originalHeight&quot; : &quot;1606&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDA5MjFfMTM5/MDAxNzI2ODQ3MjUzMjQ0.6Ql-5m8Bkq4MVLDlKbtRUfUpihc_PXKst36TLwJIGzIg.JUEgHXSPyHirWCWI1LkeljzTIlg-etxaDbaQezOI4v8g.PNG/image.png?type=w800" data-width="886" data-height="494" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-60d94936-0b6b-4ae3-aafd-e33248c99e9b">
                                    <p id="SE-a89b7b1c-d87b-4d6b-ac30-fe398a6aa169"><span id="SE-cf3092e1-9667-4deb-a7c6-01e661a68bd4">​</span></p><p id="SE-b6536b32-033c-4116-9538-686595cc836d"><span id="SE-606defb1-796e-417c-a086-2cdf983ad01c"><b>accessToken 확인하기</b></span></p><p id="SE-90509924-35e9-4be4-bc0a-0f3a071bb23b"><span id="SE-eb889fdf-6e65-4036-925d-7a4ead1629ad">다양한 인증/인가를 위해 직접 accessToken을 확인할 필요가 있을 수 있는데요.</span></p><p id="SE-e48a77cc-4ebb-49fd-810e-cb2a29ee4946"><span id="SE-87d592f8-bb29-4677-a255-70e3b82118f3">그럴땐 아래와 같은 코드로 accessToken을 확인할 수 있습니다. </span></p><p id="SE-c2530b7c-b0f3-40be-a898-066c9993cc52"><span id="SE-82cdb4d1-1934-498d-9e9e-2216a3f9af9a">​</span></p><p id="SE-1695570d-c6ac-4267-9590-1623be33046f"><span id="SE-46e9c076-36c5-4f3a-a52f-320d72a91672">위에서 작성한 app/pages.tsx 의 내용을 아래와 같이 수정합니다. </span></p>
                            </div>                <div id="SE-558eedb1-55fa-4374-a786-36d1e9dba752">
                                    <p>"use client";

import { useEffect } from "react";
import { Amplify } from "aws-amplify";
import type { WithAuthenticatorProps } from "@aws-amplify/ui-react";
import { withAuthenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";
import config from "@/src/amplifyconfiguration.json";
import { cognitoUserPoolsTokenProvider } from 'aws-amplify/auth/cognito';
import { defaultStorage } from 'aws-amplify/utils';

cognitoUserPoolsTokenProvider.setKeyValueStorage(defaultStorage);
Amplify.configure(config);

export function App({ signOut, user }: WithAuthenticatorProps) {

  // 클라이언트 사이드에서 토큰을 가져오기
  useEffect(() =&gt; {
    cognitoUserPoolsTokenProvider.getTokens().then((res) =&gt; { 
      console.log(res?.accessToken)
      console.log(res?.accessToken.toString())
      console.log(res?.idToken)
      console.log(res)
    });
  }, []);

  return (
    &lt;div&gt;
      &lt;h1&gt;Hello {user?.username}&lt;/h1&gt;
      
      &lt;p&gt;{user?.signInDetails?.loginId}&lt;/p&gt;
      &lt;p&gt;{user?.signInDetails?.authFlowType}&lt;/p&gt;
      &lt;p&gt;{user?.userId}&lt;/p&gt;

      &lt;button onClick={signOut}&gt;Sign out&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default withAuthenticator(App);
</p>
                                </div>                <div id="SE-dd1af0ce-aec1-44cd-8ada-a2bd46129ea9">
                                    <p id="SE-0ed75c59-7483-44b8-a608-1ad537453d11"><span id="SE-48b5544e-f309-417e-86ad-723961987502">​</span></p><p id="SE-69ff0228-211e-43be-8be9-d91b374072f4"><span id="SE-64a910c1-3ca2-4154-ba0a-84c3330347df">아래와 같이 F12를 눌러 accessToken 값을 확인할 수 있습니다.</span></p>
                            </div>                <div id="SE-d152272c-0295-4337-b738-1f59b2426414">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-d152272c-0295-4337-b738-1f59b2426414&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDA5MjFfMTQw/MDAxNzI2ODQ4MjE4Mjg2.a1J7kfqjFtk_HFEHE-f_u-tqd-xXzk6Exi1MlD36WmMg.GtZ1LhErD8WrDGLpex_XY9jHShCZBiT0-wg-mfgcyZUg.PNG/SE-d152272c-0295-4337-b738-1f59b2426414.png&quot;, &quot;originalWidth&quot; : &quot;2879&quot;, &quot;originalHeight&quot; : &quot;1511&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDA5MjFfMTQw/MDAxNzI2ODQ4MjE4Mjg2.a1J7kfqjFtk_HFEHE-f_u-tqd-xXzk6Exi1MlD36WmMg.GtZ1LhErD8WrDGLpex_XY9jHShCZBiT0-wg-mfgcyZUg.PNG/SE-d152272c-0295-4337-b738-1f59b2426414.png?type=w800" data-width="886" data-height="465" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-6a348cd7-3f3e-4719-ac67-cc867ceff45f">
                                    <p id="SE-59b9b656-17fb-4b76-9318-6dc97f539753"><span id="SE-7122a579-d6eb-440d-a6ca-72ec87176a93">​</span></p><p id="SE-6a53d095-dbb8-472a-8305-7103f5985a42"><span id="SE-496fbd29-e083-4c45-a7d6-d95f9bc0b9a2">​</span></p><p id="SE-b674f780-335b-4aac-897c-84ba52515a22"><span id="SE-fe491bfa-6a1b-4e37-8706-ff69095e4910"><b>accessToken 증명하기</b></span></p><p id="SE-60758181-34a7-4285-bd46-38a26c37f388"><span id="SE-b89d3b79-fb1f-4ff6-a922-d844b53fc713">accessToken을 API 서버와 같은 곳에서 유효성을 판단해야 하는 경우가 발생할 수 있습니다.</span></p><p id="SE-b005a19b-329f-4336-88f6-9eff02eabb87"><span id="SE-70897763-2dc6-4b62-83f2-8e7517968476">특히 복잡한 인증/인가 체계를 위해서는 필수적인데요.</span></p><p id="SE-5a728ded-fe97-4a9e-95e9-8c9b186b51dd"><span id="SE-56162f52-3aaf-48e0-bfe9-1f0a808b554b">​</span></p><p id="SE-93ffccdd-ec59-45e1-b17e-9ce57093215e"><span id="SE-2be14430-302b-4be2-a2a7-e51f16ebb37f">accessToken이 유효한지 판단하는 python 코드는 아래와 같습니다.</span></p><p id="SE-6cbe8bcd-79ea-440b-9178-62e7b63fe3e7"><span id="SE-e9024a00-afb8-48a2-a201-2b4afad085b3">userpool id, app client id는 aws cognito 콘솔에서 확인할 수 있습니다. </span></p>
                            </div>                <div id="SE-eaf89291-2fa0-41ea-b6e4-f3166d9bf005">
                                    <p>import json
import requests
from jose import jwt, jwk
from jose.utils import base64url_decode
from urllib.request import urlopen

# Cognito 설정
region = 'ap-northeast-2'  # 예: 'us-west-2'
userpool_id = 'ap-northeast-2_FO5e*****'  # 예: 'us-west-2_aBcDeFgHi'
app_client_id = '31najk61*************'  # 앱 클라이언트 ID (Cognito 클라이언트 ID)
cognito_keys_url = f'https://cognito-idp.{region}.amazonaws.com/{userpool_id}/.well-known/jwks.json'

def get_cognito_public_keys():
    response = requests.get(cognito_keys_url)
    if response.status_code == 200:
        return response.json()['keys']
    else:
        raise ValueError("Failed to retrieve public keys")

def validate_access_token(token):
    # 1. 공개 키 가져오기
    keys = get_cognito_public_keys()

    # 2. 토큰의 헤더 부분 디코딩
    headers = jwt.get_unverified_header(token)
    kid = headers['kid']

    # 3. kid에 해당하는 키 찾기
    key = next((k for k in keys if k['kid'] == kid), None)
    if not key:
        raise ValueError('Public key not found.')

    # 4. 키 구성
    public_key = jwk.construct(key)

    # 5. 토큰의 서명 부분 디코딩 및 검증
    message, encoded_signature = token.rsplit('.', 1)
    decoded_signature = base64url_decode(encoded_signature.encode('utf-8'))

    if not public_key.verify(message.encode("utf8"), decoded_signature):
        raise ValueError('Signature verification failed.')

    # 6. 토큰 디코드 및 유효성 확인
    claims = jwt.decode(token, public_key, algorithms=['RS256'], audience=app_client_id)
    return claims

# 테스트할 토큰
access_token = '여러분의 토큰'

try:
    claims = validate_access_token(access_token)
    print('Token is valid.')
    print('Claims:', json.dumps(claims, indent=4))
except Exception as e:
    print(f'Token is invalid: {e}')
</p>
                                </div>                                <div id="SE-297fe8db-d243-422f-a4d1-bd57aca8bfe4">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-297fe8db-d243-422f-a4d1-bd57aca8bfe4&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDA5MjFfMTU3/MDAxNzI2ODQ4MDY1Mzc2.Fh2rd0B8TounBtHId9GyGecY2qIB8G-kwRrP439x1JQg.P7bfZg8OXgjHEEyPscbjjSPsg-QNO1U7LA3zuPGnkC0g.PNG/SE-297fe8db-d243-422f-a4d1-bd57aca8bfe4.png&quot;, &quot;originalWidth&quot; : &quot;2879&quot;, &quot;originalHeight&quot; : &quot;1525&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDA5MjFfMTU3/MDAxNzI2ODQ4MDY1Mzc2.Fh2rd0B8TounBtHId9GyGecY2qIB8G-kwRrP439x1JQg.P7bfZg8OXgjHEEyPscbjjSPsg-QNO1U7LA3zuPGnkC0g.PNG/SE-297fe8db-d243-422f-a4d1-bd57aca8bfe4.png?type=w800" data-width="886" data-height="469" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-33520a13-c2f2-436d-8c0a-30e1a95eefab">
                                    <p id="SE-2fc8e4ae-cdff-4c23-a8f3-26003cfb9639"><span id="SE-9c130710-69dc-415d-8649-87326aff57cc">​</span></p><p id="SE-fefdd273-0097-4751-95ab-1d32e7e4a0ad"><span id="SE-64ebb1ab-c87d-432c-8c7d-55c1b3dde706">client app id 위치 : 앱통합 탭 최하단</span></p>
                            </div>                <div id="SE-42e9b5d9-e516-4a06-8f6b-f3ec21b4d964">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-42e9b5d9-e516-4a06-8f6b-f3ec21b4d964&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDA5MjFfMjU1/MDAxNzI2ODQ4MjQ4MDgy.dLRS08Xw93TYJE-aNdnKMm7o7FYRO9Fv_jvKOk4bba8g.YcqlGUT1YtGFl-UOsVqybbShzBw8MHc9WvFiUoxvsSsg.PNG/SE-42e9b5d9-e516-4a06-8f6b-f3ec21b4d964.png&quot;, &quot;originalWidth&quot; : &quot;2879&quot;, &quot;originalHeight&quot; : &quot;1450&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDA5MjFfMjU1/MDAxNzI2ODQ4MjQ4MDgy.dLRS08Xw93TYJE-aNdnKMm7o7FYRO9Fv_jvKOk4bba8g.YcqlGUT1YtGFl-UOsVqybbShzBw8MHc9WvFiUoxvsSsg.PNG/SE-42e9b5d9-e516-4a06-8f6b-f3ec21b4d964.png?type=w800" data-width="886" data-height="446" alt="">
                                    </a>
                                </p>
                        </div>
                    </div></div>

nanotoly's blog

aws cli 세팅 우선 aws amplify cli 세팅을 진행합니다. 아래 링크를 따라서 진행해주세요. https://docs.amplify.aws/gen1/nextjs/start/getting-started/installation/ 로그인 필요한 사이트 생성 next 프로젝트를 생성합니다. aws amplify를 실행합니다. cognito를 프로젝트에 추가합니다. aws 관련 패키지를 다운로드 합니다. next 프로젝트의 app/pages.tsx에 아래 코드를 입력합니다. 코드를 실행하면 아래와 같은 화면을 확인할 수 있습니다. accessToken 확인하기 다양한 인증/인가를 위해 직접 accessToken을 확인할 필요가 있을 수 있는데요. 그럴땐 아래와 같은 코드로 accessToken을 확인할 수 있습니다. 위에서 작성한 app/pages.ts.......

AWS cognito 를 next.js에서 활용하기

댓글