SPA(Vue.js, Angular, React) 소셜로그인 흐름도

Single Page Application + Restful API + 소셜 로그인 (구글, 페이스북, 트위터, 인스타그램 등등) 을 모두 사용하는 웹서비스를 제작중인데,

찾아보다가 결과적으로 아래와 같은 인증 흐름을 적용하게 되었습니다.

사진이 안보이면 사진을 클릭해서 확인하시면 됩니다.

Vue.js 나 Angular.js, React 에 라이브러리가 없다면 Vuex, Redux와 같은 상태 저장소를 적절히 섞어서 직접 구현하면 됩니다.

 

중간중간에 REST API (백엔드)서버에서 access_token과 refresh_token을 데이터베이스에 저장하거나, 

jwt토큰을 어디다 저장하는지 등의 정보는 나중에 포스팅 하도록 하겠습니다.

질문있으면 댓글로 남겨주세요.