2-3. OIDC 연동 - Vue.js

vue-sample.zip

0.22MB

 

이번 게시글은 Vue.js 기반의 어플리케이션을 WSO2의 OIDC와 연동하여 로그인을 진행하기 위한 과정입니다. 예제 실행 환경은 다음과 같습니다.

 

- Node v16.14.1

- WSO2 IS 5.11, 샘플 소스 : 가상환경 내 구축 (wso2.my.com)

 

1. 샘플 소스 구성

해당 소스의 주요 구성은 다음과 같습니다.

 

주요 파일명	기능
oidc-client.min.js	로그인과정을 수행해줄 로직이 작성된 파일입니다.
auth.service.ts	연결에 필요한 정보가 입력된 파일입니다.
callback.vue	로그인 성공 시 이동할 callback 페이지입니다.
Home.vue	메인페이지입니다. 로그인 성공 시 사용자 정보가 화면에 출력됩니다.

 

 

 

 

2. Service Provider 등록

2-1. 생성

<그림 1> Service Provider - Add

 

먼저, WSO2 의 콘솔로 접근하여 Service Provider (이하 SP) 를 등록해줍니다.

해당 과정에서는 SP를 등록하여 Client ID / Secret 값을 발급받아야 합니다.

 

사진과 같이, 콘솔 좌측의 표시된 부분인 Service Providers - Add를 클릭하면 그림과 같은 창이 뜨는데,

이후 예제로 사용할 이름을 입력해준 뒤, Register를 클릭해 해당 SP를 등록해줍니다.

 

2-2. 조회

<그림 2> Service Provider - List

이후 List를 클릭하면 다음과 같이 SP가 등록된걸 확인할 수 있는데, 이후 Edit를 눌러 해당 SP의 설정탭에 접근합니다.

 

2-3. 수정

<그림 3> Service Provider  - Edit (좌) / <그림 4> OAuth/OpenID Configuration (우)

 

기타 설정은 건드리지 않고, 하단의 Inbound Authentication Configuration - OAuth/OpenID Connect Configuration 탭의 Configure를 클릭해주면 우측 사진과 같은 화면이 출력되는데, 하단의 'Callback Url' 탭에 리다이렉트 할 URL을 작성해줍니다. 해당 예제에서는 "http://wso2.my.com:44357/callback" 을 입력해 주었습니다.

 

<그림 5> Client ID, Client Secret

 

이후 설정값을 저장하면 다음과 같이 Client Key, Secret값이 발급됩니다.

 

 

3. 샘플 소스 수정

3-1. 설정값 변경 (auth.service.ts)

다음으로, 샘플 어플리케이션 내의 설정값을 수정해야 합니다.

<그림 6> auth.service.ts 기본값 (좌) / <그림 7> auth.service.ts 변경값 예시 (우)

변수명	변경사항
WSO2_DOMAIN	URL의 host를 변경합니다.
client_Id	2-3. 수정 단계에서 발급받은 'Client ID / Client Secret' 을 토대로 작성합니다.
client_secret
redirect_uri	2-3. 수정 단계에서 입력해준 'Callback Url' 을 토대로 작성합니다.
post_logout_redirect_uri	URL의 host를 변경합니다.

 

4. 실행

4-1. 메인페이지 접속

<그림 8> 메인페이지

샘플로 사용할 SP를 WSO2 내에 등록하였고, 어플리케이션 또한 설정값을 바꿔주었다면 본인이 설정한 도메인 주소로 접근했을 때 다음과 같은 화면이 뜹니다.

 

4-2. 로그인

<그림 9> WSO2 로그인  페이지 (좌) / <그림 10> 접근권한 확인 페이지 (우)

여기서 로그인을 진행하고 접근권한에 관한 창에서 'Allow' 를 클릭하면 로그인과정이 진행되게 됩니다.

 

4-3. 로그인 확인

<그림 11> 메인 페이지 (Home.vue)

과정이 정상적으로 진행되었다면, 다음과 같이 사용자 계정이 나타난 화면을 확인할 수 있습니다.