[React] 소셜로그인 -구글1 (사이트 API 등록)

https://www.traderharu.com/2021/08/10/%EA%B5%AC%EA%B8%80-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-api-%ED%82%A4-%EB%B0%9C%EA%B8%89-%EB%B0%A9%EB%B2%95/

구글 소셜 로그인 API 키 발급 방법 - TraderHaru

아래내용은 위 블로그 내용)

 

구글 소셜 로그인 API 키 발급 방법

 

01. 구글 개발자 사이트로 이동

https://console.developers.google.com/apis/ 로 이동후 로그인 해 주세요.
만약 구글 API를 이전에 사용한적이 없다면 아래 화면과 같이 나타납니다. 아래 화면에서 서비스 약관을 체크후 “동의 및 계속하기“를 눌러 주세요.

02. 새 프로젝트 생성

상단의 “프로젝트 선택”을 클릭 후 나타나는 “프로젝트 선택”팝업에서 “새 프로젝트”를 클릭 해 주세요.

새 프로젝트 페이지가 나타나면 “프로젝트 이름”을 입력 하신 뒤 “만들기”를 클릭 해 주세요.

03. 동의 화면 구성

좌측 메뉴에서 “API 및 지원서비스”를 클릭하면 나오는 하위메뉴에서 “사용자 인증 정보”를 클릭 합니다.

“사용자 인증 정보”페이지로 이동하면 “애플리케이션에 대한 정보를 포함하여 OAuth 동의 화면을 구성해야 합니다.”란 메세지가 나타납니다. OAuth즉 소셜로그인 기능을 사용하기 위해서는 우선 “동의 화면 구성”을 완료 해야 합니다.

화면의 상단에 나타나는 “동의 화면 구성”버튼을 눌러 주세요.

OAuth동의 화면이 나오면 OAuth를 이용하는 유저타입을 물어보게 됩니다. 우리는 외부 사용자도 소셜 로그인을 가능하게 해야 하므로 “외부”를 선택 합니다. 만약 내부 사용자만 사용하는것이라면 “내부”를 선택 하시면 됩니다.

“앱 등록 수정페이지”가 나타나면 앱 정보를 성실히 입력하고 “저장 후 계속”을 클릭 해주세요. 앱 승인을 받기 위해서는 앱 아이콘, 개인정보처리방침 링크, 서비스 약관(이용약관) 링크가 필요 합니다.

“범위” 페이지에서는 앱 인증시 사용자의 어떠한 권한을 요청할지에 대해 설정 할 수 있습니다. 우리는 소셜로그인만 진행할것이므로 “기본 Google 계정의 이메일 주소 확인” 및 “개인정보(공개로 설정한 개인정보 포함) 보기”를 선택후 하단의 “저장후 계속”을 클릭 해 주세요.

“테스트 사용자” 페이지에서는 만약 소셜로그인 테스트를 위해 테스트가 필요하면 소셜 로그인을 사용할 테스트 사용자를 등록 해 주세요. 저는 바로 서비스를 개시할 목적이므로 테스트 사용자 없이 진행하도록 하겠습니다.

“요약” 페이지에서는 지금까지 여러분이 입력한 OAuth를 이용할 앱의 정보가 나타납니다. 틀린 부분이 없다면 하단의 “대시보드 돌아가기”를 클릭 해 주세요.

04. 소셜 로그인 API 발급

좌측 메뉴의 “API 및 서비스”에서 “사용자 인증 정보”페이지로 이동 합니다. 그리고 “+ 사용자 인증 정보 만들기”를 클릭하면 나타나는 드롭다운에서 “OAuth 클라이언트 ID”를 클릭 해 주세요.

“어플리케이션 유형”은 “웹 에플리케이션”을 선택후 OAtuh API이름과 “승인된 리디렉션 URI” 즉 콜백 URI를 입력후 “만들기”를 클릭 해 주세요.

수고하셨습니다. 이제 여러분의 OAuth “클라이언트 ID”와 “클라이언트 보안 비밀번호”가 발급 되었습니다.
“클라이언트 ID”와 “클라이언트 보안 비밀번호”는 재발급이 되지 않으니 타인에게 누출되지 않도록 잘 보관 해 주시면 됩니다.

 

+

위 사진에서 Google + API > 사용을 눌러주기

 

https://console.developers.google.com/apis

Google 클라우드 플랫폼

https://velog.io/@nuri00/Google-OAuth-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84

Google OAuth 로그인 구현