본문으로 건너뛰기

JavaScript

이 문서는 Javascript를 사용하여 PASSPORT 로그인을 구현하는 방법을 안내합니다.

시작하기 전에​

사전 설정​

이해하기​

로그인​

Public 클라이언트 타입​

Public 클라이언트 타입의 로그인 방식은 OAuth2.0 PKCE(authorization code flow with proof key for code exchange)방식 입니다. 서비스 로그인 시퀀스 과정처럼 인가코드 요청, 토큰 요청 2단계로 로그인이 진행됩니다.

Step 1. PASSPORT 로그인 및 인가코드 요청​

1. OAuth2.0 PKCE 방식에서 필요한 code_verifier, code_challenge 값을 생성합니다.​

pkce-challenge NPM 라이브러리를 사용하여 code_verifier, code_challenge 값을 생성합니다.

  • SampleCode(pkce-challenge NPM 라이브러리 이용)

    import pkceChallenge from 'pkce-challenge';

    const { code_verifier, code_challenge } = pkceChallenge();

2. 인가코드 요청 Request 값을 포함하여 PASSPORT 로그인 페이지로 이동시킵니다.​

  • SampleCode

    function requestAuthorizationCode() {
    const client_id = ${CLIENT_ID}
    const response_type = "code"
    const scope = "openid"
    const redirect_uri = ${REDIRECT_URI}
    const code_challenge_method = "S256"
    const code_challenge = ${CODE_CHALLENGE}

    const passportLoginPage = "https://api.maxst.com/profile/v1/public/oauth/authorize?client_id=${client_id}&response_type=${response_type}&scope=${scope}&redirect_uri=${redirect_uri}&code_challenge_method=${code_challenge_method}&code_challenge=${code_challenge}"

    window.location.href = passportLoginPage
    }

3. PASSPORT 로그인 페이지로 이동 후, 로그인이 성공되면 redirect_uri로 이동하게 됩니다.​

4. redirect_uri로 이동 후, 주소창에 code 값이 포함되며 인가코드 요청이 성공되었습니다.​

Step 2. 토큰 요청​

주소창에 있는 code값과 인가코드 요청시 생성한 code_verifier값을 토큰 요청 REST API 형식에 맞게 토큰 요청을 합니다.

  • SampleCode

    fetch("https://api.maxst.com/profile/v1/public/oauth/token", {
        method: "POST",
        headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        },
        body: JSON.stringify({
          client_id: ${CLIENT_ID},
          grant_type: "authorization_code",
          code: ${CODE},
          redirect_uri: ${REDIRECT_URI},
          code_verifier: ${CODE_VERIFIER},
        })
    });
    주의

    ⚠️ 발급 받은 인가코드 값은 재사용이 불가합니다.

로그아웃​

로그아웃 REST API 형식에 맞게 로그아웃 요청을 합니다.
  • SampleCode
    fetch("https://api.maxst.com/profile/v1/passport/logout", {
        method: "POST",
        headers: {
        "Authorization": `Bearer ${token}`
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        },
        body: JSON.stringify({
          client_id: ${CLIENT_ID},
          refresh_token: ${REFRESH_TOKEN},
          id_token: ${ID_TOKEN},
        })
    });

토큰 갱신하기​

토큰 갱신하기 REST API 형식에 맞게 토큰 갱신 요청을 합니다.

  • SampleCode

    fetch(`https://api.maxst.com/profile/v1/public/oauth/token/refresh?client_id=${client_id}&grant_type=${grant_type}&refresh_token=${refresh_token}`, {
        method: "POST",
        headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        },
        body: JSON.stringify({
          client_id: ${CLIENT_ID},
          grant_type: "refresh_token",
          refresh_token: ${REFRESH_TOKEN},
        })
    });