SIR
KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

소셜로그인 추가하기 - Line 로그인 (2020-11-23 18:40 수정) > 개발강좌

개발강좌

프로그램 강좌 :
1. 유창화님의 썸네일, 정규표현식, 이미지관련 강좌
2. Sphinx 검색엔진을 이용한 도로명 주소 검색 시스템 구축

소셜로그인 추가하기 - Line 로그인 (2020-11-23 18:40 수정) 정보

그누보드5 소셜로그인 추가하기 - Line 로그인 (2020-11-23 18:40 수정)

첨부파일

첨부파일 sns_line_s.zip (1.8K) 3회 다운로드 2020-11-20 08:40:14
첨부파일 sns_logo2.zip (10.9K) 0회 다운로드 2020-11-21 07:45:55

본문

그누보드에 소셜로그인 라인을 적용하는 방법을 정리합니다
한국에서는 카카오톡이 대다수를 사용하지만, 일본과 동남아권에서는 라인의 사용량이 엄청납니다
그에 따라 라인으로 로그인하는 것을 정리해봅니다

[ LINE 개발자센터 ]


1. 개발자 로그인  https://developers.line.biz/en/


2. 채널 생성을 위해 이름(Your name)과 이메일(Your email)을 입력




3. Provider 입력 : 회사명 또는 서비스명을 입력합니다




4. Create a LINE Login channel  클릭




5. 채널 정보를 입력 : 로그인을 적용할 서비스 정보를 입력합니다




6. 채널 아이디(Channel ID)와 채널 시크릿(Channel secret)가 생성되었습니다
이것을 그누보드5 > 환경설정 > 라인 에 입력합니다




7. Callback URL 입력
2개 이상 입력할때 입력항목에 엔터를 치면 입력칸이 늘어납니다




8. 설정이 정상적으로 되었다면  Developing 을 Publish 로 변경합니다
이것은 충분하게 테스트하고 정식 서비스 할 때 누르세요





공통 ]

1-1. / adm / config_form.php

