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

베트남 나트랑 혼자 떠나는 여행

---

 호핑투어

아무리 혼자 왔지만, 그래도 나트랑 왔으니 반나절 호핑투어를 해보고자 전날 호텔에서 검색하다가 마이리얼트립에서 투어 신청을 했다.

생전 처음 스노쿨링을 해야해서 한국인 가이드 투어를 신청.

투어는 대부분 나트랑 시내는 호텔 픽업을 해주기 때문에 신청시 호텔 위치를 알려주면 된다.

투어 신청후 아래와 같이 진행하면 된다. 

• 카카오톡으로 문자가 오고, 신청 양식에 따라 픽드랍 호텔명, 날짜, 인원을 답변한다.
• 예약확정 문자를 받으면, 여권과 베트남 입국시 여권에 찍은 스탬프 사진을 찍어 보내준다. 
• 확정문자를 받는다.

극 I 성향에 나이많은 혼자 여행자라 크레이지 호핑투어는 꿈도 못꿈. ㅋㅋ

● 나트랑 호핑투어 스케줄

+ 08:00 - 08:30 나트랑 시내 호텔 픽업

+ 09:00 - 10:30 선착장 집결 출발

+ 10:30 ~ 혼문섬 포인트 이동 스노클링 즐기기

+ 11:00 - 13:40 미니비치 이동 및 점심식사 후 자유 시간

● 포함사항

한국어가이드, 점심식사, 스노클링장비,미니비치 선베드

● 준비물

수영복 갈아입을수 있는 공간이 없으므로, 미리 수영복을 입고 오면 된다.

샤워는 하실분만...( 나는 패~스 )

선크림은 필수!!!

매너팁 5만동 현금 준비.

선착장에 도착해서 스피드보트를 타고 혼문섬에 도착 간단히 스노쿨링을 했다.

처음이라서 짠 소금물을 많이 먹었고, 발 닿지 않는곳에 가면 약간 공포스럽지만, 그래도 새로운 경험이였고, 앞으로 한국에서 스노쿨링을 배워볼까 생각했다.

미니비치에 도착해서 여러가지 액티비티를 추가로 즐길 수 있었으나, 아재인 나는 맥주 먼저..

개인적으로 파라세일링을 못한게 지금 후회한다. 드론으로 촬영까지 해주니 추억이 될수 있었으나,

사람들이 줄을 많이 서서 결국 맥주만 마시면서 여유만 즐기다 왔다.

팁 : 가능하다면 맥주도 몇개 가지고 와도 좋을듯하다. 미니비치에서 맥주 가격은 사악하다.

점심은 단체로 현지식을 먹으며, 맥주 한캔씩 줍니다. ( 사진을 못찍음 ㅠㅠ )

 저녁

호핑투어를 하고 돌아와 호텔에서 재 정비하고, 밖에서 세탁을 맡기고 저녁을 먹으려 구글 검색.

오늘은 Flex해보자고 랍스터를 먹기로 하고 구글 평점이 그래도 좋은 곳으로 찾아감.

https://maps.app.goo.gl/VNKrQZGwTiFUe5Jc6 

혼자라 크기가 중간으로 해서 먹을려고 했으나, 큰것 밖에 없다고해서 얼마 차이가 안나 시킴..

개인적으로 맛조개가 제일 맛있었고, 랍스타는 치즈보다 갈릭이 좋았다. ( 치즈반, 갈릭반으로 시킴 )

진짜 해보고 싶었던....랍스터을 통째로 와구와구 먹고 싶었다.

혼자 맥주 5캔과 랍스타, 맛조개까지 먹고 원화로 약 5만원(10만동) 정도 나온것 같다.

오늘은 Flex 한 날

- 다음편에 계속 -

호핑투어는 남자 혼자가는 것은 추천하지 않습니다.
여성분들은 혼자가도 가이드 조수분들이 잘 해줌. ㅠㅠ

문제발생

Figma(피그마) 접속시 갑자기 WebGL 오류발생.

아래와 같은 오류가 발생으로 피그마에서 디자인 파일을 접속할 수 없음.

