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

본내용은 필자의 " 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값 및 로그인 정보를 가져오는것을 알아보자.

React 로그인 처리는 필자의 " React&Python으로 웹개발(링크서비스)" 카테고리 개발소스에
추가하는 방식으로 진행합니다.
( 소스 폴더는 위 카테고리를 잘 읽어보고,  git 소스를 참고하시기 바랍니다. )

1. 사용되는 라이브러리들

       ▶︎ keycloak-js

       ▶︎ @react-keycloak/web

우선 라이브러리를 설치한다.

아래 포스팅에서 폴더구조를 확인하고,  터미날을 열어 ~>linserver/client 에서 react 라이브러리를 설치한다.

#4. 프로젝트 폴더 구조 및 환경설정

$ yarn add keycloak-js

$ yarn add @react-keycloak/web

2. React에 Keycloak 설정

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

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

keyclaok설정을 위해서 keycloak.js 파일을 생성한다.

import Keycloak from "keycloak-js";

//이전 포스팅의 Keycloak 사용자 아이디와 클라이언트 생성을 참고하여 아래 설정
const keycloak = new Keycloak({
    realm: 'aip',
    url: 'http://localhost:8080/',
    clientId: 'testClient',
});

// initOption 지정
export const initOptions = {
    onLoad: 'login-required',
    checkLoginIframe: false,
  };

export const onKeycloakEvent = (event, error) => {
  // console.log('keycloak event ', event, error);
  switch (event) {
    case 'onAuthLogout':
      keycloak.logout();
      break;
    case 'onAuthRefreshError':
      keycloak.logout();
      break;
    case 'onAuthRefreshSuccess':
    //개발계에서만 사용, 실제 운영계에서는 제외
      console.log('auth token:  ' + keycloak.token);
      console.log('refresh token:  ' + keycloak.refreshToken);
      break;
    default:
      break;
  }
};

export default keycloak;

const keycloak = new Keycloak({
    realm: 'aip',
    url: 'http://localhost:8080/',
    clientId: 'testClient',
});

해당 설정은 아래 이미지처럼 keycloak 의 Client에서 오른쪽 상단 Action 하위 화살표를 클릭하면 "Download adapter config 화면에서 확인이 가능하다. ( reaml, url, clientid 키 명칭이 다르지만 문제없다. )

initOptions과 onKeycloakEvent는 App.js에서 ReactKeycloakProvider 에 추가하기 위해서 선언한다.

initOptions

keycloak 로그인방식에 대해서 설정으로 onLoad

• login-required : 사용자가 Keycloak에 로그인한 경우 클라이언트를 인증하고 그렇지 않은 경우 로그인 페이지를 표시. 
• check-sso : 이미 로그인한 경우에만 클라이언트를 인증하고, 사용자가 로그인하지 않은 경우 브라우저는 애플리케이션으로 다시 리디렉션되고 인증되지 않은 상태로 유지.

여기는 App.js에 ReactKeycloakProvider 형태로 제공하기 위해서 login-required 로 처리한다.

  ( 즉, 특정페이지 이동시 로그인이 안되어 있으면 로그인 페이지를 표시하도록 처리 )

onKeycloakEvent

keycloak event를 설정하며, Provider에 지정하여 event시 마다 처리 내용을 선언한다. 위는 default값으로 그대로 반영해도 무방하다.

3. PrivateRoute.js 생성

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

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

Keycloak에 로그인이 되어 있는지 확인하고자 Route를 지정하기 위해서 생성한다.

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

const PrivateRoute = ({ children }) => {
  const { keycloak } = useKeycloak();

  //keycloak에 로그인이 되어 있는지 확인한다.
  const isLoggedIn = keycloak.authenticated;

  return isLoggedIn ? children : null;
};

export default PrivateRoute;

3. App.js 에 ReactKeyclaokProvider 와 PrivateRoute 반영 

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

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

기존 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 , { initOptions, onKeycloakEvent } from "./keycloak";
import PrivateRoute from "./PrivateRoute";

