DEVINFO 데빈포 그누보드 포럼 쉽게 찾는 그누보드 실전 정보
BOARD

강좌·기초

BOARD 강좌·기초

그누보드 구글 소셜 로그인 API 키 발급 및 설정 방법

페이지 정보

profile_image
작성자 최고관리자
댓글 0건 조회 12회 작성일 26-09-24 08:15

본문

그누보드 구글 소셜 로그인 API 키 발급 및 설정 방법

본 가이드는 2017년 작성된 그누보드5 구글 소셜 로그인 플러그인(https://sir.kr/g5_plugin/2213) 연동 기준의 구버전용 설정 범위를 다룹니다. Google Cloud 콘솔에서 API 프로젝트를 생성하고 클라이언트 ID와 보안 비밀을 발급받아 설정하는 방법을 안내하며, 현재의 Google Cloud 콘솔 UI와 다를 수 있음을 참고하시기 바랍니다.

구글 클라우드 콘솔 프로젝트 생성 방법

구글 소셜 로그인 연동을 시작하려면 Google Cloud Console에서 새 프로젝트를 생성해야 합니다.

  1. Google Cloud Console에 로그인합니다.
  2. 상단에 존재하는 프로젝트 선택 또는 프로젝트 버튼을 눌러줍니다.
  3. 새 프로젝트 버튼을 눌러 새로운 프로젝트를 생성합니다.
  4. 새로운 프로젝트가 선택된 경우 Google 인증 플랫폼이 아직 구성되지 않았으므로 앱 정보를 입력하라는 안내가 나오며, 이때 사용자 유형으로는 보통 외부 사용자를 선택하면 됩니다.

OAuth 동의 화면 구성 및 필수 정보 입력 방법

구글 클라우드 콘솔에서 OAuth 클라이언트 ID를 생성하기 전, 사용자 인증 정보 페이지나 API 및 서비스 > OAuth 동의 화면에서 동의 화면을 구성해야 합니다.

1. 사용자 유형 선택

  • 새로운 프로젝트에서 Google 인증 플랫폼이 아직 구성되지 않은 경우 앱 정보를 입력하게 되며, 이때 사용자 유형으로 외부(외부 사용자)를 선택합니다.

2. 필수 정보 입력

  • 앱 이름: 애플리케이션의 이름을 입력합니다.
  • 사용자 지원 이메일 / 이메일 주소: 관련 이메일 주소를 추가합니다.
  • 개발자 연락처 정보: 개발자 연락처(개인 메일 등)를 작성합니다.
  • 애플리케이션 홈페이지 등 추가 정보: 웹 애플리케이션 명과 기타 항목을 작성한 뒤 저장 후 계속 또는 저장 버튼을 클릭합니다.
  • 범위(Scopes) 항목에서는 별도의 내용을 변경할 필요 없이 저장 후 계속을 진행합니다.
  • 정책 동의: Google API 서비스: 사용자 데이터 정책에 동의하는 체크박스를 선택하고 계속 진행합니다.

OAuth 클라이언트 ID 설정 방법

구글 개발자 콘솔의 OAuth 클라이언트 ID 생성 화면에서 승인된 자바스크립트 원본과 승인된 리디렉션 URI는 다음과 같이 입력합니다.

1. 승인된 자바스크립트 원본

  • 본인의 사이트 도메인 주소를 http 또는 https를 포함하여 입력합니다.
  • 예제: http://example.com

2. 승인된 리디렉션 URI

  • 구글 로그인 후 인증 토큰을 받아 처리할 콜백 경로를 입력합니다.
  • 그누보드5 관리자 페이지의 기본환경설정 또는 플러그인 안내에 명시된 URL 형식을 사용합니다.
  • 예제: http://example.com/plugin/oauth/callback.php?service=google
  • 그누보드5 매뉴얼을 참고할 경우, 관리자 페이지 내 기본환경설정의 구글 승인된 리디렉션 URI 항목에 있는 URL을 복사하여 붙여넣을 수도 있습니다.

구글 소셜 로그인 키 입력 위치

구글 개발자 콘솔에서 발급받은 클라이언트 ID와 클라이언트 보안 비밀 정보는 그누보드5 관리자페이지 기본환경설정의 구글 Client ID와 구글 Client Secret 항목에 각각 입력합니다.

구글 소셜 로그인 state 변수 및 토큰 검증 오류 해결 방법

그누보드 등 소셜 로그인 플러그인 연동 과정에서 '올바른 방법을 이용하세요' 메시지가 출력되거나 로그인 테스트 중 state 검증 오류가 발생하는 것은 state 변수에 전달된 토큰 값이 올바르지 않아 정상적인 요청인지 검증되지 않았을 때 발생합니다.

확인 및 조치 위치

  • 콜백 URL 설정 확인: 구글 개발자 콘솔(Google Cloud Platform 또는 Google Developers Console)의 사용자 인증 정보 설정에서 승인된 리디렉션 URI 값이 사이트 환경과 정확히 일치하는지 확인해야 합니다. 리디렉션 URL이 잘못 지정되면 인증 후 토큰 값과 state 변수가 올바르게 전달되지 않아 검증 오류가 발생할 수 있습니다.
  • 기본 경로 값 적용: 리디렉션 URI 경로 설정 시 임의의 주소값 대신 기본 경로 값(예: http://example.com/plugin/oauth/callback.php?service=google) 형태로 지정하는 것이 권장됩니다.

구글 소셜 로그인 설정 구조

  • 내 상황: 그누보드 기능을 적용하거나 문제를 해결하려는 운영자·개발자
  • 선택 기준: Google Cloud Console 프로젝트 생성 후 OAuth 동의 화면 구성 및 웹 애플리케이션 클라이언트 ID 발급
  • 다음 행동: 승인된 자바스크립트 원본 및 리디렉션 URI(http://example.com/plugin/oauth/callback.php?service=google)를 설정한 뒤 발급받은 클라이언트 ID와 보안 비밀을 그누보드 기본환경설정에 입력

실전 FAQ

Q. 구글 소셜 로그인 설정 중 redirect_uri mismatch 에러가 발생할 때 어떻게 해야 하나요?

  • 예외 및 대안: 구글 개발자 콘솔에 등록된 승인된 리디렉션 URI 값과 실제 그누보드 플러그인 또는 사이트에서 요청하는 콜백 URL이 정확히 일치하지 않을 때 발생합니다. 도메인 주소의 http/https 프로토콜 여부나 www 포함 여부를 확인하고, 그누보드 관리자 페이지의 기본환경설정에 안내된 URI를 그대로 복사하여 콘솔에 다시 등록해야 합니다.

Q. 로그인 시도 시 올바른 방법을 이용하세요 또는 state 검증 오류가 발생하는 이유는 무엇인가요?

  • 막히는 지점: state 변수에 전달된 토큰 값이 올바르지 않아 정상적인 요청인지 검증되지 않았을 때 발생합니다. 구글 개발자 콘솔의 승인된 리디렉션 URI 경로가 잘못 지정되었거나 콜백 파일(callback.php?service=google) 경로가 임의로 수정된 경우 발생하므로 기본 경로 값을 정확히 적용해야 합니다.

함께 보면 좋은 글

참고자료

공식 안내

기타 참고자료

댓글목록

등록된 댓글이 없습니다.