Advertisement
  1. Code
  2. PHP

Crea una página de inicio de sesión de Google en PHP

Scroll to top
Read Time: 10 mins

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

En este artículo voy a explicar cómo integrar el inicio de sesión de Google en tu sitio web PHP. Usaremos la API OAuth de Google, que es una manera fácil y poderosa de añadir el inicio de sesión de Google a tu sitio.

Como usuario web, probablemente hayas experimentado la molestia de tener que administrar diferentes cuentas para diferentes sitios. Específicamente cuando tienes varias contraseñas para los distintos servicios y un sitio web te pide que generes otra cuenta más en su página.

Para lidiar con esto, puedes ofrecer una función de inicio de sesión único para permitir que los visitantes usen sus credenciales existentes para abrir una cuenta en tu sitio. En la actualidad, muchos sitios web permiten a los usuarios iniciar sesión a través de sus cuentas existentes en Google, Facebook o algún otro servicio popular. Esta es una manera conveniente de que los nuevos usuarios se registren con un sitio de terceros en lugar de registrarse para obtener una nueva cuenta con otro nombre de usuario y contraseña más.

En esta publicación usaremos la API OAuth de inicio de sesión de Google, que permite que los usuarios inicien sesión con sus cuentas de Google existentes. Desde luego, los usuarios aún deberían poder registrarse con el formulario de registro habitual en tu sitio, pero proporcionar el inicio de sesión de Google o algo similar puede ayudar a mantener una tasa de retención de usuarios saludable.

Cómo funciona el inicio de sesión de Google

En primer lugar comprendamos el flujo general que sigue el funcionamiento del inicio de sesión de Google en tu sitio.

En la página de inicio de sesión de tu sitio hay dos opciones de entre las que los usuarios pueden elegir para iniciar sesión. La primera es proporcionar un nombre de usuario y una contraseña si ya tienen una cuenta en tu sitio. Y la otra es iniciar sesión en tu sitio mediante sus cuentas de Google existentes.

Cuando hacen clic en el botón Iniciar sesión con Google, esto inicia el flujo de inicio de sesión de Google y lleva a los usuarios al sitio de este último para que ingresen a la cuenta. Una vez ahí, los usuarios entran a sus cuentas con sus credenciales de Google y luego son redirigidos a la página de consentimiento.

En la página de consentimiento se les pedirá permiso a los usuarios para compartir la información de sus cuentas de Google con el sitio de terceros. En este caso, el sitio de terceros es un sitio en el que desean usar su cuenta de Google para iniciar sesión. Se les darán dos opciones: pueden permitirlo o denegarlo.

Una vez que permitan compartir su información con el sitio de terceros, los usuarios serán llevados de vuelta al sitio desde el que iniciaron el flujo de inicio de sesión de Google.

En este punto, un usuario ha iniciado sesión con Google y un sitio de terceros tiene acceso a la información de perfil del usuario, que puede ser usada para crear una cuenta e iniciar sesión.

Ese es el flujo básico de la integración del inicio de sesión de Google en tu sitio. En el resto de la publicación implementaremos este flujo de inicio de sesión en un ejemplo funcional en PHP.

Configurando el proyecto para el inicio de sesión de Google

En esta sección revisaremos la configuración básica necesaria para integrar el inicio de sesión de Google en tu sitio web PHP.

Crea un proyecto API de Google

En primer lugar necesitas crear una aplicación con Google que te permitirá registrar tu sitio con este último. Te permite configurar información básica sobre tu sitio web y también un par de detalles técnicos.

Una vez que hayas iniciado sesión con Google, abre la Google Developers console (Consola de Desarrolladores de Google). Esta debe abrir la página del Google Dashboard (Panel de Google) como se muestra en la siguiente captura de pantalla.

Google DashboardGoogle DashboardGoogle Dashboard

Haz clic en el vínculo Select a project (Seleccionar un proyecto) desde el menú superior izquierdo. Eso debe abrir una ventana emergente como se muestra en la captura de pantalla a continuación.

Select a project pop upSelect a project pop upSelect a project pop up

Haz clic en el vínculo New Project (Proyecto nuevo) y se te pedirá que escribas los datos para Project Name (Nombre del proyecto) y otros detalles. Introduce los detalles necesarios como se muestra en el siguiente ejemplo.

New Project page in Google DashboardNew Project page in Google DashboardNew Project page in Google Dashboard

Haz clic en el botón Create (Crear) para guardar tu nuevo proyecto. Serás redirigido a la página del Dashboard (Panel). Haz clic en Credentials (Credenciales) en la barra del lado izquierdo y ve a la pestaña OAuth consent screen (Pantalla de consentimiento de OAuth).

OAuth Consent ScreenOAuth Consent ScreenOAuth Consent Screen

En esta página debes ingresar los detalles relacionados con tu aplicación, como el nombre de la aplicación, su logotipo y algunos otros detalles. Ingresa los detalles necesarios y guárdalos. Para fines de prueba, simplemente escribir el nombre de la aplicación es suficiente.

A continuación haz clic en Credentials (Credenciales) en la barra del lado izquierdo. Eso debería mostrarte el cuadro API Credentials (Credenciales API) dentro de la pestaña Credentials (Credenciales) como se muestra en la siguiente captura de pantalla.

