고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
하이브리드앱 개발시 주로 사용되는 웹뷰 (Webview) 에서 소셜로그인 적용시,
카카오/ 네이버 등은 팝업방식이 아니라 문제가 안되지만,
페이스북은 팝업방식을 사용하기 때문에 문제가 발생하게 됩니다
왜냐하면 웹뷰 (Webview) 는 기본적으로 팝업을 지원하지 않고, 하나의 window 로만 동작하기 때문입니다
기본적으로, 웹의 HTML 문서내에서 페이스북 로그인을 처리하기 위해서는 페이스북 개발자 사이트를 참조하면 됩니다.
https://developers.facebook.com/docs/facebook-login/web
페이스북 개발자센터의 소스를 사용하게되면 팝업이 뜨면서 로그인이 처리되게 됩니다.
이때, 팝업이 뜨지 않게 하려면 아래와 같이 하면 됩니다.
앱ID 부분은 페이스북 개발자센터에서 앱 등록시 부여받은 앱ID 를 입력해 주시면 됩니다.
https://www.도메인.co.kr:14000 부분은 사용하시는 도메인으로 변경하시면 됩니다.
페이스북 로그인 시에는 https 프로토콜을 기본으로 사용하게 되어있습니다.
<script>
function facebookLogin()
{
var uri = encodeURI('https://www.도메인.co.kr:14000/login_redirect_facebook.html');
window.location = encodeURI("https://www.facebook.com/dialog/oauth?client_id=앱ID&redirect_uri="+uri+"&response_type=token");
}
</script>
<a href ="facebookLogin()">
<span class="btn-login-facebook"><button>페이스북으로 로그인</button></span>
</a>
로그인 버튼을 클릭하게되면 login_redirect_facebook.html 페이지로 결과값이 넘어오게됩니다.
아래 내용이 login_redirect_facebook.html 내용입니다.
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="euc-kr">
</head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
if (response.status === 'connected') { // 페이스북을 통해서 로그인
DisplayResult();
} else if (response.status === 'not_authorized') { // 페이스북에는 로그인 했지만, 앱에는 로그인이 되어있지 않다
document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';
} else { // 페이스북에 로그인 되어있지 않아서, 앱에 로그인이 되어있는지 불확실
document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';
}
}
window.fbAsyncInit = function() {
FB.init({
appId : '앱ID',
cookie : true, // 쿠키가 세션을 참조할 수 있도록 허용
xfbml : true, // 소셜 플러그인이 있으면 처리
version : 'v2.1' // 버전 2.1 사용
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// SDK를 비동기적으로 호출
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function DisplayResult() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML = '아이디 ' + response.id + "/ 이름 " + response.name;
});
}
</script>
<div id="status">
</div>
</body>
</html>
결과값은 status DIV 에 표시됩니다.
그냥, 팝업으로 처리하기위해서는 안드로이드 소스에서 Popup 을 실행할 수 있도록 변경하는 방법을 쓰면 됩니다.
아래 URL 참고하시면 됩니다.
반응형
'IT공부방 > 안드로이드 Android' 카테고리의 다른 글
| 구글플레이 안드로이드 앱 출시관련 문의사항 전달하는 방법/ 구글 고객센터/ 질문답변 (0) | 2019.04.22 |
|---|---|
| 안드로이드 8.1 오레오 PUSH(푸시) 메시지 안올때, 채널설정 (0) | 2019.04.22 |
| JSON_PARSING_ERROR: Unexpected token END OF FILE at postion FCM PUSH 한글발송시 오류메시지 (0) | 2019.01.11 |
| 웹뷰 WebView 와 안드로이드(Android) 간의 Javascipt 연결 (0) | 2018.10.02 |
댓글 영역