새 업데이트에 따라 Google로 로그인

로그인 양식은 항상 모든 웹 개발자가 수행하는 첫 번째 단계이므로 여기에 Google 서비스를 추가해 보겠습니다.

아래와 같은 API 및 서비스의 자격 증명으로 이동합니다.

내부 구성 동의 화면에서 옵션으로 External를 선택하고 Create를 클릭합니다. 이것은 당신이 만들고 있는 것에 관한 정보를 요청하는 양식으로 우리를 이끌 것입니다.

올바른 이름과 이메일로 양식을 채우고 양식에서 GCP 메일을 사용하는지 확인하고 Save and Continue를 클릭합니다.
스코프 부분을 건너뛸 수 있습니다. 여기서 양식의 부분Test Users에 직접 도착합니다add Email. 이 양식은 localhost에서 서비스를 확인하는 데 사용됩니다.

이제 자격 증명으로 돌아가서 CREATE CREDENTIALS에 대해 OAuth client ID 여기서 원하는 응용 프로그램 유형을 선택합니다. 여기서는 Web application를 사용합니다.
그런 다음 양식을 작성하고 사용 중인 port number를 사용했는지 확인하고 CREATE를 클릭하고 client secret and id를 저장합니다.

npx create-react-app authloginapp

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

이제 src/App.js에서 화면에 표시할 항목을 변경해 보겠습니다.

useEffect will Provide us with Jwt-token.

• Add the following hook to enable google in app

 useEffect(() => {
    /* global google */
    google.accounts.id.initialize({
      client_id:
        'Your-Google-client-Id',
      callback: handleCallbackResponse,
    });
   google.accounts.id.renderButton(document.getElementById('signInDiv'), {
      theme: 'outline',
      size: 'large',
    });
  }, []);

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

npm start

npm install jwt-decode

var userObject = jwt_decode(response.credential);
console.log(userObject);

const [user, setUser] = useState({});

setUser(userObject);

<div id="signInDiv"></div>
{user && (
  <div>
    <img src={user.picture}></img>
    <h3>{user.name}</h3>
    <h4>{user.email}</h4>
  </div>
)}

document.getElementById('signInDiv').hidden = false;

import React, { useEffect, useState } from 'react';
import jwt_decode from 'jwt-decode';
import './App.css';

function App() {
  const [user, setUser] = useState({});

  function handleCallbackResponse(response) {
    console.log('Encoded JWT ID token: ' + response.credential);
    var userObject = jwt_decode(response.credential);
    console.log(userObject);
    setUser(userObject);
    document.getElementById('signInDiv').hidden = true;
  }

  function handleSignOut(event) {
    setUser({});
    document.getElementById('signInDiv').hidden = false;
  }

  useEffect(() => {
    /* global google */
    google.accounts.id.initialize({
      client_id:
        'Your-Google-Client-Id',
      callback: handleCallbackResponse,
    });  google.accounts.id.renderButton(document.getElementById('signInDiv'), {
      theme: 'outline',
      size: 'large',
    });
  }, []);
 return (
    <div className="App">
      <div id="signInDiv"></div>
      {user && (
        <div>
          <img src={user.picture}></img>
          <h3>{user.name}</h3>
        </div>
      )}
    </div>
  );
}

export default App;

이것은 기본 Google 지원 인증 시스템에 모두 필요하며 10분이 소요됩니다.

메모: