Utilice la autenticación OAuth de Google con React

En este artículo, aprenderá a usar Google OAuth para crear una concesión de código de autorización compatible con OAuth 2.0 en un proyecto de React. Esto abstrae todos los desafíos asociados con la creación y el mantenimiento de una solución de autenticación lejos de usted y en Google OAuth.

Utilice la autenticación OAuth de Google con React

Primero, debemos generar ID de cliente de Google y secreto de cliente. Para comenzar, en su navegador, busque "Google OAuth" y haga clic en el primer enlace de los resultados de búsqueda.

Esta página contiene los procedimientos paso a paso para obtener las claves de acceso. Sin embargo, lo guiaré a través de la generación de la identificación del cliente y el secreto de manera adecuada.

Haga clic en el enlace de la Consola API de Google para recibir las credenciales de cliente de OAuth 2.0.

Crear un nuevo proyecto

Ahora, elija Google-Oauth en el menú desplegable y se abrirá un modal que le permitirá seleccionar un proyecto actual o crear uno nuevo.

Si aún no lo ha hecho, haga clic en el botón "Nuevo proyecto", ingrese el nombre del proyecto y haga clic en el botón "CREAR".

Crear una pantalla de consentimiento de OAuth

Antes de generar las credenciales, debemos desarrollar una pantalla de consentimiento. Cuando el usuario haga clic en el botón Iniciar sesión con Google OAuth, será llevado a la pantalla de consentimiento.

Luego, haga clic en la opción de la pantalla de consentimiento de OAuth en la barra lateral izquierda debajo de "API y servicios". Si su aplicación es para el público en general, seleccione el Tipo de usuario externo y haga clic en el botón "CREAR" en la pantalla de consentimiento de OAuth.

Después de eso, complete la página de consentimiento de la aplicación con la información esencial.

Una vez que haya completado los campos, haga clic en el botón "GUARDAR Y CONTINUAR".

Haga clic en "AÑADIR O ELIMINAR ÁMBITOS" en la página de ámbitos. La cantidad de ámbitos que puede agregar está determinada por el tipo de aplicación que está desarrollando, pero solo me interesa la dirección de correo electrónico y la información del perfil del usuario.

Desplácese hacia abajo y haga clic en el botón "ACTUALIZAR" después de seleccionar los ámbitos. Luego, presione el botón "GUARDAR Y CONTINUAR".

Para agregar un usuario de prueba, vaya a la pestaña Usuarios de prueba y haga clic en el botón "AÑADIR USUARIOS". Tenga en cuenta que solo el usuario de prueba podrá iniciar sesión en su aplicación mientras esté en modo de espacio aislado.

Después de agregar el usuario de prueba, haga clic en "GUARDAR Y CONTINUAR".

En la pestaña Resumen, verifique cuidadosamente su información y haga clic en el botón "VOLVER AL TABLERO" cuando esté seguro de que la información que proporcionó es válida.

Credenciales de autenticación

Seleccione Credenciales en la barra lateral debajo de "API y servicios". En la pestaña Credenciales, elija ID de cliente de OAuth y haga clic en "CREAR CREDENCIALES".

A continuación, proporcione los detalles necesarios para acceder a los datos del usuario. El URI de redirección aprobado debe hacer referencia a una ruta de servidor. Esto nos permitirá enviar la solicitud GET al servidor desde la pantalla de consentimiento.

Puede tomar otros enfoques, pero creo que este método es más rápido.

Después de proporcionar los datos requeridos, haga clic en el botón "CREATE", y debería obtener el ID de cliente generado y el secreto del cliente.

Puede guardar la identificación del cliente y el secreto del cliente en su cuaderno porque los implementaremos en nuestra aplicación de reacción. Tenga en cuenta que he usado diferentes ID de clientes y secretos de clientes de la captura de pantalla anterior.

Ahora profundicemos en la aplicación React, donde creamos una funcionalidad de inicio y cierre de sesión utilizando la autenticación Google Oauth2.

Primero, genere el código de inicio de sesión, que ayuda durante la función de inicio de sesión.

Ejemplo de código: login.js:

import {GoogleLogin} from 'react-google-login';

const clientId =
    '925694800644-urbtc7m556a52ba9vjhj7vevg2nir6vt.apps.googleusercontent.com';

function Login() {
  const onSuccess = (res) => {
    console.log('Login Success! current user: ', res.profileObj);
  };

  const onFailure = (res) => {
    console.log('Login Failed: res: ', res);
  };

  return (
    <div id='signInButton'>
      <GoogleLogin
  clientId = {clientId} buttonText = 'Login'
        onSuccess={onSuccess}
        onFailure={onFailure}
        cookiesPolicy={'single_host_origin'}
        isSignedIn={
    true}
      />
    </div>
  );
}

export default Login;

El ID de cliente que generamos se puede usar creando una variable llamada ID de cliente de Google. Creé un botón de inicio de sesión en el siguiente código importado de react-google-login.

También desarrollamos un método que brinda información diferente en la consola. Si el inicio de sesión fue exitoso, envíe mensajes como ¡Inicio de sesión exitoso!.

Ejemplo de código: logout.js:

import {GoogleLogout} from 'react-google-login';

const clientId =
    '925694800644-urbtc7m556a52ba9vjhj7vevg2nir6vt.apps.googleusercontent.com';

function Logout() {
  const onSuccess = () => {
    console.log('Log out successfully!');
  };

  return (
    <div id='signOutButton'>
      <GoogleLogout
        clientId={clientId}
        buttonText={'Logout'}
        onLogoutSuccess={
    onSuccess}
      />
    </div>
  );
}

export default Logout;

Esto es lo mismo que la página de inicio de sesión. Importamos el cierre de sesión de Google desde react-google-login y creamos una variable de ID de cliente de Google.

Ejemplo de código: App.js:

import {gapi} from 'gapi-script';
import {useEffect} from 'react';

import LoginButton from './components/login';
import LogoutButton from './components/logout';

const clientId =
    '925694800644-urbtc7m556a52ba9vjhj7vevg2nir6vt.apps.googleusercontent.com';

function App() {
  useEffect(() => {
    function start() {
      gapi.client.init({
        clientId: clientId,
        scope: '',
      });
    }
    gapi.load('client:auth2', start);
  });

  return (
    <div className='App'>
      <LoginButton />
      <LogoutButton />
    </div>
  );
}

export default App;

En App.js, hemos representado nuestras dos páginas, es decir, login.js y logout.js. El código anterior muestra que se utiliza la palabra clave gapi.

gapi es una biblioteca de cliente API de Google para JavaScript que ayuda a cargar oauth2 en las páginas de reacción.

gapi.load('client:auth2', start);

Por lo general, se llama cuando se carga la página. El carácter ":" se utiliza para cargar varias bibliotecas.

Se utiliza aquí para cargar las bibliotecas cliente y auth2. Cuando ejecute el código, verá algo como lo siguiente.

Hay dos botones; Iniciar sesión y Cerrar sesión. Cuando haga clic en iniciar sesión, se le permitirá seleccionar la ID de inicio de sesión de Google y luego verá cierta información en la consola.

De manera similar, cuando haga clic en Cerrar sesión, se cerrará la sesión y verá cierta información en la consola.

De esta manera, podemos usar la autorización de Google Oauth2 para autenticar al usuario con el botón Iniciar/Cerrar sesión de Google en Reaccionar.