facebook oauth 로그인 연동

안녕하세요 !

어느덧 벌써 3월이 지나가고 있네요 ㅜㅜ 

오랜만에 페이스북 연동하는 기능을 구현하게 되었어요.

예전에 할 때는 javascript로 로그인 구현을 했었는데 이번에는 oauth를 이용하여 로그인 기능을 구현해봤습니다.

facebook developer 사이트를 가보니 많이 변했네요.

페이스북에서도 명시가 되어 있듯이 javascript를 활용한 개발이 가장 쉽고 빠르다고 명시 되어있네요.

개발 환경, 어플리케이션 환경, 사용자 환경에 따라서 잘 맞는 기능을 골라서 사용하세요

1. oauth란 대체 뭘까요

인터넷 대기업 회사 구글, 아마존 등 자체 인증을 하는 방식이였답니다. 그러다 인증도 표준이라는 개념이 도입이 되었고

인증 표준 방식인 oauth가 생겨 났습니다. 토큰을 이용하여 접근과 요청을 할 수 있고 oauth 제공자는 요청을확인하여 필요한 데이터를 제공해줍니다.

javascript를 사용한다고 해서 oauth를 사용하지 않는다는 것이 아닙니다. javascript도 oauth 인증 방식으로 oauth 제공자와 application 제공자의 서비스를

이용 하게 되는데요. 이건 사용하는 SDK에 따라 분류가 되는것이지 모든 인증방식은 oauth 방식으로 인증을 하게 되는겁니다.

2. 가장먼저 할 일은 당연 auth 제공자의 developer 계정이 필요 합니다.

 https://developers.facebook.com/ 를 접속하여 developer 계정을 생성합시다. 그 이후에는 새로운 App 추가해요.

3. 로그인을 할때는 당연 로그인 버튼이 있을꺼에요.

로그인 버튼에 링크가 걸려 있을수도 있고 javascript로 이벤트를 잡을 수도 있는데, javascript로 잡고 있다면 javascript sdk를 사용하는 것이고

링크가 걸려 있으면 서버사이드에서 처리를 하는거죠. 

https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow

저는 위의 문서를 보고 개발 하였습니다.

3. 다이얼로그를 띄워준다.

로그인을 하는데 application 제공자의 app에서 아이디와 비밀번호를 입력 하진 않겠죠. 당연히..

그럼 페이스북 로그인 링크를 걸어야 합니다.

app-id : app의 고유 번호

redirect-uri : 인증 한 후 리다이렉트 되는 uri, 당연히 인코딩 해서 보내야겟죠

옵션 파라미터도 있으니 들어가서 확인해보셔요.

4. https://www.facebook.com/dialog/oauth?client_id=956460501133894&redirect_uri=[]&scope=email%2Cpublish_actions%2Cuser_birthday%2Cuser_friends

 제가 만든 url은 이렇게 만들어 졌어요.

들어가면 해당 페이스북 로그인 화면이 뜨고 로그인 하면 동의를 구하는 화면이 나와요. 모든 동의가 되면 redirect url 로 리다이렉트 시킵니다.

5. redirect 될때 http://kutors.com/oauth/facebook?code=[]

파라미터로 code를 줍니다. 

code는 access_token 에서 접근 token을 받기 위해 사용 되는 토큰입니다. access_token은 response data 로

이렇게 줍니다. 이 토큰은 이후에 프로그램 흐름에 따라서 계속 사용될 수 있으니 session 이나 db 또는 파일에 저장 하세요.

이 토큰으로 사용자의 데이터를 받을 수 있어요.

로그인 처리하려는데 사용자의 데이터가 있어갸 하겠죠.

https//graph.facebook.com/me?access_token=[] 으로 데이터를 받을수있답니다.

그럼 필요한 인증과 데이터를 모두 하였으니 이제 로그인 처리만 하시면 끝!

그런데 app 상태를 개발상태가 아닌 서비스 상태로 변경해야 하는데 

예전에는 바로 되었던거 같은데... 이젠 승인이 떨어져야 하나보네요 ㅠㅜ

기다릴 수 밖에 없군요..

그럼 다들 즐거운 코딩 되세요 ~ :)