Google 로그인과 React 통합: 개발자 친화적인 가이드

문제

사용자가 방문하는 모든 웹사이트의 비밀번호를 기억해야 하는 세상을 상상해 보세요.

아 잠깐, 이게 바로 이 세상이구나!

사용자가 힘들이지 않고 Big G 자격 증명으로 로그인할 수 있도록 Google 로그인을 통합하여 앱에 이 문제를 해결해 보겠습니다.

해결책

Google 로그인을 React 앱에 통합하는 것은 useEffect의 오타를 디버깅하는 것보다 쉽습니다.

정말로 Big G를 프로젝트에 환영하려면 두 단계만 거치면 됩니다. 뛰어들어 보세요!

---

1단계: Google에 앱 등록

마법이 일어나기 전에 Google에 앱에 대해 알려야 합니다. 방법은 다음과 같습니다.

1. Google Cloud Console로 이동: https://console.cloud.google.com/.

2. API 및 서비스로 이동: 대시보드에서 API 및 서비스를 클릭하세요.
   

3. 자격 증명 사이드바: 왼쪽에서 자격 증명을 클릭하세요.

1. 자격 증명 만들기: 상단 탐색 모음에서 자격 증명 만들기를 탭하고 OAuth 클라이언트 ID를 선택합니다.

1. OAuth 클라이언트 구성:
   • 애플리케이션 유형으로 웹 애플리케이션을 선택하세요.
   • 승인된 JavaScript 원본 아래에 다음을 추가합니다.
     • 로컬 서버 URL(예: http://localhost:3000)
     • 앱을 배포할 도메인(예: https://yourdomain.com/signup)

1. 만들기 클릭: 이제 Google이 귀하의 클라이언트 ID와 비밀번호를 생성합니다.

2. 클라이언트 ID 및 비밀번호 복사: 안전한 곳에 저장하세요(단, 일반 텍스트로 저장하는 것이 더 낫기 때문에 일반 텍스트로 저장하지 마세요).

축하합니다! 주요 설정이 완료되었습니다. 이제 코드를 직접 작성해 볼 시간입니다.

---

2단계: 통합 코딩

우리는 [@react-oauth/google](https://www.npmjs.com/package/@react-oauth/google) 패키지를 사용할 예정입니다. 이미 누군가가 굴러가고 있는데 왜 바퀴를 재발명해야 할까요?

1. 패키지 설치:

   npm install @react-oauth/google

1. 코드 작성: 시작하기 위한 간단한 예는 다음과 같습니다.

   // App.jsx
   import { useState } from "react";
   import { GoogleOAuthProvider, GoogleLogin } from "@react-oauth/google";

   function Homepage() {
     const [authData, setAuthData] = useState(null);

     const gContainer = {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
       marginTop: '50px'
     };

     return (
       <googleoauthprovider clientid='{"YOUR_GOOGLE_CLIENT_ID_HERE"}'>
         <div>



<ol>
<li>
<strong>Run Your App</strong>:
Fire up your app with npm start or yarn start, and you’re good to go!</li>
</ol>

<p>Now users can log in, and you’ll have access to their Google access token to authenticate them on your backend (or to marvel at in your console logs).</p>

<h2>
  
  
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173565247884217.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Integrating Google Sign-In with React: A Dev-Friendly Guide">
</h2>

<h2>
  
  
  What Just Happened?
</h2>

<p>You’ve successfully added Google Sign-In to your React app by following these steps. When users log in, you’ll receive their access token. </p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173565247990959.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Integrating Google Sign-In with React: A Dev-Friendly Guide"></p>

<p>You can call an API endpoint using this token to fetch user-related information. For example:<br>
</p>

<pre class="brush:php;toolbar:false">const userInfoEndpoint = `https://oauth2.googleapis.com/tokeninfo?id_token=${accessToken}`;

이 요청은 사용자의 프로필 데이터를 반환합니다.

가짜 로그인에 대한 API 오용을 방지하려면 백엔드에서 이를 처리하는 것이 좋습니다.

빠른 테스트를 위해 LiveAPI를 사용하여 이 엔드포인트에 요청을 보내고 이전에 얻은 토큰에서 사용자 정보를 검색할 수 있는지 확인하겠습니다.

그리고 그게 다입니다! 이제 프로필 사진, 이름, 이메일 등 OAuth에서 필요한 모든 데이터가 확보되었습니다.

---

TL;DR

1. Google Cloud Console에 앱을 등록하여 클라이언트 ID를 받으세요.
2. React 앱에 Google 로그인을 통합하려면 @react-oauth/google을 사용하세요.
3. Google API 엔드포인트를 호출하여 백엔드에서 사용자 정보를 안전하게 가져옵니다.

1분만 더 시간을 내 주세요.

저는 LiveAPI라는 매우 편리한 문서 생성 도구를 개발하고 있습니다.

LiveAPI는 저장소를 입력으로 사용하고 보유한 모든 API에 대한 아름답고 안전한 API 문서를 출력합니다.

보너스 포인트: 문서에서 직접 API를 실행하고 모든 언어로 요청 스니펫을 생성할 수 있습니다.

즐거운 코딩을 하시길 바랍니다. Big G가 항상 당신의 편이 되어 LiveAPI를 통해 시간을 절약해 보세요!