티스토리 뷰

Web/API

[API] 금융결제원 API 활용하기 #1.앱 등록 및 Key 발급, 사용자 토큰 발급

Aaron 2020. 6. 22. 17:16
반응형


.앱 등록 및 API Key 발급

- 금결원 오픈뱅킹 테스트베드 가입

- 금결원에서 자세하게 설명해준 설명서를 보고 앱 등록 및 API Key를 발급 

- API Key와 Secret은 계속해서 사용하게 될 것이다. 따로 저장해두는게 편리하겠쥬~?



.명세서 확인

- 자료실에서 오픈뱅킹공동업무 API 명세서를 다운받을 수 있다.

  API 활용의 시작은 명세서를 꼼꼼히 읽는 것이다.

 우리는 테스트로 API를 활용할 것이므로 testapi.openbanking... 를 호출해야 한다.

 쭉쭉쭉 읽어보면 피가 되고 살이 될 것이다..


여기서 끝나면 시시하니까 사용자 토큰 발급까지 해보자.



.사용자 토큰 발급

- 서비스는 이용하는 사용자는 인증을 통해 토큰을 발급받아야 한다. 

  사용자 토큰은 각기 다른 사용자를 표현하는 금융상 주민번호(?)라고 생각하면 될 것 같다.

  API 활용을 위해 요청 메시지 명세를 잘 확인해봐야 한다. 

  어떤 방법으로 request 해주는지, request 시 함께 넘겨줘야 할 데이터가 무엇이 있는지.

  필수 항목은 당연히 필수로 데이터를 넣어주어야 한다.

- 코드를 작성하기 전 postman으로 request에 따른 response가 잘 오는지 확인하는게 편하다.


먼저, 사용자 토큰을 발급받기 위해 authorization_code를 취득해야 한다.


code

- authorization_code 를 취득하기 위해서 아래 url에 request를 날려줘야 한다.



먼저 postman으로 request 날려보고 데이터가 잘 response 되는지 확인해보자.

본인인증을 위한 response 가 제대로 동작하는 것 같다.



예를 들어 아래와 같이 로그인 화면에서

이름, 이메일, 비밀번호를 입력한 후 인증받기 버튼을 누르게 되면



>> signup.ejs

사용자 인증 API url 로 이동하여 인증을 받게 한다.

요청 메시지 명세를 보고 작성해보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <script>
        // 인증 버튼이 눌리면 인증 페이지로 이동
        $("#authBtn").click(function(){
            var tmpWindow = window.open('about:blank')
            tmpWindow.location = "https://testapi.openbanking.or.kr/oauth/2.0/authorize?" +
            "response_type=code&"+
            "client_id=3F5aCaN6vk5O7brbM9pT...&"+ //
            "redirect_uri=http://localhost:3000/authResult&"+
            "scope=login inquiry transfer&"+
            "state=12345678901234567890123456789012&"+
            "auth_type=0"
        })
        
        // ...
 
    </script>
cs

line 7) Client id는 앱 등록 후 발급받은 API Key를 의미한다.

line 8) redirect_uri은 앱 생성 시 등록한 Callback URL을 의미한다.


휴대전화 인증과 공인인증서 인증에서 선택할 수 있다.

귀찮으니까 휴대전화 인증으로 해보자.ㅋ_ㅋ



휴대전화 인증 후 자신의 계좌 정보 입력



다음으로 ARS 인증이 진행되는데, testbed라 그냥 pass해준다.

명세서에 작성된대로 authorization_code 를 Callback URL로 redirect해준다.

반환된 authorization_code 를 사용해서 사용자 토큰을 받아야 한다.



먼저 postman으로 request 날려보고 데이터가 잘 response 되는지 확인해보는 것이 코드 작성에 편리하다.

데이터가 제대로 response 되었으므로 그대로 코드에 옮기면 된다.

여기서 실습을 위해 발급받은 access_token, refresh_token, user_seq_no 은 기록해주는 것이 좋을 것이다.



>> Server.js

이제 본격적으로 Callback URL로 받은 사용자 인증 코드를 이용하여 사용자 토큰을 발급 받는다.

Callback URL에서 해당 동작을 수행할 수 있도록 작성한다.

전달 방식(POST), URL, Content-Type, 요청 메시지 명세를 명세서를 따라 작성하면 된다.

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
app.get('/authResult', function(req, res){
    console.log('authResult');
    console.log(req.query);
    var authCode = req.query.code;
    console.log(authCode);
    var option = {
        method : "POST",
        url : "https://testapi.openbanking.or.kr/oauth/2.0/token",
        header : {
            'Content-Type' : 'application/x-www-form-urlencoded'
        },
        form : {
            code : authCode,
            client_id : '3F5aCaN6vk5O7b...', 
            client_secret : 'm6Q1WCoY8FvQofqrp...a',
            redirect_uri : 'http://localhost:3000/authResult',
            grant_type : 'authorization_code'
        }
    }
    // resultChild 호출해서 얻은 토큰 정보를 사이트에 입력
    request(option, function (error, response, body) {
        console.log(body);
        var requestResultJSON = JSON.parse(body);
        res.render('resultChild',{data : requestResultJSON})
    });
})
cs


