🧑🏻‍💻시니어개발자🧑🏻‍💻

본내용은 필자의 " React&Python으로 웹개발(링크서비스)" 카테고리 개발소스에 계속 추가하는 방식으로 진행합니다.

( 소스 폴더는 위 카테고리를 잘 읽어보고,  git 소스를 참고하시기 바랍니다. )

react-keycloak 라이브러리의 useKeycloak Hook를 사용하여 로그인 페이지 호출

이전글에서 Keycloak 로그인 페이지를 호출하여 로그인을 하도록 처리했었다.

이번에는 Keycloak 로그인 페이지를 통해 로그인후 token 정보를 가져와 Keycloak의 저장된 사용자 정보를 확인 해보자. 

사용자 정보를 가져오기 위해서 신규 소스를 추가한다.

신규 1개와 기존 소스를 수정하고 react에 신규 패키지를 설치할 예정이다.

1. userinfo.jsx (신규)

2. menu.jsx (수정)

3. 신규 패키지 설치 :  yarn add base-64

먼저 JWT 에 대해서 간단히 설명하자.
로그인시 토큰 관련된 인증을  대부분 사용한다.
그 중에서도 JWT는 웹 표준을 따르고 있으며, JSON 객체를 사용하여 정보를 전달합니다.
JWT의 장점 중 하나로, 웹 표준을 따르기 때문에 대부분의 언어가 이를 지원합니다.

JWT는 각각의 구성요소가 점(.) 으로 구분이 되어 있으며 , 구성요소는 HEADER(헤더).PAYLOAD(내용).SIGNATURE(서명) 형태로 구성되어 있다.  

JWT 디코딩 확인 사이트 : jwt.io

아래 소스에서는 추가적으로 PAYLOAD 디코딩까지 포함한다.

⌘ userinfo.jsx ( 위치: linkservice/client/src/component/userinfo.jsx )

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

아래 소스를 반영한다.

import { useKeycloak } from "@react-keycloak/web";
import base64 from "base-64";
import React from "react";

const UserInfo = () => {

    const { keycloak } = useKeycloak();
    let payload, decodingInfo;
    
    const accessToken = keycloak.idToken;

    if (accessToken) {
      payload = accessToken.split('.')[1];
      decodingInfo = base64.decode(payload);
    }

  return (
    <div className="container">
      <div >

        <p>idToken 정보</p>
        <textarea cols="100" rows="8" value={keycloak.idToken} readOnly>
        </textarea>

        <p>token 정보</p>
        <textarea cols="100" rows="8" value={keycloak.token} readOnly>
        </textarea>

        <p>payload 정보</p>
        <textarea cols="100" rows="8" value={decodingInfo} readOnly>
        </textarea>

      </div>    
    </div>    
   )
}
export default UserInfo

간단히 설명하다면,

useKeycloak Hook를 통해 keycloak 개별 변수에 로그인 정보를 할당하고, accessToken값을 받아온다.

import { useKeycloak } from "@react-keycloak/web";
//....
//....
//....
      const { keycloak } = useKeycloak();
      
// keycloak를 통해 로그인이 되었을 경우 토큰값을 받게 된다.
//.....
      const accessToken = keycloak.idToken;

accessToken값이 있을 경우, 즉 정상 로그인이 되었을때, JWT구조상 split함수를 통해 PAYLOAD값을 가져와서

base64로 다시 decode를 한다. 

    if (accessToken) {
      payload = accessToken.split('.')[1];
      decodingInfo = base64.decode(payload);
    }

⌘ menu.jsx ( 위치: linkservice/client/src/component/menu.js )

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

이전 menu.jsx 소스를 임시로 수정하여 정보를 확인해보자.

import HomeIcon from '@mui/icons-material/Home';
import SettingsIcon from '@mui/icons-material/Settings';
import { useNavigate } from 'react-router-dom';
// useKeycloak import
import { useKeycloak } from "@react-keycloak/web";
import UserInfo from './userinfo';

export default function MenuIcon(props) {
    const navigator = useNavigate()
    
    // Using Object destructuring
    const { keycloak } = useKeycloak();

    const handleIcon = (e) => {
        switch (e) {
            case 'A' : 
                // keycloak에 로그인이 되어 있지 않다면, keycloak 로그인 페이지 호출
                if (!keycloak.authenticated) {
                    alert("로그인이 필요한 서비스입니다.")
                    // keycloak 로그인 페이지 호출시 redirectUri를 개인화가 가능하다.
                    keycloak.redirectUri= window.location.href + '/manager'
                    // keycloak 로그인 페이지 호출
                    keycloak.login();
                }

            return navigator('/manager')
            
            case 'M' : return navigator('/')
            default : return navigator('/')
        }
    }
    return (
<>
      <div className='menu-wrap'>
        <div className='menu-box'>
          <HomeIcon fontSize='large' color="secondary"
             onClick={() => handleIcon('M')} 
          />
          <SettingsIcon fontSize='large' color="secondary"
             onClick={() => handleIcon('A')} 
          /> 
        </div>
      </div>      

//임시로 반영.. 
//로그인되면 token값과 payload값을 보여준다.

      { keycloak.idToken ?
          <UserInfo /> 
        : null
      }
</>
    )
}

menu.jsx 마지막에 UserInfo 컨포넌트를 임시로 반영한다.

      { keycloak.idToken ?
          <UserInfo /> 
        : null
      }

그럼 로그인을 통해 idToken과 Token , 그리고 payload값을 출력해본다.

링크서비스 사이트에 로그인이 되어 token값과 playload정보를 볼수 있다.

또한, 개발자모드 console 에서는 auth token과 refresh token을 계속적으로 생성됨을 확인할수 있다.

동일하게  jwt.io 사이트에서도 확인해본다. 

두개를 비교해보면 동일한 결과값임을 알수 있다.

그럼 token정보에서 로그인 아이디, 이름 등 출력할때는 idTokenParsed 함수를 통해 다음과 같이 하면 한다.

아이디 정보를 알고 싶을때, 

keycloak.idTokenParsed.preferred_username

위와 같은 형태로 payload값을 중 하나를 가져오면 된다.

그럼 다음편에 계속..................................