2020. 10. 26. 18:02ㆍPHP
현재 많은 사이트들에서는 간편하게 로그인을 하기 위하여 소셜로그인 기능을 제공하고 있습니다.
여러가지 로그인을 제공하지만 그중 facebook , naver , kakao , google 을 다루어볼 예정입니다.
우선 이번편에서는 facebook 로그인을 진행해 보도록 하겠습니다.
1. 페이스북 developer 사이트 이동
2. 우측 상단에 로그인후 내엡으로 이동
3. 우측 상단의 앱만들기 선택
4. 레이어팝업에서 연결된 환경 구축 선택후 계속
5. 앱 이름 , 이메일등 정보 입력후 앱만들기 선택
6. 저는 socialLoginTest 라고 앱이름 을 설정하여 만들었습니다. 그리고 나서 우리는 로그인 기능을 사용할 것이기 때문에 앱에 제품 추가 에서 facebook 로그인을 설정해주면 됩니다.
7. 설정이 되면 아래와 같이 대쉬보드로 이동이 되어지면서 플렛폼 선택 페이지가 나오는데 우리는 web에서 구연을 할 것이므로 www 웹을 선택하면 됩니다.
8. 본인이 적용할 사이트 URL과 save 버튼을 누르게되면 앱설정은 마무리가 되었습니다.
9. 나머지는 각 언어 및 플렛폼에 맞게 개발을 진행 하면 됩니다. 저는 php언어를 사용하여 개발을 진행하고 있고 javascript sdk 를 사용하여 로그인 기능을 웹페이지에 올려보도록 하겠습니다.
- developers.facebook.com/docs/facebook-login/web
페이스북에서 제공하고있는 개발 문서를 보면서 진행 하였습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./resources/javascript/jquery-1.12.4.js"></script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</head>
<body>
<div class="socialIcon">
<img src="./resources/images/facebook.gif" onclick="checkLoginStateFacebook();">
<img src="./resources/images/google.gif">
<img src="./resources/images/kakao.gif">
<img src="./resources/images/naver.gif">
</div>
<script>
/*페이스북 소셜 로그인 Start*/
//페이스북 초기 세팅
window.fbAsyncInit = function() {
FB.init({
appId : '본인 app key 입력',
cookie : true,
xfbml : true,
version : 'app version 입력'
});
};
//페이스북 아이콘 클릭 하여 페이스북이 현재 로그인이 되어져있는지 확인
function checkLoginStateFacebook() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
//페이스북이 현재 로그인이 되어져있는지 확인
function statusChangeCallback(response) {
if (response.status === 'connected') { //페이스북에 로그인이 되어져있는 경우
myInfoFacebook();
} else { //페이스북에 로그인이 되어져있지 않는 경우
FB.login(function(response){ //로그인 실행
if (response.status === 'connected') { //로그인 실행후 로그인이 정상적으로 실행된 경우
myInfoFacebook();
}else{ //로그인 실행후 로그인이 정상적으로 실행되지 않아서 로그인이 되지 않은 경우
}
// handle the response
});
}
}
//로그인 실행후 해당 accesskey 를 사용하여 정보 return
function myInfoFacebook() {
FB.api('/me', function(response) {
//본인 이름
console.log("id = "+response.id); //페이스북 고유 아이디
console.log("name = "+response.name); //페이스북에 등록되어져있는 이름
});
}
/*페이스북 소셜 로그인 End*/
</script>
</body>
</html>
위와 같이 페이스북의 개발문서를 사용하여 개발을 진행하였고 appId와 version 만 본인의 것으로 변경후 실행을 한다면 마지막 console 에 본인의 고유 아이디값과 이름이 찍히는것을 확인 할 수 있습니다.
10. 실행 결과 페이지 입니다.
페이스북 버튼 클릭시 위와같이 페이스북 로그인이 나오게 되고 로그인 완료시 아래와 같이 콘솔창에 id 와 이름이 리턴되어져서 보이게 됩니다.
11. 추후작업
페이스북 로그인이 된 다음 해당 데이터를 암호화 하여 전송후 실제 사용되어질 회원가입 페이지 에서 호출하여 사용 하면 될것입니다.
'PHP' 카테고리의 다른 글
| [PHP] 카카오 음성 합성 (0) | 2021.10.18 |
|---|---|
| PHP 익스플로러 구분 (0) | 2021.10.08 |
| [PHP] PC , Mobile 접속시 체크 하는 방법 (1) | 2020.10.19 |