Jwt-decode를 사용하는 React용 새로운 Google Identity Services SDK를 사용하는 Google OAuth2

이 튜토리얼에서는 새로운 React @react-oauth/google🚀용 Google ID 서비스 SDK를 사용하여 Google OAuth2를 통해 인증을 구현하여 스트레스 없이 번거로움 없이 가입하는 방법을 배웁니다.

너는 필요할거야

API를 요청하는 create-react-app React 애플리케이션으로

jwt-decode 설치

리액트 기초지식

Node.js 설치됨

코드 편집기(Visual Studio Code 권장)

Google Cloud 프로젝트 설정

Google 로그인을 React 앱에 통합하려면 Google 클라이언트 ID가 필요합니다. 먼저 Google Cloud 프로젝트를 만들어야 합니다.

프로젝트를 생성하고 프로젝트 이름을 선택합니다.

프로젝트가 준비되면 자격 증명 - 인증서 만들기 - OAuth 클라이언트 ID로 진행합니다.

OAuth 동의 화면을 구성해야 합니다. Google 계정이 있는 모든 사람에게 액세스 권한을 부여하고 싶으므로 외부를 선택합니다. 그런 다음 Google은 앱 이름과 일부 개발자 연락처 정보를 요청합니다.

앱 등록 양식을 작성합니다. 대부분의 경우 비워 둘 수 있습니다.

개발할 앱에 가장 적합한 범위를 선택하고 애플리케이션 요구 사항에 따라 필요한 다른 모든 입력을 채웁니다.

Credentials - Create Credentials - OAuth 클라이언트 ID로 돌아갑니다. 웹 애플리케이션 유형을 선택하면 인증된 원본과 리디렉션 URL을 모두 제공할 수 있습니다.


Google 클라이언트 ID와 클라이언트 암호가 표시됩니다. 클라이언트 ID만 있으면 됩니다.

React 앱과 로그인 구성 요소를 만들어 봅시다

Google 클라이언트 ID가 있으면 Google 로그인을 통합하기 위한 React 애플리케이션을 만들기 시작합니다.

create-react-app 애플리케이션으로 시작하여 새로운 Google Identity Services SDK for React @react-oauth/google🚀를 사용하는 Google OAuth2와 jwt-decode는 JWT 토큰을 디코딩하는 데 도움이 되는 작은 브라우저 라이브러리인 필요한 모든 종속성을 추가합니다. Base64Url로 인코딩됩니다.

다음 명령을 실행하여 시작하되 React에서 Google 로그인을 인증하는 데 필요한 요구 사항이 있는지 확인하십시오.

Node.js 설치됨

코드 편집기(Visual Studio Code 권장)

Google 클라이언트 ID

리액트 기초지식

npx create-react-app google-login
cd google-login
npm install @react-oauth/google jwt-decode react-router-dom
다음 내용으로 src/lib/GoogleLoginPage.js라는 파일을 만듭니다.

import React from 'react';
import { FcGoogle } from 'react-icons/fc';
import { GoogleOAuthProvider } from '@react-oauth/google';
import { GoogleLogin } from '@react-oauth/google';

const GoogleLoginPage = () => {
  const responseGoogle = (response) => {
    console.log(response);
  }

  return (
    <div className="">
          <div className="">
            <GoogleOAuthProvider 
                clientId={`${process.env.REACT_APP_GOOGLE_API_TOKEN}`}
                >
             <GoogleLogin
              render={(renderProps) => (
                <button
                  type="button"
                  className=""
                  onClick={renderProps.onClick}
                  disabled={renderProps.disabled}
                >
                  <FcGoogle className="" /> Sign in with google
                </button>
              )}
              onSuccess={responseGoogle}
              onFailure={responseGoogle}
              cookiePolicy="single_host_origin"
            />
            </GoogleOAuthProvider>
          </div>
    </div>
  )
}

export default GoogleLoginPage

npm start를 실행하고 콘솔을 확인하여 jwt-decode를 사용하여 디코딩할 인코딩된 토큰을 받을 수 있습니다.

JWT-DECODE를 사용하여 Google 토큰 디코딩

이제 Google 응답 토큰을 얻었으므로 필요한 모든 사용자 정보를 얻기 위해 디코딩할 수 있습니다.

여전히 GoogleLoginPage.js에서 업데이트하겠습니다.

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { FcGoogle } from 'react-icons/fc';
import { GoogleOAuthProvider } from '@react-oauth/google';
import { GoogleLogin } from '@react-oauth/google';
import { client } from '../client';
import jwt_decode from "jwt-decode";

const GoogleLoginPage = () => {
  const navigate = useNavigate();

  const responseGoogle = (response) => {
   //console.log(response);
    const userObject = jwt_decode(response.credential);
    //console.log(userObject);
    localStorage.setItem('user', JSON.stringify(userObject));
    const { name, sub, picture } = userObject;
    const doc = {
      _id: sub,
      _type: 'user',
      userName: name,
      image: picture,
    };
    client.createIfNotExists(doc).then(() => {
      navigate('/', { replace: true });
    });

  }

  return (
    <div className="">
          <div className="">
            <GoogleOAuthProvider 
                clientId={`${process.env.REACT_APP_GOOGLE_API_TOKEN}`}
                >
             <GoogleLogin
              render={(renderProps) => (
                <button
                  type="button"
                  className=""
                  onClick={renderProps.onClick}
                  disabled={renderProps.disabled}
                >
                  <FcGoogle className="" /> Sign in with google
                </button>
              )}
              onSuccess={responseGoogle}
              onFailure={responseGoogle}
              cookiePolicy="single_host_origin"
            />
            </GoogleOAuthProvider>
          </div>
    </div>
  )
}

export default GoogleLoginPage

방금 수행한 작업을 분석해 보겠습니다.

responseGoogle()에서 Google 로그인 응답을 받은 후 jwt-decode 패키지를 가져오고 Google 로그인에서 받은 응답을 호출하여 디코딩된 토큰을 저장할 변수를 만들었습니다.

토큰이 해독되었으므로 이제 사용자 정보를 가져와서 localStorage에 저장하고 필요한 정보를 해체하여 데이터베이스로 보낼 수 있습니다.

Google OAuth 재구성

마지막으로 Google API에서 필요한 모든 승인된 JavaScript 원본 및 승인된 리디렉션 URI를 구성하는 것을 잊지 마십시오.

만세!!! 이제 완성된 애플리케이션을 보고 즐기고 테스트할 수 있습니다.



You can check out the live demo here

You can view and download our source code at

결론

이 튜토리얼에서는 새로운 Google Identity Services SDK for React @react-oauth/google🚀을 사용하고 JWT-DECODE로 토큰을 디코딩하여 Google OAuth2로 사용자를 인증하는 방법을 배웠습니다.

오늘 새로운 것을 배웠기를 바랍니다. 좋아요, 공유 및 댓글을 잊지 마세요.

참조

새로운 KGoogle Identity Services SD를 사용하는 Google OAuth2 for React@react-oauth/google🚀

Decoding JWTs token which are Base64Url encoded.