2. 페이스북 로그인 OAuth 기능 구현

티스토리 뷰

OAuth

2. 페이스북 로그인 OAuth 기능 구현 - 1 (SDK not used)

알 수 없는 사용자 2019. 7. 22. 04:03

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-server 설치. https 환경을 손쉽게 사용 가능.

* 만약 접근권한 오류가 발생 시 $ sudo npm install -g local-web-server으로 설치

2. ws --https 웹서버 실행

$ sudo npm install -g local-web-server 
$ ws --https

3. fb-low.html 파일 생성 후 테스트. (https://localhost:8000/fb-low.html)

<!doctype html>
<html>
    <body>
        hi
    </body>
</html>

4. 페이스북 로그인 대화 상자 기능 추가 (페이스북 앱 페이지에서 각자 파라미터 값 추가)

* redirect_uri의 값은 url encode and decode 사이트를 통해 추가

* state의 값은 Resource Owner가 보낸 값과 Resource Server에서 다시 동일한 state값을 응답하면서 state값이 일치여부에 따라 상태 체크하기 위한 것.(보안에 관련된 것임)

* resource_type은 토큰 형식으로 응답을 받아오겠다는 명시

<!doctype html>
<html>
    <body>
        <a href="https://www.facebook.com/v3.3/dialog/oauth?
        client_id={app-id}
        &redirect_uri={redirect-uri}
        &state={state-param}
        &resource_type=token">Login with Facebook</a>
    </body>
</html>

3. 원리

이제 위와 같은 환경에서 Login with Facebook 버튼을 클릭하면 페이스북 로그인 창이 뜨는 것을 확인할 수 있다.

이제 다시 원리를 확인해보자.

지금과 같은 방식은 Resource Owner에서 직접 Resource Server로 요청한 것이다.

Client가 Facebook Developer의 앱 추가를 통해서 정보를 등록한 후, Resource Owner가 로그인 시도 시 client_id와 redirect_uri를 Resource Server로 전달한다.

Resource Server는 client_id가 존재하는지 확인하고, redirect_uri가 등록되어있는 uri와 같은지 확인하며 약간의 보안 기능을 가진다.

이후, Resource Server에서 access token을 생성하고, 해당 토큰의 주인(id)을 user id에 기록한다. 또한 이제 access token을 Resource Owner에게 전달한다.

넘어온 access token을 확인하기 위해서 uri를 확인해보면 access token이 넘어온 것을 확인해 볼 수 있다.

[ OO으로 계속 버튼을 누른 후 리다이렉션된 uri의 access token ]

이로써 Resource Server와 Resource Owner가 인증된 상태로 access token을 통해 여러 가지 기능을 사용할 수 있게 된다.

저작자표시 비영리 변경금지

'OAuth' 카테고리의 다른 글

5. 구글 로그인 OAuth 기능 구현 (SDK used) (0)	2019.07.24
4. 페이스북 로그인 OAuth 기능 구현 (SDK used) (0)	2019.07.23
3. 페이스북 로그인 OAuth 기능 구현 - 2 (SDK not used) (0)	2019.07.22
1. OAuth의 원리 (0)	2019.07.22
0. OAuth에 대한 학습 (0)	2019.07.22

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

끄적끄적

티스토리 뷰