[G5][Apple] 애플로 로그인 추가(등록)하기 > 기술자료

• 목록

애플(Apple)로 로그인을 그누보드5에 적용하기 위한 절차입니다

다른 소셜은 통상 2개 인증키를 활용하는 것에 반해, 
애플 로그인은 3개의 인증키와 1개의 인증파일을 함께 사용합니다

인증키를 발급받는 일련의 과정이 다소 복잡하고 혼동스럽게 느껴지는데 그것에 대한 정리를 하나씩 하겠습니다


본 강좌는 https://sir.kr/cmall/1607259007  의 제품을 적용하는 것으로 작성되었습니다


[ APPLE 개발자센터 ]

▶ Apple Developer 계정 생성하기 (클릭)
▶ 기업용 Apple 개발자 계정 생성 가이드 (클릭)
▶ 개인용 Apple 개발자 계정 생성 가이드 (클릭)


1. 개발자 로그인  
https://developer.apple.com/


2. 


[ 구조 ]
그누보드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
  │        │          └ Apple.php   ( 추가 )
  │        ├ includes
  │        │   └ functions.php   ( 수정 )
  │        └ vendor   ( 추가 )
  │              ├ bin
  │              │  └ var-dump-server    ( 소프트링크 )
  │              │        ( ../symfony/var-dumper/Resources/bin/var-dump-server )
  │              ├ ...
  │              ├ symfony
  │              │  ├ ...
  │              │  └ var-dumper
  │              │        ├ ...
  │              │        ├ Resources
  │              │        │    ├ bin
  │              │        │    │  └ var-dump-server
  │              │        │    ├ ...
  │              │        ├ ...
  │              ├ ...
  ├ skin
  │  └ social
  │       ├ img
  │       │  ├ sns_logo2.png   ( 추가 )
  │       │  └ sns_logo2_not.png   ( 추가 )
  │       └ style.css   ( 수정 )
  └ common.php   ( 수정 )


