SNS [G5][Line] 라인 로그인 추가(등록)하기
페이지 정보
첨부파일
-
sns_line_s.zip (1.8K)
45회 다운로드 | DATE : 2020-11-19 14:32:24 -
sns_logo2.zip (12.0K)
42회 다운로드 | DATE : 2020-12-18 18:59:40 -
Line.zip (2.4K)
66회 다운로드 | DATE : 2020-11-23 17:41:52
본문
그누보드에 소셜로그인 라인을 적용하는 방법을 정리합니다
한국에서는 카카오톡이 대다수를 사용하지만, 일본과 동남아권에서는 라인의 사용량이 엄청납니다
그에 따라 라인으로 로그인하는 것을 정리해봅니다
[ 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개 이상 입력할때 입력항목에 엔터를 치면 입력칸이 늘어납니다
Callback 주소에는 ? 가 포함되면 에러가 발생합니다
그누보드 환경설정에서 보이는 주소에서 ? 앞까지만 입력하세요
8. 설정이 정상적으로 되었다면 Developing 을 Publish 로 변경합니다
이것은 충분하게 테스트하고 정식 서비스 할 때 누르세요
[ 구조 ]
그누보드5.4
├ adm
│ ├ css
│ │ └ admin.css ... 수정
│ └ img
│ └ social
│ ├ sns_logo2.png ... 신규
│ └ sns_logo2_not.png ... 신규
├ mobile
│ └ skin
│ └ social
│ ├ img
│ │ ├ sns_logo2.png ... 신규
│ │ └ sns_logo2_not.png ... 신규
│ └ style.css ... 수정
├ plugin
│ └ social
│ ├ Hybrid
│ │ └ Providers
│ │ └ Line.php ... 신규
│ └ includes
│ └ functions.php ... 수정
└ skin
└ social
├ img
│ ├ sns_logo2.png ... 신규
│ └ sns_logo2_not.png ... 신규
└ style.css ... 수정
[ 공통 ]
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
한국에서는 카카오톡이 대다수를 사용하지만, 일본과 동남아권에서는 라인의 사용량이 엄청납니다
그에 따라 라인으로 로그인하는 것을 정리해봅니다
[ 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개 이상 입력할때 입력항목에 엔터를 치면 입력칸이 늘어납니다
Callback 주소에는 ? 가 포함되면 에러가 발생합니다
그누보드 환경설정에서 보이는 주소에서 ? 앞까지만 입력하세요
8. 설정이 정상적으로 되었다면 Developing 을 Publish 로 변경합니다
이것은 충분하게 테스트하고 정식 서비스 할 때 누르세요
[ 구조 ]
그누보드5.4
├ adm
│ ├ css
│ │ └ admin.css ... 수정
│ └ img
│ └ social
│ ├ sns_logo2.png ... 신규
│ └ sns_logo2_not.png ... 신규
├ mobile
│ └ skin
│ └ social
│ ├ img
│ │ ├ sns_logo2.png ... 신규
│ │ └ sns_logo2_not.png ... 신규
│ └ style.css ... 수정
├ plugin
│ └ social
│ ├ Hybrid
│ │ └ Providers
│ │ └ Line.php ... 신규
│ └ includes
│ └ functions.php ... 수정
└ skin
└ social
├ img
│ ├ sns_logo2.png ... 신규
│ └ sns_logo2_not.png ... 신규
└ style.css ... 수정
[ 공통 ]
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
댓글목록