CheolCheol Dev Note

프론트엔드 로그인에 이어 백엔드에서의 인증을 구현해보겠다. 사용 툴 및 언어 : 이동 개념 : 이동 앱 생성 : 이동 프론트에서 받은 accessToken과 userID를 가지고 백엔드에서 정상적인 데이터인지 다시한번 확인할 것이다. https://developers.facebook.com/docs/apis-and-sdks url로 가보면 자세히 써있다. 그 중에서 타사 SDK를 가보면 Java에서 지공하는 sdk들이 있다. 그 중에서 RestFB를 사용할 것인데 간단 구현이 가능하기 때문에 채택했다. https://restfb.com 역시나 Document를 가서 하라는대로 하면 구현이 쉽다. 개발자라면 무조건 google 보다는 Document를 통해 개발을 하려는 습관을 가지는 것도 나쁘지 않은것 ..

페이스북 로그인 프론트 엔드 구현 사용 툴 및 언어 : 이동 개념 : 이동 앱 생성 : 이동 1. Angular 에서 사용할 때 facebook 메뉴얼대로 js를 추가해도 되지만 더 쉬운 방법인 모듈을 설치하는 방법도 있다. ngx-facebook (위의 사이트 가면 예제부터 소스코드 & 문서까지 다 있다.) npm으로 모듈 설치 npm i --save ngx-facebook --save 명령어는 pakage.json에 모듈 업데이트해 현재 프로젝트에 적용함 2. index.html 에다 JS SDK추가 3. 사용할 컴포넌트에 Service 및 facebok 호출 constructor(private facebookService: FacebookService) { facebookService.init({ ..

페이스북 로그인을 구현하기에 앞서 일단 페이스북 앱을 만들어야 한다. 1. 페이스북 개발자 센터에서 새앱 추가 2. 테스트앱 만들기 (테스트앱을 만들면 로컬에서도 페이스북 로그인이 가능하다) 3. 만들어진 화면 -제품추가의 Facebook로그인 설정 4. 좌측에 메뉴가 생김설정과 빠른 시작이 있는데빠른시작은 메뉴얼이 있어 보고 그대로 따라하면 되지만나는 설정으로 직접 설정 5. 원래는 localhost를 기입하면 오류가 나지만 테스트 앱은 가능하다. 6. 기본 세팅 완료 메뉴설명 1. 기본설정 - 앱 id & 시크릿 코드 및 기본설정을 세팅 앱 시크릿 코드는 절대적으로 노출시키면 안된다. 말그대로 시크릿코드임 앱 id & 시크릿 코드를 이용하여 페이스북 그래프api를 이용할 수가 있다. 2. 고급설정 -..

페이스북 로그인을 구현하면서 가장 많이 보이는 것이 바로 Token 이다.페이스북은 OAuth를 이용한 로그인방식이 진행된다.그리고 발급받은 토큰을 가지고 Gragh API라는 것을 사용할 수가 있는데 Gragh API를 통해 페이스북 플랫폼에서 데이터를 가져오고 보낼 수가 있다. 액세스 토큰 유형 설명 사용자 액세스 토큰 사용자 토큰은 가장 일반적으로 사용되는 토큰 유형입니다. 앱에서 특정 사용자 대신 Facebook의 데이터를 읽고 수정하고 쓰기 위해 API를 호출할 때마다 이 유형의 액세스 토큰이 필요합니다. 사용자 액세스 토큰은 일반적으로 로그인 대화 상자를 통해 얻으며, 사용자가 앱에서 토큰을 확보할 수 있도록 허용해야 합니다. 앱 액세스 토큰 이 유형의 액세스 토큰은 앱 설정을 수정하고 읽는 ..

페스이북 로그인을 구현하기에 앞서 페이스북 개발자 센터에서 어떠한 방식으로 로직이 처리되는지 알아야 할 필요가 있다. 기본 로직 1. 클라이언트에서 sdk를 이용한 로그인 버튼을 구현해 facebook측에 요청2. 페이스북측에서 요청 확인3. Access token 을 response 서버단을 직접 구현하는 경우 1. 클라이언트에서 sdk를 이용한 로그인 버튼을 구현해 facebook측에 요청2. 페이스북측에서 요청 확인3. Access token 을 response 4. 토큰 & 앱 id & 앱 secret code 를 이용해 장기토큰으로 변경5. 장기토큰을 가지고 Graph API를 이용 이게 정확하진 않지만 대락적인 로직이다. 그리고 내가 직접 구현하는 로직은 다음과 같다. 로그인 구현하는데 사용 ..