[Javascript] 페이스북 아이디로 로그인 하기 코드 샘플 (소스코드)

자바스크립트 / Javascript 를 통해 페이스북 아이디로 로그인 하기 코드 샘플

 

  사용 방법

1. 페이스북 개발자 아이디 생성 및 앱 등록 

💡  자세한 방법은 하단의 링크 참조

https://goodmemory.tistory.com/99

[Javascript] 페이스북 아이디로 간편 로그인 기능 구현 Facebook Login

 

2. 자신의 프로젝트에 facebook.js 파일 생성 하고, 하단의 코드를 facebook.js 파일에 복붙 하기

let facebook = {
    //appId : 자신의 앱 아이디
    //		https://developers.facebook.com/ 
    //		내앱 > 앱 ID 를 appId 에 기재

    //version : 현재 페이스북 버전
    
    //buttonId : 페이스북 로그인 버튼 id # 빼고 입력
    
    //loginString : 페이스북 로그인 버튼 이름 설정 (로그인)

    //logoutString : 페이스북 로그아웃 버튼 이름 설정 (로그아웃)

    //data : 페이스북 로그인시 클라이언트 정보 GET data
    //       (처음 설정 필요없고, 로그인 이후 사용자 정보 활용 및 데이터베이스 저장시 해당 변수 활용)

    "appId" : "여기에 앱아이디 입력",
    "version" : "v10.0",
    "buttonId" : "로그인 버튼 CSS Selector",
    "loginString" : "페이스북으로 로그인 하기",
    "logoutString" : "로그아웃 하기",
    "data" : {}
}
facebook.buttonId = '#' + facebook.buttonId;

//페이스북 로그인 엘리먼트
const facebookLoginBtn = document.querySelector(facebook.buttonId);

facebookLoginBtn.addEventListener('click', e => {
    facebookLog();
});

//페이스북 로그인 기본
window.fbAsyncInit = function () {
    FB.init({
        appId: facebook.appId,
        autoLogAppEvents: true,
        xfbml: true,
        version: facebook.version
    });

    FB.getLoginStatus((res) => {
        if (res.status === 'connected') {
            facebookLoginBtn.value = facebook.logoutString;
        } else {
            facebookLoginBtn.value = facebook.loginString;
        }
    });
};

const facebookLog = () => {
    FB.getLoginStatus(res => {
        if (res.status === 'connected') {
            FB.logout(res => {
                facebookLoginBtn.value = facebook.loginString;
            });
        } else {
            FB.login(res => {
                facebookLoginBtn.value = facebook.logoutString;
                FB.api(
                    `/${res.authResponse.userID}/`,
                    'GET',
                    { 'fields': 'id,email,name,birthday,hometown' },
                    (res2) => {
                        facebook.data = {
                            accessToken: res.authResponse.accessToken,
                            userId: res.authResponse.userID,
                            name: res2.name,
                            email: res2.email
                        }
                    }
                )
            }, { scope: 'email' });
        }
    });
}

(여기서 facebook 객체의 값을 설정)

facebook.appId : 자신의 앱 아이디

facebook.version : 현재 페이스북 버전 (v10.0)

facebook.buttonId : 페이스북 로그인 버튼 id Selector 

facebook.loginString : 로그인 버튼 이름

facebook.logoutString : 로그 아웃 버튼 이름

facebook.data : 클라이언트 정보 GET (페이스북 로그인시 받는 정보가 객체를 통해 저장)

 

👇  유저 로그인시 facebook.data 객체에 저장되는 정보들👇

facebook.data.accessToken: 엑세스 토큰

facebook.data.userID: 페이스북 구분자(숫자)
facebook.data.name: 클라이언트 이름
facebook.data.email: 클라이언트 이메일 정보

 

 

3. 웹사이트 html 파일 head 태그 안에 아래 script 파일 추가!

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

 

4. 웹사이트 html 파일 head 태그 안에 아까 만들었던 facebook.js 파일 경로 추가

<!-- html 파일 과 같은 경로에 있을시 ./facebook.js -->
<script defer src="./facebook.js"></script>

 

5. 페이스북 로그인 결과 확인!