//소셜 로그인 관련 필드 카카오 클라이언트 시크릿 추가
if(!isset($config['cf_kakao_client_secret'])) {
    sql_query("ALTER TABLE `{$g5['config_table']}`
                ADD `cf_kakao_client_secret` varchar(100) NOT NULL DEFAULT '' AFTER `cf_kakao_rest_key`
    ", true);
}

아래에 내용 추가

//소셜 로그인 관련 필드 라인 추가
if(!isset($config['cf_line_clientid'])) {
    sql_query(" ALTER TABLE `{$g5['config_table']}`
                    ADD `cf_line_clientid` VARCHAR(255) NOT NULL AFTER `cf_payco_secret`,
                    ADD `cf_line_secret` VARCHAR(255) NOT NULL AFTER `cf_line_clientid` ", true);
}


1-2. / adm / config_form.php

                <div class="explain_box">
                    <input type="checkbox" name="cf_social_servicelist[]" id="check_social_payco" value="payco" <?php echo option_array_checked('payco', $config['cf_social_servicelist']); ?> >
                    <label for="check_social_payco">페이코 로그인을 사용합니다</label>
                    <div>
                    <h3>페이코 CallbackURL</h3>
                    <p><?php echo get_social_callbackurl('payco'); ?></p>
                    </div>
                </div>

아래에 내용 추가

                <div class="explain_box">
                    <input type="checkbox" name="cf_social_servicelist[]" id="check_social_github" value="github" <?php echo option_array_checked('line', $config['cf_social_servicelist']); ?> >
                    <label for="check_social_line">라인 로그인을 사용합니다</label>
                    <div>
                    <h3>라인 CallbackURL</h3>
                    <p><?php echo get_social_callbackurl('line'); ?></p>
                    </div>
                </div>


1-3. / adm / config_form.php

        <tr>
            <th scope="row"><label for="cf_payco_clientid">페이코 Client ID</label></th>
            <td>
                <input type="text" name="cf_payco_clientid" value="<?php echo $config['cf_payco_clientid']; ?>" id="cf_payco_clientid" class="frm_input" size="40"> <a href="https://developers.payco.com/guide" target="_blank" class="btn_frmline">앱 등록하기</a>
            </td>
            <th scope="row"><label for="cf_payco_secret">페이코 Secret</label></th>
            <td>
                <input type="text" name="cf_payco_secret" value="<?php echo $config['cf_payco_secret']; ?>" id="cf_payco_secret" class="frm_input" size="45">
            </td>
        </tr>

아래에 내용 추가

        <tr>
            <th scope="row"><label for="cf_line_clientid">라인 Channel ID</label></th>
            <td>
                <input type="text" name="cf_line_clientid" value="<?php echo $config['cf_github_clientid']; ?>" id="cf_line_clientid" class="frm_input" size="40"> <a href="https://developers.line.biz/en/docs/" target="_blank" class="btn_frmline">앱 등록하기</a>
            </td>
            <th scope="row"><label for="cf_line_secret">라인 Channel secret</label></th>
            <td>
                <input type="text" name="cf_line_secret" value="<?php echo $config['cf_line_secret']; ?>" id="cf_line_secret" class="frm_input" size="45">
            </td>
        </tr>


2-1. / adm / config_form_update.php

$check_keys = array('cf_lg_mid', 'cf_lg_mert_key', 'cf_cert_kcb_cd', 'cf_cert_kcp_cd', 'cf_editor', 'cf_recaptcha_site_key', 'cf_recaptcha_secret_key', 'cf_naver_clientid', 'cf_naver_secret', 'cf_facebook_appid', 'cf_facebook_secret', 'cf_twitter_key', 'cf_twitter_secret', 'cf_google_clientid', 'cf_google_secret', 'cf_googl_shorturl_apikey', 'cf_kakao_rest_key', 'cf_kakao_client_secret', 'cf_kakao_js_apikey', 'cf_payco_clientid', 'cf_payco_secret');

를 아래와 같이 수정

$check_keys = array('cf_lg_mid', 'cf_lg_mert_key', 'cf_cert_kcb_cd', 'cf_cert_kcp_cd', 'cf_editor', 'cf_recaptcha_site_key', 'cf_recaptcha_secret_key', 'cf_naver_clientid', 'cf_naver_secret', 'cf_facebook_appid', 'cf_facebook_secret', 'cf_twitter_key', 'cf_twitter_secret', 'cf_google_clientid', 'cf_google_secret', 'cf_googl_shorturl_apikey', 'cf_kakao_rest_key', 'cf_kakao_client_secret', 'cf_kakao_js_apikey', 'cf_payco_clientid', 'cf_payco_secret', 'cf_line_clientid', 'cf_line_secret');


2-2. / adm / config_form_update.php

                cf_payco_secret = '{$_POST['cf_payco_secret']}',

아래에 내용 추가

                cf_line_clientid = '{$_POST['cf_line_clientid']}',
                cf_line_secret = '{$_POST['cf_line_secret']}',


3. 첨부파일 Line.zip 압축 해제후 업로드
/ plugin / social / Hybrid / Providers / Line.php


4-1. / plugin / social / includes / functions.php

function social_extends_get_keys($provider){

아래 내용 추가

        // Line
        $r['Line'] = array(
                    "enabled" => option_array_checked('line', $config['cf_social_servicelist']) ? true : false,
                    "keys" => array("id" => $config['cf_line_clientid'],"secret" => $config['cf_line_secret']),
                    "redirect_uri" => get_social_callbackurl('line'),
                    //"display"   =>  "popup",
                    //"scope"   => 'profile', // optional
                    "trustForwarded" => false
                );


4-2. / plugin / social / includes / functions.php

function social_get_provider_service_name($provider='', $all=''){

아래 내용 추가

        'line'  =>  '라인',


5. 첨부파일 sns_logo.zip 압축 해제후 업로드
/ adm / img / social / sns_logo2.png
/ adm / img / social / sns_logo2_not.png


6-1. / adm / css / admin.css
.sns-icon .ico {display:inline-block;background:url('../img/social/sns_logo.png') no-repeat;vertical-align:top}
를 아래와 같이 변경
.sns-icon .ico {display:inline-block;background:url('../img/social/sns_logo2.png') no-repeat;vertical-align:top}


6-2. / adm / css / admin.css
.sns-wrap-over .sns-kakao {border-color:#f2df00}
아래에 추가
.sns-wrap-over .sns-line {border-color:#00bf00}
.sns-wrap-over .sns-line .ico {background-position:-204px 0}



PC ]

1. 첨부파일 sns_line_s.zip 압축 해제후 업로드
/ skin / social / img / sns_line_s.png


2. / skin / social / social_login.skin.php  적당한 위치에 추가

        <?php if( social_service_check('line') ) {     //라인 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=line&url=<?php echo $urlencode;?>" class="sns-icon social_link sns-line" title="라인">
            <span class="ico"></span>
            <span class="txt">라인<i> 로그인</i></span>
        </a>
        <?php }     //end if ?>


3. / skin / social / social_login.skin.1.php  적당한 위치에 추가

        <?php if( social_service_check('line') ) {     //라인 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=line&url=<?php echo $urlencode;?>" class="sns-icon social_link sns-line" title="라인">
            <span class="ico"></span>
            <span class="txt">라인<i> 로그인</i></span>
        </a>
        <?php }     //end if ?>


4. / skin / social / social_register.skin.php 적당한 위치에

        <?php if( social_service_check('line') ) {     //라인 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=line&url=<?php echo $urlencode;?>" class="sns-icon social_link sns-line" title="라인">
            <span class="ico"></span>
            <span class="txt">라인으로 회원가입하기</span>
        </a>
        <?php }     //end if ?>


5-1. / skin / social / style.css
.sns-wrap-reg .sns-kakao {border-color:#f2df00}
아래에 추가
.sns-wrap-reg .sns-github {border-color:#000000}
.sns-wrap-reg .sns-github .ico {background-position:-174px 0}
.sns-wrap-reg .sns-line {border-color:#00bf00}
.sns-wrap-reg .sns-line .ico {background-position:-204px 0}
.sns-wrap-reg .sns-apple {border-color:#000000}
.sns-wrap-reg .sns-apple .ico {background-position:-232px 0}


5-2. / skin / social / style.css
.sns-wrap-over .sns-kakao {background:url('./img/sns_kakao_s.png') no-repeat}
아래에 추가
.sns-wrap-over .sns-github {background:url('./img/sns_github_s.png') no-repeat}
.sns-wrap-over .sns-line {background:url('./img/sns_line_s.png') no-repeat}
.sns-wrap-over .sns-apple {background:url('./img/sns_apple_s.png') no-repeat}


5-3. / skin / social / style.css
#sns_login .sns-payco {background-color:#df0b00;background-position:5px 5px;border-bottom:1px solid #9d0800}
아래에 추가
#sns_login .sns-github {background-color:#000;background-position:5px 5px;border-bottom:1px solid #000}
#sns_login .sns-line {background-color:#00bf00;background-position:5px 5px;border-bottom:1px solid #1ea505}
#sns_login .sns-apple {background-color:#000;background-position:5px 5px;border-bottom:1px solid #000}


5-4. / skin / social / style.css
#sns_login .txt:hover {background:rgba(0,0,0,0.07)}
아래에 추가
#sns_login .sns-github .txt {border-left:1px solid #333}
#sns_login .sns-apple .txt {border-left:1px solid #333}


5-5. / skin / social / style.css
#sns_register .sns-payco {background-color:#df0b00;background-position:0 0}
아래에 추가
#sns_register .sns-line {background-color:#00bf00;background-position:0 0}



Mobile ]

1-1. 첨부파일 sns_line_s.zip 압축 해제후 업로드
/ mobile / skin / social / img / sns_line_s.png


1-2. 첨부파일 sns_logo.zip  압축 해제후 업로드
/ mobile / skin / social / img / sns_logo2.png
/ mobile / skin / social / img / sns_logo2_not.png


2. / mobile / skin / social / social_login.skin.php  적당한 위치에 추가

        <?php if( social_service_check('line') ) {     //라인 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=line&url=<?php echo $urlencode;?>" class="sns-icon social_link sns-line" title="라인">
            <span class="ico"></span>
            <span class="txt">라인<i> 로그인</i></span>
        </a>
        <?php }     //end if ?>


3. / mobile / skin / social / social_login.skin.1.php  적당한 위치에 추가

        <?php if( social_service_check('line') ) {     //라인 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=line&url=<?php echo $urlencode;?>" class="sns-icon social_link sns-line" title="라인">
            <span class="ico"></span>
            <span class="txt">라인 로그인</span>
        </a>
        <?php }     //end if ?>


4. / mobile / skin / social / social_register.skin.php 적당한 위치에

            <?php if( social_service_check('line') ) {     //라인 로그인을 사용한다면 ?>
            <a href="<?php echo $self_url;?>?provider=line&url=<?php echo $urlencode;?>" class="sns-icon social_link sns-line" title="라인">
                <span class="ico"></span>
                <span class="txt">라인<i> 로그인</i></span>
            </a>
            <?php }     //end if ?>



5-1. / mobile / skin / social / style.css
.reg-form .sns-icon .ico {display:block;background:url('./img/sns_logo.png') no-repeat;vertical-align:middle;width:24px;height:24px}
.reg-form .sns-icon-not .ico {display:block;background:url('./img/sns_logo_not.png') no-repeat;vertical-align:middle}

를 아래와 같이 변경

.reg-form .sns-icon .ico {display:block;background:url('./img/sns_logo2.png') no-repeat;vertical-align:middle;width:24px;height:24px}
.reg-form .sns-icon-not .ico {display:block;background:url('./img/sns_logo2_not.png') no-repeat;vertical-align:middle}


5-2. / mobile / skin / social / style.css
.sns-wrap-reg .sns-kakao {border-color:#f2df00}
아래에 추가
.sns-wrap-reg .sns-github {border-color:#000000}
.sns-wrap-reg .sns-github .ico {background-position:-174px 0}
.sns-wrap-reg .sns-line {border-color:#00bf00}
.sns-wrap-reg .sns-line .ico {background-position:-204px 0}
.sns-wrap-reg .sns-apple {border-color:#000000}
.sns-wrap-reg .sns-apple .ico {background-position:-232px 0}


5-3. / mobile / skin / social / style.css
.sns-wrap-over .sns-kakao {background:url('./img/sns_kakao_s.png') no-repeat}
아래에 추가
.sns-wrap-over .sns-github {background:url('./img/sns_github_s.png') no-repeat}
.sns-wrap-over .sns-line {background:url('./img/sns_line_s.png') no-repeat}
.sns-wrap-over .sns-apple {background:url('./img/sns_apple_s.png') no-repeat}


5-4. / mobile / skin / social / style.css
#sns_login .sns-payco {background-color:#df0b00;background-position:5px 5px;border-bottom:1px solid #9d0800}
아래에 추가
#sns_login .sns-github {background-color:#000000;background-position:5px 5px;border-bottom:1px solid #343434}
#sns_login .sns-line {background-color:#00bf00;background-position:5px 5px;border-bottom:1px solid #1ea505}
#sns_login .sns-apple {background-color:#000000;background-position:5px 5px;border-bottom:1px solid #343434}


5-5. / mobile / skin / social / style.css
#sns_login .txt {text-align:left;padding-left:10px;border-left:1px solid rgba(0,0,0,0.1);display:block;font-weight:bold}
아래에 추가
#sns_login .sns-github .txt {text-align:left;padding-left:10px;border-left:1px solid #333;display:block;font-weight:bold}
#sns_login .sns-apple .txt {text-align:left;padding-left:10px;border-left:1px solid #333;display:block;font-weight:bold}


5-6. / mobile / skin / social / style.css
#sns_register .sns-payco {background-color:#df0b00;background-position:5px 5px;border-bottom:1px solid #9d0800}
아래에 추가
#sns_register .sns-github {background-color:#000000;background-position:5px 5px;border-bottom:1px solid #343434}
#sns_register .sns-line {background-color:#00bf00;background-position:5px 5px;border-bottom:1px solid #136d02}
#sns_register .sns-apple {background-color:#000000;background-position:5px 5px;border-bottom:1px solid #343434}




참고자료
https://sir.kr/pg_lecture/762
 

추천4

댓글 전체

애플 로그인은 조만간 다른 회원님이 컨텐츠몰에 판매등록하신다고 합니다
저는 그분 상품이 등록되면 구매하려고 기다리고 있습니다
전체 93
개발강좌 내용 검색

회원로그인

진행중 포인트경매

  1. 참여4 회 시작20.11.23 11:40 종료20.11.28 11:40
  2. 참여9 회 시작20.11.22 19:25 종료20.11.29 13:25

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT