React에서 Google OAuth 인증 사용

이 기사에서는 Google OAuth를 사용하여 React 프로젝트에서 OAuth 2.0 호환 인증 코드 부여를 구성하는 방법을 배웁니다. 이렇게 하면 인증 솔루션을 만들고 유지하는 것과 관련된 모든 문제가 사용자로부터 Google OAuth로 추상화됩니다.

React에서 Google OAuth 인증 사용

먼저 Google 클라이언트 ID와 클라이언트 비밀번호를 생성해야 합니다. 시작하려면 브라우저에서 "Google OAuth"를 검색하고 검색 결과의 첫 번째 링크를 클릭하십시오.

이 페이지에는 액세스 키를 얻기 위한 단계별 절차가 포함되어 있습니다. 그러나 클라이언트 ID와 암호를 적절하게 생성하는 과정을 안내해 드리겠습니다.

Google API 콘솔 링크를 클릭하여 OAuth 2.0 클라이언트 자격 증명을 받습니다.

새 프로젝트 만들기

이제 드롭다운 메뉴에서 Google-Oauth를 선택하면 현재 프로젝트를 선택하거나 새 프로젝트를 만들 수 있는 모달이 열립니다.

아직 하지 않았다면 "새 프로젝트" 버튼을 클릭하고 프로젝트 이름을 입력한 다음 "만들기" 버튼을 클릭합니다.

OAuth 동의 화면 만들기

자격 증명을 생성하기 전에 동의 화면을 개발해야 합니다. 사용자가 Google OAuth로 로그인 버튼을 클릭하면 동의 화면으로 이동합니다.

그런 다음 "API 및 서비스" 아래 왼쪽 사이드바에서 OAuth 동의 화면 옵션을 클릭합니다. 일반 대중을 위한 애플리케이션인 경우 외부 사용자 유형을 선택하고 OAuth 동의 화면에서 "만들기" 버튼을 클릭합니다.

그런 다음 필수 정보로 앱 동의 페이지를 작성하십시오.

필드를 완료한 후 "저장하고 계속하기" 버튼을 클릭합니다.

범위 페이지에서 "범위 추가 또는 제거"를 클릭합니다. 추가할 수 있는 범위의 양은 개발 중인 애플리케이션의 종류에 따라 결정되지만 사용자의 이메일 주소와 프로필 정보에만 관심이 있습니다.

아래로 스크롤하여 범위를 선택한 후 "업데이트" 버튼을 클릭합니다. 그런 다음 "저장하고 계속하기" 버튼을 누릅니다.

테스트 사용자를 추가하려면 테스트 사용자 탭으로 이동하고 "사용자 추가" 버튼을 클릭합니다. 샌드박스 모드에서는 테스트 사용자만 애플리케이션에 로그인할 수 있습니다.

테스트 사용자를 추가한 후 "저장하고 계속하기"를 클릭합니다.

요약 탭에서 정보를 주의 깊게 확인하고 제공한 정보가 유효하다고 확신하면 "대시보드로 돌아가기" 버튼을 클릭하십시오.

Oauth 자격 증명

"API 및 서비스" 아래 사이드바에서 자격 증명을 선택합니다. 자격 증명 탭에서 OAuth 클라이언트 ID를 선택하고 "CREATE CREDENTIALS"를 클릭합니다.

그런 다음 사용자 데이터에 액세스하는 데 필요한 세부 정보를 제공합니다. 승인된 리디렉션 URI는 서버 경로를 참조해야 합니다. 이렇게 하면 동의 화면에서 GET 요청을 서버로 보낼 수 있습니다.

다른 방법을 사용할 수도 있지만 이 방법이 더 빠르다고 생각합니다.

필요한 데이터를 제공한 후 “CREATE” 버튼을 클릭하면 생성된 클라이언트 ID와 클라이언트 암호를 가져와야 합니다.

클라이언트 ID와 클라이언트 암호는 반응 애플리케이션에서 구현할 것이기 때문에 노트북에 저장할 수 있습니다. 위의 스크린샷에서 다른 클라이언트 ID와 클라이언트 암호를 사용했습니다.

