Advertencia: Estos datos se proporcionan bajo la Política de datos de usuario de Google . Por favor revise y cumpla con la política. De lo contrario, podría resultar en la suspensión del proyecto o de la cuenta.

Migración desde el inicio de sesión de Google

Esta guía lo ayuda a comprender los cambios y los pasos necesarios para migrar correctamente las bibliotecas de JavaScript de la biblioteca de la plataforma de inicio de sesión de Google anterior a la biblioteca de servicios de identidad de Google más nueva para la autenticación .

Si su cliente utiliza la biblioteca de cliente de la API de Google para JavaScript u otras bibliotecas más antiguas para la autorización , consulte Migración a Google Identity Services para obtener más información.

Autenticacion y autorizacion

La autenticación establece quién es una persona y se conoce comúnmente como registro o inicio de sesión de usuario. La autorización es el proceso de otorgar o rechazar el acceso a datos o recursos. Por ejemplo, su aplicación solicita el consentimiento de su usuario para acceder a Google Drive del usuario.

Al igual que la antigua biblioteca de la plataforma de inicio de sesión de Google , la nueva biblioteca de Google Identity Services está diseñada para admitir procesos de autenticación y autorización.

Sin embargo, la biblioteca más nueva separa los dos procesos para reducir la complejidad de los desarrolladores para integrar las cuentas de Google con su aplicación.

Si su caso de uso solo se refiere a la autenticación, continúe leyendo esta página.

Si su caso de uso incluye autorización, lea Cómo funciona la autorización de usuario y Migrar a Google Identity Services para asegurarse de que su aplicación esté utilizando las API nuevas y mejoradas.

que ha cambiado

Para los usuarios, la nueva biblioteca de Google Identity Services ofrece numerosas mejoras de usabilidad. Los puntos destacados incluyen:

  • Nuevos flujos de inicio de sesión automático y de un toque de baja fricción con menos pasos individuales,
  • un botón de inicio de sesión renovado con personalización del usuario,
  • una marca coherente y un comportamiento de inicio de sesión uniforme en toda la web mejoran la comprensión y la confianza,
  • llegar rápidamente al contenido; los usuarios pueden registrarse e iniciar sesión directa y fácilmente desde cualquier lugar de su sitio sin tener que visitar primero una página de inicio de sesión o de cuenta.

Para los desarrolladores, nuestro enfoque ha sido reducir la complejidad, mejorar la seguridad y hacer que su integración sea lo más rápida y fácil posible. Algunas de estas mejoras incluyen:

  • La opción de agregar el inicio de sesión del usuario al contenido estático de su sitio usando solo HTML,
  • separación de la autenticación de inicio de sesión de la autorización y el intercambio de datos de usuario, la complejidad de una integración OAuth2 ya no es necesaria simplemente para iniciar sesión en su sitio,
  • Se siguen admitiendo los modos emergente y de redireccionamiento, pero la infraestructura OAuth2 de Google ahora redirige al punto final de inicio de sesión de su servidor backend,
  • consolidación de la funcionalidad de las antiguas bibliotecas JavaScript de Google Identity y Google API en una sola biblioteca nueva,
  • para las respuestas de inicio de sesión, ahora puede decidir si usar o no una Promesa y se ha eliminado la indirección a través de funciones de estilo captador para simplificar.

Un ejemplo de migración de inicio de sesión

Si está migrando desde el botón de inicio de sesión de Google existente y solo está interesado en que los usuarios inicien sesión en su sitio, el cambio más sencillo es simplemente actualizar al nuevo botón personalizado. Esto se puede lograr intercambiando bibliotecas de JavaScript y actualizando su base de código para usar un nuevo objeto de inicio de sesión.

Bibliotecas y configuración

La antigua biblioteca de la plataforma de inicio de sesión de Google: apis.google.com/js/platform.js y la biblioteca de cliente de las API de Google para JavaScript : gapi.client , ya no son necesarias para la autenticación y autorización del usuario. Se han reemplazado por una única biblioteca JavaScript nueva de Google Identity Services: accounts.google.com/gsi/client .

Los tres módulos de JavaScript más antiguos: api , client y platform utilizados para iniciar sesión se cargan desde apis.google.com . Para ayudarlo a identificar las ubicaciones donde la biblioteca antigua podría incluirse en su sitio, por lo general:

  • el botón de inicio de sesión predeterminado carga apis.google.com/js/platform.js ,
  • un gráfico de botón personalizado carga apis.google.com/js/api:client.js y
  • el uso directo de gapi.client carga apis.google.com/js/api.js .

