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

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

Google 지원 로그인 양식을 얻기 위해 해야 할 일은 주어진 단계를 따르는 것입니다.

먼저 Google Cloud Platform으로 이동하여 새 프로젝트를 만들거나 이미 만든 프로젝트를 사용합니다.

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

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

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

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

GCP 준비가 완료되었습니다. 애플리케이션을 시작하거나 생성해 보겠습니다. 반응 앱 만들기부터 시작하겠습니다.

npx create-react-app authloginapp

응용 프로그램의 가장 중요한 부분은 추가입니다Google Script.public/index.html의 헤드 섹션 내부.

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

Make sure to add async and defer as they will manage delay.

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

useEffect 및 useSate와 같은 반응 후크를 사용하여 간단한 로그인 양식을 생성합니다. App 함수에 다음 코드를 추가합니다.

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',
    });
  }, []);

Here google.accounts.id is because the script provided.Google also Provide various different buttons and function.

이제 앱 기능 내에서 기능handleCallbackResponse을 정의해 보겠습니다.

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

다음을 실행하여 진행 상황을 확인하겠습니다.

npm start

On inspecting in console we will get our jwt 토큰which is provided by google as verification and also holds user details.

이제 jwt-decode와 같은 디코더가 필요한 토큰을 변환하고 사용하는 것이 우리의 임무입니다.

npm install jwt-decode

나중에 handleCallbackResponse 업데이트

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

We can now see detailed inscription of user.

이제 세부 정보를 표시하려면 먼저 정보를 무언가에 저장해야 합니다. 사용자를 저장하기 위해 다른 사용 후크useState를 사용하겠습니다. 앱 기능에서 사용할 useState를 추가합니다.

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

나중에 handleCallbackResponse를 업데이트하십시오.

setUser(userObject);

이제 다음 코드를 적용하여 화면에 표시할 수 있는 사용자 정보가 있습니다.

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

Now we can see name, image and email on screen after login.

마지막으로 handleCallbackResponse 함수에서 로그인 후 로그인 옵션을 숨기는 한 줄을 추가하여 마지막으로 마무리합니다.

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

우리의 완성품src/App.js은 다음과 같습니다.

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분이 소요됩니다.

메모:

스택 애플리케이션에서 사용하는 경우 redux 대신 useState를 사용할 수 있습니다.

Google Identity에서 Google Auth에 대한 다른 버튼 및 기능을 확인할 수 있습니다.

더 나은 사진을 위해 FULL CODE을 확인하십시오.