API Credentials selection in Google DashboarAPI Credentials selection in Google DashboarAPI Credentials selection in Google Dashboar

Haz clic en Client credentials > OAuth client ID (Credenciales del cliente > ID OAuth del cliente) para crear un nuevo conjunto de credenciales para nuestra aplicación. Eso debe mostrarte una pantalla que te pide que elijas una opción adecuada. En nuestro caso, selecciona la opción Web application (Aplicación web) y haz clic en el botón Create (Crear). Se te pedirá que proporciones algunos detalles adicionales sobre tu aplicación.

Create OAuth Client IDCreate OAuth Client IDCreate OAuth Client ID

Escribe los detalles como se muestra en la captura de pantalla anterior ¡y guarda!. Por supuesto, debes establecer el Redirect URI (URI de redireccionamiento) de acuerdo a la configuración de tu aplicación. Se trata del URL al que el usuario será redirigido después de iniciar sesión.

En este punto hemos creado la aplicación cliente OAuth2 de Google y ahora deberíamos poder usar esta aplicación para integrar el inicio de sesión de Google a nuestro sitio. Por favor anota los valores Client ID y Client Secret que se requerirán durante la configuración de la aplicación por nuestra parte. Siempre puedes encontrar Client ID y Client Secret al editar tu aplicación.

Instala la biblioteca cliente SDK para PHP de Google

En esta sección veremos cómo instalar la biblioteca cliente API para PHP de Google. Puedes elegir entre dos opciones para instalarla: mediante el uso de Composer o descargando e instalando los archivos de la biblioteca manualmente.

A través de Composer

Si prefieres instalarla usando Composer, solamente necesitas ejecutar el siguiente comando.

¡Y eso es todo!

Descarga la versión

Si no quieres usar Composer, también puedes descargar la versión estable más reciente de la página oficial de la API.

En mi ejemplo simplemente usé Composer.

Si estás siguiendo las instrucciones, ya deberías haber configurado tu aplicación Google y también instalado la biblioteca cliente API para PHP de Google. En la siguiente sección, que es la final, veremos cómo usar esta biblioteca en tu sitio PHP.

Integración con la biblioteca cliente

Recuerda que, al configurar la aplicación Google, tuvimos que proporcionar el redirect URI (URI de redireccionamiento) en la configuración de la aplicación. Y establecimos su valor para que redirigiera a https://localhost/redirect.php. Ahora es momento de crear el archivo redirect.php.

Sigue adelante y crea el archivo redirect.php con el siguiente contenido.

Revisemos las partes clave del código.

Lo primero que necesitamos hacer es incluir el archivo autoload.php. Este es parte de Composer y garantiza que las clases que usemos en nuestra secuencia de comandos se carguen automáticamente.

A continuación hay una sección de configuración que inicializa la configuración de la aplicación estableciendo los ajustes necesarios. Por supuesto, debes reemplazar los marcadores de posición con tus valores correspondientes.

La siguiente sección crea una instancia del objeto Google_Client que se utilizará para realizar diversas acciones. Junto con eso, también hemos inicializado las configuraciones de nuestra aplicación.

A continuación hemos añadido ámbitos para el correo electrónico y el perfil, así que después de iniciar sesión tenemos acceso a la información básica del perfil.

Por último, tenemos un fragmento de código que se encarga de la magia en el flujo del inicio de sesión.

En primer lugar revisemos la parte else, que se activará cuando accedas a la secuencia de comandos directamente. Esta muestra un vínculo que dirige al usuario a Google para que inicie sesión. Es importante tomar en cuenta que hemos usado el método createAuthUrl de Google_Client para generar el URL OAuth.

Después de hacer clic en el vínculo de inicio de sesión de Google, los usuarios serán llevados al sitio de Google para iniciar sesión. Una vez que lo hacen, Google redirige a los usuarios de vuelta a nuestro sitio enviando la variable de cadena de consulta code. Y es entonces cuando se activará el código PHP del bloque if. Usaremos el código para intercambiar el token de acceso.

Una vez que tenemos el token de acceso, podemos usar el servicio Google_Service_Oauth2 para obtener la información de perfil del usuario conectado.

De esta manera tendrás acceso a la información de perfil una vez que el usuario inicie sesión en la cuenta de Google. Puedes usar esta información para crear cuentas en tu sitio o puedes almacenarla en una sesión. Básicamente, la manera en la que usas esta información y cómo respondes al hecho de que el usuario ha iniciado sesión en tu sitio dependen de ti.

Útiles secuencias de comandos para formularios en PHP

Hoy discutimos cómo puedes integrar el inicio de sesión de Google en tu sitio web PHP. Esto permite a los usuarios iniciar sesión con sus cuentas de Google existentes si no quieren crear otra cuenta más para tu servicio.

Si estás buscando secuencias de comandos en PHP que puedas usar inmediatamente, te recomiendo que visites las siguientes publicaciones que resumen algunas excelentes secuencias de comandos que están disponibles a un costo bajo.

¡Hazme saber en los comentarios a continuación si tienes alguna pregunta!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.