워드프레스에서 네이버와 카카오 로그인 사용하기 > 그누커머스 팁자료실

그누커머스 팁자료실

그누커머스와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

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

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

본문

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

 

http://sir.kr/gnucommerce_tip/5 

 

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

 

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


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

 

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

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

 

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

 

80da2af8912044c65c3be5e0a97a90a1_1453946382_8434.png
 

 )

 

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

 

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

 

 

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

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

 

c99b755fc0a1d3138d6985b02b56fc23_1453183628_8865.png
 

 

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

 

 

c99b755fc0a1d3138d6985b02b56fc23_1453183818_2468.png
 

 

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

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

 

 

c99b755fc0a1d3138d6985b02b56fc23_1453184040_2371.png
 

 

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

 

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

 

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

 

 

c99b755fc0a1d3138d6985b02b56fc23_1453184436_8566.png
 

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

 

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

 

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

 

 

c99b755fc0a1d3138d6985b02b56fc23_1453184713_5109.png
 

 

c99b755fc0a1d3138d6985b02b56fc23_1453185115_1591.png
 

5. 다 등록하셨다면

 

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

 

Client ID 와 Client Secret 을 복사해서


워드프레스 홈페이지 네이버 Application ID 과 Application Secret 입력란에 입력을 해 놓습니다.

c99b755fc0a1d3138d6985b02b56fc23_1453185600_8434.png

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

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

 

c99b755fc0a1d3138d6985b02b56fc23_1453185741_4277.png 

 

 

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

 

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

 

 

 

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

 

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

 

c99b755fc0a1d3138d6985b02b56fc23_1453186085_3564.png
 

 

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

 

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

 

c99b755fc0a1d3138d6985b02b56fc23_1453185862_0396.png

c99b755fc0a1d3138d6985b02b56fc23_1453188468_6215.png


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

 

c99b755fc0a1d3138d6985b02b56fc23_1453188485_8519.png
 

 

c99b755fc0a1d3138d6985b02b56fc23_1453186476_6581.png
 

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 

 

c99b755fc0a1d3138d6985b02b56fc23_1453186915_6855.png 

 

 

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

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

 

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

 

 

 

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

 

c99b755fc0a1d3138d6985b02b56fc23_1453187263_1859.png
 

추천4

댓글 전체

저는 안되용 ㅠㅠ

error = "redirect_uri_mismatch", error_description = "잘못된 리디렉션 : http://wpkorea.dothome.co.kr/wp-content/plugins/wordpress-social-login/hybridauth/?hauth.done=Kakao가 다음 중 하나와 일치하지 않습니다. 카카오 개발자 사이트의 앱 설정을 확인하십시오. "
이렇게 멋진 플러그인을 만들어 주셔서 감사합니다. 질문이 있는데 카카오 계정 로그인을 할때 워드프레스 사용자
 관리페이지에서 등록된 카카오 계정을 보면 회원 아이디나 이메일 정보를 못가져오네요 모두 "kakao_user_" 이렇게만 표시됩니다. 이 문제를 어떻게 해결해야 할까요?
카카오와 트위터에서는 이메일을 못받아 옵니다.

이메일 정보가 없는 경우에는 질문과 같이 아무 이메일 형식으로 데이터가 들어가게 됩니다.

Wordpress Social Login 설정에 보시면

설정 -> WP Social Login -> Bouncer 에서 Require E-mail 을 Yes 로 설정시,

소셜 회원가입시 이메일이 없으면 이메일을 입력하는 란이 생깁니다.
안녕하세요, 유용한 플러그인을 제작해주셔서 정말 감사합니다!!

아이콘 대신에 이름 (Kakao, Naver)등이 표시되게 사용하고 있는데, 이 표시되는 이름을 한글로 바꿀 수는 없을까요?
부모 플러그인이 wordpress social login 이니 해당 플러그인의 문서를 참고해 주세요.

http://miled.github.io/wordpress-social-login/widget.html
http://miled.github.io/wordpress-social-login/themes.html
4월 29일에 카카오에서 “카카오 로그인을 통하여 사용자의 이메일(Email) 정보를 얻는 기능을 추가했다”는 공지 메일이 왔습니다.
WordPress Social Login extends NAVER 플러그인을 그대로 써도 카카오에서 이메일 주소를 받아올 수 있을까요?
0.1.2 버전에 카카오 이메일 주소 받아올수 있도록 업데이트 했습니다.

카카오 개발자에서 이메일 받는 설정을 해야 받아올 수  있습니다.
아이고~ 감사합니다!!

방금 연동 테스트해 봤는데, 이메일주소는 잘 끌어오지만
워드프레스 계정 설정의 “공개적으로 표시할 이름:” 부분에는
여전히 기본값으로 실명이 표시되는 바람에
제 사이트에는 카카오 로그인을 적용하지 않는 게 좋겠다는 판단이 섰습니다.

(열심히 바꿔주셨는데 카카오 API가 워드프레스랑 궁합이 안좋은 건지... 안타깝습니다. API 개선될 때까지 기다려보겠습니다.^^)
카카오톡은 잘 되는데 네이버의 경우 리디렉션을 하는 도중에 그냥 빈화면으로 멈춰있는데, 어느부분을 확인해야하나요?

내 홈페이지에서 카카오톡 로그인시도 -> 카카오톡 로그인화면 -> 리디렉션 ->  내 홈페이지
내 홈페이지에서 네이버 로그인시도 -> 네이버 로그인화면 -> 리디렉션 -> 빈화면

리디렉션 후 주소는
/wp-login.php?action=wordpress_social_authenticated&provider=Naver&mode=login
이렇게 보입니다.

