Advertisement
  1. Code
  2. Yii

Creando su startup con PHP: Simplificando Onramp con OAuth

by
Read Time:14 minsLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: Email Commands
Building Your Startup: Exporting iCal Files into Calendar Events

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Este tutorial forma parte de la serie Creando su Startup con  PHP en Envato Tuts +. En esta serie, te estoy guiando a través del lanzamiento de un inicio de concepto a realidad utilizando mi aplicación de Meeting Planner como un ejemplo de la vida real. Cada paso a lo largo del camino, voy a lanzar el código de Meeting Planner como código abierto como ejemplo del que puede aprender. También me ocuparé de asuntos relacionados con el inicio de negocios a medida que surjan.

En este tutorial, te guiaré a través de la implementación de la integración de OAuth con redes sociales comunes para que la inscripción y el uso repetido sean más fáciles y eficientes. Exploraré Facebook, Google, Twitter y LinkedIn, las redes que considero las más apropiadas para los usuarios que Meeting Planner busca.

Todo el código para Meeting Planner está escrito en el framework Yii2 para PHP. Si desea obtener más información sobre Yii2, consulte nuestra serie paralela Programación con Yii2 en Envato Tuts+.

Si todavía no ha probado Meeting Planner, trate de programar su primera reunión ahora. Está realmente empezando a completarse este año. En última instancia, pude usar el soporte incorporado de AuthClient de Yii2 para proporcionar la conexión de todas las redes de arriba, así que puedes usarlas para registrarte ahora.

La regeneración es agradable. Si tiene alguna pregunta o sugerencia de tema, publique un comentario a continuación. También puede contactarme en Twitter @reifman.

¿Qué es AuthClient?

AuthClient es el soporte integrado de Yii para que sus aplicaciones se autentiquen a través de servicios de terceros con OpenID, OAuth u OAuth2.

Si siguió mi serie Yii2 en junio de 2015, me habrías visto usando AuthClient para integrar con Google a través de OpenID, pero la compañía terminó su soporte para la especificación poco después. Luego, en diciembre, escribí un tutorial que usaba la extensión Yii2-User para agregar soporte de Google OAuth— el framework Yii2 aún no lo tenía. Sin embargo, Yii2-User no se integra bien con las bases de código establecidas que ya tienen una base de código orientada al usuario. Pero afortunadamente, el framework Yii2 desde entonces había añadido soporte para Google OAuth, y todo se ha vuelto más sencillo.

En este tutorial, te guiaré a través del uso de la nueva funcionalidad de AuthClient para integrarte con una variedad de redes sociales populares. Fuera de la caja, Yii proporciona soporte para los siguientes clientes:

Otra motivación para apoyar la conexión a Meeting Planner a través de las redes sociales es que permite a las personas a aparecer y compartir fácilmente su nombre y correo electrónico con nosotros. Con el registro de correo electrónico y contraseña, en realidad nunca aprendemos su nombre. Sin embargo, Twitter, a diferencia de otras redes sociales, crea barreras significativamente problemáticas para la obtención de direcciones de correo electrónico de los usuarios, lo que finalmente me llevó a desactivarlo por ahora.

Comencemos con la integración del código.

Instalación de AuthClient en nuestra aplicación

Primero, necesitamos instalar los componentes Yii para OAuth, el AuthClient de Yii.

Añadir AuthClient al Composer

Añadamos la biblioteca AuthClient a composer.json:

Entonces, necesitamos actualizar al composer:

Configuración AuthClient

Y, necesitamos agregar la configuración de configuración de AuthClient a su archivo de configuración en \frontend\config\main.php

Agregue elementos de array para todos los servicios de terceros que desee admitir (los detalles de cada uno se pueden encontrar en la Guía de AuthClient):

Para obtener códigos para todas esas claves y secretos, debe registrar su aplicación en cada red social. Esto puede llevar mucho tiempo.

Registro de aplicaciones para desarrolladores

Siga a lo largo de que te guíe a través del registro con algunas de las redes y algunos de los aspectos de configuración más profundos.

Registrarse con Twitter

Crear una nueva aplicación de Twitter en el panel de aplicaciones de Twitter:

Building Your Startup OAuth - Create AppBuilding Your Startup OAuth - Create AppBuilding Your Startup OAuth - Create App

Haga clic en Crear nueva aplicación: descubrí que la URL de devolución de llamada era innecesaria, pero por ahora utilicé http://mydomain.com/user/security/auth.

