(개발자의 편의 및 원활한 작업을 위해 아임포트 관련 가이드를 참고하여 제작되었습니다.)

1. 아임포트 라이브러리 추가하기

웹사이트의 결제페이지의 HTML에 아래의 <script>를 삽입합니다. 아임포트 라이브러리는 jQuery 기반으로 동작하기 때문에 jQuery 1.0 이상이 반드시 설치되어 있어야합니다. 휴대폰 본인인증 기능은 아임포트 JavaScript v1.1.4부터 지원합니다.

HTML

1
2
3
4
<!– jQuery >
<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.4.min.js” ></script>
<!– iamport.payment.js >
<script type=”text/javascript” src=”https://cdn.iamport.kr/js/iamport.payment-1.1.5.js”></script>
cs

2. 가맹점 식별하기

IMP객체의 init함수의 인자에 가맹점 식별코드를 삽입하고 웹사이트의 인증 페이지에서 호출해야 합니다. 가맹점 식별코드help@bbaton.com 으로 문의해주시기 바랍니다.

JavaScript

1
IMP.init(“imp00000000”); // “imp00000000” 대신 발급받은 “가맹점 식별코드”를 사용합니다.
cs

코드에서는 init()함수의 인자에 임의의 번호를 작성했습니다. 가맹점 식별번호를 help@bbaton.com 으로 문의하여 확인 후 함수의 인자에 작성하면 됩니다.

3. 인증창 호출코드 추가하기

IMP.certification(param, callback)을 호출합니다. 함수의 첫번째 인자인 param객체의 속성을 활용하여 인증에 대해 설정할 수 있습니다.

JavaScript

1
2
3
4
5
6
7
8
IMP.certification({ }, function (rsp) { // callback
    if (rsp.success) {
        // 인증 성공 시 로직
    } else {
        // 인증 실패 시 로직
    }
});
cs

4. 서버에 데이터조회 값(imp_uid) 전달하기

callback에서 인증이 성공(rsp.success: true)하면 rsp의 imp_uid를 서버에 전달하는 로직을 작성합니다.

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
IMP.certification({}, function (rsp) { // callback
    if (rsp.success) { // 인증 성공
      jQuery.ajax({
        url: ‘https://www.client-service.com/certifications’// 인증정보조회를 위한 클라이언트 웹서비스
        type: ‘POST’,
        contentType: ‘application/json;charset=utf-8’,
        dataType: ‘json’,
        data: { imp_uid: rsp.imp_uid },
        success: function (data) {
          var name = data.response.name;
          var gender = data.response.gender;
          var birthday = data.response.birthday.replace(//gi, “”);;
          var phone = data.response.phone;
          var carrier = data.response.carrier;
          var perYear = birthday.substr(04);
          var nowYear = new Date().getFullYear();
          if ((Number(year)  Number(perYear)) >= 19) {//성인인증 성공
            // 개인정보 익명 처리
          } else {//성인인증 실패
            //성인인증 실패 처리
          }
        },
        error: function (request, status, error) {},
      });
    } else { // 인증 실패
      alert(“인증에 실패하였습니다. 에러 내용: “ +  rsp.error_msg);
    }
  });
cs

가맹점 서버에 imp_uid(고유 번호)를 전달하면 아임포트 서버에서 imp_uid로 인증 정보를 조회할 수 있습니다. 조회한 정보를 통해 고객의 정보를 취득하고 로직을 처리할 수 있습니다.

5. 클라이언트 서버에서 아임포트 서버로 인증 조회하기

인증이 완료되면 서버에서 imp_uid값으로 인증 정보를 조회하여 고객의 정보를 취득하고 로직을 처리할 수 있습니다.

– API Endpoint 생성하기

서버에서 imp_uid를 전달받는 API Endpoint를 생성합니다.

Node.js

1
2
3
4
5
6
app.use(bodyParser.json());
// certifications에 대한 POST 요청을 처리하는 controller
app.post(“/certifications”, async (request, response) => {
    const { imp_uid } = request.body; // request의 body에서 imp_uid 추출
})
cs

– 인증정보 조회하기

그 후, REST API 키 와 REST API Secret 을 활용하여 https://api.iamport.kr/users/getToken에서 인증토큰을 발급받고, 해당 인증토큰과 추출한 imp_uid로 https://api.iamport.kr/certifications/$imp_uid를 통해 고객의 정보를 조회합니다.

Node.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 app.use(bodyParser.json());
  // /certifications에 대한 POST 요청을 처리하는 controller
  app.post(“/certifications”, async (request, response) => {
    const { imp_uid } = request.body;
    try {
      // 인증 토큰 발급
      const getToken = await axios({
        url: “https://api.iamport.kr/users/getToken”,
        method: “post”,
        headers: { “Content-Type”“application/json” },
        data: {
          imp_key: “imp_key”// REST API Key 가맹점 식별코드와 같이 전달
          imp_secret: “imp_secret” // REST API Secret 가맹점 식별코드와 같이 전달
        }
      });
      const { access_token } = getToken.data.response; // 인증 토큰
      // imp_uid로 인증 정보 조회
      const getCertifications = await axios({
        url: \`https://api.iamport.kr/certifications/\${imp_uid}\`,
        method: “get”,
        headers: { “Authorization”: access_token } // 인증 토큰 Authorization header에 추가
      });
      const certificationsInfo = getCertifications.data.response;
        return response.json(certificationsInfo);// 조회한 인증 정보 반환
    } catch(e) {
      console.error(e);
    }
  });
cs

6. 개인정보 익명 처리 모듈 추가

서버에서 인증 정보를 조회하여 고객의 정보를 취득하고 개인정보를 익명 처리하는 모듈을 추가합니다.

– 개인정보 인증 처리 화면 요청

아임포트 에서 전달받은 정보를 파라메터에 추가하여 팝업으로 화면을 요청합니다.

URL

GET /v1/user/auto-register?name={NAME}&gender={GENDER}&birthday={BIRTHDAY}&phone={PHONE}&carrier={CARRIER}&impUid={IMPUID}&url={URL}
Host: bapi.bbaton.com

Parameter

타입 설명
name string 성명
gender string 성별
birthday string 생년월일
phone string 휴대폰번호
carrier string 이동통신사
impUid string 아임포트 아이디
url string 익명 처리후 이동할 페이지(공백시 이동 안함)

– 개인정보 익명처리 동의 하기

본인인증 성공 후 조회된 고객의 개인정보(name,gender,birthday,phone,carrier)를 화면에 표시하고 이를 익명 처리하는데 동의하는지 여부를 확인하는 화면 입니다.

“네” 버튼을 클릭하면 익명처리를 완료하는 다음 화면으로 이동합니다.

“아니요, 괜찮습니다.”를 클릭하면 팝업 화면을 종료하고 입력한 url로 메인화면을 이동시킵니다.

– 익명처리 성공 안내

박스를 클릭한 후 비바톤 로그인 정보를 복사해서 관리합니다.

“완료”를 클릭하면 팝업 화면을 종료하고 입력한 url로 메인화면을 이동시킵니다.