Google OAuth2 pomocí nové sady Google Identity Services SDK pro React pomocí Jwt-decode

V tomto tutoriálu se naučíme, jak zajistit, aby registrace byla bez stresu a bezproblémová implementací ověřování přes Google OAuth2 pomocí nové sady Google Identity Services SDK pro React @react-oauth/google🚀.

Budete potřebovat

  • Chcete-li vytvořit-react-app aplikaci React, která odesílá požadavky vašeho rozhraní API 
  • Instalace jwt-decode 
  • Základní znalost React
  • Node.js nainstalován
  • Editor kódu (nejlépe Visual Studio Code)

Nastavení vašeho projektu Google Cloud

Pro integraci Google Login do naší aplikace React potřebujete Google Client ID. Nejprve budete muset vytvořit projekt Google Cloud.

  1. Vytvořte projekt a zvolte název projektu.

  1. Jakmile máte projekt vytvořen, přejděte k části Pověření - Vytvořit přihlašovací údaje - ID klienta OAuth.

  1. Budete muset nakonfigurovat obrazovku souhlasu OAuth. Vyberte externí, protože chceme umožnit přístup všem s účtem Google. Google se poté zeptá na název aplikace a některé kontaktní údaje vývojáře.

  1. Vyplňte registrační formulář aplikace. Z velké části jej můžete nechat prázdné.


Vyberte rozsah, který se nejlépe hodí pro aplikaci, kterou budete vyvíjet, a vyplňte všechny ostatní potřebné vstupy podle požadavků vaší aplikace.

Vrátíme se zpět na Credentials - Create credentials - OAuth client ID. Vyberte typ webové aplikace a my vám můžeme poskytnout všechny autorizované zdroje a adresy URL přesměrování.


Uvidíme naše ID klienta Google a tajný klíč klienta. Budeme potřebovat pouze ID klienta.

Pojďme vytvořit naši aplikaci React a komponentu přihlášení

Jakmile budete mít své ID klienta Google, začneme vytvářet naši aplikaci React pro integraci přihlášení Google.

Začneme s aplikací create-react-app a přidáme všechny potřebné závislosti, kterými jsou Google OAuth2 pomocí nové sady Google Identity Services SDK pro React @react-oauth/google🚀 a jwt-decode je malá knihovna prohlížeče, která pomáhá dekódovat token JWT. které jsou zakódovány pomocí Base64Url.

Začněme spuštěním následujících příkazů, ale ujistěte se, že máte nezbytné požadavky pro ověření přihlášení Google v React

  • Node.js nainstalován
  • Editor kódu (nejlépe Visual Studio Code)
  • ID klienta Google
  • Základní znalost React

npx create-react-app google-login
cd google-login
npm install @react-oauth/google jwt-decode react-router-dom

Vytvořte soubor s názvem src/lib/GoogleLoginPage.js s následujícím obsahem:

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

Můžete spustit npm start a zkontrolovat konzoli, abyste obdrželi zakódovaný token, který dekódujeme pomocí jwt-decode.

Dekódování tokenu Google pomocí JWT-DECODE

Nyní, když jsme získali náš token odpovědi Google, můžeme dekódovat, abychom získali všechny potřebné informace o uživateli.

Stále v GoogleLoginPage.js, pojďme jej aktualizovat

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

Pojďme si udělat rozpis toho, co jsme právě udělali.

Poté, co jsme obdrželi odpověď Google Login v naší responseGoogle() , vytvořili jsme proměnnou pro uložení dekódovaného tokenu importem balíčku jwt-decode a voláním odpovědi, kterou jsme dostali z našeho přihlášení Google.

Nyní, když byl token dekódován, můžeme nyní získat naše uživatelské informace, uložit je do našeho localStorage, destrukturovat potřebné potřebné informace a odeslat je do databáze.

Překonfigurujte Google OAuth

Nakonec nezapomeňte nakonfigurovat všechny potřebné autorizované původy JavaScriptu a autorizované URI přesměrování ve vašem rozhraní Google API.

Hurá!!! nyní můžeme prohlížet, užívat si a testovat naši hotovou aplikaci

Živé demo si můžete prohlédnout zde

Náš zdrojový kód si můžete prohlédnout a stáhnout na

Závěr

V tomto tutoriálu jsme se naučili, jak ověřit uživatele pomocí Google OAuth2 pomocí nové sady Google Identity Services SDK pro React @react-oauth/google🚀 a dekódovacího tokenu pomocí JWT-DECODE.

Opravdu doufám, že jste se dnes dozvěděli něco nového, nezapomeňte lajkovat, sdílet a komentovat.

Reference

Google OAuth2 pomocí nové sady Google Identity Services SDK pro React @react-oauth/google🚀

Dekódování tokenu JWT, které jsou kódovány Base64Url.