Building Your Startup OAuth - Twitter Dev App DetailsBuilding Your Startup OAuth - Twitter Dev App DetailsBuilding Your Startup OAuth - Twitter Dev App Details

Esta es la nueva página de nuestra aplicación:

Building Your Startup OAuth - Twitter App PageBuilding Your Startup OAuth - Twitter App PageBuilding Your Startup OAuth - Twitter App Page

Aquí está la página Configuración:

Building Your Startup OAuth - Twitter Dev App SettingsBuilding Your Startup OAuth - Twitter Dev App SettingsBuilding Your Startup OAuth - Twitter Dev App Settings

Aquí están las claves y las fichas de acceso. Aquí, necesitamos copiar la Consumer Key (API Key) y el Consumer Secret (API Secret):

Building Your Startup OAuth - Twitter Dev App Keys and TokensBuilding Your Startup OAuth - Twitter Dev App Keys and TokensBuilding Your Startup OAuth - Twitter Dev App Keys and Tokens

Esas llaves van en nuestro archivo mp.ini, que se lee en la variable $config arriba para configurar AuthClient para Twitter.

Registrar la aplicación en Facebook

A continuación, vayamos a la consola de desarrolladores de Facebook y añada una nueva aplicación:

Building Your Startup OAuth - Facebook Dev ConsoleBuilding Your Startup OAuth - Facebook Dev ConsoleBuilding Your Startup OAuth - Facebook Dev Console

Elegiremos crear una aplicación de Sitio Web WWW por ahora:

Building Your Startup OAuth - Facebook Dev Console Add an AppBuilding Your Startup OAuth - Facebook Dev Console Add an AppBuilding Your Startup OAuth - Facebook Dev Console Add an App

Proporcione el nombre de nuestra aplicación:

Building Your Startup OAuth - Facebook Dev Console Generate App IDBuilding Your Startup OAuth - Facebook Dev Console Generate App IDBuilding Your Startup OAuth - Facebook Dev Console Generate App ID

Y recopile nuestro nuevo ID de aplicación:

Building Your Startup OAuth - Facebook Dev Console Create an App DialogsBuilding Your Startup OAuth - Facebook Dev Console Create an App DialogsBuilding Your Startup OAuth - Facebook Dev Console Create an App Dialogs

Piden toda la información regular, como URLs:

Building Your Startup OAuth - Facebook Dev Console App Webpage URLBuilding Your Startup OAuth - Facebook Dev Console App Webpage URLBuilding Your Startup OAuth - Facebook Dev Console App Webpage URL

Y luego puede encontrar nuestra aplicación Meeting Planner en la lista:

Building Your Startup OAuth - Facebook Dev Console with Apps ListedBuilding Your Startup OAuth - Facebook Dev Console with Apps ListedBuilding Your Startup OAuth - Facebook Dev Console with Apps Listed

Aquí está el panel de Facebook para su aplicación:

Building Your Startup OAuth - Facebook Dev Console Finished App PageBuilding Your Startup OAuth - Facebook Dev Console Finished App PageBuilding Your Startup OAuth - Facebook Dev Console Finished App Page

Registrarse en Google

Las API de Google son un poco más complejas que Twitter y Facebook, por lo que el UX es un poco más difícil de seguir. Pero básicamente, una vez que creas una aplicación, necesitas las claves de OAuth 2.0, que puedes obtener al abrir el área de la aplicación en la pantalla de credenciales:

Building Your Startup OAuth - Google Dev App CredentialsBuilding Your Startup OAuth - Google Dev App CredentialsBuilding Your Startup OAuth - Google Dev App Credentials

Eso te lleva aquí:

Building Your Startup OAuth - Google Dev App Keys and redirect URLsBuilding Your Startup OAuth - Google Dev App Keys and redirect URLsBuilding Your Startup OAuth - Google Dev App Keys and redirect URLs

Por motivos de seguridad, Google (y LinkedIn) requieren una lista completa de las rutas y parámetros de URL que se pueden utilizar durante una secuencia de OAuth. Mientras que en el desarrollo, esto puede requerir un montón de ajuste, incluso para las pruebas de localhost.

Una vez que los haya ingresado, los verá a continuación:

Building Your Startup OAuth - Google Dev App All Those URLsBuilding Your Startup OAuth - Google Dev App All Those URLsBuilding Your Startup OAuth - Google Dev App All Those URLs

