끄적끄적

앞서 페이스북 로그인을 사용해보았으니 구글 로그인도 사용해보자. 1. Google Cloud Platform에서 project 생성 - 좌측 상단 new project 버튼 2. AOuth Client ID 발급 1) 좌측 메뉴 API & service -> Credentials 2) 하단의 web application 클릭 3) 원하는 name과 Authorized JavaScript origins, Authorized redirect URIs 입력 - Authorized JavaScript origins : 웹 애플리케이션의 도메인 - Authorized redirect URIs : redirect 될 uri 3. 로그인 페이지 생성 및 초기화 * Google Sign-In JavaScript cli..

앞서 말한 것처럼 SDK를 사용하지 않고 앞과 같은 예제로 기능을 구현한다면 보안상 문제점이 굉장히 많다. 이러한 보안을 모두 커버하기에는 개발자에게는 한계가 많다. 때문에 각 기업에서 제공하는 SDK 도구를 이용하여 해결해야 한다. 하지만 SDK 도구를 이용하더라도 현실의 복잡성을 대신해주긴 하지만 사용법도 복잡하고, 러닝 커브가 높다. 때문에 앞서 설명한 OAuth의 본질적인 원리를 이해해야 하는 것이 필수이다. 1. Facebook Login SDK 사용 SDK가 다운되고 자동으로 fbAsyncInit 함수가 호출되도록 설계되어 있다. 또한 SDK의 로드가 끝나고 사용하는 FB.init 메서드를 호출하여 app-ID를 초기화하도록 되어 있다. 눈치를 챘다면 FB에서 여러 가지 로그인에 관한 상태를 ..

1. Redirect 된 Uri 분석 이전에 로그인이 성공된 후 가져오는 uri를 분석하면 다음과 같다. https://localhost:8000/fb-low.html? #access_token=XXX &data_access_expiration_time=1571557491 &expires_in=4509 &reauthorize_required_in=7776000 &state=1234 * expires_in : access token의 수명시간 * state : Resource Owner가 요청할 때 넘겨준 값으로 넘겨준 값과 Resource Server의 응답 state 값의 일치 여부로 정상적인 작동인지 판단. 2. 페이스북 API 서버에서 사용자의 이름 불러오기 1) URI에서 access_token ..

1. 페이스북 로그인 앱 추가 1. facebook for developers 접속. 2. 앱 추가 및 facebook 로그인 제품 추가 3. 웹 플랫폼 추가 -> URL 추가 https://localhost:8000 (facebook은 개발환경에서도 https를 적용하도록 되어있음.) 4. 기본 설정 -> 앱 ID(client id), 앱 시크릿 코드(client secret) 확인 -> 앱 시크릿 코드는 실질적으로 노출되지 않는 백엔드 시스템이 있는 환경에서만 사용됨. 5. Facebook 로그인 버튼 -> 설정에서 redirect uri (https://localhost:8000/fb-low.html) 설정 2. Resource Owner 생성 1. $ npm install -g local-web-..

우리가 OAuth가 왜 필요한지를 일단 먼저 알아야 한다. OAuth는 3자가 등장한다. 예를 들어, 문자 메시지는 양자 간의 채팅이기 때문에 구현이 간단하다. 하지만 최근 많이 사용하는 카카오톡과 같은 단체 채팅은 복잡성이 기하급수적으로 늘어난다. 그렇기 때문에 OAuth가 복잡하고 꼼꼼히 공부해야 한다. 1. 상황 제시 클라이언트가 나의 서비스를 통해 글을 작성한다고 하자. 여기서 클라이언트는 User, 나의 서비스는 My라 칭하겠다. 이러한 상황에서 나의 서비스는 자동으로 Facebook이나 Google의 캘린더 같은 서비스(Their)에 자동으로 알림이 가도록 서비스해야 한다면, 과정에서 가장 중요한 부분은 보안이다. My는 User대신에 Their 서비스에 접근하여 제어할 수 있는 인증절차가 필..

몇일전 면접을 보러갔을 때 처음 생각지도 못한 부분에서 질문을 받았다. 소셜 로그인을 구현한 것을 본 면접관은 OAuth의 동작원리에 대해서 물었다. 그 질문을 듣고 난 후 깨달은 것은 내가 기능 구현에만 집중했지, 그 안에서 일어나는 동작원리에 대해서는 관심이 없었다는 것이다. 그래서 나는 OAuth의 동작원리에 대해 공부하기 위해 몇가지 자료를 찾아보았고, Tacademy에서 제공하는 OAuth강의를 바탕으로 공부해보겠다. 참고로, Tacademy에는 매우 뛰어난 현업 개발자들이 강의해주는 자료가 많기 때문에 한번씩 가보는 것을 추천한다. 참고 자료 : https://www.youtube.com/playlist?list=PL9mhQYIlKEhezQKMF92r9GKFXWfoKYII8 토크ON 38차. ..