![쿠키 세팅방법
cookies[:key값] = 해당 값](https://image.slidesharecdn.com/5-171106072453/85/API-4-api-34-320.jpg)
![세션 세팅방법
session[:key값] = 해당 값](https://image.slidesharecdn.com/5-171106072453/85/API-4-api-50-320.jpg)
루비온레일즈 API 서버 - 4) api 서버 인증 구현 (쿠키/세션/토큰)
- 1. 멋쟁이사자처럼 2학기 API 서버를 통한 로그인 구현 (쿠키/세션/토큰) 서강대 멋사 박정현
- 3. 로그인 기능 구현 기억나세요?
- 4. 프론트엔드 백엔드
- 5. 알아서 해주니까 어떻게 되는건지 모름..
- 6. 레일즈가 아니면 로그인 기능을 만들 수 없다
- 7. 로그인의 원리에 대해 배워서 일반적인(보편적인) 방식으로 구현해보자!
- 8. 인터넷의 간단한 원리
- 15. 인터넷의 간단한 원리www.google.com 1 2 3 3 이번에 통신을 하는 애가 방금 전에 통신을 했던 애인지 몰라!
- 16. 이전 통신과 이후 통신이 연결된 상태가 아니다 즉, 원칙적으로는 ‘로그인’이라는게 불가능하다
- 18. 구글 로그인 페이지 Gmail.com 아이디 패스워드 입력 로그인 확인 페이지
- 19. 구글 로그인 페이지 Gmail.com 아이디 패스워드 입력 로그인 확인 페이지 Gmail.com 구글 로그인 페이지
- 21. Stateful FTP 통신 한 번만 연결하면 계속 파일을 주고 받을 수 있음
- 22. Stateless 이지만 통신을 구별할 수 있는 법..?
- 23. 쿠키 / 세션 / 토큰
- 24. 첫 번째 방법 쿠키
- 25. 유저의 웹 브라우저에 정보를 저장해 서버에 요청을 보낼 때 헤더에 정보를 담아서 보내는 방식 쿠키
- 26. Header Body HTTP 통신 구조 2단 도시락
- 27. Header Body HTTP 통신 구조 2단 도시락
- 29. 구글 로그인 페이지 Gmail.com 아이디 패스워드 입력 로그인 확인 페이지 아이디 패스워드 정보가 담긴 쿠키를 브라우저에 저장
- 30. 구글 로그인 페이지 Gmail.com 아이디 패스워드 입력 로그인 확인 페이지 Gmail.com 아이디 패스워드 정보가 담긴 쿠키를 HTTP 헤더에 담아서 전송
- 31. 구글 로그인 페이지 Gmail.com 아이디 패스워드 입력 로그인 확인 페이지 Gmail.com 내 메일함
- 32. 실습 https://github.com/Rocket-Hyun/__RailsAPI__RailsLogin 레포지토리 클론 후 Cookies 컨트롤러 수정해서 로그인 기능 완성 시켜 보기 회원가입URL: /signup 로그인URL: /signin bundle install 과 rake db migrate 필수!
- 34. 쿠키 세팅방법 cookies[:key값] = 해당 값
- 35. 결과 시나리오 /signup 에서 회원 가입 후 /signin에서 로그인 하면 /mypage_cookie 으로 이동하고 /mypage_cookie2 까지 들어간 후 로그 아웃까지 할 수 있는 웹사이트
- 37. 쿠키 브라우저에 그대로 노출되어 저장되므로 털리기 쉽다 중요한 정보는 절대 넣으면 안된다!!! 쇼핑몰 둘러봤던 물품 등 정보만 저장
- 39. 두 번째 방법 세션쿠키의 응용!
- 40. 기본적으로 쿠키를 통해 통신을 구분하지만, 중요한 정보는 서버에 저장하는 방식 세션
- 42. 구글 로그인 페이지 Gmail.com 아이디 패스워드 입력 서버 프로그램 ‘메모리’에 세션 변수로 유저 정보 저장
- 43. 구글 로그인 페이지 Gmail.com 아이디 패스워드 입력 로그인 확인 페이지 고유한 세션ID가 담긴 쿠키를 브라우저에 저장 서버 프로그램 ‘메모리’에 세션 변수로 유저 정보 저장
- 44. 구글 로그인 페이지 Gmail.com 아이디 패스워드 입력 로그인 확인 페이지 Gmail.com 고유한 세션ID가 담긴 쿠키가 자동으로 HTTP 헤더에 담겨서 전송
- 45. 구글 로그인 페이지 Gmail.com 아이디 패스워드 입력 로그인 확인 페이지 Gmail.com 고유한 세션ID를 통해서 세션을 찾아 유저 식별
- 46. 구글 로그인 페이지 Gmail.com 아이디 패스워드 입력 로그인 확인 페이지 Gmail.com 내 메일함 고유한 세션ID를 통해서 세션을 찾아 유저 식별
- 47. 실습 Sessions 컨트롤러 수정해서 로그인 기능 완성 시켜 보기 주의! signin.html 부분 코드 수정해야함!
- 48. 주의! signin.html
- 49. 할일 1
- 50. 세션 세팅방법 session[:key값] = 해당 값
- 51. 할일 2
- 52. 결과 시나리오 /signup 에서 회원 가입 후 /signin에서 로그인 하면 /mypage_session 으로 이동하고 /mypage_session2 까지 들어간 후 로그 아웃까지 할 수 있는 웹사이트
- 54. *HTTP only 쿠키 (세션용 쿠키) 클라이언트에서 임의로 ‘조작 불가’ 즉, 탈취당할 확률도 적고 안전함 브라우저를 종료하거나 서버 측에서 삭제를 해야함
- 56. 세션은 좋은 방법! 하지만…
- 57. 1. 모바일의 등장
- 58. 모바일 앱은 일반적인 웹 작동 방식과 다르다 세션이 적합하지 않다.
- 59. 인터넷의 간단한 원리 www.google.com 브라우저에서 띄울 HTML 파일을 줘! .html 모든 동작마다 통신을 해야함 즉, 세션이 적합하다 일반 서버
- 60. 모바일 앱의 간단한 원리 모바일 클라이언트 API 서버 화면은 앱 자체에 다 있으니까 필요한 정보만 줘! 여기 너가 요청한 정보! (주로 JSON) 정보가 필요할 때만 통신 통신에 상태를 유지하는 세션은 부적합
- 61. 2. 대규모 서비스들의 등장
- 62. 로드 밸런싱
- 63. 서버 프로그램이 처리하는 세션은 로드 밸런싱에 부적합!
- 64. 세 번째 방법 토큰
- 65. 모바일 클라이언트 API 서버 Login 화면 *모바일 어플리케이션 작동 방법 유저 정보 획득을 위해 아이디 패스워드 정보 전송
- 66. 유저 정보 획득을 위해 아이디 패스워드 정보 전송 모바일 클라이언트 API 서버 Login 화면 *모바일 어플리케이션 작동 방법 아이디 패스워드 검증 후 암호화된 토큰 생성 *만료기간 설정
- 67. 모바일 클라이언트 API 서버 Login 화면 *모바일 어플리케이션 작동 방법 아이디 패스워드 검증 후 암호화된 토큰 생성 유저 정보와 토큰을 반환 유저 정보 획득을 위해 아이디 패스워드 정보 전송 *만료기간 설정
- 68. 모바일 클라이언트 API 서버 Login 화면 *모바일 어플리케이션 작동 방법 아이디 패스워드 검증 후 암호화된 토큰 생성 유저 정보와 토큰을 반환 토큰을 로컬 저장소에 저장 유저 정보 획득을 위해 아이디 패스워드 정보 전송 *만료기간 설정
- 69. 모바일 클라이언트 API 서버 Login 화면 *모바일 어플리케이션 작동 방법 유저 정보와 토큰을 반환 *헤더에 토큰을 함께 전송 유저의 중요 정보 요청 유저 정보 획득을 위해 아이디 패스워드 정보 전송
- 70. 모바일 클라이언트 Login 화면 *모바일 어플리케이션 작동 방법 유저 정보와 토큰을 반환 유저 정보 획득을 위해 아이디 패스워드 정보 전송 토큰 유효성 검증 후 유저 중요 정보 반환 *헤더에 토큰을 함께 전송 유저의 중요 정보 요청
- 71. 모바일 클라이언트 Login 화면 *모바일 어플리케이션 작동 방법 유저 정보와 토큰을 반환 유저 정보 획득을 위해 아이디 패스워드 정보 전송 토큰 유효성 검증 후 유저 중요 정보 반환 *헤더에 토큰을 함께 전송 유저의 중요 정보 요청 유저 중요 정보 반환
- 72. 대표적인 토큰 인증 방식 JWT(Json Web Token)
- 73. 소셜 로그인의 구현 원리!