[ WordPress Social Login ] 워드프레스 소셜 로그인

//워드프레스 아바다 테마/Plugins/[ WordPress Social Login ] 워드프레스 소셜 로그인

1. 워드프레스용 소셜 로그인 플러그인 선택

워드프레스에서소셜 로그인을 할수 있는 플러그인은 여러가지가 있습니다.
그중에 많은사람들이 이용하는 플러그인은 (10만 다운로드이상)
Social Login
Social Login, Social Sharing, Social Commenting and more!
Social Login & Social Sharing by Janrain
WordPress Social Login
이 있습니다.

그런데 여기 순서 중에서 위에 세가지의 플러그인은 빌트인 플러그인이 아니고 중개 서비스를 받는 플러그인입니다. 무슨 말인고 하니. 플러그인을 만든 회사사이트에 회원으로 가입을 하면, 고유 id를 부여받고 이 id를 플러그인에 등록하고 사용하면서, 그 회사 사이트(플러그인)에 내가 접속하여 설계한 대로 로그인창을 디자인할수 있는 구조로 되어있습니다. 빌트인에 비해서 디자인 측면이 나 사후 관리 측면이 잘 되어있겠죠.

그와 반대로 네번째 플러그인은 나의 사이트에 플러그인을 등록하고 나의 사이트에서 직접 관리하며 운영하는 플러그인입니다. 오픈소스에 의해 만들어진 것이고, 앞선 업체들에 비해서 디자인은 뒤쳐지지만, 어차피 커스터마이징이 가능하기에 크게 불편한 것은 없고, 쓰기가 편리합니다.

일단 플러그인을 동작시키는 모양이 다를뿐 원리는 같으므로 저는 마지막 플러그인을 설치하려합니다.(어디 거치고 하는것이 번거롭고,귀찮아서요… ^^)

플러그인 이름 : WordPress Social Login

버전 : 2.1.6

권장 워드프레스 버전 : 3.5.2 이상

기능 : 소셜 네트워크 사용자명으로 워드프레스 사이트에 로그인과 코멘트를 할수 있음, 23개의 소셜네트워크 로그인 정보 사용가능

이용가능 공급자 : Facebook , Google , Yahoo , Twitter , Windows Live , Myspace , Foursquare , Linkedin , Tumblr , Steam , Twitch.tv , Last.fm , Instagram , Goodreads , AOL , Vkontakte , Stackoverflow , Github , 500px , Skyrock , Mixi.jp , Mail.ru , Yandex and Odnoklassniki.

2. API

소셜 로그인 플러그인은 로그인 정보를 제공하는 업체(구글,페이스북,트위터등 )의 웹 API 를 이용합니다.

웹 API 란?

구글성( Google Castle)과 네이버성(Naver Castle) 페이스북성(Facebook Castle) 트위터성(Tweeter Castle)들은 각자의 성안에 여러가지의 정보와 컨텐츠들을 가지고 있습니다.
그야말로 제국이죠. 이 제국이 가진 정보를 자신들의 이익과 자신들의 작업만을 위해서 사용할수 있습니다.

그리고 계속해서 자기들이 가진 정보와 컨텐츠를 필요로 하는 사람들을 성 안으로 끌어모아서 이용자를 넓히고 다시 제국을 크게 만들수 있습니다.

그러던 어느날 구글성이 선언을 합니다.

우리가 가지고 있는 정보를 모든 필요로 하는사람에게 공개하겠습니다.

우리가 가진 정보는 정말 많지만, 우선 지도정보와 이용자(로그인)정보를 공개합니다.

이용방법은 우리 구글성의 입구에 외부의 정보를 필요로하는곳으로 일정 정보를 내보낼수있는 ‘콘센트’를 만들어 주겠습니다.

A형 콘센트는 지도정보를 가져갈수 있고, 이 콘센트의 규격은 크기 xxx , 길이xxx , 높이 xxx , 구멍직경은 xxx, 전압 xxx, 전류 xxx 기타등등… 입니다.

B형 콘센트는 로그인 정보를 가져갈수 있고, 이 콘센트의 규격은 크기 xxx , 길이xxx , 높이 xxx , 구멍직경은 xxx, 전압 xxx, 전류 xxx 기타등등… 입니다.

하고 말입니다.