Google hace un buen trabajo al ayudarle a configurar la pantalla de consentimiento que sus usuarios verán cuando intenten inscribirse o vincular su cuenta de Google a Meeting Planner:

Building Your Startup OAuth - Google Dev App Credentials PreviewBuilding Your Startup OAuth - Google Dev App Credentials PreviewBuilding Your Startup OAuth - Google Dev App Credentials Preview

Registrarse con LinkedIn

LinkedIn es bastante simple en comparación con Google. Requiere los detalles básicos para su aplicación:

Building Your Startup OAuth - LinkedIn Dev App SettingsBuilding Your Startup OAuth - LinkedIn Dev App SettingsBuilding Your Startup OAuth - LinkedIn Dev App Settings

Al igual que Google, que requieren todas las direcciones URL que va a utilizar en el desarrollo y la producción. También puede obtener las claves en esta página:

Building Your Startup OAuth - LinkedIn Dev Keys and Redirect URLs againBuilding Your Startup OAuth - LinkedIn Dev Keys and Redirect URLs againBuilding Your Startup OAuth - LinkedIn Dev Keys and Redirect URLs again

Colocar claves en nuestro archivo de configuración

En la protección de sus claves de GitHub, he descrito en detalle cómo uso un archivo de configuración para almacenar todas mis claves aparte de mi repositorio GitHub. A continuación, incluyo este archivo al principio de los archivos de configuración de Yii. Esto me impide  accidentalmente subir mis llaves a mi repositorio y comprometer mis cuentas.

Colocamos las claves y secretos de la aplicación de Twitter y Facebook en /var/secure/mp.ini fuera del repositorio:

Aquí de nuevo el código en \frontend\config\main.php que incluye estas configuraciones y establece las variables de configuración individuales:

Actualización del esquema para almacenar claves de sesión

Ahora que estamos listos para escribir código para integrar la suscripción social y el inicio de sesión, necesitamos la base de datos para crear una tabla Auth que almacenará el servicio social, su ID para la persona y el user_id para esa persona en Meeting Planner:

A continuación, le mostramos la migración:

Aquí está el resultado cuando lo ejecutamos:

Una vez más, utilicé el generador de código Gii de Yii para crear el modelo Auth:

Building Your Startup OAuth - Yiis Gii Model Generator of Auth ModelBuilding Your Startup OAuth - Yiis Gii Model Generator of Auth ModelBuilding Your Startup OAuth - Yiis Gii Model Generator of Auth Model

En última instancia, la tabla Auth almacenará contenido como este:

Building Your Startup OAuth - Database view of Auth tableBuilding Your Startup OAuth - Database view of Auth tableBuilding Your Startup OAuth - Database view of Auth table

Agregue el widget AuthChoice a Meeting Planner

El widget AuthChoice de Yii2 hace un excelente trabajo al implementar los botones de inicio de sesión para cada servicio que configure. Y lo hace en el orden en que se configura la gama de servicios y claves (para que pueda cambiarlo).

Es muy sencillo agregar el widget a nuestros formularios en login.php y signup.php:

Aquí está nuestra página de registro:

Building Your Startup OAuth - The New Login Screen with AuthChoice Widget Buttons to Social NetworksBuilding Your Startup OAuth - The New Login Screen with AuthChoice Widget Buttons to Social NetworksBuilding Your Startup OAuth - The New Login Screen with AuthChoice Widget Buttons to Social Networks

Para los usuarios existentes que han iniciado sesión, he creado una forma sencilla para que puedan vincular su cuenta. Se llama Link Social Accounts en la página de configuración del perfil:

Building Your Startup OAuth - New Link Social AccountsBuilding Your Startup OAuth - New Link Social AccountsBuilding Your Startup OAuth - New Link Social Accounts

Si hace clic en LinkedIn, aquí está su pantalla OAuth que le pedirá que dé permiso a Meeting Planner:

Building Your Startup OAuth - LinkedIn Permissions PageBuilding Your Startup OAuth - LinkedIn Permissions PageBuilding Your Startup OAuth - LinkedIn Permissions Page

Y aquí está la pantalla de Google:

Building Your Startup OAuth - Google Permissions PageBuilding Your Startup OAuth - Google Permissions PageBuilding Your Startup OAuth - Google Permissions Page

Pero ¿qué pasa realmente cuando el usuario nos permite compartir sus datos de cuenta social? Vamos a pasar por el código que he escrito para procesar las acciones de los usuarios.

Procesando el permiso de OAuth

