포시코딩

Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - React(1) 본문

OAuth

Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - React(1)

포시 2022. 10. 10. 22:31
728x90

Google OAuth2 - React 연동

 

프로젝트로 사용할 폴더를 생성한 후 해당 폴더로 VSCODE 켜서 리액트 프로젝트화 시켜준다.

npx create-react-app .

 

리액트 프로젝트가 만들어졌고 우리는 여기서

  • public/index.html
  • src/App.js

이 두 파일만 사용할거임. 

 

public/index.html

index.html 파일에서 <head> 태그 안 <title> 태그 밑에 해당 코드를 작성해준다.

<script src="https://accounts.google.com/gsi/client" async defer></script>

중간에 gsi 키워드가 들어가는게 포인트임. 

다른 블로그들처럼 <meta> 태그 쓰는건 옛날 방식이니 거르면 된다.

index.html파일은 이게 끝

 

src/App.js

App.js 파일을 위와같이 정리해준 뒤 아래 코드를 따라 쓰자

import { useEffect } from 'react'
import './App.css';

function App() {
  function handleCallbackResponse(res){
    console.log('Encoded JWT ID token: ' + res.credential);
  }

  useEffect(()=>{
    /* global google */
    google.accounts.id.initialize({
      client_id: 'GCP에서 받은 클라이언트 ID', 
      callback: handleCallbackResponse
    })
    google.accounts.id.renderButton(
      document.getElementById('G_OAuth_btn'), 
      { theme: 'outline', size: 'large' }
    )
  }, [])

  return (
    <div className="App">
      <div id='G_OAuth_btn'></div>
    </div>
  );
}
export default App;

코드의 흐름은 아래에서 위로 이해하면 된다.

  1. 'G_OAuth_btn' 이란 id를 가진 div가 
  2. google.accounts.id.renderButton 으로 인해 구글 로그인 버튼으로 변하고
  3. 클릭 시 google.accounts.id.initialize 에서
  4. client_id 를 통해 인증을 거치게 되고 callback 함수인 
  5. handleCallbackResponse 를 실행해서 콘솔에 결과를 뿌려주기

직접 테스트해보자. 

npm start

서버 열어서 http://localhost:3000 접속

결과 확인을 위해 F12를 눌러 개발자 도구를 열어주자

 

로그인 진행

 

로그인하면 콘솔창에 토큰이 출력된다. 

(토큰이라고 하는게 맞는지 .. response의 credential 이니 응답의 자격증명서 라고 해석하면 되긴함)

 

이제 이 결과값을 쓸모있는 데이터로 바꿔보자

https://4sii.tistory.com/61

 

Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - React(2)

이전 포스팅(Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - React(1))에서 결과물로 얻은 값은 jwt라고 하는데 jwt는 (Json Web Token)의 약자로, Json 포맷을 이용해 인증에 필요한 정보를 암호화..

4sii.tistory.com

728x90
저작자표시

'OAuth' 카테고리의 다른 글

Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - Vue(2)  (0) 2022.10.12
Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - Vue(1)  (0) 2022.10.12
Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - React(2)  (0) 2022.10.10
Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - GCP 세팅  (0) 2022.10.10
'OAuth' Related Articles more