여기에서 구글성이 구글성입구에 자신들의 정보를 이용할수 있도록 연결할수있는 콘센트를 만들어 주는것, 이것이 웹 API입니다.

‘Application Programing Interface’ 어플리케이션을 프로그래밍 할수있는 접촉면(?) – 구축되어있는 유용한 정보나 프로그램들을 어플리케이션(다른 프로그램, 어플)에서 사용할수있도록 정보를 주고 받을때의 규칙을 정해놓은 명세서 같은것.

그럼 이 제공된 API 를 가지고서 무엇을 할수있을까요?

보통 저와 같이 평범한 사람들은 …”뭘 어쩌라는거야?” 할겁니다.

그런데 그 와중에 기회를 보는 ‘능력자’들이 있죠…

이 ‘능력자’들은 자체 로그인 기능만을 가지고있는 워드프레스와 구글성(Google Castle)의 B 콘센트를 연결하는 “연결선과 플러그”를 만듭니다.이 연결선과 플러그를 이용해서 구글성의 정보를 워드프레스로 가져와서 워드프레스내에서 글쓰고, 코멘트하고 할때의 회원의 정보로 활용하는거죠. 바로 구글계정을 이용해서 워드프레스에 접속할수 있는 플러그인을 만드는 것입니다.

이제 이 ‘능력자’들의 도움으로 워드프레스에 로그인 할때에도 구글에 등록된 아이디와 비밀번호로 입장할수 있게 되었습니다만… 여기서 한가지 조건이 있습니다.

구글은 자신들의 정보를 내어 주는 대신에…

누가 언제 어디서 어떻게 자신들의 데이터중 어떤것을 왜 활용하는지… 알고 싶어합니다.

만약 내가 사용하고자 하는 용도가 홈페이지제작(워드프레스 웹사이트)가 아니고 스마트폰에서의 어플 이라면, 단순히 어플을 다운받아서 설치하면(워드프레스의 플러그인설치와같이) 끝이 납니다.

내가 어디에사는 누구인지, 일부러 가르쳐 줄 필요가 없습니다.  왜냐하면 나의 스마트폰의 고유 기기번호 정보를 구글에 넘겨줌으로써(동의) 구글은 내가 어디에서 얼마의 정보를 사용하는지 상세하게 알수 있습니다.

그러나 웹사이트는조금 다르죠.. 스마트폰처럼 각각의 기기 고유 번호가 있는것도 아니고… 누가 얼마나 자신들의 정보를 사용하는지 추적하려면 ,,, 아무래도 힘들어 질겁니다. (그렇다고 불가능이야 하겠습니까마는)

그래서 구글성에서는 조건을 붙입니다. “우리의 로그인정보를 사용하는 콘센트에 플러그를 꽂으려거든 .. 누가 어디로 연결하기 위해서 꽂은 플러그인지 알수있도록 우리가 인정한 고유ID (APP ID) 와 인증키를 를 표시해야 한다.” 입니다.

이부분은 플러그인을 만든 ‘능력자’도 해줄수 없는 부분입니다. 이 플러그인을 사용하는 사용자… 바로 워드프레스로 홈페이지를 만드는 우리 자신이 직접해야 하는 일인거죠..

우리가 직접 구글성에 찾아가서

avada.kr 이라는 웹사이트에서 유저들이 너희가 제공하는 구글의 회원정보를 이용하여 , 우리 avada.kr에 로그인 할수 있도록 하려한다. 사용할 고유아이디와 인증키를 발급해 줘라

하는 겁니다.

이렇게 발급 받은 두개를 ‘능력자’가 만들어준 플러그인에 입력하면… 그때 부터는 구글이 정보의 이동을 허락해 주는 겁니다.

이때부터 구글은 자신들의 정보가 어떻게 사용되는지 알수 있겠죠?

3. 정리

대략 API와 플러그인의 관계를 설명해 보았습니다.

그럼 이제 WordPress Social Login 플러그인을 사용하기 위해서 우리가 해야할 일이 무엇인지… 알수 있을겁니다.

이 플러그인은 구글성의 정보뿐만 아니라 트위터성, 페이스북성, 링크드인성등 20여개의 성의 정보를 연결할있습니다.

이중에서 가장 많이 사용하는 구글과,트위터,페이스북에만 연결을 해보겠습니다.

