개발자의 개발 블로그

1. passport-facebook를 설치한다.

$ npm i passport-facebook

2. 페이스북 개발자 페이지에 들어간다.

Facebook Developers

3. 로그인 한 뒤, 상단 메뉴   내 앱 >> 앱 만들기 버튼을 선택 >> 소비자 선택

그 다음 원하는 앱 이름을 작성하고 앱 연락처 이메일을 작성한다.

비즈니스 관리자 계정은 선택사항이므로 반드시 할 필요는 없다.  패스 후 , 앱 만들기 누르면 앱이 생성된다.

4. 앱이 생성되면 대시보드 창이 나오는데, 왼쪽 메뉴에서 설정 >> 기본설정을 보면 

앱 ID가 적혀있고,  앱 시크릿 코드가 *****로 적혀있는데. 

passport-facebook를 사용하기 위해서는 이 두 개가 필수!! 반드시 필요하므로 여기 이게 필요하다는 걸 기억하자!!

참고로, 앱 시크릿 코드가 더욱 중요하므로 ****를 보이게 하기 위해서는 현 Facebook 비밀번호를 한 번 더 요구한다.

또한, 웹페이지로 사용할 것이므로, 맨 밑으로 스크롤을 하게 되면 + 플랫폼 추가  가 존재한다. 이것을 클릭. 

아래와 같이 나온다. 신기하다.. 플스까지? 

하지만... 웹사이트를 선택한 뒤, 원하는 URL을 입력해주면 

이렇게  되면 이 URL에서 페이스북 로그인 요청 시에  NO하지 않고, OK를 하겠다고 설정을 한 것이다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ페이스북 개발자 페이지 설정 완료 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

이제 원하는 에디터에서 passport-facebook를 구현하면된다. 

https://www.npmjs.com/package/passport-facebook

위 진행 방법을 번역한 것을 정리하면,

1.

passport-facebook을 사용하기 전에 facebook에 애플리케이션을 등록해야합니다. 아직 그렇게하지 않았다면 Facebook 개발자에서 새 애플리케이션을 만들 수 있습니다. 애플리케이션은 전략에 제공해야하는 앱 ID 및 앱 시크릿을 발급받습니다.

또한 애플리케이션의 경로와 일치하는 리디렉션 URI를 구성해야합니다.

이것이 위에서 진행한 것이다...

2. 

Facebook 인증 전략은 Facebook 계정과 OAuth 2.0 토큰을 사용하여 사용자를 인증합니다. 애플리케이션 생성시 획득 한 앱 ID 및 시크릿은 전략 생성시 옵션으로 제공됩니다. 이 전략에는 인증 된 사용자의 Facebook 프로필이 포함 된 프로필뿐만 아니라 액세스 토큰 및 선택적 새로 고침 토큰을 수신하는 확인 콜백도 필요합니다. 확인 콜백은 인증을 완료하기 위해 사용자를 제공하는 cb를 호출해야합니다.

시퀄라이즈를 사용하다보니 모델에서 수정을 해도 변경이 되지 않는 것을 확인할 수 있었다.

서버를 껐다가 켜봐도 ...

난 분명히 allowNull을 false에서 true로 변경했는데, 위와 같이 null이 불가능하다는 에러를 계속 내보내고 있었다.

당황스럽다. 아무리 고치고 껐다가 켜봐도 안되서...

SQL문을 사용해보기로 했다.

alter table users modify column confirm_password varchar(255);  // null 허용

alter table users modify column confirm_password varchar(255) not null;  // null 비허용

이렇게 하면, users 테이블에서 confirm_password 컬럼을 수정하겠다는 의미이다.

not null을 명시해서 쓰면 null을 허용하지 않겠다는 의미이며, 생략하게 되면 기본적으로 null을 허용한다는 의미가 된다.

이렇게 입력한 뒤, 다시해보니까 해결되었다. 이런 에러가 가장 싫다. 

에러가 아니라 버그?

버그 하나 발견한 하루였다.

1. 카카오 개발자 페이지에 접속후, 로그인한다.

https://developers.kakao.com/

2. 새 앱을 하나 생성한다.(기존 앱으로 해도 되고...)

내 애플리케이션 메뉴 -> + 애플리케이션 추가하기 선택..

3. 플랫폼 -> Web 플랫폼 등록

localhost로 할꺼니까.. 포트와 함께 적어준다. 나같은 경우,  http://localhost:4000/로 접속할 것이다.

4. 저장하면, 카카오 로그인을 사용하기 위해서는 Redirect URI를 등록해야 한다고 나온다. 옆에 등록하러 가기를 눌러 이동한다.

5. 하단에 Redirect URI 등록 버튼을 눌러 등록한다. 그리고  원하는 URI를 적어준 뒤 저장한다.

http://localhost:4000/auth/kakao/callback 

이런식으로 ...

만약, 잘못 입력하거나 입력하지 않았을 경우 다음과 같은 에러가 발생한다.

아...카카오는 에러페이지도 귀엽네...

어쨋든... 해결방안을 눌러보면, 에러코드들이 줄줄이 명시되어있다.

그 중에서, 검색을 해보면... 자세한 에러에 대한 설명과 함께 해결 방안까지 한국어로 되어있으니 얼마나 편한가! 

6. 위에 활성화 설정 -> 상태를 OFF에서 ON으로 바꿔준다. 

7. 동의항목을 설정해줘야, 유저로부터 동의를 얻어 정보를 가져올 수 있다. 

4000번 포트를 사용하고 있기 때문에 발생하는 에러이다.

4000번 포트를 사용하고 있던 서버를 종료했음에도 불구하고, 살아있기 때문에 발생하는 것이다.

이럴 경우,

kill을 해서 포트를 꺼버리던지, 다른 포트 예를 들면 4444를 쓰던지 해야한다.

그럼 어떻게 포트 프로세스를 중단시킬까?

1. 4000포트를 사용중인 프로세스 찾기 

$ lsof -i :4000

하면, 다음과 같이 사용중인 녀석이 나온다. 이제 이 것을 죽여버리자!

COMMAND   PID        USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    13888         jsh   28u  IPv6 0x75b989f13d6c5017      0t0  TCP *:terabase (LISTEN)

2. 죽이기

kill -9 13888

즉, kill -9 PID을 하면, 해당 프로세스가 종료된다.  -9는 알바벳 쥐(g)가 아니라 숫자 구(9) !! 주의하자! 처음엔 나도 -g로 썼었다;;

그러면, 위 에러가 나던데에서 4000번 포트를 사용할 수 있게 된다.