line 13) Callback URL로 받은 사용자 인증 코드

line 14) Client id는 앱 등록 후 발급받은 API Key를 의미한다.

line 15) Client secret 은 앱 등록 후 발급받은 API Key Secret을 의미한다.

line 16) redirect_uri은 앱 생성 시 등록한 Callback URL을 의미한다.

line 17) grant type은 고정값을 입력하라고 명세서에 명시되어 있다.

line 21) 인증을 통해 얻은 토큰 정보를 signup 회원가입 페이지에 입력해준다.


>> resultChild.ejs

발급받은 사용자 토큰을 사이트에 입력시켜준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<body>
<div id="accessToken"><%=data.access_token%></div>
<div id="refreshToken"><%=data.refresh_token%></div>
<div id="usenum"><%=data.user_seq_no%></div>
</body>
<script>
   opener.document.getElementById("userAccessToken").value =
       document.getElementById("accessToken").textContent;
   opener.document.getElementById("userRefreshToken").value =
       document.getElementById("refreshToken").textContent;
   opener.document.getElementById("userSeqNo").value =
       document.getElementById("usenum").textContent;
</script>
</html>
 
cs



여기서 중요한 정보는 access_token, refresh_token, user_seq_no 이다.



>> signup.ejs

사용자가 가입하기 버튼을 눌렀을 경우,

페이지에 입력된 사용자 데이터를 서버로 전송하여 DB에 저장할 수도 있다.

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
<script>
    // signupButton이 눌리면 페이지 데이터를 변수에 저장
    $("#signupBtn").click(function(){
        var userName = $("#userName").val();
        var userEmail = $("#userEmail").val();
        var userPassword = $("#userPassword").val();
        var userAccessToken = $("#userAccessToken").val();
        var userRefreshToken = $("#userRefreshToken").val();
        var userSeqNo = $("#userSeqNo").val();
        
        // 서버로 데이터 넘겨주는 부분
        $.ajax({
            url:'/signup',
            type : 'POST',
            data : {
                userName : userName,
                userEmail : userEmail,
                userPassword : userPassword,
                userAccessToken : userAccessToken,
                userRefreshToken : userRefreshToken,
                userSeqNo : userSeqNo
            },
        success:function(data){
            alert(data);
        }
        })
    })
</script>
cs


>> Server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
app.post('/signup', function(req, res){
    var userName = req.body.userName;
    var userEmail = req.body.userEmail;
    var userPassword = req.body.userPassword;
    var userAccessToken = req.body.userAccessToken;
    var userRefreshToken = req.body.userRefreshToken;
    var userSeqNo = req.body.userSeqNo;
    console.log(userAccessToken, userRefreshToken, userSeqNo)
 
    var sql = "INSERT INTO fintech.user (name, email, password, accesstoken, refreshtoken, userseqno)" +
    "VALUES (?, ?, ?, ?, ?, ?)"
    connection.query(sql,[userName, userEmail, userPassword, userAccessToken, userRefreshToken, userSeqNo], function (error, results, fields) {
        if (error) throw error;
        res.json('가입완료');
    });
})
cs




[API] 금융결제원 API 활용하기 #1.앱 등록 및 Key 발급, 사용자 토큰 발급


[API] 금융결제원 API 활용하기 #2. 로그인(jsonwebtoken)


[API] 금융결제원 API 활용하기 #3. 사용자 정보 조회 API


[API] 금융결제원 API 활용하기 #4. 잔액조회 API


[API] 금융결제원 API 활용하기 #5. 거래내역조회 API


[API] 금융결제원 API 활용하기 #6. 계좌 QR코드 생성


반응형
저작자표시

'Web > API' 카테고리의 다른 글

[API] 금융결제원 API 활용하기 #6. 계좌 QR코드 생성  (3) 2020.06.23
[API] 금융결제원 API 활용하기 #5. 거래내역조회 API  (13) 2020.06.23
[API] 금융결제원 API 활용하기 #4. 잔액조회 API  (7) 2020.06.23
[API] 금융결제원 API 활용하기 #3. 사용자 정보 조회 API  (5) 2020.06.23
[API] 금융결제원 API 활용하기 #2. 로그인(jsonwebtoken)  (3) 2020.06.22
댓글
최근에 올라온 글
최근에 달린 댓글
링크
Total
Today
Yesterday
TAG more