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
개발강좌 내용 검색

회원로그인

커뮤니티 통합 안내 배너

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

© SIRSOFT