(세번의 고유ID 와 인증키를 발급받는 과정이 필요하다는 말입니다. ^^;;)

그럼 이제 플러그인을 다운 받아 활성화 하고, 본격적인 설치로 넘어가겠습니다.

Wordpress Social Login 플러그인을 설치하고 ,어드민 대시보드 - 설정 - wp social login 메뉴에 들어가서 보면 첫번째 화면은 'Networks' 화면입니다.

화면의 페이스북,구글,트위터 의 'Enabled'를 'Yes' 로 하고, 각각의 'Application ID' 와 'Application Secret'을 얻으러 가 보겠습니다.

[페이스북 App ID 와 App Secret 얻는 방법]

f-1) 나의 페이스북 계정에 로그인 합니다.

f-2) 로그인된 화면에서 왼쪽 사이드바 아래에 개발자 의 ‘앱관리’버튼을 누릅니다.

facebook_app_01

f-3)위의 버튼이 보이지 않는다면 이 링크를 누르세요 link

 

f-3) 화면의 상단에 ‘앱’ 버튼을 누릅니다.
wp-social-login_12

f-4) 이전에 개발자로 등록한적이 없으면 “Register as a Developer”를 누르고, 이전에 개발자로 등록한적이 있으면 “Add a New App” 을 누릅니다.

f-5) “Register as a Developer”를 누른경우 페이스북의 정책과 개인정보취급방침에 동의하고, 전화 인증을 받습니다. 그후 다시 맨위에 “앱” 버튼을 누르면 “Create a New App (새앱 만들기)” 가 생깁니다. 여기서 나오는 화면에서 ‘Website’를 선택합니다.

facebook_app_03facebook_app_02

 

f-6) 오른쪽 상단 구석에 ‘Skip and Creat App’버튼을 누르면 아래의 화면이 뜹니다. Display Name 에 이 APP의 이름을 만들어 주고 ( Display Name 은 사이트 이름이나 회사이름을 적는 것이 좋습니다.) Namespaces는 공란으로 둡니다. 다른 앱의 테스트 버전으로 사용할건지에는 ‘아니오’ 체크하고, 카테고리 분류를 해 줍니다.

facebook_app_04

 

f-7) ‘보안확인’을 합니다. (시키는 대로)

f-8) 다음과 같은 화면이 나옵니다.
wp-social-login_14

f-9) 왼쪽 메뉴중에서 ‘설정’에 간후, ‘플랫폼 추가’를 누릅니다.

f-10) 나온 화면에서 ‘웹사이트’를 선택합니다.
wp-social-login_15

f-11) 나온 화면에서 ‘App Domains’ 에는 이 API를 사용할 사이트의 도메인을, ‘사이트 URL’ 에는 사이트의 전체주소를 입력하고, ‘연락 이메일’에 정보를 입력한후 , ‘변경내용저장’을 누릅니다.

wp-social-login_16

f-12) 왼쪽 메뉴중에 ‘Status & Review’로 가서 앱의 상태를 ‘활성화’ 합니다.

wp-social-login_17

f-13) “Make App Public? – Are you sure you want to make your app public? It will become available to everyone. ” 물음에 ‘확인’을 누릅니다.

f-14) 위사진의 왼쪽 메뉴중에서 ‘설정’으로 간후 ‘앱 ID’와 ‘보기’를 누른후에 나오는 ‘앱 시크릿 코드’를 가져다가 ‘워드프레스 소셜  로그인’ 플러그인에 붙여 넣습니다.

wp-social-login_18

[구글 App ID 와 App Secret 얻는 방법]

g-1) 나의 구글 계정에 로그인 합니다.
wp-social-login_21

g-2) 구글 검색창에 ‘구글 개발자’ 라고 넣고, 나오는 결과를 보고 ‘Google Developers’ 로 들어갑니다.

g-3) 아래 부분에서 ‘Developers Console’ 로 들어갑니다.
wp-social-login_22

g-4) 이전에 프로젝트를 만든적이 있다면, 프로젝트 선택 화면이 나오고, 프로젝트를 선택하면 ‘Developers Console’화면이 나오지만, 프로젝트를 만든적이 없다면 “CREATE PROJECT” 버튼이 보일겁니다. 누르면 됩니다.

