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

본내용은 필자의 " 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값을 중 하나를 가져오면 된다.

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

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

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

지난편에서는 http://localhost:3000 접근시 바로 로그인 페이지가 나오도록 처리했고,

이번편에는 admin 버튼 클릭 혹은 로그인 아이콘을 클릭 할때 Keycloak 로그인 페이지가 나오도록 수정해보자.

이전에 material-icons를 통한 menu.jsx를 제작했다. 아래 이전글 참고바랍니다.

#14. material-icons 를 통한 메뉴화면

기존 menu.jsx 에 SettingsIcon 클릭시 Keycloak의 로그인 페이지로 이동하도록 수정한다.

총 3개의 소스를 수정할 예정이다.

1.  menu.jsx

2. App.js

3. index.js

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

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

우선 react-keycloak/web 라이브러리 구성요소가 Keycloak에 Access해야하는 경우 

useKeycloak Hook를 사용해야한다.

import { useKeycloak } from "@react-keycloak/web";

useKeycloak구조화된 객체를 Destructuring 하여 개별적인 변수에 할당한다.

   const { keycloak } = useKeycloak();

이렇게 함으로써, 모든 keycloak 메서드 및 변수에 액세스할 수 있습니다.

handleIcon 이벤트에 keycloak.authenticated (인증이되었는지) 에 따라 로그인 페이지를 호출해보자.

                // keycloak에 로그인이 되어 있지 않다면, keycloak 로그인 페이지 호출
                if (!keycloak.authenticated) {
                    alert("로그인이 필요한 서비스입니다.")
                    // keycloak 로그인 페이지 호출
                    keycloak.login();
                }

위와 같이 handle 이벤트에 따라 로그인 페이지를 호출할수있으며,

이미 로그인이 되었다면 관리자 화면으로 바로 이동이 가능하다.

위 내용에서 추가적으로 keycloak.login() 후 기본 redirect-uri 이 http://localhost:3000 이다. 

즉, 관리자 화면으로 이동시 로그인 후 바로 이동이 안되고, 초화면이 나온다는 뜻이다.

그래서 redirect-uri를 관리자 화면으로 지정이 가능하다.

                    // keycloak 로그인 페이지 호출시 redirectUri를 개인화가 가능하다.
                    keycloak.redirectUri= window.location.href + '/manager'

수정된 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";

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>      
</>
    )
}

⌘ App.js ( 위치: linkservice/client/src/App.js )

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

이전 App.js 소스내에서는 ReactKeycloakProvider의 initOptions 을 제외한다.

 onEvent={onKeycloakEvent} 도 제외해도 되나, 개발자 모드에서 refressToken값 확인 차원에서

반영해 둔다.

수정된 App.js 

import React from "react"
import { BrowserRouter, Route, Routes } from "react-router-dom"
import LinkMain from "./component/links"
import LinkCreateMain from "./component/links.create"
import ManagerHome from "./component/manager"
import MenuIcon from "./component/menu"
import LinksList from "./component/links.list"
import LinkEdit from "./component/links.edit"
import { ReactKeycloakProvider } from "@react-keycloak/web";
import keycloak, { onKeycloakEvent } from "./keycloak";
import PrivateRoute from "./PrivateRoute";
// import { onKeycloakEvent } from "./keycloak"

function App() {
  return (

    // 기존 BrowserRouter 밖에 ReactKeycloakProvider를 선언한다. 
    // initOptions에 의해서 http://localhost:3000 으로 접속시 keycloak 로그인 페이지로 이동된다.
    <ReactKeycloakProvider authClient={keycloak} onEvent={onKeycloakEvent} >
    {/* initOptions={initOptions} > 제외시킨다. */}

      <BrowserRouter>    
        <Routes>
          <Route exact path="/" element={<LinkMain />} />  

          {/* PrivateRoute를 통해 로그인이 된 상태에서만 페이지 접근이 가능하게 처리  */}
          <Route exact path="/create" element={<PrivateRoute> <LinkCreateMain /> </PrivateRoute>} />  
          <Route exact path="/manager" element={<PrivateRoute> <ManagerHome /> </PrivateRoute>} />  
          <Route exact path="/links/list" element={<PrivateRoute> <LinksList /> </PrivateRoute>} />  
          <Route exact path="/link/edit/:id" element={<PrivateRoute> <LinkEdit /> </PrivateRoute>} />  
        </Routes> 
        <MenuIcon />
      </BrowserRouter>

     </ReactKeycloakProvider>
  );
  
}
export default App;

⌘ index.js ( 위치: linkservice/client/src/index.js )

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

기존 index.js에서 <React.StrictMode> 만 제외한다.

StrictMode가 있으면 http://localhost:3000 접속시 무한로딩이 되므로, 해당 StictMode를 빼준다.

수정된 index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
// import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>  제외시킨다.
    <App />
  // </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();

그럼 서버단과 클라이언트단을 실행해서 정상적으로 반영이 되었는지 확인해보자.

정상적인 페이지가 나온다면 하단 SettingIcon을 클릭한다.

확인을 누르면 Keycloak의 로그인 페이지가 나오는것을 확인할수 있다.

다음에는 로그인후 token값 및 로그인 정보를 가져오는것을 알아보자.

