$$config title: keycloak 기술 설명서 keywords: - IT - ... $$ ## ?개요 및 목적 - 사용자의 인증 및 인가가 이미 구현되어있으므로 반복적인 코드의 수를 줄일 수 있다 - 구현중 --- ?Git 리포지터리 - 리액트 [https://github.com/audgks5551/keycloak-react_2022_03_23](https://github.com/audgks5551/keycloak-react_2022_03_23) - 카카오로그인 jar 파일 [https://github.com/audgks5551/keycloak-kakao__2022_03_23](https://github.com/audgks5551/keycloak-kakao__2022_03_23) --- ## ?사용된 기술 ### 버전관리 ``` ?️ - GitHub ``` ### 개발환경 ``` ?️ - Chrome - MAC ``` ## ?서비스환경 ``` ?️ - React - MariaDB - Keycloak ``` --- ## ⚙️설계패턴 - 키클록을 통해 권한을 얻은 리액트 사용자는 자원에 접근할 수 있는 권한을 가집니다. --- ## ?서버 구조 $$uml react --> keycloak : 1. 권한 요청 react <-- keycloak : 2. 토큰 반환 react --> backend : 3. 액세스토큰을 가진채 자원 요청 keycloak <-- backend : 4. 권한 확인 요청 keycloak --> backend : 5. 권한 확인 react <-- backend : 6. 자원 반환 $$ ### ? UI - 로그인 전 ![원본이미지](https://github.com/audgks5551/image/blob/master/keycloak/1.png?raw=true) - 로그인 화면 ![원본이미지](https://github.com/audgks5551/image/blob/master/keycloak/3.png?raw=true) - 로그인 후 ![원본이미지](https://github.com/audgks5551/image/blob/master/keycloak/2.png?raw=true) ### ? 소스코드 #### index.js ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import UserService from "./services/UserService"; import HttpService from "./services/HttpService"; const renderApp = () => ReactDOM.render( , document.getElementById('root') ); UserService.initKeycloak(renderApp); HttpService.configure(); ``` #### App.js ```javascript import { BrowserRouter, Routes, Route } from "react-router-dom"; import Welcome from "./component/Welcome"; function App() { return ( } /> ); } export default App; ``` #### services - UserService.js ```javascript import Keycloak from "keycloak-js"; /** * keycloak 생성자 생성 (여러가지 함수들 소환) */ const _kc = new Keycloak("/keycloak.json"); const initKeycloak = (onAuthenticatedCallback) => { console.log(_kc); _kc.init({ onLoad: 'check-sso', silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html', pkceMethod: 'S256', }) .then((authenticated) => { if (!authenticated) { console.log("user is not authenticated..!"); } onAuthenticatedCallback(); }) .catch(console.error); }; const doLogin = _kc.login; const doLogout = _kc.logout; const getToken = () => _kc.token; const isLoggedIn = () => !!_kc.token; const updateToken = (successCallback) => _kc.updateToken(5) .then(successCallback) .catch(doLogin); const UserService = { initKeycloak, isLoggedIn, getToken, doLogin, doLogout, updateToken }; export default UserService; ``` - HttpService.js ```javascript import UserService from "./UserService"; import axios from "axios"; const _axios = axios.create(); const configure = () => { _axios.interceptors.request.use((config) => { if (UserService.isLoggedIn()) { const cb = () => { config.headers.Authorization = `Bearer ${UserService.getToken()}`; return Promise.resolve(config); }; return UserService.updateToken(cb); } }); }; const HttpService = { configure }; export default HttpService; ``` #### component - RenderOnAnonymous.jsx ```javascript import UserService from "../services/UserService"; const RenderOnAnonymous = ({ children }) => (!UserService.isLoggedIn()) ? children : null; export default RenderOnAnonymous ``` - RenderOnAuthenticated.jsx ```javascript import UserService from "../services/UserService"; const RenderOnAuthenticated = ({ children }) => (UserService.isLoggedIn()) ? children : null; export default RenderOnAuthenticated ``` - Welcome.jsx ```javascript import UserService from "../services/UserService"; import RenderOnAnonymous from "./RenderOnAnonymous"; import RenderOnAuthenticated from "./RenderOnAuthenticated"; const Welcome = () => { return (

Hello Anonymous!

Hello User!

); } export default Welcome ``` #### keycloak.json ``` { "realm": "react-test", "auth-server-url": "http://localhost:8888/auth/", "ssl-required": "external", "resource": "react-auth", "public-client": true, "confidential-port": 0 } ```