En la mayoría de los casos, simplemente puede continuar usando las credenciales de ID de cliente de su aplicación web existente. Como parte de su migración, le recomendamos que revise nuestras Políticas de OAuth 2.0 y use la Consola API de Google para confirmar y, si es necesario, actualizar la siguiente configuración del cliente:

  • sus aplicaciones de prueba y producción usan proyectos separados y tienen sus propias ID de cliente,
  • el tipo de ID de cliente de OAuth 2.0 es "aplicación web" y
  • HTTPS se utiliza para orígenes de JavaScript autorizados y URI de redirección.

Identificación del código afectado y pruebas

Una cookie de depuración puede ayudar a localizar el código afectado y probar el comportamiento posterior a la desaprobación.

En aplicaciones grandes o complejas, puede ser difícil encontrar todo el código afectado por la desaprobación del módulo gapi.auth2 . Para registrar el uso existente de la funcionalidad que pronto quedará obsoleta en la consola, establezca el valor de la cookie G_AUTH2_MIGRATION en informational . Opcionalmente, agregue dos puntos seguidos de un valor clave para iniciar sesión también en el almacenamiento de la sesión. Después de iniciar sesión y recibir las credenciales, revise o envíe los registros recopilados a un servidor para su posterior análisis. Por ejemplo, informational:showauth2use guarda el origen y la URL en una clave de almacenamiento de sesión denominada showauth2use .

Para verificar el comportamiento de la aplicación cuando el módulo gapi.auth2 ya no está cargado, establezca el valor de la cookie G_AUTH2_MIGRATION en enforced . Esto permite probar el comportamiento posterior a la desaprobación antes de la fecha de aplicación.

Posibles valores de la cookie G_AUTH2_MIGRATION :

  • enforced No cargar el módulo gapi.auth2 .
  • informational Registrar el uso de la funcionalidad en desuso en la consola JS. También inicie sesión en el almacenamiento de la sesión cuando se establezca un nombre de clave opcional: informational:key-name .

Para minimizar el impacto del usuario, se recomienda que primero configure esta cookie localmente durante el desarrollo y la prueba, antes de usarla en entornos de producción.

HTML y JavaScript

En este escenario de inicio de sesión de solo autenticación, se muestran el código de ejemplo y las representaciones del botón de inicio de sesión de Google existente. Seleccione entre el modo emergente o de redirección para ver las diferencias en cómo se maneja la respuesta de autenticación mediante una devolución de llamada de JavaScript o mediante una redirección segura al punto final de inicio de sesión del servidor back-end.

la vieja manera

Procesa el botón de inicio de sesión de Google y usa una devolución de llamada para manejar el inicio de sesión directamente desde el navegador del usuario.

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
  </body>
</html>

Modo de redirección

Procesa el botón de inicio de sesión de Google y finaliza con una llamada AJAX desde el navegador del usuario hasta el punto final de inicio de sesión de tus servidores back-end.

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
    <script>
      function handleCredentialResponse(googleUser) {
        ...
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://yourbackend.example.com/tokensignin');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
          console.log('Signed in as: ' + xhr.responseText);
        };
        xhr.send('idtoken=' + id_token);
      }
    </script>
  </body>
</html>

prestado

Los nuevos atributos visuales simplifican el método anterior de crear un botón personalizado , eliminan las llamadas a gapi.signin2.render() y la necesidad de alojar y mantener imágenes y recursos visuales en su sitio.

Google Sign-InGoogle Signed-In

Texto del botón de actualizaciones de estado de inicio de sesión del usuario.

la nueva forma

Para usar la nueva biblioteca en un escenario de inicio de sesión solo de autenticación simple, seleccione el modo emergente o redirigir y use el ejemplo de código para reemplazar su implementación existente en su página de inicio de sesión.

Use una devolución de llamada para manejar el inicio de sesión directamente desde el navegador del usuario.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-callback="handleCredentialResponse">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

Modo de redirección

Google invoca su punto final de inicio de sesión según lo especificado por el atributo data-login_url . Anteriormente, era responsable de la operación POST y el nombre del parámetro. La nueva biblioteca publica el token de ID en su punto final en el parámetro de credential . Por último, verifique el token de ID en su servidor back-end.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-ux_mode="redirect"
         data-login_uri="https://www.example.com/your_login_endpoint">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

