토큰

배경 웹뷰를 사용하여 앱을 구성하고 있다. 웹뷰는 마치 HTML의 iframe 태그처럼, 내부적으로 하나의 화면을 띄우는 형태이다. 그런데 우리 서비스의 로그인 로직은 앱에 있어서, 웹에서 따로 로그인/로그아웃을 구현하지 않고, 앱 내부의 JWT토큰을 웹으로 전달할 수 있어야 했다. 또한 웹내에서 JWT토큰이 만료되는 경우 로그인 페이지로 이동시켜줄 필요가 있었다. 우선 Web과 App환경의 통신 방법에 대해 알아보고, 이후에 토큰을 내부적으로 관리해볼 것이다. 기본 구성하기 기본적으로 react-native-webview 라이브러리를 사용해서 WebView 화면을 띄워주었다. https://www.npmjs.com/package/react-native-webview react-native-webview..

jsonwebtoken이라는 라이브러리를 통해 node에서 jwt를 구현할 수 있다. npm i jsonwebtoken jwtMaker const jwt = require('jsonwebtoken'); const jwtMaker = (id) => { const payload = { id: id }; const secret = process.env.SECRET; const options = { expiresIn: '15m', }; const token = jwt.sign(payload, secret, options); return token; }; module.exports = jwtMaker; expiresIn을 통해 토큰의 만료시간을 설정해주었고, payload로 user_id를 기입해주었다. user..

왜 이런짓을 하는거지? 유저가 로그인을 하면, 인증이 된다. 근데 그 뒤에는? 클라이언트가 페이지를 이동하면? 어떻게 그 인증정보를 유지할 수 있을까? HTTP요청은 Stateless이다. 즉, 이전 통신 내용을 기억하지 못한다. 그래서 100번 통신을 하면 100번 모두 0422임을 증명해줘야 한다. 그럼 100번 통신하면 100번 다 로그인할꺼냐? 그건 좀 아닌 것 같다. 이를 위한 방법으로는 세가지가 있는데 쿠키만사용, 세션/쿠키, JWT가 있다. 쿠키 사용자가 로그인을 하면 서버에서는 사용자 정보를 담은 쿠키를 생성해서 응답값으로 던져준다. 클라이언트는 이를 받아서 브라우저 쿠키형태로 저장을 해두고, 요청시마다 header에 담아서 서버로 날려준다. 근데인증을 위해서는 계정정보를 쿠키에 담고 있어..

소셜로그인을 통해 토큰을 관리해야되는데, 어지러운 경우가 많다. access_token을 보냈는데 만료된 경우라면? => refresh_token을 통해 access_token을 갱신해야한다. 이를 위해 axios에서는 인스턴스 커스텀 방법을 제시한다. https://yamoo9.github.io/axios/guide/api.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%83%9D%EC%84%B1 API | Axios 러닝 가이드 API 구성(configuration) 설정을axios()에 전달하여 요청할 수 있습니다. axios(config) axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred',..