g-5) “CREATE PROJECT” 누른경우에는 ‘Project name’에 이름하나 지어서 넣고, “Terms of Service (이용약관)” 에 체크하고, Project 를 만듭니다. (시간이 조금 걸립니다.)

wp-social-login_23

g-6) 만들어진 프로젝트를 선택해서 안으로 들어가면 아래와 같은 화면이 보입니다. ‘API & auth’ 메뉴로 들어갑니다.

wp-social-login_24

g-7) ‘Credentials’ 로 들어가서, “CREATE NEW CLIENT ID” 를 누릅니다.
wp-social-login_25

g-8) ‘Application type’은 “Web Application”을선택하고, ‘Authorized JavaScript origins’에는 나의 사이트 도메인주소를 , ‘Authorized redirect URI’에는 플러그인에서 가르쳐 주는 “Callback URL”을 입력합니다. ( 플러그인 설정화면의 ‘구글’영역의 “Where do I get this info?” 누르면 보입니다. – 아래 그림 참조 ) 모두입력 되었으면 “CREATE NEW CLIENT ID”버튼을 누릅니다.
wp-social-login_26

wp-social-login_27

g-9) ‘Client ID for web application’ 영역에 생성된 ‘Client ID’와 ‘Client secret’ 값을 복사해서 , wordpress social login 플러그인 설정화면의 “구글” 영역의 ‘Application ID’와 ‘Application Secret’에 넣습니다.

wp-social-login_28

wp-social-login_28(2)

g-10) ‘Consent screen’ 메뉴에 가서 프로덕트네임변경, 로고등 옵션기능을 추가할수 있습니다.

wp-social-login_29

 

[트위터 App ID 와 App Secret 얻는 방법]

t-1) 트위터 화면에서 로그인 하기전에 개발자 화면을 찾아 들어갑니다.

wp-social-login_31

t-2) 개발자 화면에서 자신의 계정으로 로그인합니다.

wp-social-login_32

t-3) ‘My Applications’ 으로 들어갑니다. 다시 로그인을 하라는군요
wp-social-login_34

t-4) 로그인하여 들어가면 새로운 앱을 만들수 있는 화면이 나옵니다. ‘Create New App’을 누릅니다. 나오는 화면에서 “Application Name”는 앱 이름을 정해주는 곳이고 사이트 이름이 적당하며, “Description”에 간단한 소개를 적습니다. 다음 “Website”와 “Callback URL”은 나의 사이트 url 을 적습니다.

wp-social-login_36

t-5) 아래에 동의를 하고, “Create Your Tweeter Application”을 누릅니다.

t-6) ‘API Keys’ 메뉴에 가면, 만들어진 “API Key”와 “API Secret”을 볼수 있습니다. 그대로 복사하여 WordPress Social Login 플러그인의 설정화면에 붙여 넣습니다.

wp-social-login_38

WordPress Social Login – Widget 탭

 

이 플러그인이 동작 하면서 로그인 화면이나 댓글 화면에 소셜로그인 아이콘이 보여지는것을 ‘위젯‘ 이라 하며, 기본적인 동작이나 상태를 Widget Tab 에서 관리합니다.

Basic Settings

  • Connect with caption : 위젯(소셜로그인 아이콘집합) 앞에 보여지게될 문구를 정의합니다. 기본값은 ” Connect with: ” 입니다.
  • Social icon set : 소셜 아이콘의 디자인을 선택합니다.
  • Users avatars : 소셜 로그인한 사람들의 아바타를 어떤것으로 할것인지를 정합니다. 기본값으로 할지, 소셜로그인 API에서 제공하는 유저의 대표 이미지를 사용할것인지를 정합니다.

Advance Settings

  • Redirect URL : 소셜 로그인 완료후 넘겨지게될 주소를 정의합니다. 빈 칸으로 두면(저장시 자동으로 site_url이 적힘) 로그했던 페이지 그대로 돌아가고, 빈칸이 아닌 특정 주소를 넣으면, 어느 페이지에서 로그인을 하던 항상 적혀있는 주소로 가서 화면이 열립니다.
  • Authentication flow : 소셜 로그인 창을 어떻게 띄울것인지를 정합니다. 전체창으로 할것인지. 팝업창으로 할것인지
  • Widget display : 위젯을 어디에 사용할 것인지를 정합니다. (로그인창과 코멘트 양쪽, 코멘트만, 로그인만 )
  • Notification : 이플러그인을 통해서 새로운 회원이 가입되면 알림을 관리자에게 보냅니다.

