La autenticación con 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 como servidor. Google Identity Services ofrece Google Sign-In Ruby on Rails 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 para agregar nuestro y . client_id cliente servidor Para crear una aplicación, diríjase a la Consola para desarrolladores de Google Seleccione . Antes de hacer esto, debe configurar su . Crear credenciales > ID de cliente de OAuth pantalla de consentimiento Al crear client_id, asegúrese de incluir y el puerto en el que se ejecuta su cliente en el origen de Javascript autorizado para desarrollo y su URL de producción. localhost Una vez hecho esto, tendrá su del formulario client_id 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 en su si está usando o si usa <script src="https://accounts.google.com/gsi/client" async defer></script> index.html React.js _app.jsx 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", }); }, []); se agrega para mostrar que google se ha definido globalmente en nuestro google global index.html el método crea una instancia de cliente Iniciar sesión con Google basada en campos dados. es un campo obligatorio que obtenemos al crear la aplicación de Google, la de llamada es la función de JavaScript (aquí ) que maneja el token de ID devuelto desde el aviso de One Tap o la ventana emergente. google.accounts.id.initialize client_id devolución signInCallback 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 . Puedes echar un vistazo a más configuraciones false aquí. El método muestra un botón Iniciar sesión con Google. Puedes jugar con las configuraciones. google.accounts.id.renderButton aquí. es el elemento HTML. Al agregar el siguiente código a su página web HTML, document.getElementById("signInDiv") 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 , signInCallback, es nuestra función de devolución de llamada que se puede definir como Paso 3 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, es una URL de servidor que crearemos en el siguiente paso localhost:3000/usuario/google El es una respuesta de Google una vez que hacemos clic en el botón Iniciar sesión o Un toque. resultado El comprende dos campos. resultado : este campo es el token de ID como una cadena JSON Web Token (JWT) codificada en base64 credencial : muestra cómo se selecciona la credencial. Más sobre eso . select_by 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, , agregue un método . app/controllers/users/user_controller.rb google agregue la ruta , en . users/user#google_oauth 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 , que es la gema oficial de Google para verificar los tokens de identificación emitidos. autenticación_google Esto se puede hacer fácilmente usando Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" donde es el JWT recibido del cliente y es una identificación de cliente de la aplicación de Google. access_token aud 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": "your-email@gmail.com", "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 : asegúrese de tener instalados en su servidor y agregue esta PD rack-cors 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 : 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. PPS 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í