prestado

Utilice atributos visuales para personalizar el tamaño, la forma y el color del botón Iniciar sesión con Google. Muestre la ventana emergente One Tap junto con el botón personalizado para mejorar la tasa de inicio de sesión.

Sign In With Google buttonOne Tap popup

El estado de inicio de sesión del usuario no actualiza el texto del botón de "Iniciar sesión" a "Iniciar sesión". Después de dar su consentimiento, o en visitas posteriores, el botón personalizado incluye el nombre, el correo electrónico y la foto de perfil del usuario.

En este ejemplo simple de solo autenticación, la nueva biblioteca accounts.google.com/gsi/client , la clase g_id_signin y el objeto g_id_onload reemplazan la biblioteca apis.google.com/js/platform.js y el objeto g-signin2 .

Además de representar el nuevo botón personalizado, el código de ejemplo también muestra la nueva ventana emergente One Tap. Siempre que muestre el botón personalizado, le recomendamos encarecidamente que también muestre la ventana emergente One Tap para minimizar la fricción del usuario durante el registro y el inicio de sesión.

Aunque no se recomienda debido a la mayor fricción de inicio de sesión, el nuevo botón personalizado se puede mostrar solo, sin mostrar simultáneamente el cuadro de diálogo One Tap. Para ello, establezca el atributo data-auto_prompt en false .

API HTML y JavaScript

El ejemplo anterior muestra cómo usar la nueva API HTML para agregar el inicio de sesión a su sitio web. Alternativamente, puede usar la API de JavaScript funcionalmente equivalente, o mezclar y combinar las API de HTML y JavaScript en su sitio.

Para ver de forma interactiva las opciones de personalización de los botones, como el tipo de devolución de llamada y atributos como: color, tamaño, forma, texto y tema, consulta nuestro generador de códigos . Se puede usar para comparar rápidamente diferentes opciones y generar fragmentos de HTML para usar en su sitio.

Inicie sesión desde cualquier página con One Tap

One Tap es una nueva forma sencilla para que los usuarios se registren o inicien sesión en su sitio. Le permite habilitar el inicio de sesión del usuario directamente desde cualquier página de su sitio y elimina la necesidad de que los usuarios visiten una página de inicio de sesión dedicada. Dicho de otra manera, esto reduce la fricción de registro e inicio de sesión al brindarles a los usuarios la flexibilidad de registrarse e iniciar sesión desde páginas distintas a su página de inicio de sesión.

Para habilitar el inicio de sesión desde cualquier página, le recomendamos que incluya g_id_onload en un encabezado, pie de página u otro objeto compartido incluido en todo su sitio.

También recomendamos agregar g_id_signin , que muestra el botón de inicio de sesión personalizado, solo en sus páginas de inicio de sesión o administración de cuentas de usuario. Ofrezca a los usuarios opciones para registrarse o iniciar sesión mostrando el botón junto con otros botones del proveedor de identidad federada y campos de entrada de nombre de usuario y contraseña.

respuesta simbólica

El inicio de sesión de usuario ya no requiere que comprenda o trabaje con códigos de autorización OAuth2, tokens de acceso o tokens de actualización. En su lugar, se utiliza un token de ID de JSON Web Token (JWT) para compartir el estado de inicio de sesión y el perfil de usuario. Como una simplificación adicional, ya no es necesario que utilice métodos de acceso de estilo "captador" para trabajar con datos de perfil de usuario.

Se devuelve una credencial de token de ID de JWT segura firmada por Google:

  • al controlador de devolución de llamada de JavaScript basado en el navegador del usuario en modo emergente, o
  • a su servidor backend a través de una redirección de Google a su punto final de inicio de sesión cuando el botón Iniciar sesión con Google ux_mode está configurado para redirect .

En ambos casos, actualice sus controladores de devolución de llamada existentes eliminando:

  • llamadas a googleUser.getBasicProfile() ,
  • referencias a BasicProfile y llamadas asociadas a los getId() , getName() , getGivenName() , getFamilyName() , getImageUrl() , getEmail() y
  • uso del objeto AuthResponse .

En su lugar, utilice referencias directas a subcampos de credential en el nuevo objeto JWT CredentialResponse para trabajar con datos de perfil de usuario.

