워드프레스에서 네이버와 카카오 로그인 사용하기

저번 시간에는 워드 프레스 소셜 로그인 사용하기( 아래 url )

http://sir.kr/gnucommerce_tip/5 

에서 Wordpress Social Login 플러그인을 통해서 페이스북, 구글, 트위터 등을 설정하는 방법에 대해서 알아 보았습니다.

여기서는 추가로 네이버와 카카오 로그인을 할 수 있는 방법에 대해 알아보겠습니다.

Wordpress Social Login 는 아쉽지만 기본적으로 네이버 와 카카오 로그인 기능을 제공하지 않습니다.

그래서 네이버 와 카카오 로그인 기능을 제공하는 확장 플러그인을 만들어 보았습니다.

이 게시물에 올려있는 첨부파일을 다운 받으셔서 압축을 푸시고, 설치 하시면 되겠습니다.

( 2016-01-28 워드프레스 공식 플러그인에 등록되었으니, 관리자 메뉴 플러그인 -> 플러그인 검색해서 설치하시면 됩니다.

 )

이 확장 플러그인의 참고 자료는 아래 url의 내용을 토대로 만들어졌습니다.

http://www.usefulparadigm.com/2014/07/15/adding-kakao-login-to-wordpress/ 

확장 플러그인의 이름은 WordPress Social Login extends NAVER 이며,

먼저 플러그인을 활성화 시키고 ( 아래 이미지 참고 )

활성화 하셨다면, 설정 -> wp social login 을 클릭하시면 아래 이미지와 같이 나오실 겁니다.

우측 중간에 Add more providers 화면에 보시면 네이버 아이콘과 카카오톡 아이콘이 있습니다.

그 두 아이콘을 클릭하시면, 네이버 Application Key, Application Secret 과 카카오톡 Application Key, Application Secret 입력하는 란이 화면에 추가가 되실겁니다. ( 아래 이미지 참고 )

이제 네이버 Application Key, Application Secret 과 카카오톡 Application Key, Application Secret 키 만 발급 받으면 됩니다. 먼저 네이버 연결부터 해 보도록 하겠습니다.

1 ) 네이버 아이디로 연결하기 

먼저 아래 이미지와 같이 where do I get this info? 를 누르셔서 화면의 설명문을 참고 합니다.

1. https://nid.naver.com/devcenter/register.nhn 을 방문합니다.

3. 새 애플리케이션 등록에서 애플리케이션 이름을 등록합니다.( 아래 이미지 참고 )

4. 서비스 url에는 위의 이미지에 나와 있는 도메인과 Callback URL 을 네이버 새 애플리케이션 등록에 입력합니다. ( 모바일에도 동일하게 입력합니다. )

5. 다 등록하셨다면

네이버 아이디로 로그인 홈페이지 -> 내 애플리케이션 -> 네이버 아이디로 로그인 개요에서

Client ID 와 Client Secret 을 복사해서

그리고 나서 실 서비스로 적용하려면 네이버 아이디 -> 일반 메뉴에서 

API 상태 를 서비스 적용으로 설정해 놓습니다. ( 아래 이미지 참고 )

참고로 네이버 애플리케이션에 등록하는 방법에 대해서는 아래 url에 정말 자세히 나와 있습니다.

https://nid.naver.com/devcenter/docs.nhn?menu=Register 

2 ) 카카오 로그인 연결하기

워드프레스 카카오 설정하는 페이지에서 where do I get this info? 를 누르셔서 설명문을 참고합니다. (아래 이미지 참고 )

1. https://developers.kakao.com/apps/new 을 방문합니다.

2. 앱 만들기에서 이름을 입력후 create를 클릭합니다.

3. 설정 -> 일반 메뉴에 들어가시면, 플랫폼 추가 버튼이 보이실겁니다. 플랫폼 추가에 웹을 선택후 사이트 도메인을 입력합니다. ( 아래 이미지 참고 ) 

4. 플랫폼에 웹을 추가하셨다면, 사이트 도메인 및 Redirect Path 입력합니다.

Redirect Path는 워드프레스 kakao 설명문에 있던 Callback URL 을 참고하여 입력하시면 됩니다만, 주의하실 점은 도메인을 지우고 입력하셔야 합니다.

예 ) 설명문에 

http://thisgun.phps.kr/wordpress/wp-content/plugins/wordpress-social-login/hybridauth/?hauth.done=Kakao 

이렇게 나와 있었다면 아래와 같이 도메인을 지우고 입력하셔야 합니다. 

/wordpress/wp-content/plugins/wordpress-social-login/hybridauth/?hauth.done=Kakao 

5. 다 입력하셨다면 이제 REST API 키를 확인하여( 위 이미지 빨간 표시 부분 ),  

워드프레스 kakao Application ID 에 입력합니다.

카카오 로그인은 다른 서비스와 달리 Application Secret 키를 요구하지 않기 때문에, Application Secret 란에는 아무 값이나 입력해 주시면 되겠습니다.

위의 과정을 다 마치셨다면, 이제 로그인을 시험해 봅시다.