해결

• Chorome flags 설정을 다음과 같이 변경 ( chrome://flags/ 접속 )
• WebGL Draft Extensions : 사용가능
• Choose ANGLE graphics backend : OpenGL

• Chrome 설정 ( 설정 -> 시스템 ) 
• 가능한 경우 그래픽 가속 사용 : checked

Chrome 재 시작하면 정상 접속을 확인할 수 있다.

베트남 나트랑 혼자 떠나는 여행

---

나트랑에 저녁 늦게 도착하여 베트남 술과 함께 숙소에서 자고 일어나, 김청에서 환전하고 아침 일찍 주변 구경 시작.

탑짬흐엉         ⇥          길거리 커피(콩카페 대신)       ⇥       포나가르사원

나트랑에서는 그랩 바이크로만 이동을 했다. 그랩카는 잘 안잡히는데, 그랩 바이크는 바로바로 잡히고 가격도 싸서 나트랑 있는동안 그랩 바이크만 탔다.

숙소에서 가까운 탑짱흐엉에서 트랜지션 촬영 연습도 해보고,  그 유명한 콩카페를 갔으나, 한국사람들 버글버글해서 현지 느낌나게 길거리 슈퍼같은 곳에서 "카페쓰어다" 라고 외치며 아이스 커피 한잔.(아주머니가 연유없이 아이스커피만 해줌 ㅠ ) .

(가격이 내 기억으로 250원으로 너무 작은 금액이라 정확하지 않음.)

커피마시면서 길거리에 앉아서, 어딜갈까 구글맵을 보다가 그랩 바이크를 불러 관광지인 포나가르사원으로 갔다.

단체 행사가 있어서 살짝 끼어서 함께 구경도 했다.

방송촬영까지 하는것 보니, 무슨 행사가 있었던 것 같는데, 물어볼 사람도 없고 해서 그냥 조용히 따라 다니기만 했다.

포나가르사원 밖에 나와서 길거리 사탕수수를 처음 먹었는데, 최고의 맛!!,  베트남에 있을때 망고주스보다 더 많이 먹은듯.

 점심

호텔 조식에 쌀국수를 먹었으나, 역시 베트남에서는 쌀국수가 최고!!

오기전에 고수를 경험해서 그런지 고수가 없으면 심심한 맛이 난다.

쌀국수에 닭다리 튀김 추가해서 싸이공맥주로 혼술. 에어컨은 없지만, 선풍기로만으로 괜찮았다.

여기 식당에서 배운것.

맥주를 추가하려니 "저기요" 등 종업원을 부르는게 뭔지 궁금해서 찾아보았다.

 알면 좋은 상식

간단히 정리하면

나보다 어리면 남녀구분 없이 "엠어이(에머이)"

나보다 나이 많은 남자는 "안어이(앙어이)"

나보다 나이 많은 여자는 "치어이"

라고 부르면 된다고 한다.  그러나 무조건 '에머이' 부르면 끝.  여행 끝날때까지 가장 많이 사용하는 단어다.

'에머이' : 나이 많은 아주머니에게 해주면 많이 웃으시며, 좋아하신다. 

 저녁

오직 생맥주통 때문에 간 곳.

구글맵을 보다가 저 생맥주통 때문에 찾아간 곳이다.

우리나라에 수입이 필요한듯 하다. 수입하고 싶다.

비록 혼술이지만, 갑자기 스콜성 비까지 와서 낭만 최고였다.

하루가 길었던 날이다.

얼큰하게 취헀는데, 아직까지 비가 내려 그랩카를 불렸으나, 잡히지 않아, 조금 잦아들고 있어서 그랩 바이크를 호출하니 바로 잡혔다.

비 맞으며 바이크 타고 호텔로~~

1일차는 여기서 마무리

- 다음편에 계속 - 

베트남 나트랑 혼자 떠나는 여행

---

5년만에 떠나는 해외여행이다. 4개월 프로젝트가 끝나고 여름이 가기전 떠나야겠다는 생각에 여기저기 여행지를 보다가 혼자 떠나기 좋은 휴양지인 베트남 나트랑으로 떠나기로 결정했다. 인아웃 항공권을 무작정 예약하고 여행준비를 시작했다.

처음에는 베트남 일주를 계획하고, 무작정 떠나려고 했으나, 추석으로 인해 고향에도 가야해서 어쩔수 없이 10일간만 떠나기로 결정했다.

[이번 여행의 컨셉]

1. 휴양지에서 여행 스트레스보다 휴식이 먼저다.

2. 비행기와 숙박만 예약한 후 떠난다.

   - 여행일정에 따라 숙박을 옮겨 다니는 스트레스 보다는 한곳에서 휴식.

3. 그동안 못했던것 경험하기.

4. 나이와 상관없이 놀기.

5. 할건 다 해보자.

 출발

한국에서 나트랑 항공권은 밤비행기가 많아서 3시간전에 인천공항에 도착했으나, 모바일로 이미 체크인을 하고 위탁수하물도 없어서 남은 시간에 뭘할까 고민하다가 라운지를 처음 이용해 보았다.

안해본것을 해보자고 했으니, 평생 처음 라운지를 이용해 본 결과 아주 맘에 들었고, 특히 술을 좋아하는 나에게 비행기 타기전에 알콜을 섭취할수 있다는게 맘에 들었다. 공항에서 기다리다 밥먹고 맥주한잔 할 생각이라면 저는 차라리 라운지를 이용하는것을 추천한다.(개인적인 생각) 가격을 계산해보면 별로 차이가 없을듯.

라운지 이용권은 꼭 무료이용 카드가 아니여도 마이리얼트립, 클룩등에서 할인된 가격으로 판매하며, 왠만한 카드사에서 30% 할인을 해주니 잘 활용해서 이용하는것을 추천한다.

이번에 이용한 항공은 티웨이 항공.

저녁 11:45분 나트랑 깜라인 공항 도착.

보통 찾아보니 얼리모닝투어를 신청하던지, 0.5박 호텔 투숙을 알아보지만, 난 Virgo호텔 가성비가 좋아서 이날을 포함해서 4박을 신청헀고, 호텔에 메일을 보내 픽업서비스 요청을 해두었다.

저녁 늦게 도착한 깜라인 공항에서 택시는 부르는게 가격이라, 처음부터 스트레스 받기 싫어서 호텔 픽업서비스로 시내 이동 해결.

 호텔

4박을 예약한  Virgo 호텔.

https://maps.app.goo.gl/NMqqoB2M47AS7TSu5

체크인 : 14:00
체크아웃 : 12:00
조식 : 06:00 ~ 10:00 (3층)
시내중심으로 호텔주변으로 인프라 잘 되어 있으며,
왠만한 곳은 걸어서 갈수 있는 위치와 가성비가 좋은 호텔.

개인적인 생각으로 레갈리아골드호텔을 더 추천한다. ( 마지막 1박을 했는데, 여기 서비스가 더 좋은듯.)

나트랑에서 왠만한 호텔은 모두 수영장이 있으며, 이 때문에 편안히 혼자 놀수 있을듯 하여 가능한 수영장이 있는 호텔, 그리고 조식있는 가성비 호텔을 찾았다. 한국사람들에게 호불호가 많은 것 같은데, 혼자서 지내기에는 천국이였으며, 최고의 가성비였다.

조식도 맘에 들었으며(특히 쌀국수 육수는 아주 진해서 좋았음) , 중국 단체여행이 왔는지 중국사람들이 많았다.

1박에 3만원대에 5성급 서비스, 위치까지 좋아서 4박동안 편히 지낼수 있었다.

오자마자, 바로 앞 마트에 가서 베트남 술 종류는 모두 구매

혼자여행이라 사진만 찍는 럭셔리 리조트/호텔은 필요 없다.

자~~이젠 놀아볼까!!

-다음편에 계속-

본내용은 필자의 " 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을 통한 인증 방식에 대해서 앞으로 게시글을 작성할 예정입니다.