앞선 설명했듯이, 오프소스 SSO중 Keycloak 은 애플리케이션과 서비스에 초점을 둔 ID 및 접근 관리(Access Management)에 통합 인증(SSO)을 허용하는 오픈 소스 소프트웨어로 Kubernetes 또는 MSA 환경에 최적화 된 솔루션 입니다. 쉽게 말하면 인증(Authentification)과 인가(Authorization)를 쉽게 해주고 SSO(Single-Sign-On)를 가능하게 해주는 것이다.

오늘은 우분투(Ubuntu) 환경에서 Keycloak를 설치 해 보자.

※ 우분투 버전은 Ubuntu 22.04.1 LTS 입니다.

사 전 준 비

1. JAVA 설치

sudo apt-get install openjdk-11-jdk

 최신 Keycloak는 OpenJDK 11 이상 설치가 필요하다.

2. KeyCloak 다운로드

다운로드 keycloak-21.1.1.tar.gz

최신버전 keycloak 공식 홈페이지에서 확인 바랍니다.  

3. 다운로드 된 파일 압축 풀기

$ tar -zxvf keycloak-21.1.1.tar.gz

4. 기본 실행

• keycloak 디렉터리로 이동합니다.

$cd keycloak-21.1.1/

• Keycloak를 시작하기 전에 초기 관리자 계정을 생성 해야 합니다.
• Keycloak는 default admin 유저가 없으므로 환경을 셋팅하여 실행해야 합니다.

$ export KEYCLOAK_ADMIN=admin
$ export KEYCLOAK_ADMIN_PASSWORD=admin

• keycloak을 실행 합니다.

$ cd bin
$ ./kc.sh start-dev

• http://localhost:8080 접속

5. Administration Console 접속

위 페이지가 나오면 Adminnistration Console 탭을 클릭해 줍니다.

초기에 export한 관리자 계정과 패스워드를 입력합니다. ( admin / admin )

로그인을 하게 되면 아래와 같은 KeyCloak 기본 대시보드가 표시된다.

다음편에는 realm, client, user 생성등을 알아보자.

대규모 조직(대기업 혹은 중소기업)의 사용자는 SSO(Single Sign-On) 소프트웨어를 사용하여 원활하게 모든 자원(시스템) 에 접근합니다.SSO 소프트웨어를 사용한 ID 및 액세스 관리는 일상적인 비즈니스 운영의 필수적인 부분이 되었습니다. 인기 있는 오픈 소스 싱글 사인온(SSO) 소프트웨어 상위 3개는 아래와 같다.

• IdentityServer
• KeyCloak
• WSO2

IdentityServer

IdentityServer는 오픈 소스 무료 싱글 사인온 소프트웨어입니다. OpenID Connect 및 OAuth 2를 기반으로 하는 교차 플랫폼 프레임워크입니다. 또한 이 오픈 소스 소프트웨어는 여러 애플리케이션에 대한 중앙 인증 및 권한 부여 기능을 제공합니다. federated identities, 다중 흐름 및 API 인증을 지원합니다. 또한 이 자체 호스팅 소프트웨어를 사용하면 사용자가 여러 앱에서 단일 사용자 이름/비밀번호 세트로 로그인할 수 있습니다.

IdentityServer는 C#으로 작성되었으며 배포 및 개발에 관한 문서와 함께 Github에서 모든 소스 코드를 사용할 수 있습니다.

더 알아보기

KeyCloak

KeyCloak은 OpenID Connect, OAuth2.0 및 SAML2.0을 기반으로 하는 또 다른 무료 소프트웨어입니다. 

웹 응용 프로그램 및 웹 서비스에서 SSO 기능을 제공합니다. 무엇보다도 이 오픈 소스 소프트웨는 LDAP 및 Active Directory와의 통합을 제공합니다.

사용자가 역할, 권한 및 세션을 관리할 수 있는 논리적 사용자 인터페이스가 있습니다.

또한 Java, JavaScript 및 C#과 같은 다양한 언어에 대한 클라이언트 라이브러리를 제공합니다.

KeyCloak은 주로 Java로 작성되며 JavaScript를 지원합니다..

소스 코드는 Github에서 사용할 수 있습니다.

더 알아보기

WSO2

WSO2는 널리 사용되는 또 다른 오픈 소스 ID 및 액세스 관리 시스템입니다. 거의 모든 대중적인 신원 표준을 지원하여 인증을 제공합니다. 다른 애플리케이션과의 통합을 위해 API 엔드 파인트를 공개했습니다. WSO2는 사용자 정의가 가능한 사용자 친화적인 인터페이스를 제공합니다. 또한 이 오픈 소스 소프트웨어는 2단계 인증도 제공합니다. 그러나 주로 Java로 작성되었으며 모든 소스 코드는 개발 및 배포에 관한 문서와 함께 Github에서 사용할 수 있습니다.

더 알아보기

언급된 오픈 소스 SSO 소프트웨어는 엔터프라이즈 수준에서 널리 사용됩니다. 

비즈니스를 위한 최고의 싱글 사인온 소프트웨어를 선택하는 중이라면 위 내용을 참고하여 확인하시기 바랍니다.

저는 가장 사용하기 쉬운 KeyCloak을 통한 인증 방식에 대해서 앞으로 게시글을 작성할 예정입니다.