Además, y solo para el modo de redirección, asegúrese de evitar la falsificación de solicitudes entre sitios (CSRF) y verifique el token de ID de Google en su servidor backend .

Para comprender mejor cómo interactúan los usuarios con su sitio, se puede usar el campo select_by en CredentialResponse para determinar el resultado del consentimiento del usuario y el flujo de inicio de sesión específico utilizado.

Cuando un usuario inicia sesión por primera vez en su sitio web, Google solicita al usuario su consentimiento para compartir el perfil de su cuenta con su aplicación. Solo después de dar su consentimiento, el perfil del usuario se comparte con su aplicación en una carga útil de credencial de token de ID. Revocar el acceso a este perfil equivale a revocar un token de acceso en la biblioteca de inicio de sesión anterior.

Los usuarios pueden revocar los permisos y desconectar su aplicación de su cuenta de Google visitando https://myaccount.google.com/permissions . Alternativamente, pueden desconectarse directamente de su aplicación activando una llamada API que implemente; el antiguo método de disconnect ha sido reemplazado por el nuevo método de revoke .

Cuando un usuario elimina su cuenta en su plataforma, se recomienda usar revoke para desconectar su aplicación de su cuenta de Google.

Anteriormente, se podía usar auth2.signOut() para ayudar a administrar el cierre de sesión del usuario desde su aplicación. Cualquier uso de auth2.signOut() debe eliminarse y su aplicación debe administrar directamente el estado de sesión y el estado de inicio de sesión de cada usuario.

Estado de sesión y oyentes

La nueva biblioteca no mantiene el estado de inicio de sesión o el estado de sesión para su aplicación web.

El estado de inicio de sesión de una cuenta de Google y el estado de sesión de su aplicación y el estado de inicio de sesión son conceptos distintos e independientes.

El estado de inicio de sesión del usuario en su cuenta de Google y su aplicación son independientes entre sí, excepto durante el momento de inicio de sesión, cuando sabe que el usuario se ha autenticado correctamente y ha iniciado sesión en su cuenta de Google.

Cuando se incluye Iniciar sesión con Google, Un toque o Inicio de sesión automático en su sitio, los usuarios primero deben iniciar sesión en su cuenta de Google para:

  • dar su consentimiento para compartir su perfil de usuario cuando se registra por primera vez o inicia sesión en su sitio,
  • y más tarde para iniciar sesión en visitas posteriores a su sitio.

Los usuarios pueden permanecer conectados, cerrar sesión o cambiar a una cuenta de Google diferente mientras mantienen una sesión activa e iniciada en su sitio web.

Ahora es responsable de administrar directamente el estado de inicio de sesión de los usuarios de su aplicación web. Anteriormente, el inicio de sesión de Google ayudaba con la supervisión del estado de la sesión del usuario .

Elimine cualquier referencia a auth2.attachClickHandler() y sus controladores de devolución de llamada registrados.

Anteriormente, los oyentes se usaban para compartir cambios en el estado de inicio de sesión de la cuenta de Google de un usuario. Los oyentes ya no son compatibles.

Elimina cualquier referencia a listen() , auth2.currentUser y auth2.isSignedIn .

Galletas

Iniciar sesión con Google hace un uso limitado de cookies, a continuación se incluye una descripción de estas cookies. Consulte Cómo usa Google las cookies para obtener más información sobre los otros tipos de cookies que utiliza Google.

La cookie G_ENABLED_IDPS establecida por la antigua biblioteca de la plataforma de inicio de sesión de Google ya no se usa.

La nueva biblioteca de Servicios de identidad de Google puede configurar opcionalmente estas cookies entre dominios según sus opciones de configuración:

  • g_state almacena el estado de cierre de sesión del usuario y se configura cuando se usa la ventana emergente One Tap o el inicio de sesión automático,
  • g_csrf_token es una cookie de envío doble que se usa para evitar ataques CSRF y se establece cuando se llama a su punto final de inicio de sesión. El valor de su URI de inicio de sesión se puede establecer explícitamente o puede ser el URI de la página actual de forma predeterminada. Se puede llamar a su punto final de inicio de sesión en estas condiciones al usar:

    • API HTML con data-ux_mode=redirect o cuando se establece data-login_uri , o

    • API de JavaScript con ux_mode=redirect y donde google.accounts.id.prompt() no se usa para mostrar el inicio de sesión automático o One Tap.

