소셜로그인 추가하기 - GitHub 로그인 (2020-11-21 07:44 수정)

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

그누보드5.4 에 GitHub 소셜로그인 추가 합니다

Authorization callback URL 주소가 하나만 지원합니다
2개 이상의 콜백 주소가 적용이 안되는 거죠. 아래처럼 복수의 callback 입력이 불가능합니다
https://happyjung.com/plugin/social/?hauth.done=github
https://www.happyjung.com/plugin/social/?hauth.done=github

콜백주소는 정확하지 않으면 에러가 날텐데... 하나의 주소로만 사용하는 경우는 문제가 없겠으나,
www 있고 없는 것에 자유롭게 운용중인 홈페이지는 문제가 될지 않을까 생각됩니다.

콜백 이슈가 확인되어 모바일 작업은 하지 않았습니다


[ 공통 ]

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_github_clientid'])) {
    sql_query(" ALTER TABLE `{$g5['config_table']}`
                    ADD `cf_github_clientid` VARCHAR(255) NOT NULL AFTER `cf_payco_secret`,
                    ADD `cf_github_secret` VARCHAR(255) NOT NULL AFTER `cf_github_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('github', $config['cf_social_servicelist']); ?> >
                    <label for="check_social_github">깃허브 로그인을 사용합니다</label>
                    <div>
                    <h3>깃허브 CallbackURL</h3>
                    <p><?php echo get_social_callbackurl('github'); ?></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_github_clientid">깃허브 Client ID</label></th>
            <td>
                <input type="text" name="cf_github_clientid" value="<?php echo $config['cf_github_clientid']; ?>" id="cf_github_clientid" class="frm_input" size="40"> <a href="https://github.com/settings/developers" target="_blank" class="btn_frmline">앱 등록하기</a>
            </td>
            <th scope="row"><label for="cf_github_secret">깃허브 Client secrets</label></th>
            <td>
                <input type="text" name="cf_github_secret" value="<?php echo $config['cf_github_secret']; ?>" id="cf_github_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_github_clientid', 'cf_github_secret');


2-2. / adm / config_form_update.php

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

아래에 내용 추가

                cf_github_clientid = '{$_POST['cf_github_clientid']}',
                cf_github_secret = '{$_POST['cf_github_secret']}',


3. / plugin / social / Hybrid / Providers / GitHub.php 업로드
https://sir.kr/main/gm/ 에서 해당 위치의 파일을 업로드


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

function social_extends_get_keys($provider){

아래 내용 추가

        // Github
        $r['Github'] = array(
                    "enabled" => option_array_checked('github', $config['cf_social_servicelist']) ? true : false,
                    "keys" => array("id" => $config['cf_github_clientid'], "secret" => $config['cf_github_secret']),
                    "redirect_uri" => get_social_callbackurl('github')
                    //"access_type"     => "offline",   // optional
                    //"approval_prompt" => "force",     // optional
                );


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

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

아래 내용 추가

        'github'  =>  '깃허브',


[ PC ]

1. 첨부된 sns_github_s.zip 압축해제후 업로드
/ skin / social / img / sns_github_s.png


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

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


5. / 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_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 .txt:hover {background:rgba(0,0,0,0.07)}  아래에
#sns_login .sns-github .txt {border-left:1px solid #333}  추가

#sns_register .sns-payco {background-color:#df0b00;background-position:0 0}  아래에
#sns_register .sns-github {background-color:#000000;background-position:0 0}  추가



[ Mobile ]

1-1.  첨부된 sns_github_s.zip 압축해제후 업로드
/ mobile / skin / social / img / sns_github_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('github') ) {     //깃헙 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=github&amp;url=<?php echo $urlencode;?>" class="sns-icon social_link sns-github" 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('github') ) {     //깃헙 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=github&amp;url=<?php echo $urlencode;?>" class="sns-icon social_link sns-github" 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('github') ) {     //깃헙 로그인을 사용한다면 ?>
            <a href="<?php echo $self_url;?>?provider=github&amp;url=<?php echo $urlencode;?>" class="sns-icon social_link sns-github" 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-payco .ico {background-position:-116px 0}
아래에 추가
.sns-wrap-reg .sns-github {border-color:#000000}
.sns-wrap-reg .sns-github .ico {background-position:-174px 0}


5-3. / mobile / skin / social / style.css
.sns-wrap-over .sns-payco {background:url('./img/sns_payco_s.png') no-repeat}
아래에 추가
.sns-wrap-over .sns-github {background:url('./img/sns_github_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 #9d0800}


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}


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 #9d0800}



참고자료
https://sir.kr/qa/376753