아래의 코드에서 todo 에 기재된 facebook 앱 아이디와 구글 client id 는 반드시 변경후에 사용해야 합니다.
<html><head><!-- Title --> <title>Swing-test</title> <metacontent="width=device-width, initial-scale=1"name="viewport"> <metacharset="UTF-8"><!-- Javascripts --> <scriptsrc="/assets/plugins/jquery/jquery-2.1.4.min.js"></script> <script>var host =location.host.toLowerCase();consturlParams=newURLSearchParams(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;functionfb_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 tokenif (response.status ==='connected') { // Logged into your webpage and Facebook.gotoSnsLoginPageFn("facebook", access_token); } else { } } else {//user hit cancel buttonconsole.log('User cancelled login or did not fully authorize.'); } }, { scope:'public_profile,email' }); }functiongoogleInitFn() {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); } }); }functionattachSignin(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)); }); }functiongoogleLoginActionFn(){googleAuth2.signIn().then(function(user){if (user.isSignedIn()) {var authToken =user.getAuthResponse().id_token;gotoSnsLoginPageFn("google", authToken); } }); }functiongotoSnsLoginPageFn(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 입력 -->
<scriptsrc="https://apis.google.com/js/platform.js?onload=googleInitFn"asyncdefer></script> <script> </script></head><body><divclass="sns-login-area"style="width: 100%; padding:30px"> <divclass="sns-login-btn-box facebook"> <divclass="sns-login-main-btn"id="snsFaceBookLoginBtn"onclick="fb_login();"> <spanclass="icon"><imgsrc="/assets/images/sns_login/facebook.png" /></span> <spanclass="buttonText">페이스북으로 로그인</span> </div> </div> <divclass="sns-login-btn-box google"> <divid="googleLoginBtn"class="customGPlusSignIn sns-login-main-btn"> <spanclass="icon"><imgsrc="/assets/images/sns_login/google.png" /></span> <spanclass="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><divid="infoBox"style="display: none"></div></body></html>
(2) 웹사이트에서 callback 함수를 정의하여 device token 을 받기
1번 브라우저에서 로그인이 완료되면 아래의 정의된 callback 함수로 deviceToken 이 전달된다, idType 값은 login_example.html 정의된 값으로 전달되는데 제공되는 소스에서는 "facebook", "google"로 구분되어 들어오게 되어있다.
