소셜로그인 추가하기 - GitHub 로그인 (2020-11-21 07:44 수정) 정보
그누보드5 소셜로그인 추가하기 - 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&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&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&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&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&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&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
1
댓글 4개
그누보드 깃헙에도 처리된 이슈나 풀리퀘스트는 클로즈했으면 좋을 것 같습니다.
위 내용중 오류 피드백 부탁드려도 될까요?
쇠뿔도 단김에 빼라고 했는데, 오늘 부터 시작해 봐야 겠습니다.
