React 페이지에서 SSO(Keycloak)로그인 처리하기

 

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

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

       ▶︎ keycloak-js

       ▶︎ @react-keycloak/web

 

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

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

 

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

#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의 로그인 페이지로 리다이렉트 되는 것을 확인 할수 있다.

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

 

keycloak 기본 로그인화면

 

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

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