Javascript SDK 적용하기

프로젝트에 SDK 적용

SDK 다운로드 페이지에서 최신 버전 파일을 내려 받을 수 있습니다. 다운로드 받은 JavaScript SDK 스크립트 파일을 웹 페이지에 포함합니다.

SDK 초기화

개발자센터에 등록된 앱 정보에는 클라이언트 아이디와 JavaScript 시크릿 키가 발급되어 있습니다.

해당 정보를 사용하여 아래와 같은 순서로 초기화를 진행합니다.

SDK import

SDK-FILE-PATH에 다운로드 받은 SDK를 추가합니다.

<script src="SDK-FILE-PATH"></script>

SDK 초기화

CLIENT-ID, SECRET-KEY에 발급받은 클라이언트 아이디 및 JavaScript 시크릿 키를 할당하고, 인증요청 결과를 전달받을 REDIRECT-URL을 설정합니다.

REDIRECT-URL은 개발자센터의 로그인API 설정에 등록된 URL이어야 합니다.

<script>
  var ifreeLogin = new ifree.Login();
  ifreeLogin.init({
    client_id: 'CLIENT-ID',
    secret_key: 'SECRET-KEY',
    is_popup: false,	// 팝업사용여부 
    redirect_url: 'REDIRECT-URL'
  });
</script>

로그인 요청

JavaScript SDK를 통한 로그인 요청은 Redirect/Popup의 2가지 스타일로 제공됩니다.

Redirect 스타일 로그인

SDK 초기화 시 팝업 미사용을 선택한 경우 아래와 같이 인증요청 및 결과를 확인합니다.

인증 결과는 등록한 REDIRECT-URL을 통해 아래와 같이 제공됩니다.

- 인증 성공 시 : http://REDIRECT-URL?code={응답코드}&state={state값}&ptn_token={ptn_token값}&ptn_cd={제휴사연결회원코드}
- 인증 실패 시 : http://REDIRECT-URL?code={응답코드}&state={state값}

아래 예시는 인증요청 페이지와 인증확인 페이지가 동일한 경우의 예시입니다.

<script>
var ifreeLogin = new ifree.Login();
ifreeLogin.init({
  client_id: 'CLIENT-ID',
  secret_key: 'SECRET-KEY',
  is_popup: false,	// 팝업사용여부 
  redirect_url: 'REDIRECT-URL'
});

// 인증요청결과 확인 예시 
window.addEventListener('load', function(e) {
  ifreeLogin.getLoginResult(function(result) {
    if (result.code == 'success' && result.ptn_token) {
      // TODO ptn_token을 사용하여 제휴사 로그인 (REST API 연동)
    } else {
      // 인증실패 메시지 확인 
      console.log(JSON.stringify(result));
    }
  });
});

...

// 인증요청 
// STATE-TOKEN : 사이트 간 요청 위조(cross-site request forgery) 공격을 방지하기 위해 애플리케이션에서 생성한 상태 토큰값으로 URL 인코딩을 적용한 값을 사용
ifreeLogin.login('STATE-TOKEN');
</script>

Popup 스타일 로그인

SDK 초기화 시 팝업 사용을 선택한 경우 아래와 같이 인증요청 및 결과를 확인합니다.

<script>
var ifreeLogin = new ifree.LoginWith();
ifreeLogin.init({
  client_id: 'CLIENT-ID',
  secret_key: 'SECRET-KEY',
  is_popup: true,	// 팝업사용여부 
  redirect_url: 'REDIRECT-URL'
});

... 

// 인증요청  
// callback : 로그인요청 결과확인을 위한 콜백함수
// STATE-TOKEN : 사이트 간 요청 위조(cross-site request forgery) 공격을 방지하기 위해 애플리케이션에서 생성한 상태 토큰값으로 URL 인코딩을 적용한 값을 사용
ifreeLogin.popupLogin(function callback(result) {
  if (result.code == 'success' && result.ptn_token) {
    // TODO ptn_token을 사용하여 제휴사 로그인 (REST API 연동)
  } else {
    // 인증실패 메시지 확인 
    console.log(JSON.stringify(result));
  }
}, 'STATE-TOKEN');
</script>

로그인 응답정보

각각 로그인 요청에 대한 응답결과로 LoginResult 를 제공합니다. 제공되는 응답정보에서 ptn_token를 사용하여 REST API 연동을 통해 로그인을 완료할 수 있으며, state를 사용하여 애플리케이션이 로그인 요청 시 전달한 STATE-TOKEN을 검증할 수 있습니다.

LoginResult

export interface LoginResult {
  /** 응답코드 */
  code: ResultCode
  /** 응답메시지 */
  message?: string
  /** access-token 발급을 위한 인증토큰 */
  ptn_token?: string
  /** 제휴사연결 회원코드 */
  ptn_cd?: string
  /** CSRF 방어를 위한 상태토큰 */
  state?: string
}

ResultCode