아래의 코드에서 todo 에 기재된 facebook 앱 아이디와 구글 client id 는 반드시 변경후에 사용해야 합니다.
<html>
<head>
<!-- Title -->
<title>Swing-test</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="UTF-8">
<!-- Javascripts -->
<script src="/assets/plugins/jquery/jquery-2.1.4.min.js"></script>
<script>
var host = location.host.toLowerCase();
const urlParams = new URLSearchParams(window.location.search);
var customUrl = urlParams.get('customUrl');
var autoType = urlParams.get('autoType');
$(document).ready(function () {
window.fbAsyncInit = function() {
FB.init({
appId : '464485827223968', // todo facebook 앱 아이디를 입력
xfbml : true,
version : 'v9.0'
});
FB.AppEvents.logPageView();
if( autoType == "facebook"){
fb_login();
}
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
var googleAuth2 = null;
function fb_login(){
$("#infoBox").append("fb_login start");
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
var access_token = response.authResponse.accessToken; //get access token
if (response.status === 'connected') { // Logged into your webpage and Facebook.
gotoSnsLoginPageFn("facebook", access_token);
} else {
}
} else {
//user hit cancel button
console.log('User cancelled login or did not fully authorize.');
}
}, {
scope: 'public_profile,email'
});
}
function googleInitFn() {
gapi.load('auth2', function() {
/* Ready. Make a call to gapi.auth2.init or some other API */
googleAuth2 = gapi.auth2.init({
client_id: '829822048277-oncammdmeq2mku9lbqndknoustamqcbq.apps.googleusercontent.com', // todo google client_id 입력
cookiepolicy: 'single_host_origin',
scope: 'profile email'
});
attachSignin(document.getElementById('googleLoginBtn'));
if( autoType == "google" ) {
setTimeout(function() {
$("#googleLoginBtn")[0].click();
},1000);
}
});
}
function attachSignin(element) {
console.log(element.id);
googleAuth2.attachClickHandler(element, {},
function(googleUser) {
var loginAuth2 = gapi.auth2.getAuthInstance();
if (loginAuth2.isSignedIn.get()) {
var authToken = loginAuth2.currentUser.get().getAuthResponse().id_token;
gotoSnsLoginPageFn("google", authToken);
}
}, function(error) {
// alert(JSON.stringify(error, undefined, 2));
});
}
function googleLoginActionFn(){
googleAuth2.signIn().then(function(user){
if (user.isSignedIn()) {
var authToken = user.getAuthResponse().id_token;
gotoSnsLoginPageFn("google", authToken);
}
});
}
function gotoSnsLoginPageFn(idType, token){
var $form = $("#snsLoginForm");
$form.find("[name=id_type]").val(idType);
$form.find("[name=token]").val(token);
var runUrl = customUrl +'://app?function=command&linkUrl=' + btoa( "loginTokenCallback('"+ token +"','" + idType + "');" );
$('.return-app-area a').attr('href', runUrl );
$('.sns-login-area').hide();
$('.return-app-area').show();
if( location.href.indexOf('swing2app.com') >= 0 )
{
$('.command-button').text('Login successful - Proceed');
}
else {
$('.command-button').text('로그인 성공 - 이동하기');
}
}
</script>
<meta name="google-signin-client_id" content="829822048277-oncammdmeq2mku9lbqndknoustamqcbq.apps.googleusercontent.com"> <!-- todo google signin-client-id 입력 -->
<script src="https://apis.google.com/js/platform.js?onload=googleInitFn" async defer></script>
<script>
</script>
</head>
<body>
<div class="sns-login-area" style="width: 100%; padding:30px">
<div class="sns-login-btn-box facebook">
<div class="sns-login-main-btn" id="snsFaceBookLoginBtn" onclick="fb_login();">
<span class="icon"><img src="/assets/images/sns_login/facebook.png" /></span>
<span class="buttonText">페이스북으로 로그인</span>
</div>
</div>
<div class="sns-login-btn-box google">
<div id="googleLoginBtn" class="customGPlusSignIn sns-login-main-btn">
<span class="icon"><img src="/assets/images/sns_login/google.png" /></span>
<span class="buttonText">구글로 로그인</span>
</div>
</div>
</div>
<div class="return-app-area" style="display: none;padding: 30px;text-align: center;background: #e6e6e6;"><a href="#" class="command-button" style="color: black;text-decoration: none;font-size: 25px;">로그인 성공 - 이동하기</a>
</div>
<div id="infoBox" style="display: none">
</div>
</body>
</html>
(2) 웹사이트에서 callback 함수를 정의하여 device token 을 받기
1번 브라우저에서 로그인이 완료되면 아래의 정의된 callback 함수로 deviceToken 이 전달된다, idType 값은 login_example.html 정의된 값으로 전달되는데 제공되는 소스에서는 "facebook", "google"로 구분되어 들어오게 되어있다.