[ 공통 ]

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_apple_bundle_id'])) {
    sql_query(" ALTER TABLE `{$g5['config_table']}`
                    ADD `cf_apple_bundle_id` VARCHAR(255) NOT NULL AFTER `cf_line_secret`,
                    ADD `cf_apple_team_id` VARCHAR(255) NOT NULL AFTER `cf_apple_bundle_id`,
                    ADD `cf_apple_key_id` VARCHAR(255) NOT NULL AFTER `cf_apple_team_id`,
                    ADD `cf_apple_key_file` TEXT NOT NULL AFTER `cf_apple_key_id` ", 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_apple" value="apple" <?php echo option_array_checked('apple', $config['cf_social_servicelist']); ?> >
                    <label for="check_social_apple">애플 로그인을 사용합니다</label>
                    <div>
                    <h3>애플 CallbackURL</h3>
                    <p><?php echo get_social_callbackurl('Apple'); ?></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_apple_team_id">애플 Team ID (App ID Prefix)</label></th>
            <td><input type="text" name="cf_apple_team_id" value="<?php echo $config['cf_apple_team_id']; ?>" id="cf_apple_team_id" class="frm_input" size="40"> <a href="http://developers.apple.com/" target="_blank" class="btn_frmline">앱 등록하기</a></td>
            <th scope="row"><label for="cf_apple_bundle_id">애플 Bundle ID (Service IDs)</label></th>
            <td><input type="text" name="cf_apple_bundle_id" value="<?php echo $config['cf_apple_bundle_id']; ?>" id="cf_apple_bundle_id" class="frm_input" size="45"></td>
        </tr>
        <tr>
            <th scope="row"><label for="cf_apple_key_id">애플 Key ID</label></th>
            <td><input type="text" name="cf_apple_key_id" value="<?php echo $config['cf_apple_key_id']; ?>" id="cf_apple_key_id" class="frm_input" size="40"></td>
            <th scope="row"><label for="cf_apple_key_file">애플 Key File</label></th>
            <td><textarea name="cf_apple_key_file" id="cf_apple_key_file" style="height:85px;"><?php echo $config['cf_apple_key_file']; ?></textarea></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_apple_bundle_id', 'cf_apple_team_id', 'cf_apple_key_id');


2-2. / adm / config_form_update.php
                cf_payco_secret = '{$_POST['cf_payco_secret']}',

아래에 내용 추가

                cf_apple_bundle_id = '{$_POST['cf_apple_bundle_id']}',
                cf_apple_team_id = '{$_POST['cf_apple_team_id']}',
                cf_apple_key_id = '{$_POST['cf_apple_key_id']}',
                cf_apple_key_file = '{$_POST['cf_apple_key_file']}',


3. / common.php
그누보드 5.4.1.5 이후 일때만 ( https://www.happyjung.com/lecture/2969 참고 )

// 본인인증 또는 쇼핑몰 사용시에만 secure; SameSite=None 로 설정합니다.
if( $config['cf_cert_use'] || (defined('G5_YOUNGCART_VER') && G5_YOUNGCART_VER ) {

를 아래와 같이 변경

// 본인인증 또는 쇼핑몰 사용시에만 secure; SameSite=None 로 설정합니다. 애플로그인 사용하려고 true 설정
if( $config['cf_cert_use'] || (defined('G5_YOUNGCART_VER') && G5_YOUNGCART_VER) || true ) {


4. / plugin / social / popup.php
if( isset( $_REQUEST["redirect_to_idp"] ) ){

를 아래와 같이 변경

if( $provider_name == "Apple") {
  header("Location: ".G5_PLUGIN_URL."/social/apple");
} else if( isset( $_REQUEST["redirect_to_idp"] ) ){


5-1. / plugin / social / includes / functions.php
<?php
if (!defined('_GNUBOARD_')) exit;

아래에 내용 추가

// 애플로그인 key 암호화 기능때문에 추가
include_once(G5_PLUGIN_PATH.'/social/vendor/autoload.php');


5-2. / plugin / social / includes / functions.php

$r['Payco'] = array(
....
                );

아래에 추가

        // Apple
        $r['Apple'] = array(
            "enabled" => option_array_checked('apple', $config['cf_social_servicelist']) ? true : false,
            "keys" => array(
                "id" => $config['cf_apple_bundle_id'],
                "secret" => array(
                    "team_id" => $config['cf_apple_team_id'],
                    "key_id" => $config['cf_apple_key_id'],
                    "key_content" => $config['cf_apple_key_file']
                ),
            ),
            "scope" => "name email",
            "verifyTokenSignature" => true,
            "redirect_uri" => get_social_callbackurl('apple'),
            "trustForwarded" => false
            );


6. 첨부파일 sns_logo.zip 압축 해제후 업로드
/ adm / img / social / sns_logo2.png
/ adm / img / social / sns_logo2_not.png


7-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}


7-2. / adm / css / admin.css
.sns-wrap-over .sns-kakao {border-color:#f2df00}

아래에 추가

.sns-wrap-over .sns-github {border-color:#000000}
.sns-wrap-over .sns-github .ico {background-position:-174px 0}
.sns-wrap-over .sns-line {border-color:#00bf00}
.sns-wrap-over .sns-line .ico {background-position:-204px 0}
.sns-wrap-over .sns-apple {border-color:#000000}
.sns-wrap-over .sns-apple .ico {background-position:-232px 0}


7-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-github .txt {border-left:1px solid #333}
.sns-wrap-32 .sns-apple .txt {border-left:1px solid #333}




[ PC ]

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


1-2. 첨부된 sns_logo.zip  압축해제후 업로드
/ mobile / skin / social / img / sns_logo2.png
/ mobile / skin / social / img / sns_logo2_not.png


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

        <?php if( social_service_check('apple') ) {     //애플 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url; ?>?provider=apple&amp;url=<?php echo $urlencode; ?>" class="sns-icon social_link sns-apple" 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('apple') ) {     //애플 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url; ?>?provider=apple&amp;url=<?php echo $urlencode; ?>" class="sns-icon social_link sns-apple" title="애플">
            <span class="ico"></span>
            <span class="txt">애플 로그인</span>
        </a>
        <?php }     //end if ?>


4. / skin / social / social_register.skin.php  적당한 위치에

        <?php if( social_service_check('apple') ) {     //애플 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=line&amp;url=<?php echo $urlencode;?>" class="sns-icon social_link sns-apple" 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-github {border-color:#000000}
.sns-wrap-reg .sns-github .ico {background-position:-174px 0}
.sns-wrap-reg .sns-line {border-color:#00bf00}
.sns-wrap-reg .sns-line .ico {background-position:-204px 0}
.sns-wrap-reg .sns-apple {border-color:#000000}
.sns-wrap-reg .sns-apple .ico {background-position:-232px 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-github {background:url('./img/sns_github_s.png') no-repeat}
.sns-wrap-over .sns-line {background:url('./img/sns_line_s.png') no-repeat}
.sns-wrap-over .sns-apple {background:url('./img/sns_apple_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-github {background-color:#000;background-position:5px 5px;border-bottom:1px solid #000}
#sns_login .sns-line {background-color:#00bf00;background-position:5px 5px;border-bottom:1px solid #1ea505}
#sns_login .sns-apple {background-color:#000;background-position:5px 5px;border-bottom:1px solid #000}


5-4. / skin / social / style.css
#sns_login .txt:hover {background:rgba(0,0,0,0.07)}
아래에 추가
#sns_login .sns-github .txt {border-left:1px solid #333}
#sns_login .sns-apple .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:#00bf00;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('apple') ) {     //애플 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=apple&amp;url=<?php echo $urlencode;?>" class="sns-icon social_link sns-apple" 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('apple') ) {     //애플 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=apple&amp;url=<?php echo $urlencode;?>" class="sns-icon social_link sns-apple" 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('apple') ) {     //애플로그인을 사용한다면 ?>
            <a href="<?php echo $self_url;?>?provider=apple&amp;url=<?php echo $urlencode;?>" class="sns-icon social_link sns-apple" 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-github {border-color:#000000}
.sns-wrap-reg .sns-github .ico {background-position:-174px 0}
.sns-wrap-reg .sns-line {border-color:#00bf00}
.sns-wrap-reg .sns-line .ico {background-position:-204px 0}
.sns-wrap-reg .sns-apple {border-color:#000000}
.sns-wrap-reg .sns-apple .ico {background-position:-232px 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-github {background:url('./img/sns_github_s.png') no-repeat}
.sns-wrap-over .sns-line {background:url('./img/sns_line_s.png') no-repeat}
.sns-wrap-over .sns-apple {background:url('./img/sns_apple_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 #343434}
#sns_login .sns-line {background-color:#00bf00;background-position:5px 5px;border-bottom:1px solid #1ea505}
#sns_login .sns-apple {background-color:#000000;background-position:5px 5px;border-bottom:1px solid #343434}


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}
#sns_login .sns-apple .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 #343434}
#sns_register .sns-line {background-color:#00bf00;background-position:5px 5px;border-bottom:1px solid #136d02}
#sns_register .sns-apple {background-color:#000000;background-position:5px 5px;border-bottom:1px solid #343434}




참고자료
https://sir.kr/pg_lecture/762
 
참고자료
https://ecsupport.cafe24.com/article/쇼핑몰-관리자/5/2352/
https://sir.kr/cm_free/1552200
https://kbjtown.com/2020/07/14/passport-apple-login/