Cómo implementar el inicio de sesión de Google One Tap con Ruby on Rails

La autenticación con Google Sign-In es una práctica común en las aplicaciones modernas. En esta publicación de blog, analizaremos cómo integrar Google Identity Services en cualquiera de sus aplicaciones front-end que utilicen Ruby on Rails como servidor. Google Identity Services ofrece

1. Botón de inicio de sesión/registro personalizado

   

Iniciar sesión con un toque

¡Vamos a sumergirnos!

Paso 1: Cree una aplicación en Google Developer Console.

Para usar Google Sign In o One Tap, necesitamos un client_id para agregar nuestro cliente y servidor .

• Para crear una aplicación, diríjase a la Consola para desarrolladores de Google

• Seleccione Crear credenciales > ID de cliente de OAuth . Antes de hacer esto, debe configurar su pantalla de consentimiento .

• Al crear client_id, asegúrese de incluir localhost y el puerto en el que se ejecuta su cliente en el origen de Javascript autorizado para desarrollo y su URL de producción.

  
  

• Una vez hecho esto, tendrá su client_id del formulario 1234567890-abcdefg.apps.googleusercontent.com

  
  

Para obtener más detalles sobre la configuración de la aplicación, puede leer aquí

Paso 2: configurar la biblioteca en el cliente

Para cargar la biblioteca del cliente, agregue <script src="https://accounts.google.com/gsi/client" async defer></script> en su index.html si está usando React.js o _app.jsx si usa Next.js.

Paso 3: mostrar el botón de inicio de sesión personalizado

 useEffect(() => { /* global google */ google.accounts.id.initialize({ client_id: "YOUR_GOOGLE_CLIENT_ID", callback: signInCallback, cancel_on_tap_outside: false, }); google.accounts.id.renderButton(document.getElementById("signInDiv"), { theme: "outline", size: "large", }); }, []);

• google global se agrega para mostrar que google se ha definido globalmente en nuestro index.html

  
  

• google.accounts.id.initialize el método crea una instancia de cliente Iniciar sesión con Google basada en campos dados. client_id es un campo obligatorio que obtenemos al crear la aplicación de Google, la devolución de llamada es la función de JavaScript (aquí signInCallback ) que maneja el token de ID devuelto desde el aviso de One Tap o la ventana emergente.

  
  

• De manera predeterminada, si un usuario hace clic en cualquier parte de la pantalla, se aplica un enfriamiento exponencial en el aviso de One Tap. En caso de que desee que el indicador esté siempre visible, establezca este valor en false . Puedes echar un vistazo a más configuraciones aquí.

  
  

• El método google.accounts.id.renderButton muestra un botón Iniciar sesión con Google. Puedes jugar con las configuraciones. aquí.

  
  

• document.getElementById("signInDiv") es el elemento HTML. Al agregar el siguiente código a su página web HTML,

 return ( <div className="App"> <div id="signInDiv" /> </div> );

podrás ver un botón personalizado como este

Paso 4: Mostrar el aviso de un toque

• Para mostrar el indicador, agregue esto en useEffect google.accounts.id.prompt();

Paso 5: Definición de la función de devolución de llamada

• Como se mencionó en el Paso 3 , signInCallback, es nuestra función de devolución de llamada que se puede definir como

 const signInCallback = (result) => { if (result.credential) { const params = { token: result.credential }; axios .post("http://localhost:3000/user/google", params) .then((res) => { const { authToken, ...userInfo } = res.data.data; // set token in local storage/cookies based on your authentication method // redirect to the authenticated page }) .catch((err) => console.log(err)); } };

dónde,

• localhost:3000/usuario/google es una URL de servidor que crearemos en el siguiente paso

  
  

• El resultado es una respuesta de Google una vez que hacemos clic en el botón Iniciar sesión o Un toque.

  
  

• El resultado comprende dos campos.

  • credencial : este campo es el token de ID como una cadena JSON Web Token (JWT) codificada en base64

  • select_by : muestra cómo se selecciona la credencial. Más sobre eso aquí .

    
    

• Tomamos la credencial del resultado y la pasamos como parámetro a nuestro servidor.

Paso 6: agregar el controlador y la ruta al servidor

Crearemos una ruta en el servidor para manejar la solicitud del cliente. Antes de hacer eso, necesitamos crear un controlador que acepte el JWT del cliente.

• Cree un archivo, app/controllers/users/user_controller.rb , agregue un método google .

  
  

• agregue la ruta users/user#google_oauth , en config/routes.rb .

  
  

• Una vez que la ruta recibe el JWT, el primer y más importante paso es verificar si el JWT está validado. Para ello, podemos utilizar la gema autenticación_google , que es la gema oficial de Google para verificar los tokens de identificación emitidos.

  
  

• Esto se puede hacer fácilmente usando

 Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID"

donde access_token es el JWT recibido del cliente y aud es una identificación de cliente de la aplicación de Google.

• Si el token es válido, devolverá un hash como este o lanzará una excepción

 { "iss": "https://accounts.google.com", "nbf": 12345678, "aud": "YOUR_GOOGLE_CLIENT_ID, "sub": "1112223333444", "email": "[email protected]", "email_verified": true, "azp": "YOUR_GOOGLE_CLIENT_ID", "name": "First Last", "picture": "https://lh3.googleusercontent.com/a/AItbvmnvsIQFJw", "given_name": "First", "family_name": "Last", "iat": 1653797115, "exp": 1653805725, "jti": "8ffa19190gngd46745ff558821f953802" }

• Si el token es válido, puede verificar en su base de datos si el usuario existe o no y, en consecuencia, crear un usuario. Una vez hecho esto, puede iniciar la sesión del usuario o redirigirlo según su método de autenticación.

  
  

 # users/user_controller.rb def google begin data = Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" // find the user in the data // if the user does not exist, create a user using data // sign the user (based on your authentication method) rescue StandardError => e end end

 # config/routes.rb scope :user do post 'google' => 'users#user_controller.rb' end

PD : asegúrese de tener rack-cors instalados en su servidor y agregue esta aplicación.rb

 config.middleware.insert_before 0, Rack::Cors do allow do origins '*' resource( '*', headers: :any, expose: ['Authorization'], methods: %i[get patch put delete post options show] ) end end

para evitar enfrentar errores como este

PPS : si su aplicación utiliza la biblioteca de la plataforma de JavaScript de inicio de sesión de Google para la web, asegúrese de migrarla al servicio de identidad de Google, ya que el primero quedará obsoleto. Enlace

Espero que este artículo le ayude a integrar One Tap Login en sus proyectos. Para obtener información más detallada, puede consultar el oficial documentos .

También publicado aquí