스윙 기능 도움말

스윙 2.0 앱 로그인 연동 모듈

475 views 2017년 1월 4일 2018년 5월 29일 root 2

안녕하세요 스윙을 사용하는 사용자 여러분

오늘 여러분들에게 소개할 기능은 기존의 웹 사이트에서

스윙을 자체적으로 로그인 하는 기능을 활용하는 외부 로그인 연동

기능을 소개해드리겠습니다.

시작에 앞서 간단히 외부 연동에 대해 설명을 드리도록 하겠습니다.

현재 스윙의 사용자는 스윙 서버에 등록된 사용자 DB 를 기반으로 로그인을 하게 됩니다.

스윙을 이용하는 앱 제작자 분들 중에는 기존의 갖고 있는 사이트를 갖고 있는 경우가 있습니다.

예를 들어 그 사이트가 카페라고 가정했을때 카페는 카페 자체가 갖고 있는 로그인 시스템이 있겠죠?

따라서 카페에서 로그인을 해도 스윙앱에서는 로그인이 되지 않아 스윙 앱에서도

따로 로그인을 해야겠죠, 이러한 이유로 로그인 기능이 각각 동작하게 되어

최종 사용자는 혼동하거나 사용상에 불편함을 느끼게 되고

관리 하는 관리자 입장에서는 사용상에 불일치가 생길 수가 있겠죠?

따라서 마지막으로 간단히 정리를 하면 웹상에서 사용하는 로그인이 성공하면

앱내에서도 로그인을 처리하는 시스템이다라고 생각하면 됩니다.

외부 로그인을 적용하게 되면 앱내 로그인 관련된 모든 화면을 사용할 수 없게 되며

로그인은 오직 웹 사이트내에 로그인만을 이용하여 로그인 채널을 하나로 통합하게 됩니다.

적용 가능한 UI는 웹뷰 전용을 제외한 모든 UI가 적용 가능하다.

( 슬라이드,탑,푸터,드롭다운메뉴1, 드롭다운메뉴2,푸시전용)

여기서 푸시 전용은 실제로 로그인 기능이 없지만 , 해당 스크립트를 적용하면

관리자 페이지에서 사용자가 등록됩니다. 실제로 사이트만 적용한 간단한

하이브리드 앱을 만들기를 원할때는 푸시 전용이 가장 적합할 것입니다.

이쯤에서 설명을 이것으로 마치고, 적용 방법에 대해서 소개하도록 하겠습니다.

 

1. 스윙 로그인 연동 스크립트 배우기

스윙의 로그인 연동은 간단한 Javascript 를 통해서 사용할 수 있습니다.

해당 스크립트는 반드시 스윙 앱내에서만 실행되며, 앱이 아닌 일반 모바일 브라우저에서

동작하지 않으니 걱정하지 않으셔도 됩니다^^

<!-- 스윙 연동 API Script 등록 -->
<script src="http://pcdn2.swing2app.co.kr/swing_public_src/2016_12_07_001/js/swing_app_on_web.js"></script>

<!-- 사용자 로그인하기 -->
<script>
    swingLoginPlugin.doLogin("ios_user","GitaeKim"); // 사용자 아이디, 사용자 이름 입력
</script>
<!-- 사용자 로그아웃하기 방법1 -->
<script>
    swingLoginPlugin.doLogout("");
</script>
<!-- 사용자 로그아웃하기 방법2 --> 
<script> 
    swingLoginPlugin.doLogin("",""); 
</script>

(1) php 소스에서 스윙 로그인 연동 적용 예)

php 소스의 login_user_id , login_user_name 라는 사용자 아이디와 사용자 이름에 해당하는 전역 변수가 있다고 생각한다.

그럼 실제 적용된 소스는 다음과 같다.

[swing plugin js 파일 경로]

https js script url : https://www.swing2app.co.kr/swing_public_src/2016_12_07_001/js/swing_app_on_web.js

http js script url : http://pcdn2.swing2app.co.kr/swing_public_src/2016_12_07_001/js/swing_app_on_web.js

 

<script src="http://pcdn2.swing2app.co.kr/swing_public_src/2016_12_07_001/js/swing_app_on_web.js"></script>
<script>
    var login_user_id = '<?=$_login_user_id ?>';
    if( login_user_id == '' )  // login 되지 않았을 경우
    {
        swingLoginPlugin.doLogout('');
    }
    else
    {
        swingLoginPlugin.doLogin(login_user_id, '<?=$_login_user_name ?>'); // 사용자 아이디와 사용자 이름 넣는곳
    }
</script>

(2) 워드프레스 소스에서 스윙 로그인 연동 적용 예)

적용된 테마의 header.php 파일에 아래의 항목을 추가하면 됩니다.

[swing plugin js 파일 경로]

https js script url : https://www.swing2app.co.kr/swing_public_src/2016_12_07_001/js/swing_app_on_web.js

http js script url : http://pcdn2.swing2app.co.kr/swing_public_src/2016_12_07_001/js/swing_app_on_web.js

 

<?php 
 $current_user = wp_get_current_user();
?>
<script src="http://pcdn2.swing2app.co.kr/swing_public_src/2016_12_07_001/js/swing_app_on_web.js"></script>

<script>
 var login_user_id = '<?=$current_user->user_login ?>';
 if( login_user_id == '' )
 {
 swingLoginPlugin.doLogout('');
 }
 else
 {
 swingLoginPlugin.doLogin(login_user_id, login_user_id ); 
 }
</script>

2. 스윙 로그인 연동 예제 따라해보기

아래의 URL을 스윙 모바일 페이지에 적용하여 로그인 연동을 사용해보세요^^

테스트 할 수 있는 예제가 적용된 페이지 입니다.

[로그인 연동 페이지]

url : http://pcdn2.swing2app.co.kr/swing_public_src/2016_12_07_001/html/login_test.html

Was this helpful?