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

.Install JSON Web Token from npm

- 웹표준 (RFC 7519) 으로서 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인 (self-contained) 방식으로 

  정보를 안전성 있게 전달 (링크에서 자세한 설명을 볼 수 있었다)

- install jsonwebtoken  npm i jsonwebtoken 

- 여기서 jsonwebtoken을 decoding 할 수 있다. 

.Login 과정

1. 로그인

- 로그인 페이지에서 로그인을 하게 되면

login.ejs 를 호출하게 된다.

1 2 3 4 5 6 7

/* Server.js */   app.get('/login', function(req, res){     res.render('login'); }) Colored by Color Scripter

cs

login.ejs 에서는

사용자가 Email과 Passwd를 입력 후 로그인 버튼을 누르게 되면,

서버로 로그인 정보를 보내게 된다.

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

/* login.ejs */       // ...       <script>         $("#loginBtn").click(function(){             var userEmail = $("#userEmail").val();             var userPassword = $("#userPassword").val();             $.ajax({                 url:'/login',                 type : 'POST',                 data : {                     userEmail : userEmail,                     userPassword : userPassword,                 },                 success:function(data){                     if(data == '사용자가 없습니다.' || data == '패스워드가 다릅니다'){                         alert(data);                     }                     else {                         sessionStorage.setItem('ourToken', data);                         window.location.href = '/main'                     }                 }                })           })     // ...       </script> Colored by Color Scripter

cs

line 9~10) 로그인 정보를 변수에 저장

line 12~17) 로그인 정보를 저장한 데이터를 서버에 보내준다.

line 18~26) 서버에서 로그인 정보 확인 후 로그인 성공하면 /main page로 이동

2. 회원 데이터 조회 및 JWT 발급

서버에서는 입력된 로그인 정보가 DB에 있는지 확인을 해주어야 한다.

json web token 발급을 위해 모듈을 먼저 불러온다.

1

const jwt = require('jsonwebtoken')

cs

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 33 34 35 36 37 38 39 40 41 42 43 44

/* Server.js */   app.post('/login', function(req, res){     console.log(req.body);     var userEmail = req.body.userEmail;     var userPassword = req.body.userPassword;       var sql = "SELECT * FROM fintech.user WHERE email = ?";     connection.query(sql, [userEmail], function(error, result){         if (error) throw error;         if(result.length == 0){             res.json('사용자가 없습니다.')         }         else {             console.log(result[0].accesstoken);             var dbPassword = result[0].password;             console.log('database password : ', dbPassword);             if(dbPassword == userPassword){                 console.log('login 성공!');                 jwt.sign(                     {                          userId : result[0].id,                         userName : result[0].name                     },  //paylaod                     'fi&4nt%dnn2nw1ooec@hse#rvice!1234#',                      {                         expiresIn : '1d',                         issuer : 'fintech.admin',                         subject : 'user.login.info'                     },                     function(err, token) {                         console.log('우리가 발급한 토큰 : ',token);                         res.json(token);                     }                 );                                }             else if(dbPassword != userPassword) {                 res.json('패스워드가 다릅니다');             }         }     }) }) Colored by Color Scripter

cs

line 7~8) front 로 부터 받은 사용자 로그인 데이터를 변수에 저장

line 10~43) 해당 데이터가 DB에 있는지 확인

line 20~38) 로그인 성공 시 jwt를 발급

line 35) 발급받은 jwt를 세션스토리지에 저장

여기에서 발급받은 jwt를 decoding 해볼 수 있다.

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

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

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

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

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

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