Cómo crear Deep Links con DyLy

⏱️6 min
Compartir:

DyLy es un servicio que acorta URL y facilita la creación de Deep Links. En este artículo se explica cómo crear Deep Links de forma eficiente con DyLy.

¿Qué es un Deep Link?

Un Deep Link permite abrir directamente la aplicación en lugar del navegador cuando se accede al enlace. Si la aplicación no está instalada, puede dirigir al usuario a la tienda y, tras la instalación, abrir la página indicada.

Apple admite oficialmente la "transición sin interrupciones del navegador a la app" con Universal Links, mientras que Google ofrece una experiencia similar con Android App Links. Como se indica en la guía de Universal Links de Apple y en la documentación de Android App Links de Google, los Deep Links no solo mejoran la experiencia del usuario, sino que también contribuyen a la seguridad y a mejores tasas de conversión.

Casos de uso

Los Deep Links pueden aprovecharse de muchas formas.

Enlaces directos a contenido (vídeos, etc.)

Puedes compartir enlaces en redes sociales y guiar a los usuarios directamente a un contenido específico. En la web esto es algo habitual; con Deep Links también puedes abrir el contenido dentro de la app móvil. Además, puedes añadir parámetros de consulta para analizar el canal de procedencia u otras métricas.

Enlaces de invitación

Los Deep Links permiten invitar a alguien a un grupo u otro espacio dentro de la app. Cuando la persona invitada hace clic en el enlace, la aplicación se abre y se inicia el proceso de invitación. Si la app no está instalada, el usuario se redirige a la tienda; después de instalarla, el flujo de invitación puede reanudarse.

Redirecciones

Al definir una app como destino de redirección en un flujo OAuth, se puede recurrir a un esquema personalizado (como myapp://), pero existe el riesgo de que la información sea interceptada. Con un Deep Link, la aplicación recibe la redirección de forma segura.

Implementación

Veamos cómo implementar Deep Links en la práctica. Existen muchos servicios para crearlos; en este caso utilizaremos DyLy.

Creación de metadatos

Es necesario vincular el dominio a la aplicación. Consulta la documentación de Apple y la documentación de Google para conocer los detalles. En resumen, debes alojar en la web un endpoint que demuestre la propiedad del dominio y su relación con la app, de modo que Apple y Google puedan verificarla.

Solo tienes que devolver un JSON con el formato establecido. Puedes alojarlo por tu cuenta (por ejemplo, en S3), pero DyLy ofrece una función que simplifica este proceso.

DyLy puede crear lo que denomina un JSON link, que devuelve el JSON indicado en el destino del enlace. Puedes realizar una petición como la siguiente mediante la API.

bash
1curl -X POST "https://dyly-api.lilacwells.com/url/api/v1/links" \
2 -H "Authorization: Basic ${YOUR_CREDENTIALS}" \
3 -H "Content-Type: application/json" \
4 -d '{
5 "type": "json",
6 "projectId": "your-project-id",
7 "path": ".well-known/apple-app-site-association",
8 "rawJson": {
9 "applinks": {
10 "apps": [],
11 "details": [
12 {
13 "appIDs": ["TEAM123.com.example.app"],
14 "paths": [
15 "NOT /_/*",
16 "NOT /deferred-params",
17 "/*"
18 ]
19 }
20 ]
21 }
22 }
23 }'

Configuración en la aplicación

A continuación, configura tus aplicaciones siguiendo los pasos de cada sistema operativo.

iOS

En Xcode, añade Associated Domains en Signing & Capabilities y registra el dominio, por ejemplo applinks:example.com.

Android

Añade <intent-filter android:autoVerify="true"> a AndroidManifest.xml y valida el dominio con android:autoVerify.

Si el acceso se realiza desde un navegador, puedes configurar el enlace para redirigir a cualquier URL.

Creación del enlace

Por último, crea el enlace en DyLy. Establece type en deep para generar un Deep Link como el siguiente.

