Autenticación de Google del lado del servidor usando FastAPI y ReactJS

FastAPI es un marco web moderno y rápido para crear API con Python, y react es una biblioteca de JavaScript que se puede usar para desarrollar aplicaciones de una sola página. Entonces, en este artículo, discutiremos la autenticación del lado del servidor usando FastAPI y Reactjs y también configuraremos la sesión.

En primer lugar, será mejor si crea un entorno virtual en python para mantener nuestras dependencias separadas de otros proyectos. Para hacer esto, instale un entorno virtual y actívelo. Puede consultar este artículo o leer sobre esto en Internet. 

Antes de continuar, cree un proyecto en Google Cloud Console . En nuestro caso, el origen de JavaScript autorizado es http://localhost:3000 y el URI de redireccionamiento autorizado es http://localhost:3000/auth/google/callback .

Entonces, para la autenticación, usaremos la autenticación de Google y recibiremos el token de ID, ese token de ID se transferirá al backend y luego el backend verificará si es válido o no. Si es válido, configuraremos la sesión; de lo contrario, se rechazará la solicitud.

Comencemos primero con la configuración del backend:

1. pip install fastapi: para que la interfaz REST llame a funciones de uso común para implementar aplicaciones.
2. pip install itsdangerous: le permite usar un serializador de inicio de sesión para cifrar y descifrar el token de cookie.
3. pip install uvicorn: para servidor ASGI .
4. pip install google-auth: biblioteca de autenticación de Google para Python.
5. requests de instalación de pip: para realizar requests HTTP en Python.

Usaremos el puerto 8000 para el backend y el 3000 para la parte frontal. Se deben agregar los orígenes permitidos para evitar errores de cors. En nuestro caso, es “http://localhost:3000” .

Ahora nuestro siguiente paso será crear un punto final de API de autenticación para recibir el token de ID. Luego llame a la función verificar_oauth2_token y pase el token de ID y el ID de cliente para su verificación. Si la solicitud tiene éxito, configure la sesión. Estamos agregando una identificación de correo electrónico en la cookie de sesión solo por ejemplo.

from typing import Optional
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from starlette.requests import Request
from starlette.middleware.sessions import SessionMiddleware
import uvicorn
  
  
from google.oauth2 import id_token
from google.auth.transport import requests
  
app = FastAPI()
  
origins = [
    "http://localhost:3000",
]
  
app.add_middleware(SessionMiddleware ,secret_key='maihoonjiyan')
  
  
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
  
@app.get("/auth")
def authentication(request: Request,token:str):
    try:
        # Specify the CLIENT_ID of the app that accesses the backend:
        user =id_token.verify_oauth2_token(token, requests.Request(), "116988546-2a283t6anvr0.apps.googleusercontent.com")
  
        request.session['user'] = dict({
            "email" : user["email"] 
        })
          
        return user['name'] + ' Logged In successfully'
  
    except ValueError:
        return "unauthorized"
  
@app.get('/')
def check(request:Request):
    return "hi "+ str(request.session.get('user')['email'])
  
if __name__ == "__main__":
    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)

El servidor backend está listo para ejecutar python filename.py , para el frontend cree una aplicación de reacción

npx create-react-app my-app
cd my-app
npm start

Ahora vuelva a instalar un paquete npm npm i react-google-login y agregue el botón de inicio de sesión de Google y la ID del cliente de alimentación. Luego haga una solicitud al backend junto con el token. agregue credenciales: ‘incluir’; de   lo contrario, las cookies no se compartirán con ninguna solicitud que realice después de una autenticación exitosa.

import GoogleLogin from 'react-google-login';
  
const responseGoogle = (response) => {
    if (response.tokenId){
      fetch('http://localhost:8000/auth?token='+ response.tokenId,{
        credentials: 'include',
        // To cause browsers to send a request with credentials included on both same-origin and cross-origin calls, 
        // add credentials: 'include' to the init object you pass to the fetch() method.
       })
      .then((response) => {
        return response.json();
      })
      .then((myJson) => {
        alert(myJson)
      });
    }
}
  
const temp = () =>{
  fetch('http://localhost:8000',{
    credentials:'include' 
  })
  .then((response) => {
    return response.json();
  })
  .then((myJson) => {
    alert(myJson)
  });
}
  
function App() {
  return (
    <div className="App">
        <GoogleLogin
          clientId="116988534719-0j3baq1jkp64v4ghen352a283t6anvr0.apps.googleusercontent.com"
          buttonText="Google Login"
          onSuccess={responseGoogle}
          onFailure={responseGoogle}
          cookiePolicy={'single_host_origin'}
        />
        <br/>
        <button onClick={temp}> Check session </button>
    </div>
  );
}

Aquí el botón de verificación de sesión se usa para verificar si las cookies están configuradas o no después de la autenticación.

Consulte el código completo de toda la aplicación aquí .