워드프레스에 소셜 로그인 사용하기 > 그누커머스 팁자료실

그누커머스 팁자료실

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

워드프레스에 소셜 로그인 사용하기 정보

워드프레스에 소셜 로그인 사용하기

본문

워드프레스에 소셜 로그인을 사용하는 방법에 대해서 알아보겠습니다.

 

여기서는 Wordpress Social Login 플러그인을 예를 들어 설명하겠습니다.

 

https://wordpress.org/plugins/wordpress-social-login/

 

플러그인을 설치하면

 

아래 이미지와 같이 관리자 메뉴 -> 설정 -> WP Social Login 에

 

페이스북, 구글, 트위터 등 로그인을 설정하는 페이지를 볼수 있습니다.

 


d155482ecdeea7f8dcfe0632749206ca_1453095888_7689.png



먼저 페이스북에 연결하는 방법에 대해 알아보겠습니다.

1 ) 페이스북에 연결하는 방법

아래 이미지에서 빨간색으로 표시된 where do I get this info? 를 클릭하시면 아래 이미지와 같이 내용이 나타납니다.

d155482ecdeea7f8dcfe0632749206ca_1453096390_4807.png


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

2 . 화면 우측 상단의 add a New app 버튼을 누릅니다.( 아래 이미지와 같음 )

d155482ecdeea7f8dcfe0632749206ca_1453096576_2792.png

3. 웹사이트를 선택 후

d155482ecdeea7f8dcfe0632749206ca_1453096761_3901.png


원하시는 이름을 입력후


d155482ecdeea7f8dcfe0632749206ca_1453096926_2189.png


해당 카테고리를 선택합니다.


d155482ecdeea7f8dcfe0632749206ca_1453097006_2718.png


다음 아래와 같은 화면이 나오면 Tell us about your website

사이트 url을 입력후 

d155482ecdeea7f8dcfe0632749206ca_1453097571_8651.png

d155482ecdeea7f8dcfe0632749206ca_1453097580_9287.png

Next Steps 에서 skip to Developer Dashboard 를 클릭합니다.( 아래 이미지 참고)

d155482ecdeea7f8dcfe0632749206ca_1453097707_5383.png


4. 아래 이미지와 같이 빨간색으로 표시된 Settings 페이지로 이동하여

Basic 탭에서 파란색으로 표시된 부분 App Domains, Website 를 해당 사이트 환경에 맞게금 입력합니다.
( 설마 이미지 따라서 thisgun.phps.kr 이걸 그대로 따라하시는분은 없으시겠죠? 그러시면 앙대요~ )



d155482ecdeea7f8dcfe0632749206ca_1453098222_0267.png


5. 아래이미지와 같이 Status & Review 페이지로 이동하여 yes 로 설정되어 있는지 확인합니다.

d155482ecdeea7f8dcfe0632749206ca_1453098540_0282.png


6. 위의 과정을 다 하셨다면 dashboard 페이지로 이동하여 
App ID 와 App Secret 을 확인하여

Wordpress social login 페이지 설정에 입력해 줍니다. ( 아래 이미지 참고 )

d155482ecdeea7f8dcfe0632749206ca_1453098717_5232.png


2 ) 구글에 연결하는 방법

1. https://console.developers.google.com ​페이지로 이동합니다.

2. 프로젝트가 없다면 프로젝트를 만든후

d155482ecdeea7f8dcfe0632749206ca_1453099097_5724.png
3. 아래 이미지와 같이 API 사용 설정 및 키와 같은 사용자 인증 정보 가져오기를 클릭합니다.

d155482ecdeea7f8dcfe0632749206ca_1453099245_2571.png


4. 그런 다음 Google+ API를 클릭 후 API 사용설정이 안되어 있다면 사용함으로 활성화 시킵니다.( 아래 이미지 참고 )

d155482ecdeea7f8dcfe0632749206ca_1453099336_7133.png
d155482ecdeea7f8dcfe0632749206ca_1453099461_8317.png

5. 그런 다음 사용자인증정보 에서 새 사용자 인증 정보 클릭 후 

OAuth 클라이언트 ID 클릭합니다.

d155482ecdeea7f8dcfe0632749206ca_1453099902_7624.png

d155482ecdeea7f8dcfe0632749206ca_1453099955_6787.png

6. 그런 다음 클라이언트 ID 만들기 화면에서 

승인된 자바스크립트 원본과 승인된 리디렉션 URI 를

워드프레스 관리자메뉴 -> 설정 -> wp social login 구글 설명문 6번에 나와 있는 항목으로 입력합니다.

d155482ecdeea7f8dcfe0632749206ca_1453100258_3758.png

d155482ecdeea7f8dcfe0632749206ca_1453100274_343.png

d155482ecdeea7f8dcfe0632749206ca_1453100313_3589.png


7. 다 되셨다면 아래 이미지와 같이
클라이언트 ID 와 클라이언트 보안 비밀번호를 확인 후
클라이언트 ID는 Application ID 입력란에 입력,
클라이언트 보안 비밀번호는 Application Secret 에 입력합니다.

d155482ecdeea7f8dcfe0632749206ca_1453100600_4105.png

d155482ecdeea7f8dcfe0632749206ca_1453100776_0621.png


3 ) 트위터에 연결하는 방법

1 .  https://dev.twitter.com/apps ​로 이동합니다.

2. Create New App 버튼을 누룹니다.

3. Create an application 페이지에서 해당 정보를 입력합니다.

주의 하실 점은 Callback Url 입력란에 wp social login 트위터 설명란의

4. Provide this URL as the Callback URL for your application:  <<< 이 아래 url 부분을 입력하셔야 합니다.( 아래 이미지 빨간 표시 참고 )

d155482ecdeea7f8dcfe0632749206ca_1453101431_5914.png

d155482ecdeea7f8dcfe0632749206ca_1453101507_7739.png


5. 등록을 끝마쳤다면
Consumer Key( API KEY ) 와
Consumer Secret ( API Secret ) 키를 확인하여

각각 WP Social Login 트위터 Application Key 와 Application Secret 에 입력합니다.( 아래 이미지 참고 )

d155482ecdeea7f8dcfe0632749206ca_1453101979_5137.png



위의 과정을 다 하고 나면, 로그인 페이지에서 아래 이미지와 같이 소셜 로그인을 할수 있습니다.

d155482ecdeea7f8dcfe0632749206ca_1453102237_6456.png



다음에는 카카오 로그인과 네이버 로그인에 대해 알아보도록 하겠습니다.

추천
3

댓글 전체

안녕하세요. 워드프레스에 구글 로그인 기능을 넣으려 합니다. 근데, 제가 구글링을 통해 테마를 직접 만들었어요. 거기다 wp-login.php 를 redirect 시켜 커스텀 로그인 페이지를 만들어 사용하고 있습니다. 이런경우에  소셜로그인을 어떻게 넣을 수 있는지 조언을 구해도 될까요? ...
전체 25
그누커머스 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT