지난 포스트에서 페이스북 소셜로그인의 AppID와 앱시크릿 키를 얻는 방법을 살펴보았고, 이번 포스트에서는 워드프레스에서 구글(Google)의 소셜로그인(간편로그인)을 이용할 수 있도록 개발자 환경에서 ClientID와 Secret Key를 얻는 방법에 대해 살펴봅니다.

“페이스북 소셜 로그인 AppID와 Secret Key 설정 방법” 포스트 바로가기

 

주의:

1. 다만 각 소셜 네트워크 회사에서 제공하는 개발자 페이지 디자인이나 절차는 가끔씩 업데이트가 되므로, 이 글을 보는 시기에 따라 아래 이미지와 달라질 수 있습니다.
2. 구글에서 제공하는 소셜로그인 서비스는 페이스북과 달리 SSL(보안인증서버)의 설치가 꼭 필요하지 않습니다.

 

자, 우선 구글의 API 개발자 페이지(https://console.developers.google.com/apis/)로 접속합니다.

 

구글 계정으로 로그인되지 않은 경우에는 로그인해주세요.(화살표)

 

처음 구글 개발자 페이지로 들어왔다면 아직 프로젝트가 하나도 없을 겁니다. 오른쪽에 “Create” 버튼을 클릭하세요. 만약 이미 구글 개발자 페이지에서 프로젝트를 만든 적이 있다면 대쉬보드에서 프로젝트를 클릭한 후 나타나는 모달창(Modal)에서 “(새 프로젝트)New Project“를 클릭합니다.

 

프로젝트의 이름을 정하고 “만들기(Create)” 버튼을 다시 누릅니다. 프로젝트 이름은 영어로 만듭니다.

 

대쉬보드 좌측편에 “OAuth 동의화면(OAuth consent screen)” 버튼을 클릭합니다.
User Type 을 선택합니다. “외부“를 선택하시면 됩니다.

 

“애플리케이션 이름(Application name)” 필드에 앱이름을 입력합니다.

 

 

아래로 쭉 스크롤해서 내려와서 “승인된 도메인(Authorized domains)” 필드에 자신의 도메인을 입력하고, “애플리케이션 홈페이지 링크“에도 똑같이 한번 더 입력합니다. 그 아래 “개인정보처리방침 링크” 역시 홈페이지의 개인정보보호처리방침 페이지 링크를 입력합니다. 개인 정보처리방침 페이지는 워드프레스에서 비공개로 만들어져 있으니, 내용은 나중에 수정하더라도 그 URL 주소를 입력해 줍니다. 이 때 반드시 “공개” 버튼을 클릭해 주어야 합니다.

설정을 저장합니다.

 

좌측에 “사용자 인증정보(Credentials)” 메뉴를 클릭하고, 상단에 “+사용자 인증 정보 만들기(+ Create Credentials)” 버튼을 누릅니다.
“OAuth 클라이언트 ID(OAuth client ID)” 옵션을 선택합니다.

 

어플리케이션 타입에 “Web application“을 선택합니다.

 

OAuth 클라이언트 ID의 “이름“을 입력합니다.
 

아래 URI에는 자신의 홈페이지 주소를 https:// 또는 http://를 포함하여 입력합니다.

“Authorised redirect URIs” 필드에 리디렉션 URI를 입력합니다. 역시 소셜 로그인 플러그인에서 알려주는데요, Nextend Social Login 플러그인에서는 “시작하기” 탭에서 알려줍니다.

맨 아래 “생성(Create)” 버튼을 클릭합니다.

 

왼쪽 메뉴의 Credentials로 이동하여 이름을 클릭하여 앱을 선택하면 여기에서 “클라이언트 ID(Client ID)” 및 “클라이언트 보안 비밀(Client Secret)“을 복사하여 붙여 넣을 수 있습니다. 또는 “생성” 또는 “저장” 버튼을 클릭한 후 우측 상단에 있는 “Client ID” 및 “Client Secret Key”를 이용해도 좋습니다.

 

만약 Nextend Social Login 플러그인을 사용한다면 이 플러그인의 제작자가 제공해주는 구글 소셜로그인 방법에 대한 유튜브 동영상을 보시고 따라하시면 되겠습니다.