function App() {
  return (

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

      <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;

그럼 http://localhost:3000 으로 접속하면 Keycloak의 로그인 페이지로 리다이렉트 되는 것을 확인 할수 있다.

여기에서 기존에(이전 포스트에서) 생성했던 사용자로 로그인을 하면 된다.

다음편에는 http://localhost:3000 접근시 바로 로그인 페이지가 나오지 않고,

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

KeyCloak 용어 정리

• OIDC : OAuth 가 권한 부여만 다루는 것이라면 OIDC 는 OAuth 를 포함하여 인증과 권한부여를 모두 포함한 것이다. SSO 의 구현을 위한 수단으로 사용된다.
• Realm : 인증, 권한 부여가 적용되는 범위를 나타내는 단위이다. SSO 를 적용한다고 했을때 해당 SSO 가 적용되는 범위는 Realm 단위이다.
• Client : 인증, 권한 부여 행위를 대행하도록 맡길 어플리케이션을 나타내는 단위이다. 그 단위는 웹사이트 혹은 REST API 를 제공하는 서비스도 될 수 있다. 하나의 Realm 에 n개의 Client 를 생성, 관리할 수 있다.
• User : Client 에 인증을 요청할 사용자를 나타낸다. 하나의 Realm 에는 Realm 에 종속된 n개의 User 를 생성하고 관리할 수 있다. 기본적으로 User 는 Username, Email, FirstName, LastName 으로 구성되어 있지만 Custom User Attribute 를 사용하면 사용자가 원하는 속성을 추가할 수 있다.
• Role : User 에게 부여할 권한 내용을 나타낸다. 여기에는 Keycloak 의 REST API 를 사용할 권한을 부여할 수 있고 사용자가 정의한 권한을 부여할 수도 있다.

Keycloak 사용을 위한 설정

Keycloak 사용을 위해서 다음과 같은 설정을 필요하다.

1. Realm 생성
2. User 생성
3. Client 생성

Realm 은 초기에는 Master Realm 만 존재한다. Master 가 아닌 실제 사용을 위한 렐름을 생성해준다.

Realm 기준 판단은 단일 회사 단위라고 생각 하면 될듯 하다. 

   예를 들어 포스코 그룹인 포스코, 포스코DX, 포스코인터내셔널, 포스코E&C 가 Keycloak를 도입하다고 가정하면
   Realm는 서로다른 4개가 필요할것이다.
   단, 만약에 위 4개 그룹사가 모두 아이디 동일한 아이디로 각 회사의 Legacy시스템을 사용하게 한다면 Realm는
   하나로 통일해야한다.

1. Realm 생성

● 왼쪽상단 master 아래 화살표를 눌려 Create Realm를 해보자.

● Realm name을 정하고 Create를 눌러 다음으로 넘어갑니다.

2. User 생성

● Keycloak에 대한 새 사용자를 생성한다.

     왼쪽 Manage -> Users를 클릭하고 Create new user를 클릭합니다.

● Username을 입력하고 Create를 클릭하여 다음 단계로 넘어간다.

  - 각 항목은 필수값이 아니지만, 필요한 항목은 기입해도 된다.

  - Required user actions는 로그인 할때 필요한 조치를 선택할수 있으며, ( 'Verify email' ) email 주소를 확인하기 위해

    사용자에게  email를 보내거나, ( 'Update profile' ) 사용자가 개인정보를 입력하도록 요구하거나,

    ('Update password') 사용자가 새로운 비밀번호를 입력하도록 요구할수 있으며, ( 'Configure OTP') OTP구성도 할 수 있다.

● Credentials 탭에서 Set Password를 클릭해서 패스워드를 입력한다.

 Temporary를 On으로 하면 test유저가 처음 로그인시 패스워드를 변경할수 있다.

3. Client 생성

Client는 Application 인증을 위한 단위라고 보면 된다.

● 왼쪽 메뉴에서 Clients의 Create client 를 클릭한다. 

● Client ID를 입력한다.

● Capability config는 default로 하고 Next .

● Login settings에서 redirect URIs를 설정한 후 Save.

Valid redirect URls 는 실제 인증(로그인) 성공후 리다이렉션 할수 있는 URL패턴
    - React로 샘플 사이트를 구축할 예정이므로 react 기본 URL인 http://localhost:3000 으로
       * 와일드카드는 react에서 라우팅된 모든 URL를 허용하기 위해서 사용
Valid post logout redirect URls 는 로그아웃후 리다이렉션 하는 URL이다.
Web origins 는 CORS를 해결하기 위해 가능하면 사용 
    - 특정 URL만 허용할 경우는 해당 URL를 기입하면 된다.

다음에는 간단한 react로 테스트 방법을 알아보자.

앞선 설명했듯이, 오프소스 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을 통한 인증 방식에 대해서 앞으로 게시글을 작성할 예정입니다.