Si tiene un servicio que administra cookies, asegúrese de agregar las dos cookies nuevas y eliminar la cookie anterior cuando se complete la migración.

Si administra varios dominios o subdominios, consulte Mostrar un toque en los subdominios para obtener más instrucciones sobre cómo trabajar con la cookie g_state .

Referencia de migración de objetos para el inicio de sesión del usuario

Antiguo Nuevo notas
Bibliotecas JavaScript
apis.google.com/js/plataforma.js cuentas.google.com/gsi/cliente Reemplace lo viejo con lo nuevo.
apis.google.com/js/api.js cuentas.google.com/gsi/cliente Reemplace lo viejo con lo nuevo.
Objeto GoogleAuth y métodos asociados:
GoogleAuth.adjuntarClickHandler() IdConfiguration.callback para devolución de llamada de datos JS y HTML Reemplace lo viejo con lo nuevo.
GoogleAuth.usuarioactual.get() CredencialRespuesta Utilice CredentialResponse en su lugar, ya no es necesario.
GoogleAuth.usuarioactual.listen() Remover. El estado de inicio de sesión actual de un usuario en Google no está disponible. Los usuarios deben iniciar sesión en Google para el consentimiento y los momentos de inicio de sesión. El campo select_by en CredentialResponse se puede usar para determinar el resultado del consentimiento del usuario junto con el método de inicio de sesión utilizado.
GoogleAuth.desconectar() google.cuentas.id.revoke Reemplace lo viejo con lo nuevo. La revocación también puede ocurrir desde https://myaccount.google.com/permissions
GoogleAuth.grantOfflineAccess() Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
GoogleAuth.esSignedIn.get() Remover. El estado de inicio de sesión actual de un usuario en Google no está disponible. Los usuarios deben iniciar sesión en Google para el consentimiento y los momentos de inicio de sesión.
GoogleAuth.esSignedIn.listen() Remover. El estado de inicio de sesión actual de un usuario en Google no está disponible. Los usuarios deben iniciar sesión en Google para el consentimiento y los momentos de inicio de sesión.
GoogleAuth.iniciar sesión() Remover. La carga de HTML DOM del elemento g_id_signin o la llamada JS a google.accounts.id.renderButton activa el inicio de sesión del usuario en una cuenta de Google.
Autenticación de Google.cerrar sesión() Remover. El estado de inicio de sesión del usuario para su aplicación y una cuenta de Google son independientes. Google no administra el estado de la sesión de su aplicación.
GoogleAuth.luego() Remover. GoogleAuth está obsoleto.
Objeto GoogleUser y métodos asociados:
GoogleUser.desconectar() google.cuentas.id.revoke Reemplace lo viejo con lo nuevo. La revocación también puede ocurrir desde https://myaccount.google.com/permissions
GoogleUser.getAuthResponse()
GoogleUser.getBasicProfile() CredencialRespuesta Utilice directamente credential y subcampos en lugar de métodos BasicProfile .
GoogleUser.getGrantedScopes() Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
GoogleUser.getHostedDomain() CredencialRespuesta En su lugar, use directamente credential.hd .
GoogleUser.getId() CredencialRespuesta En su lugar, use directamente credential.sub .
GoogleUser.grantOfflineAccess() Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
GoogleUser.grant() Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
GoogleUser.hasGrantedScopes() Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
GoogleUser.isSignedIn() Remover. El estado de inicio de sesión actual de un usuario en Google no está disponible. Los usuarios deben iniciar sesión en Google para el consentimiento y los momentos de inicio de sesión.
GoogleUser.reloadAuthResponse() Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
Objeto gapi.auth2 y métodos asociados:
objeto gapi.auth2.AuthorizeConfig Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
objeto gapi.auth2.AuthorizeResponse Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
objeto gapi.auth2.AuthResponse Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
gapi.auth2.autorizar() Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
gapi.auth2.ClientConfig() Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
gapi.auth2.getAuthInstance() Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
gapi.auth2.init() Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
objeto gapi.auth2.OfflineAccessOptions Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
objeto gapi.auth2.SignInOptions Remover. Un token de ID ha reemplazado los tokens de acceso y los ámbitos de OAuth2.
Objeto gapi.signin2 y métodos asociados:
gapi.signin2.render() Remover. La carga de HTML DOM del elemento g_id_signin o la llamada JS a google.accounts.id.renderButton activa el inicio de sesión del usuario en una cuenta de Google.