SPA(Single Page Application)

제약 사항

SPA 에이전트는 IE 10 이상만 적용이 가능합니다.

IE 10 이상은 "XMLHTTPRequest" 객체를 사용하며, "XMLHTTPRequest" 객체는 인증 처리에 문제가 없습니다.

하지만 IE 9 이하에서 사용 되는 "XDomainRequest" 객체는 다음과 같은 제약 사항이 있습니다. 이와 같은 제약 사항으로 IE 9 이하에서는 SPA를 사용할 수 없습니다.

  • Request에 커스텀 헤더를 추가할 수 없습니다.

  • Request의 'Content-Type'헤더는 'text/plain'만 지원됩니다.

  • Request에 인증 또는 쿠키가 전송되지 않습니다.

  • Request는 호스팅 페이지와 Scheme가 동일해야 합니다.

SPA service composed

SPA는 Front-End(이하 FE)와 Back-End(이하 BE)로 구성됩니다.

FE는 주로 JavaScript를 이용하여 구성하고, BE는 특별한 제약없이 자유롭게 구성할 수 있습니다. FE는 Ajax를 이용하여 BE와 통신하며, BE의 결과를 UI에 표현하는 역할을 맡습니다. 이러한 FE와 BE의 구조 때문에 페이지 이동이 없이 한 페이지에서 서비스 제공이 가능합니다.

SPA 방식에서 SSO를 지원하기 위해서는 FE 부분과 BE 부분에 모두 라이브러리 적용이 필요합니다. FE 부분은 페이지 이동 없이 SSO 연동을 처리하기 위한 라이브러리가 제공 되며, BE 부분에는 FE에서 처리할 수 없는 암호 데이터 처리 또는 뒷단에서 갱신해야 하는 상태 처리 등을 담당하는 라이브러리가 제공됩니다.

FE에 제공되는 JavaScript 라이브러리는 FE에 적용하여 구현해야 하지만, BE에 제공되는 라이브러리는 반드시 BE에 설치되어야 하는 것은 아닙니다. 이미 SSO를 적용한 일반 Web 업무 시스템이 있다면 그 시스템을 이용해도 무방합니다. 다만 관리적인 이슈가 있을 수 있습니다. 해당 업무 시스템이 유지보수를 이유로 서비스를 내리면 이와 연동한 FE 서비스도 영향을 받아 문제가 발생합니다. 따라서 FE와 묶여 있는 BE에 적용하는 것이 시스템 유지보수에 용이할 것입니다.

Ajax는 보편화 되어서 친숙하게 사용할 것입니다. 주로 jQuery를 이용하여 BE와 Ajax 방식으로 데이터를 주고 받을 것입니다. FE에 제공되는 JavaScript 라이브러리는 일반 Ajax와 다른 점이 있습니다. 바로 CORS와 Credential(인증) 처리입니다.

Ajax – CORS

CORS는 Cross Origin Resource Sharing의 약자이며 한글로는 "교차 출처 리소스 공유"라고도 합니다. 동일 출처 정책(Same origin policy)으로 인하여, 다른 도메인(cross-domain)의 자원을 접근하는 것은 기본적으로 금지됩니다. 하지만 FE와 BE의 도메인은 서로 다르게 설정될 수도 있습니다. 이를 극복하기 위하여 CORS 정책을 잘 적용해야 합니다.

만약 FE와 BE의 서비스 도메인이 같다면, 동일 출처 정책이 적용되어 별다른 CORS 설정 없이도 서비스 연결이 가능합니다.

FE와 BE의 서비스 도메인이 다르다면 다음과 같은 설정들이 필요합니다.

  • Access-Control-Allow-Methods:

    설명: Client에서 호출 가능한 메서드 정의

  • Access-Control-Allow-Headers: SSOAgent-Type

    설명: Client에서 추가하여 전달할 수 있는 헤더 정의

  • Access-Control-Allow-Origin:

    설명: 호출 가능한 출처(Origin) 정의

Ajax – Credential

Ajax에서 인증을 처리하기 위해서는 Client와 Server간에 인증 데이터를 주고 받아야 합니다. NSSO에서 인증 데이터는 쿠키에 저장합니다. 따라서 Ajax에서 쿠키 전달이 가능해야 하며, 쿠키 저장을 위한 Set-Cookie 지시어도 처리 할 수 있어야 합니다.

앞서 CORS를 극복하기 위하여 몇 가지 설정을 추가 했지만, Ajax로 인증을 처리 하기 위해서도 몇 가지 작업을 해야 합니다.

작업은 FE와 BE 모두에 항목을 설정해야 하며 해당 항목은 다음과 같습니다.

Front-End (Client)

  • withCredentials: true

    설명

    • 인증을 이용한 요청임을 정의합니다.

    • 서버 측에서 "Access-Control-Allow-Credentials: true"를 응답하지 않는다면, 해당 응답은 거절됩니다.

    • 쿠키의 전달 및 응답 처리가 가능해집니다.

Back-End (Server)

  • Access-Control-Allow-Credentials: true

    설명: Credential 처리 허용을 정의합니다.

  • Access-Control-Allow-Origin: http://spa.sample.com

    설명

    • CORS에서도 정의한 값은 * 이지만

    • Access-Control-Allow-Credentials 값을 true로 설정하게 되면, Access-Control-Allow-Origin 값을 하나만 설정 할 수 있습니다.

    • 하나의 도메인 값을 리턴 해야 하지만, 여러 도메인에 대해서 서비스 해야 한다면, Filter나 global.asax와 같은 곳에서 이 헤더를 응답하는 방법이 있을 수 있다.

  • Vary: Origin

    설명: Access-Control-Allow-Origin 값을 하나만 설정하면, 요청할 수 있는 Client는 하나만 가능할 수밖에 없습니다. "http://spa.sample.com 라는 값을 리턴 했지만, 이 값은 변할 수 있다"라는 의미에서 Vary: Origin를 정의합니다.

PreviousSSO 중복 로그온 선택 UI 구성하기NextAgent Library 명세

Last updated

Was this helpful?