소셜 로그인 구현[1] - google

박경수·2023년 4월 4일
0

소셜 로그인

목록 보기
1/1
post-thumbnail

개발환경 셋팅

create-react-app 사용

npx create-react-app social_login --template typescript

프로젝트 생성 - 사전준비

https://console.cloud.google.com/projectcreate

  1. 프로젝트 생성
  2. OAuth 동의 화면 설정
  3. 앱 정보 입력 - 앱 이름, 앱 도메인 추가(localhost:3000)
  4. 개발자 메일 추가 (여기까지 OAuth 동의 화면)
  5. 사용자 인증 정보 입력 후 클라이언트 ID 획득
  6. github에 구글 로그인 소스 사용.

사진 정보

OAuth 동의화면 접속 루트

접속 후, 위 필요한 정보를 입력.

사용자 인증 정보 접속, +시용자 인증 정보 만들기 클릭, OAuth 클라이언트 ID 클릭.

애플리케이션 유형 설정, 이름 입력
승인된 자바스크립트 원본에 localhost 추가. 만들기 완료

이후

생성된 사용자 인증 정보/OAuth 2.0 클라이언트 ID에 생성된 사용자 클릭하여 아래 정보를 얻음.

  • 클라이언트 ID (구글 인증에 사용)

클라이언트

https://github.com/MomenSherif/react-oauth
react-google-login 서비스 지원 중단으로, 새로운 구글 웹용 API 사용.

설명

  1. google API client ID 를 준비한다.
  2. Consent Screen(동의화면) 구성을 작성한다.
  3. GoogleOAuthOrivuder로 나의 앱을 감싼다.
  4. 그 안에 원하는 로그인 버튼을 넣는다.

코드

import { GoogleOAuthProvider } from '@react-oauth/google';
import { GoogleLogin } from '@react-oauth/google';

<GoogleOAuthProvider 
	clientId="<your_client_id>"
>
	<GoogleLogin
      onSuccess={credentialResponse => {
        console.log(credentialResponse); // 로그인 성공이면 credentialResponse를 획득.
      }}
      onError={() => {
        console.log('Login Failed');
      }}
	/>;
</GoogleOAuthProvider>

여기서 credentialResponse에서 credential정보를 얻을 수 있는데, 이것을 jwt 디코드하면 유저의 정보를 얻을 수 있다.

결과물

로그인 버튼

로그인 버튼 클릭

성공 로그

버튼 변화

후기

이것은 매우 기본적인 로그인 방식으로, One tap, auth login외 커스텀이 가능하기 때문에 해당 정보는 다음에 포스팅 하겠다.

profile
<>{...}</>

0개의 댓글