bash
1curl -X POST "https://dyly-api.lilacwells.com/url/api/v1/links" \
2 -H "Authorization: Basic ${YOUR_CREDENTIALS}" \
3 -H "Content-Type: application/json" \
4 -d '{
5 "type": "deep",
6 "projectId": "your-project-id",
7 "path": "groups/awesome-group",
8 "destinationUrl": "https://apps.apple.com/app/yourapp/id123456",
9 "jwtClaims": {
10 "invitationId": "inv-789xyz",
11 "invitedBy": "user-123",
12 "groupId": "awesome-group",
13 "groupName": "Awesome Group",
14 "permissions": "member",
15 "timestamp": 1735894404
16 },
17 "jwtExpiresIn": 300,
18 "expiresIn": 2592000,
19 "keyProtected": false,
20 "oneTime": false
21 }'

Los valores incluidos en jwtClaims se incorporan al JWT, por lo que debes tratarlos con cuidado.

Cuando se crea el Deep Link, DyLy genera un enlace que añade un JWT como parámetro de consulta.

Tratamiento del enlace en la aplicación

Cuando un usuario hace clic en el enlace, la aplicación lo recibe. Sigue estos pasos para procesarlo.

Verificar el JWT

Comprueba que el enlace haya sido emitido realmente por DyLy.

Antes de continuar, recordemos brevemente qué es un JWT. Un JWT es, en términos simples, un JSON con firma. Al validar la firma puedes verificar el emisor y asegurarte de que el contenido no ha sido manipulado.

Cualquiera puede crear enlaces, por lo que es necesario identificar los que no son legítimos. Los enlaces oficiales están firmados con la clave privada de DyLy, y la aplicación puede validar la firma para confirmar que el enlace es auténtico y que los parámetros no han sido alterados.

DyLy utiliza la tecnología JWT, ampliamente adoptada, lo que permite apoyarse en bibliotecas JWT existentes para la verificación de firmas.

Por ello, la aplicación debe verificar primero el JWT cuando reciba el enlace.

Comprobar los parámetros

Tras la verificación, extrae los parámetros y realiza la operación requerida.

En el caso de un enlace de invitación, por ejemplo, puedes recuperar el ID del grupo u otros identificadores.

Recuerda que, aunque el JWT está firmado, su contenido no está cifrado (existen JWT cifrados, pero es otro formato).

Esto significa que cualquiera puede leer el contenido del JWT. Por tanto, no coloques información sensible, como datos personales, en el JWT. Para un enlace de invitación, almacena solo identificadores (por ejemplo, el ID del grupo) y guarda los detalles en el servidor.

Deferred Deep Link

Si el usuario hace clic en el enlace desde un dispositivo donde la app no está instalada, será redirigido a la tienda y, después de la instalación, podrá abrir la página indicada por el Deep Link. A esto se le denomina Deferred Deep Link. DyLy también permite implementar este mecanismo.

Primero, un usuario toca el enlace en un dispositivo móvil sin la app. Como la app no está instalada, el enlace se ejecuta en el navegador y llega al servidor de DyLy. DyLy registra la dirección IP, el sistema operativo y otros datos del dispositivo, y luego redirige al usuario a la tienda.

Cuando la app se inicia por primera vez tras la instalación, consulta a DyLy si ese dispositivo accedió previamente al enlace. DyLy verifica la IP, el sistema operativo y otros datos de la petición; si detecta un acceso anterior, devuelve a la aplicación el Deep Link correspondiente.

De este modo, la aplicación puede obtener la información del Deep Link al iniciarse por primera vez tras la instalación.

Para más detalles, consulta la documentación oficial de DyLy.

Resumen

Con DyLy es sencillo implementar Deep Links. En un próximo artículo profundizaremos en cómo crear enlaces de invitación y otros escenarios concretos.

Referencias

Compartir:

Artículos relacionados

Aplicación de Android CI/CD con Flutter
Guides

Aplicación de Android CI/CD con Flutter

Aprenda a construir pipelines CI/CD para apps Android con Flutter. Basado en GitHub Actions, sin usar fastlane.

mark241