이러고는 그냥 빈화면이얘요, 좀 도와주세요.. T_T
안녕하세요!! 덕분에 네이버, 페이스북은 로그인 잘 하고 있는데요
카카오가 안되네요 ㅠ 오류화면 캡쳐본으로 한번 확인부탁드립니다.
카카오만 되면 딱 좋을텐데요 ㅠ
이제는 카카오에서 Client Secret 값을 사용해야 하는걸로 알고있습니다.
설정>일반에서 Client Secret 적용해주시고 소셜 플러그인에서 Application Secret (카카오의 Client Secret) 값을 입력해주시면 될것 같습니다.
안녕하세요. 좋은 플러그인 너무 감사드립니다.
카카오가 아래와 같은 에러가 발생이 되는데 확인 부탁드리겠습니다.
안녕하세요. 훌륭한 플러그인을 만들어 주셔서 감사합니다.^^
이 플러그인으로 로그인을 만들었는데 문제는 활성화는 되지만 아래 첨부된 이미지처럼 버튼이 우리가 흔히 생각하는 모양으로 안나오고 그저 검은색으로만 나옵니다.
이럴땐 어떻게 해야하는지 도저히 찾을 수 없어 문의 드립니다.
올려주신 플러그인 잘 적용했습니다.
다만 네이버 아이디 로그인 문제가 있는데 아마도 플러그인이 만들어질 당시엔 이메일주소가 기본정보에 포함되어 있었던듯 한데 지금은 추가권한으로 받아와야 합니다.
캡쳐화면처럼 이메일을 추가해도 정보를 받아오지 못하는데 어떻게 하면 좋을까요?
네이버 정책이 바뀌었습니다.

예전에는 무조건 이메일 받아올수 있었지만,

지금은 이메일을 추가권한 해 줘도, 회원 본인이 이메일 체크 안하면 이메일 데이터가 넘어 오지 않도록 바뀌었습니다.
안녕하세요, 좋은 플러그인 정말 감사합니다.

그런데 회원가입 후 다시 네이버 아이디로 로그인 시 문제가 있습니다.

처음 회원가입할때는 네이버 계정으로 정상적으로 진행이 됩니다만, 로그아웃 후 다시 네이버 계정으로 로그인 하려고 하면 에러가 발생해 로그인이 되지 않습니다 ㅠㅠ

혹시 해결 방법이 있을까요..
안녕하세요! 답변 정말 감사합니다.

403 forbidden error 가 발생합니다. 제 서버 설정 등에 문제가 있을까봐 이리저리 테스트를 해보았습니다만, 구글 등은 정상적으로 작동되는걸 확인했습니다.

참고가 되실까봐 홈페이지의 회원가입 링크는 https://goo.gl/v5UAgi 여기입니다.

처음에는 차이점이 구글이나 트위터의 경우 리다이렉트 되는 url 주소 마지막에 #이 붙는데, 카카오나 네이버 등은 #이 안붙는것같아 이게 문제인지.. 이리저리 해봤는데도 안되네요 ㅠㅠ
403 forbidden error 는 웹서버에서 일어나는 동작이기 때문에,

제가 봤을때는 nginx 설정이나 설치한 nginx 에 무슨 문제가 있는것 같네요...
제가 워드프레스 thisgun님이 만드신 워드프레스 플러그인
wsl-login-extends-naver

로 사용해서 naver 로그인까지는 되는데
로그인해서 제가 만든 워드프레스 사이트에 회원가입 하려고


이화면에 들어가서 새계정 만들기를 누르는데

계속 naver_user_  @example.com 로 가입이 됩니다. 해결방법좀 알려주실수 있나요?
한글도메인 사용하시면서 혹시 에러가 나시는 분들은 사이트 주소와 워드프레스 주소를 퓨니코드로 치시면 됩니다. 테스트하면서 겨우 해결 했습니다.~
안녕하세요, Authentication display 를 popup이 아닌 in page로 사용했을때, 페이스북, 카카오 구글은 창이 전체화면인 상태로 소셜로그인으로 이동됩니다만,

유독 네이버만 전체화면이 에서 작은 화면 로그인화면으로 전환되, 로그인하게 됩니다... 혹시 네이버도 전체화면상태에서 바로 로그인 창으로 전환되게 하는 방법이 있을까요? 감사합니다.
카카오톡 연동 안되시는 분들 보세요~~

에러내용: WordPress Social Login is not properly configured.
Kakao requires your application credentials.
What does this error mean ?
Most likely, you didn't setup the correct application credentials for this provider. These credentials are required in order for Kakao users to access your website and for WordPress Social Login to work.
Instructions for use can be found in the User Manual.

전에는 Application Secret 안넣어도 됏었던 같은데/ㅠ
위와 같이 하신 후 설정에서 설정 > 사용자관리, 설정 > 고급 들어가서 설정까지 해줘야 연동이 되네요.
Application ID : REST API 키 T
Application Secret : 설정 > 고급 에서 client secret 코드발급 후 넣어주세요.

WordPress Social Login extends NAVER  플러그인을 사용중인데
facebook 보다 naver 와 kakaotalk 로그인이 먼저 나오게 하려면 어디를 수정해야하나요:?
안내해주신 방법대로 진행해보았으나
버튼 클릭시 callback 까지는 정상동작 하는것 같은데 결국 이 화면에서 멈춰버립니다.
전체 25
그누커머스 팁자료실 내용 검색

회원로그인

진행중 포인트경매

  1. 그누보드5 다단계 메뉴 솔루션

    참여26 회 시작19.11.09 20:50 종료19.11.16 20:50

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT