카카오 로그인 연동은 의외로 간단하다.

 

카카오 로그인 버튼을 커스터마이징 하게 설정하기 때문에 따로 버튼 생성은 하지 않겠다.

 

일단 카카오 개발자 센터에 들어가서 기본적인 세팅부터 해야한다.

 

1. 카카오 개발자 센터에 접속. https://developers.kakao.com/

2. 우측 상단의 로그인 버튼을 눌러 카카오 계정으로 로그인.

3. 앱 만들기 클릭

4. 이름과 회사명 입력 후 앱 만들기 버튼 클릭

5. 우측 메뉴 사용자 관리 클릭

6. 사용자 관리 활성화 버튼 클릭

7. 프로필 정보 수집 목적란에 "소셜로그인에 사용" 입력

8. 카카오계정(이메일)란의 수집조건을 '연결시 선택'으로 설정

9. 카카오계정(이메일)란의 수집목적을 '중요정보 전달 및 로그인 계정용으로 사용'으로 설정

10. 하단의 저장버튼 클릭

11. 좌측의 '일반' 클릭

12. 중앙 우측의 '플랫폼 추가' 버튼 클릭

13. '웹' 클릭

14. 내 사이트의 도메인을 입력. 사용하는 도메인이 여러개면 모두 입력

15. 추가 버튼을 클릭

16. 네이티브 앱 키, REST API 키 값을 기억해둠

 

여기까지하면 기본적인 세팅 및 설정을 완료한 것이다.

카카오 로그인은 네이버 로그인처럼 따로 검수등을 거치지 않아도 된다.

 

<a href="https://kauth.kakao.com/oauth/authorize?client_id=자신의 rest api key&redirect_uri=내리다이렉트url&response_type=code">카카오 로그인</a>

 

버튼만 생성해주고 api url만 걸어주면 끝이다.

 

그리고 나서 해야할 일이 아주 많아지는데

리다이렉트 url 파일로 이동해서 작업을 진행해야한다.

 

$get_data = $_GET;

 

$shell_string = "curl -v -X POST https://kauth.kakao.com/oauth/token -d 'grant_type=authorization_code' -d 'client_id=내 REST API KEY' -d 'redirect_uri=http://".$_SERVER['HTTP_HOST']."/oauth' -d 'code=".$get_data['code']."'";

$output = shell_exec($shell_string);

$token_json = json_decode($output, true);

 