WordPress Social Login – Bouncer 탭

WSL Widget :

새로운 사용자 등록이나 인증을 할것인지 설정합니다. 워드프레스 기본 로그인과는 무관하고 WSL의 로그인 설정에만 영향을 줍니다.

Profile Completion :

소셜 로그인 으로 유저가 로그인 할때에, 소셜 계정에서 유저의 정보가 나의 사이트로 보내 집니다. 그러나 어떤 계정은 이메일 정보를 보내주지 않습니다. (예 트위터,링크드인)

그럴때 이메일 정보를 추가로 받을것인지 , 또한 유저의 사용자 이름 을 변경할수있도록 허용할 것인지를 설정합니다.

여기에서 이메일을 추가 받아서 프로파일을 완성하지 않아도 된다에 체크하면( 둘다 no ),  WSL은 해당사이트 계정으로 접속하는 유저의 정보중 이메일은  랜덤으로 생성합니다.

( 이 플러그인을 사용하는 입장에서  재차 이메일 정보를 묻는것은,  가급적 유저의 로그인을 간편하게 만들기 위한 취지에 부합하지는 않습니다. )

 

User Moderation :

WSL 을 통해서 새로 들어오는 유저의 사전검토를 할것인지를 결정합니다. 이메일확인과 관리자 검토가 필요한 경우는 ‘Theme My Login’ 플러그인이 필요합니다.

Membership Level :

WSL을 통해서 새로 들어오는 유저의 역할을 설정합니다.

Filters by emails domains name :

WSL을 통해서 들어오는 유저의 이메일 정보중 여기서 정의 한 이메일 도메인을 가지고 있다면, 설정한 문구와 함께 등록을 거절할수 있습니다.
(예 gmail.com [@ 없이] — 라고 정의 하면 계정정보중 gmail.com 을 가진 유저는 모두 등록이 거절됩니다.)

Filters by e-mail addresses :

WSL을 통해서 들어오는 유저의 이메일정보가 여기에 적힌 이메일이면 등록을 거절할수 있습니다.(한줄에 하나의 메일씩 정의)

Filters by profile urls :

