OAuth방식으로 페이스북으로 로그인기능 구현

2021. 10. 27. 14:33

OAuth 원리

나의 서비스가 사용자를 대신하여 그들의 서비스에 접속하여 행동
보안 문제 - 인증필요
ID,PW 방식
- 심플하지만 매우 위험
임시 비밀번호 발급
- 복잡한 비밀번호 생성 가능
- 일부 권한만 허용한 비밀번호 생성 가능
- 기간제로 사용 가능, 기간 완료 시 자동 삭제
OAuth
- Access Token
- 나의 서비스를 그들의 서비스에 등록하는 절차 필 Register

Register를 위한 Client / Resource Server의 정보 교환 목록
- client id ( 중복 X )
- client secret ( 노출 X )
- redirect url ( access token 을 배달할 배송지 )
- auth code
- access token

OAuth방식으로 페이스북으로 로그인기능 구현 (SDK X)

페이스북 개발자 페이지로 이동

https://developers.facebook.com/

Facebook for Developers

Show Slide 1Show Slide 2Show Slide 3Show Slide 4Show Slide 5Show Slide 6 파트너 준비 사항: Facebook 광고에 영향을 미치는 Apple iOS 요구 사항에 대해 자세히 알아보세요. FACEBOOK으로 빌드하기 Facebook의 추천 플랫폼

developers.facebook.com

상단 탭 중 내 앱 클릭

새 앱 추가

Redirect url 지정

Node.js 설치 및 소스코드 조회

npm을 이용하여 local-web-server 설치

local-web-server
- https://www.npmjs.com/package/local-web-server
- 경량화된 웹서버
- 손쉽게 https 개발환경 구축 가능
- ws / 현재 디렉토리를 Document Root로 하는 로컬 웹서버 실행 명령어

fb-low.html 파일 생성

페이스북 로그인 도큐먼트 조회
- https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow?locale=ko_KR

로그인 플로 직접 빌드 - Facebook 로그인 - 문서 - Facebook for Developers

사용자 로그인 유도 사용자가 앱에 로그인하지 않았거나 Facebook에 로그인하지 않은 경우 로그인 대화 상자를 사용하여 앱과 Facebook에 모두 로그인하도록 메시지를 표시할 수 있습니다. Facebook에

developers.facebook.com

프로젝트 실행 및 OAuth 확인

Resource Owner의 웹페이지로 리다이렉트된 token 확인

state
- 기본적으로 client가 요청한 state 값과, resource owner가 넘겨준 state 값은 같다.
- 두 값이 다르면 보안 이슈 의심
expires_in
- access token의 수명

https://localhost:8000/fb-low.html?
#access_token=EAAIAP9sZCr1kBAF8R2V
&data_access_expiration_time=1643078363
&expires_in=4837
&long_lived_token=EAAIAP9sZCr1kBAB
&state=1234

Access Token 을 이용하여 페이스북 API에 접속하여 현재 사용자의 이름 조회하기

페이스북 User api Document
- https://developers.facebook.com/docs/graph-api/reference/user/?locale=ko_KR

<!doctype html>
<html>
    <body>
    <div id="welcome"></div>
        <a href="https://www.facebook.com/v12.0/dialog/oauth?client_id=######&redirect_uri=https%3A%2F%2Flocalhost%3A8000%2Ffb-low.html&state=1234&response_type=token">
            Login With Facebook
        </a>

        <script>
            var atr = location.href.match('access_token=([^&]*)');
            console.log('access token regular expression : ', atr);
            if (atr) {
                // access token 값을 획득했다.
                var access_token = atr[1];
                console.log('access token : ', access_token);
                fetch(
                    "https://graph.facebook.com/v12.0/me/?access_token="+access_token
                )
                    .then(function (raw) {
                        return raw.json();
                    })
                    .then(function (result) {
                        if (result.error) {

                        } else {
                            document.querySelector('#welcome').innerHTML = "Welcome, " + result.name;
                        }

                    })
            }
        </script>
    </body>
</html>