이제 Google Oauth2 인증을 사용하여 로그인 및 로그아웃 기능을 만드는 React 앱에 대해 살펴보겠습니다.

먼저 로그인 기능 중에 도움이 되는 로그인 코드를 생성합니다.

코드 예 - login.js:

import {GoogleLogin} from 'react-google-login';

const clientId =
    '925694800644-urbtc7m556a52ba9vjhj7vevg2nir6vt.apps.googleusercontent.com';

function Login() {
  const onSuccess = (res) => {
    console.log('Login Success! current user: ', res.profileObj);
  };

  const onFailure = (res) => {
    console.log('Login Failed: res: ', res);
  };

  return (
    <div id='signInButton'>
      <GoogleLogin
  clientId = {clientId} buttonText = 'Login'
        onSuccess={onSuccess}
        onFailure={onFailure}
        cookiesPolicy={'single_host_origin'}
        isSignedIn={
    true}
      />
    </div>
  );
}

export default Login;

생성한 클라이언트 ID는 Google 클라이언트 ID라는 변수를 만들어서 사용할 수 있습니다. react-google-login에서 가져온 다음 코드로 로그인 버튼을 만들었습니다.

우리는 또한 콘솔에서 다른 정보를 제공하는 방법을 개발했습니다. 로그인에 성공하면 로그인 성공!과 같은 메시지를 보냅니다.

코드 예 - logout.js:

import {GoogleLogout} from 'react-google-login';

const clientId =
    '925694800644-urbtc7m556a52ba9vjhj7vevg2nir6vt.apps.googleusercontent.com';

function Logout() {
  const onSuccess = () => {
    console.log('Log out successfully!');
  };

  return (
    <div id='signOutButton'>
      <GoogleLogout
        clientId={clientId}
        buttonText={'Logout'}
        onLogoutSuccess={
    onSuccess}
      />
    </div>
  );
}

export default Logout;

로그인 페이지와 동일합니다. react-google-login에서 Google Logout을 가져오고 Google 클라이언트 ID의 변수를 만들었습니다.

코드 예제 - App.js:

import {gapi} from 'gapi-script';
import {useEffect} from 'react';

import LoginButton from './components/login';
import LogoutButton from './components/logout';

const clientId =
    '925694800644-urbtc7m556a52ba9vjhj7vevg2nir6vt.apps.googleusercontent.com';

function App() {
  useEffect(() => {
    function start() {
      gapi.client.init({
        clientId: clientId,
        scope: '',
      });
    }
    gapi.load('client:auth2', start);
  });

  return (
    <div className='App'>
      <LoginButton />
      <LogoutButton />
    </div>
  );
}

export default App;

App.js에서 우리는 두 페이지, 즉 login.js와 logout.js를 렌더링했습니다. 위의 코드는 gapi 키워드가 사용되었음을 보여줍니다.

gapi는 반응 페이지에서 oauth2를 로드하는 데 도움이 되는 JavaScript용 Google API 클라이언트 라이브러리입니다.

gapi.load('client:auth2', start);

일반적으로 페이지가 로드될 때 호출됩니다. ":" 문자는 여러 라이브러리를 로드하는 데 사용됩니다.

여기에서 클라이언트 및 auth2 라이브러리를 모두 로드하는 데 사용됩니다. 코드를 실행하면 다음과 같은 내용이 표시됩니다.

두 개의 버튼이 있습니다. 로그인 및 로그아웃. 로그인을 클릭하면 Google 로그인 ID를 선택할 수 있으며 콘솔에 몇 가지 정보가 표시됩니다.

마찬가지로 로그아웃을 클릭하면 로그아웃되고 콘솔에 일부 정보가 표시됩니다.

이렇게 하면 반응 중인 Google 로그인/로그아웃 버튼으로 사용자를 인증하기 위해 Google Oauth2 인증을 사용할 수 있습니다.