WSL을 통해서 들어오는 유저의 정보중 특정 URL을 가지고 있으면 등록을 거절할수 있습니다.
(예 http://twitter.com/HybridAuth )

WordPress Social Login – Components 탭

WSL 의 설정화면을 구성하는 요소들을 조정할수 있는 탭입니다. 여기에서 사용하지 않던탭을 사용하게 할수도 있고, 사용하지 않을 수도 있습니다.
기본적으로 ‘Basic Insights’ 와 ‘Users’ 와 ‘Contacts’ 기능은 Disable 상태입니다.

WordPress Social Login –  Basic Insights 섹션

Components 탭에서 활성화 하면, Networks 탭에서 보여 집니다. WSL의 기본 활동 요약이 보여집니다.

WordPress Social Login –  Users 탭

Components 탭에서 활성화 하면, 새로운 Users 탭이 보여집니다. 어드민 대시보드 – Users 에서 관리되므로, 중복된 정보일수 있으나, WSL을 통해서 들어온 유저의 정보만 볼수 있습니다.

WordPress Social Login –  Contacts 탭

Components 탭에서 활성화 하면, 새로운 Contacts 탭이 보여집니다. 여기서는 새로운 기능인 소셜 계정상에서의 유저의 친구들 정보를 끌어 오는것을 설정하는 화면입니다.
가령 Enable contacts import for 에서 페이스북을 ‘Enabled’로 하면, WSL을 통해서 들어오는 유저중에서 FACEBOOK 계정으로 로그인 하는 유저가 있다면, 그에게 자신의 계정정보중 CONTACTS의 정보를 사용해도 되냐는 동의 를 묻고, 확인이 되면 그 유저의 ‘친구’ 정보를 불러 옵니다.

글쓴이 :

20 Comments

  1. 송준협 2016/03/23 - 14:19 - 답글쓰기

    평소 많은 도움 얻고있습니다 좋은 정보 주셔서 감사합니다 🙂
    마음이라도 전하고자 이렇게 남깁니다.

  2. 염상우 2015/08/13 - 07:15 - 답글쓰기

    좋은 정보입니다.

  3. bjcha99 2015/04/20 - 02:44 - 답글쓰기

    소셜 로그인 후 메인화면으로 이동하려면 소스 수정은 어떻게 해야 할까요?

  4. Marcus Lim 2015/04/15 - 23:22 - 답글쓰기

    오… 라이브리나 페이스북 댓글보다 차라리 이게 더 괜찮은것 같네요.
    그런데, 로그인하면, 대시보드에서 사용자 추가가 되는건가요?

  5. Lee Jina 2015/03/21 - 09:40 - 답글쓰기

    감사합니다

  6. facebook_user 2015/03/11 - 00:28 - 답글쓰기

    facebook ‘Create a New App’을 누르고 진행하면 “Not Authorized To Manage Apps. This account is not authorized to manage apps. Please use your verified peersonal Facebook account to create and manage apps”라고 뜹니다.

    이전에 개발자로 등록한 적이 없는 걸로 알고 있는데, 왜 이런 오류가 날까요?

  7. 황태현 2015/03/10 - 15:49 - 답글쓰기

    좋은 정보 감사합니다.

    궁금한 점이 있는데요. 만약 소셜 로그인(회원가입)해서 들어온 회원들에 등급을 부여해서 게시판의 읽기/쓰기 권한을 제한할 수도 있을까요?
    할 수 있다면 어떤 방법(플러그인 등)을 써야 하나요?

    • Avada.KR 2015/03/11 - 01:15 - 답글쓰기

      미안합니다. 한번도 생각해 본 적이 없는 영역이라서 알고 있는 지식이 없습니다.
      그런데 가능은 할거 같습니다.
      유저에게 role을 부여하는 플러그인 들을 사용하면 되지 않을 까요?

  8. Hyomin Park 2015/03/09 - 13:09 - 답글쓰기

    좋은정보감사합니다~한가지만 여쭐께요!
    로그인하지 않으면 댓글이 안보이는데 어디서 컨트롤 가능한가요?

    • Avada.KR 2015/03/09 - 17:53 - 답글쓰기

      로그인 하지 않으면 본인의 댓글이 안보인다는 것인가요?
      다른 분의 댓글이 보이지 않는다는 건가요?

      어느 분이든 처음 댓글을 쓰셨을 때는 관리자가 검토후 댓글을 게재 합니다.
      (맨 첫 댓글만 그렇습니다. 이후에는 자동으로 등록됩니다)
      스팸을 방지하기 위해서 그렇습니다. ^^

  9. Jeong Sang Hyun 2015/02/15 - 10:54 - 답글쓰기

    근데 댓글 삭제는 안되네요?

    • Avada:KR 2015/02/16 - 13:51 - 답글쓰기

      네 맞습니다.
      워드프레스는 댓글을 수정 , 삭제기능이 제공되지않습니다.
      그래서 관리자가 먼저 댓글을 점검합니다.
      필요시 삭제요청하시면 되고요…
      조만간 수정 삭제 기능 이 사이트에 넣겠습니다.
      감사합니다. ^^

  10. Jeong Sang Hyun 2015/02/15 - 10:52 - 답글쓰기

    좋네요~ 최고 ㅋ

  11. 이슬기찬 2014/09/10 - 21:20 - 답글쓰기

    이렇게 뜹니다ㅠㅠㅠ

    WordPress Social Login – FAIL!
    Despite the efforts, the plugin author and other contributors, put into WordPress Social Login in terms of reliability, portability,
    and maintenance. Your server failed the requirements check for this plugin!

    These requirements are usually met by default by most “modern” web hosting providers, however some complications may
    occur with shared hosting and, or custom wordpress installations.

    To determine what may cause this failure, run the WordPress Social Login Requirements Test by clicking the button bellow:

  12. 블루 2014/09/01 - 18:35 - 답글쓰기

    좋은 정보 입니다

  13. 민경대 2014/08/18 - 16:27 - 답글쓰기

    WordPress Social Login에 대한 좋은 정보 감사합니다.

  14. Jake Kim 2014/07/12 - 13:02 - 답글쓰기

    좋은 정보네요.

  15. Seok Nam Lee 2014/06/30 - 03:08 - 답글쓰기

    좋은 정보 감사합니다.

댓글 쓰기