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.
- Vytvořte projekt a zvolte název projektu.
- Jakmile máte projekt vytvořen, přejděte k části Pověření - Vytvořit přihlašovací údaje - ID klienta OAuth.
- 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.
- 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.