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

개발강좌

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

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

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

첨부파일

sns_line_s.zip (1.8K) 39회 다운로드 2020-11-20 08:40:14
sns_logo2.zip (10.9K) 1회 다운로드 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_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&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-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&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-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

추천
7

댓글 14개

애플 로그인은 조만간 다른 회원님이 컨텐츠몰에 판매등록하신다고 합니다
저는 그분 상품이 등록되면 구매하려고 기다리고 있습니다
글 제목 바로 아래의 링크에서 내용을 확인하세요.
요기는 초기 몇번 업데이트하고 그후에는 내용 수정을 안해서
최신 내용이 아닐수 있습니다

신고가 접수된 글입니다.
신고 횟수가 1회 이상이면 글을 확인하지 못합니다.

Please click and chat with me ;)
https://www.gracc.org/profile/seo3ibc138/profile
https://www.frenchliving.co.uk/profile/seo3ibc138/profile
https://en.collabox.id/profile/seo4ibc138/profile
https://www.tayriverhealthcentre.ca/profile/seo3ibc138/profile
https://www.muda.nasdem.id/profile/seo3ibc138/profile
https://www.roboteria.com.br/profile/seo3ibc138/profile
https://www.thehenleyschoolofart.com/profile/seo3ibc138/profile
https://www.acervaniteroisg.com.br/profile/seo3ibc138/profile
https://www.rsg.gg/profile/seo3ibc138/profile
https://www.eminamclean.com/profile/seo3ibc138/profile
https://www.philcoulter.com/profile/seo3ibc138/profile
https://www.gmartell.com/profile/seo3ibc138/profile
https://www.jgctruckdrivingtraining.com/profile/seo3ibc138/profile
https://es.gybn.org/profile/seo3ibc138/profile
https://www.tiendaesperandote.com.ar/profile/seo3ibc138/profile
https://www.sistahspace.org/profile/seo3ibc138/profile
https://www.happyhounduniversity.com/profile/seo3ibc138/profile
https://packinsider.com/Community/profile/gates-of-olympus-slot/
https://eligon.ro/community/profile/busetgacor2211/
https://www.happyvalleybeer.com/profile/seo3ibc138/profile
https://www.modavessa.com.br/profile/seo3ibc138/profile
https://www.riverraisin.org/profile/seo3ibc138/profile
https://www.gomakeadifference.co.uk/profile/seo3ibc138/profile
https://www.casevacanzapiemonte.com/profile/seo3ibc138/profile
https://www.savannahafricanartmuseum.org/profile/seo3ibc138/profile
https://www.moderntribalnations.com/profile/seo3ibc138/profile
https://www.fleurs2.com/profile/seo3ibc138/profile
https://www.sosouthernsoundkits.com/profile/seo3ibc138/profile
https://www.robertsfdc.org/profile/seo3ibc138/profile
https://www.fundingreach.com/profile/seo3ibc138/profile
https://ar.fabricatorindia.com/profile/seo3ibc138/profile
https://www.greenbim.kr/profile/seo3ibc138/profile
https://www.mindfulpathways.com.au/profile/seo3ibc138/profile
https://www.autobright.com.hk/profile/seo3ibc138/profile
https://www.atelier8poterie.com/profile/seo3ibc138/profile
https://www.alliedcapoeiraleague.com/profile/seo3ibc138/profile
https://www.lesfousriresdecourbevoie.fr/profile/seo3ibc138/profile
https://www.ancestralapothecary.com/profile/seo3ibc138/profile
https://www.americasonetitle.com/profile/seo3ibc138/profile
https://www.checkmychurch.org/profile/seo3ibc138/profile
https://www.weirdsistersyarn.com/profile/seo3ibc138/profile
https://www.restauranthjem.co.uk/profile/seo3ibc138/profile
https://www.dogwoodarts.com/profile/seo3ibc138/profile
https://www.godspellcollege.com.ar/profile/seo3ibc138/profile
https://www.rxalbany.com/profile/seo3ibc138/profile
https://www.loscoloresecoparque.com/profile/seo3ibc138/profile
https://www.runtobe.co.uk/profile/seo3ibc138/profile
https://www.alttech.foundation/profile/seo3ibc138/profile
https://www.christcommunity.org.uk/profile/seo3ibc138/profile
https://www.stenton.org/profile/seo3ibc138/profile
https://www.customfoot.com.au/profile/seo3ibc138/profile
https://www.walkoffcharities.com/profile/seo3ibc138/profile
https://www.casamexico.ca/profile/seo3ibc138/profile
https://www.burdphysicaltherapy.com/profile/seo3ibc138/profile
https://www.bayviewecoresort.com/profile/seo3ibc138/profile
https://www.prospectconst.com/profile/seo3ibc138/profile
https://www.visitlewisfarms.com/profile/seo3ibc138/profile
https://www.cosumnes.org/volunteer-forums/profile/gacor4433/
https://www.carbrookcentre.qld.edu.au/profile/seo3ibc138/profile
https://www.ch3performancegolf.com/profile/seo3ibc138/profile
전체 103
개발강좌 내용 검색

회원로그인

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