홈페이지 페이스북 간편 로그인 기능 구현 [Javascript Facebook Login]
내 웹 사이트에 페이스북 로그인 기능을 구현하려면
먼저 아래와 같은 준비물이 필요하다
1. 페이스북 개발자 계정
2. 페이스북 개발자 계정 내 페이스북 앱 등록
3. 페이스북 개발자 앱 등록 ID, 웹 URL 등록
페이스북 개발자 계정 가입하기
아래 페이스북 개발자 공홈에서 회원가입을 한다.
https://developers.facebook.com/
Facebook for Developers
Facebook for Developers와 사용자를 연결할 수 있는 코드 인공 지능, 비즈니스 도구, 게임, 오픈 소스, 게시, 소셜 하드웨어, 소셜 통합, 가상 현실 등 다양한 주제를 둘러보세요. 개발자를 교육하고 연
developers.facebook.com
페이스북 개발자 계정 내 페이스북 앱 등록
(1) 아래 링크를 통해 개발자 공홈에서 앱 만들기를 클릭한다
https://developers.facebook.com/apps/
로그인 또는 가입하여 보기
Facebook에서 게시물, 사진 등을 확인하세요.
www.facebook.com
(2) 팝업창이 뜨면 체크된 부분 입력
페이스북 개발자 앱 등록 ID, 웹 URL 등록
(1) 등록 URL 확인하기
대시보드 페이지에서 설정 > 기본설정 클릭 후
하단에 자신의 웹 페이지 주소가 잘 등록되어있는지 체크
(콜백 URL 필요시 같은 페이지내 설정 해야함)
(2) 자신의 앱 아이디 확인 및 저장해놓기
대시보드 페이지에서 설정 > 기본설정 클릭 후
상단에 자신의 앱 아이디를 복사 해두기
위 과정이 끝났다면 하단의 예제를 자신의 프로젝트에 복사하여
페이스북 로그인을 구현해보자 😀
🌈 각 API 기능에 대해서는 주석으로 설명해두었으니 참고바람
샘플 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook Login</title>
</head>
<body>
<script>
//페이스북 (로그인) 기본 설정
window.fbAsyncInit = function () {
//페이스북 로그인 기능 클라이언트 설정
FB.init({
appId: '268272748332180',
autoLogAppEvents: true,
xfbml: true,
version: 'v10.0'
});
//페이스북 로그인 여부 확인
FB.getLoginStatus(function (response) {
statusChangeCallback(response);
});
};
//로그인 상태에 따라 로그인 / 로그아웃 구분
const statusChangeCallback = (res)=>{
if(res.status === 'connected')
document.querySelector('#logBtn').value="로그아웃";
else document.querySelector('#logBtn').value= "로그인";
}
//페이스북 (로그인)
const facebookLogin = ()=>{
//로그인 정보 GET
FB.login((res)=>{
//사용자 정보 GET
FB.api(
`/${res.authResponse.userID}/`,
'GET',
{"fields":"id,name,email"},
(res2) => {
//res.authResponse.accessToken : 엑세스 토큰
//res.authResponse.graphDomain : 공급자 (페이스북)
//res.authResponse.userID : 유저 아이디 구분 (숫자)
//res2.name : 유저 이름
//res2.email : 유저 이메일 정보
document.querySelector('#logBtn').value="로그아웃";
console.log(res,res2);
});
});
}
//페이스북 (로그아웃)
const facebookLogout = ()=>{
FB.logout((res)=>{
document.querySelector('#logBtn').value= "로그인";
});
}
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<input type="button" id="logBtn" />
<!--UI 관련 스크립트-->
<script>
//로그인 버튼 클릭시
document.querySelector('#logBtn').addEventListener('click',e=>{
if(e.target.value === '로그인'){
facebookLogin();
} else {
facebookLogout();
}
});
</script>
</body>
</html>
실행 결과
ps. http (테스트) 환경이라서 에러창이 뜨는데 사용하는데는 문제없는 것을 확인함 👌
'프론트엔드 > Javascript' 카테고리의 다른 글
| [프론트엔드 / 자바스크립트] 브라우저 엘리먼트 좌표 값 구하기 elem.getBoundingClientRect() (0) | 2021.05.20 |
|---|---|
| [프론트엔드] 윈도우 창 / 스크롤바 / 브라우저 사이즈 feat 자바스크립트 (0) | 2021.05.20 |
| [Javascript] 자바스크립트 엘리먼트 선택자 querySelector, querySelectorAll, getElementById, getElementsByClassName, getElementsByTagName (0) | 2021.04.27 |
| [CSS / Javascript] 메뉴 클릭시 화면 스크롤 이동 (0) | 2021.04.17 |
| [Javascript] 엘리먼트 위치로 스크롤 이동 scrollIntoView() (0) | 2021.04.15 |
댓글