2. Google 로그인 구현(Oauth2)

코드 모듈화 프로젝트

2. Google 로그인 구현(Oauth2)

소금토스트 2024. 11. 11. 23:14

728x90

SMALL

첫번째 이메일 인증에 이어서 이번에는 Google의 계정으로 로그인 기능을 시작하겠다.
Google로 로그인을 하면 이메일 인증과 마찬가지로 뭔가 Google과 어떤 연결고리가 생기는거같고
있어보이기 때문에 두번째로 선택했다. Google로 로그인하면 정말 편리하다.
예전에는 웹이든 앱이든 하나하나 회원가입하는 과정이 귀찮았는데 카카오,네이버, 구글 같은
누구나 가지고있을만한 계정으로 로그인을 간단하게 해버리니 요즘 앱이나 웹에는 거의 필수로 사용되는것같다.

환경

Windows
Vscode

1. 그림과 같이 간단하게 세팅한다.

2. 그리고 아래와 같이 입력해서 설치한다.

npm install @react-oauth/google

App.tsx

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

const App = () => {
  const handleLoginSuccess = (response: CredentialResponse) => {
    console.log('Login Success:', response);
  };

  const handleLoginFailure = () => {
    console.log('Login Failed');
  };

  return (
    <GoogleOAuthProvider clientId=구글클라이언트아이디>
      <div>
        <h1>Google Login</h1>
        <GoogleLogin
          onSuccess={handleLoginSuccess}
          onError={handleLoginFailure}
        />
      </div>
    </GoogleOAuthProvider>
  );
};

export default App;

화면 코드는 이게 끝이다.
구글 클라이언트 아이디는 아래에서 받는 방법을 작성하겠다.

OAuth 구현하는것의 90%는 구글 설정하는것이다.

3. https://console.cloud.google.com/ 에 접속해서 가입한다. 가입할때는 주소, 결제 카드정보 같은게 필요하다.