$kakao_email_check = 0;
if (@!$token_json['access_token']) {
    echo "<script>alert('아이디 정보가 없습니다. 재시도 해주세요.');</script>";

    exit();
} else {
    $shell_string = "curl -v -X POST https://kapi.kakao.com/v2/user/me -H 'Authorization: Bearer ".$token_json['access_token']."' -d 'property_keys=[\"kakao_account.email\"]'";

$user_info = shell_exec($shell_string);

 

$user_info_json = json_decode($user_info, true);

 

if (!@$user_info_json['kakao_account']['email'];) {
    $shell_string = "curl -v -X POST https://kapi.kakao.com/v1/user/unlink -H 'Authorization: Bearer ".$token_json['access_token']."'";
    shell_exec($shell_string);

    alert('필수 정보에 동의하지 않으셨습니다. 로그인을 재시도 해주세요.', '_login');
}

 

print_r($user_info_json);

 

이렇게 하면 $user_info_json에 카카오 계정 정보가 담긴 것을 볼 수 있다.

저 $user_info_json에서 데이터를 뽑아서 회원가입을 시키든 로그인을 시키든 활용하면 될 것이다.




일단
 https://developers.naver.com/apps/#/register

로 이동하여 API를 신청해준다.

그러면 아이디와 시크릿값을 받을 것이다.

PHP로 설명을 하겠다.
<?php
// 한글깨짐 방지
header("Content-Type: text/html; charset=UTF-8");
// 발급받은 클라이언트 아이디
client_id = "Client_ID";
// 발급받은 클라이언트 시크릿 값
$client_secret = "Client_Secret";
// 검색어 url 형식에 맞게 엔코딩
$encText = urlencode("검색어");
// JSON을 이용해서 검색
$url = "https://openapi.naver.com/v1/search/local.json?query=".$encText;
// XML을 이용해서 검색
$url = "https://openapi.naver.com/v1/search/local.xml?query=".$encText;

/*
블로그 검색 = "https://openapi.naver.com/v1/search/blog.json=".$encText;
뉴스 검색 = "https://openapi.naver.com/v1/search/news.json=".$encText;
책 검색 = "https://openapi.naver.com/v1/search/book.json=".$encText;
성인 검색어 판별 = "https://openapi.naver.com/v1/search/adult.json=".$encText;
백과사전 검색 = "https://openapi.naver.com/v1/search/encyc.json=".$encText;
영화 검색 = "https://openapi.naver.com/v1/search/movie.json=".$encText;
카페 검색 = "https://openapi.naver.com/v1/search/cafeatricle.json=".$encText;
지식인 검색 = "https://openapi.naver.com/v1/search/kin.json=".$encText;
지역 검색 = "https://openapi.naver.com/v1/search/local.json=".$encText;
오타변환 검색 = "https://openapi.naver.com/v1/search/errata.json=".$encText;
웹문서 검색 = "https://openapi.naver.com/v1/search/webkr.json=".$encText;
이미지 검색 = "https://openapi.naver.com/v1/search/image.json=".$encText;
쇼핑 검색 = "https://openapi.naver.com/v1/search/shop.json=".$encText;
전문자료 검색 = "https://openapi.naver.com/v1/search/doc.json=".$encText;

json 기반으로 작성됐으며 뒤에 .json을 .xml로 변경해주면 코드 그대로 변경사항 없이 사용가능하다.

*/

$is_post = false; 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $url); 
curl_setopt($ch, CURLOPT_POST, $is_post); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
$headers = array(); 
$headers[] = "X-Naver-Client-Id: ".$client_id; 
$headers[] = "X-Naver-Client-Secret: ".$client_secret; 
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); 
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); 
$response = curl_exec ($ch); 
$status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); 
echo "status_code:".$status_code."<br>"; 
curl_close ($ch);

if($status_code == 200) { 
    echo $response; 
} else { 
    echo "Error 내용:".$response; 
}






네이버 지도 API 이번에 V2지원을 종료하기에 V3로 작성하였다.

<div id="map" style="width:100%;height:400px;"></div>


<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=YOUR_CLIENT_ID&submodules=geocoder"></script>
<script> 
    //지도 타입 설정하는 곳 ( 아무것도 설정 하지 않으면 자동으로 Normal로 적용된다 ) 초기화할 때 설정할수 있다. 
    var map = new naver.maps.Map('map'); 
    // 위성지도를 사용하려면 MapTypeId 객체의 SATELLITE 상수 값을 사용합니다. 
    //var map = new naver.maps.Map('map', {mapTypeId: naver.maps.MapTypeId.SATELLITE}); 
    // 위성지도에 지명을 적용하려면 MapTypeId 객체의 HYBRID 상수 값을 사용합니다. 
    //var map = new naver.maps.Map('map', {mapTypeId: naver.maps.MapTypeId.HYBRID}); 
    // 기본지도에 높낮이만 적용하려면 MapTypeId 객체의 TERRAIN 상수 값을 사용합니다. 
    //var map = new naver.maps.Map('map', {mapTypeId: naver.maps.MapTypeId.TERRAIN});
    var myaddress = '';// 도로명 주소나 지번 주소만 가능 (건물명 불가!!!!) 
    // 주소가 있는지 체크
    naver.maps.Service.geocode({address: myaddress}, function(status, response) { 
        if (status !== naver.maps.Service.Status.OK) { 
            return alert(myaddress + '의 검색 결과가 없거나 기타 네트워크 에러'); 
        }
        var result = response.result; 
        // 검색 결과 갯수: result.total 
        // 첫번째 결과 결과 주소: result.items[0].address 
        // 첫번째 검색 결과 좌표: result.items[0].point.y, result.items[0].point.x 
        var myaddr = new naver.maps.Point(result.items[0].point.x, result.items[0].point.y); 
        map.setCenter(myaddr); // 검색된 좌표로 지도 이동 
        // 마커 표시 ( 검색한 주소에 마커를 찍어둠 )
        var marker = new naver.maps.Marker({ 
            position: myaddr, 
            map: map 
        }); 
        // 마커 클릭 이벤트 처리 ( 클릭할 경우 infowindow에 등록된 이미지와 이름이 뜸 )

        naver.maps.Event.addListener(marker, "click", function(e) { 
            if (infowindow.getMap()) { 
            infowindow.close(); 
        } else { 
            infowindow.open(map, marker); 
        } 
    }); 

    // 마크 클릭시 인포윈도우 오픈 
    var infowindow = new naver.maps.InfoWindow({ 
    //띄워줄 이름과 사이트 이미지, 클릭했을경우 이동할 url 주소를 입력해주면 된다.
         content: '<h4> [네이버 개발자센터]</h4><a href="https://developers.naver.com" target="_blank"><img src="https://developers.naver.com/inc/devcenter/images/nd_img.png"></a>'
    });
});

