소셜로그인 추가하기 - Line 로그인 (2023-09-12 19:30 수정)

본 강좌 등록 이후 업데이트가 안될수 있습니다
최신 버전은 위 링크를 접속해서 내용 비교후 사용하세요

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

[ 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_line" value="line" <?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', false, true); ?></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_line_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  ( 그누보드 5.4.3.1 에서 수정됨 )
    if ( $provider === 'twitter') ){
        return $base_url;
    }

를 아래와 같이 수정 ( 그누보드 5.4.3.1 에서 공식패치 됨 )

    if ( $provider === 'twitter' || ($provider === 'payco' && $no_params) || ($provider === 'line' && $no_params) ){
        return $base_url;
    }

4-2. / 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-3. / 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}

6-3. / adm / css / admin.css
.sns-wrap-32 .sns-icon .txt {margin:0 10px 0 0;font-size:0.95em;letter-spacing:-0.1em}

아래에 추가

.sns-wrap-32 .sns-line .txt {border-left:1px solid #333}

[ 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&amp;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&amp;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&amp;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-line {border-color:#00c200}
.sns-wrap-reg .sns-line .ico {background-position:-204px 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-line {background:url('./img/sns_line_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-line {background-color:#00c200;background-position:5px 5px;border-bottom:1px solid #1ea505}

5-4. / skin / social / style.css
#sns_login .txt:hover {background:rgba(0,0,0,0.07)}

아래에 추가

#sns_login .sns-line .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:#00c200;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&amp;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&amp;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&amp;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-line {border-color:#00c200}
.sns-wrap-reg .sns-line .ico {background-position:-204px 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-line {background:url('./img/sns_line_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-line {background-color:#00c200;background-position:5px 5px;border-bottom:1px solid #1ea505}

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-line .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-line {background-color:#00c200;background-position:5px 5px;border-bottom:1px solid #136d02}

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