El \frontend\controllers\SiteController.php procesa la acción de auth entrante a la función onAuthSuccess:

La mayoría de los buenos clientes de OAuth proporcionan información similar en una array de propiedades similar, excepto Twitter. Twitter llegó tarde al juego de compartir direcciones de correo electrónico, y para mi MVP no va a valer la pena el trabajo adicional para configurarlo ahora. Google y Facebook son mucho más prevalentes.

En primer lugar, estoy recopilando los datos del servicio y recopilando todos los datos personales que pueda: correo electrónico, nombre y apellido, nombre completo y, especialmente, el ID externo de ese usuario en esa red social:

En las últimas líneas de código anteriores, buscamos en la tabla Auth la ID externa de la persona. Si no existen, son nuevos para Meeting Planner. Si existen, entonces los reconocemos.

Igualmente, debemos comprobar si su dirección de correo electrónico ya existe, porque es posible que la persona con esa dirección de correo electrónico este previamente registrada en Meeting Planner.

Cuando no hay ningún usuario autenticado actual en MeetingPlanner.io, el código siguiente examina los datos de usuario entrantes.

Si el ID externo ya está en nuestra tabla Auth, los registramos. Eso fue fácil ¡(para ellos)!

Si no reconocemos el ID, pero ya hemos registrado la dirección de correo electrónico, les pedimos que inicien sesión mediante el nombre de usuario y la contraseña y, a continuación, vincular su cuenta.

Building Your Startup OAuth - Error Msg for We have Your Email PreviouslyBuilding Your Startup OAuth - Error Msg for We have Your Email PreviouslyBuilding Your Startup OAuth - Error Msg for We have Your Email Previously

A continuación, si comenzaron en la página de inicio de sesión cuando hicieron clic en el botón de cuenta social y no reconocemos el ID externo o la dirección de correo electrónico, los redirigimos a la página de registro y les pedimos que vuelvan a intentarlo desde la página de registro.

Si se enlazan desde la página de registro, nos aseguramos de que el nuevo usuario no arriesgue un nombre de usuario duplicado (de un usuario de Meeting Planner  preexistente). En este escenario, sólo extendemos el nombre de usuario con una cadena aleatoria por ahora. Y los registramos como un nuevo usuario en Meeting Planner con una contraseña (que no necesitarán).

En los pasos finales anteriores, agregamos los detalles de su cuenta social externa a la tabla Auth para su reconocimiento futuro.

Vinculación de cuentas de Meeting Planner existentes

Si vienen de la pestaña Conectar cuentas sociales en la página de perfil de usuario (en lugar de nuestra página de inicio de sesión o de registro), sólo necesitamos agregar sus detalles de cuenta externa a Auth y mover su inicio de sesión a User::STATUS_ACTIVE. (Recuerde que los usuarios que llegan desde los vínculos de invitación a Meeting Planner pero nunca se han registrado tienen un modo User::STATUS_PASSIVE .)

Esto es lo que aparece (en el futuro voy a llenar la información de nomenclatura de la información OAuth—no se ha hecho todavía):

Building Your Startup OAuth - Successful Account LinkageBuilding Your Startup OAuth - Successful Account LinkageBuilding Your Startup OAuth - Successful Account Linkage

Para concluir

Tengo que admitir que el impacto de trabajar las conexiones de OAuth con los principales servicios como Google, Facebook y LinkedIn es bastante dramático. Hace que registrarse y utilizar regularmente Meeting Planner sea tan fácil y agilice la autenticación futura. Es realmente increíble.

Meeting Planner se ha reunido realmente el último par de meses. Por favor, prueba el inicio de sesión y registro social ahora mismo! Vea los próximos tutoriales en nuestro serie Creando su startup con PHP—hay muchas funciones divertidas que se acercan al MVP.

También estoy empezando a experimentar con WeFunder basado en la implementación de las nuevas reglas de crowdfunding de la SEC. Por favor considere seguir nuestro perfil. Puedo escribir sobre esto más como parte de nuestra serie.

Por favor, siéntase libre de añadir sus preguntas y comentarios a continuación; Generalmente participo en las discusiones. También puede contactarme en Twitter @reifman. Acojo con satisfacción las peticiones de temas y de características.

Si quieres saber cuándo llega el próximo tutorial de Yii2, sígueme @reifman en Twitter o consulta mi página de instructor. Mi página de instructor incluirá todos los artículos de esta serie tan pronto como se publiquen.

Enlaces relacionados

Advertisement
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.