'API > NAVER' 카테고리의 다른 글

[NAVER] 네이버 검색 API 적용  (0) 2017.12.12
[NAVER] 네이버 아이디 로그인 (네아로) API 적용  (0) 2017.11.28



https://developers.naver.com/products/login/api/



위 링크로 접속해서 네아로 오픈 API를 신청해야한다.


https://developers.naver.com/docs/login/api/



개발 가이드에 원하는 언어로 스크립트를 따간다.

필자는 자바스크립트로 적용을 했다.


HTML 

<div id="naver_id_login"></div> //원하는 곳에 넣으면 된다.
<script type="text/javascript"> 
   var naver_id_login = new naver_id_login("
오픈 API 발급 아이디", "처리페이지 URL"); 
   var state = naver_id_login.getUniqState(); 
   naver_id_login.setButton("green", 10, 40); // 버튼의 이미지 변경이다 
   naver_id_login.setDomain("도메인 주소"); 
   naver_id_login.setState(state); 
   naver_id_login.setPopup(); 
   naver_id_login.init_naver_id_login(); 
</script>


처리 페이지

<script type="text/javascript"> 
    //변경하지말고 두도록 하자
    var naver_id_login = new naver_id_login("YOUR_CLIENT_ID", "YOUR_CALLBACK_URL"); 


    naver_id_login.get_naver_userprofile("naverSignInCallback()"); 
    function naverSignInCallback() {
        //넘어온 토큰 값이랑 네이버 메일을 전송받고 다시 넘겨줌 
       opener.setRegisterValue(naver_id_login.oauthParams.access_token, naver_id_login.getP  rofileData('email'), window); 
        //닉네임과 나이
        //naver_id_login.getProfileData('nickname')); 
       //(naver_id_login.getProfileData('age'));
    } 
</script>

필자는 로그인 적용 후에 나중에 네아로를 적용한 것이라서 아이디와 토큰을 재 전송해주는 것
처리 페이지에서 바로 처리해도 됨.

로그인 체크 페이지
function setRegisterValue(token, email, winObj){ 
     //네아로 페이지 닫기
     winObj.close();

     var form = document.register_write_form; 

     // 원하는 곳에 토큰과 메일 아이디 삽입
    $("#token").val(token); 
    $("#email").val(email); 
    
     // 삽입 후에 form 전송
     form.submit(); 
}

'API > NAVER' 카테고리의 다른 글

[NAVER] 네이버 검색 API 적용  (0) 2017.12.12
[NAVER] 네이버 지도 V3 API 적용하기  (0) 2017.11.28

+ Recent posts