Crear una conexión social personalizada con TikTok

Aprenda a crear una conexión social personalizada con TikTok

Antes de empezar

Antes de empezar a configurar su aplicación para usar TikTok como conexión social, necesita lo siguiente:

1. Una cuenta de desarrollador de TikTok.
2. Una cuenta de Auth0 con una aplicación que use Auth0 para autenticar a sus usuarios.
3. Una URL para su página de Términos de servicio para el proceso de revisión de aplicaciones de TikTok.
4. Tener Node.js y ngrok instalados en su entorno local.

​

Configurar TikTok

Puede usar TikTok como inicio de sesión social para su aplicación. Acceda a su cuenta de desarrollador de TikTok y configúrela siguiendo estos pasos:

1. En TikTok Developer, seleccione Manage apps.

2. Seleccione Connect an app.

3. En la sección Configuration, agregue un ícono de la aplicación, el nombre de la aplicación y una descripción.

4. En Platforms, elija el tipo de aplicación:

   1. Para aplicaciones web, agregue una URL válida.
   2. Para Android, agregue el nombre del paquete de Android, la URL de Play Store y las firmas de la aplicación.
   3. Para iOS, agregue la URL de App Store y el Bundle ID.

5. En el menú Product, seleccione Add Product.

6. Seleccione Login Kit.

7. Luego, seleccione TikTok API.

8. En la sección Product, agregue la URL de su página de Términos de servicio, la URL de su página de Política de privacidad y su dominio de redirección en Login Kit. El dominio de redirección es su dominio de Auth0, que encontrará en Dashboard > Applications > Applications, en la pestaña Settings. Por ejemplo: dev-test-1.us.auth0.com.

9. Seleccione Save Changes. Luego, seleccione Submit for review.

10. Espere hasta que el estado de su aplicación cambie de Staging a Production. TikTok puede tardar varias horas en revisar su aplicación y actualizar el estado.

​

Configura Auth0

Debes crear una conexión personalizada para asociar tu instancia de TikTok con Auth0.

1. Ve a Auth0 Dashboard > Authentication > Social.

2. Elige Create Connection.

3. Desplázate hasta el final de la lista y elige Create Custom.

4. Introduce lo siguiente para crear una nueva conexión social personalizada:

   1. Nombre: TikTok
   2. URL de autorización: la URL de autorización de TikTok https://www.tiktok.com/auth/authorize/
   3. URL del token: con el tiempo, esta será tu URL de proxy. Usa una URL de marcador de posición: https://example.com
   4. Scope: user.info.basic
   5. ID de cliente: clave de cliente que TikTok te asignó
   6. Secreto del cliente: secreto de cliente que TikTok te asignó
   7. Propósito: habilita la conexión para Authentication, Connected Accounts for Token Vault o ambos. Para obtener más información, consulta User authentication vs Connected Accounts.

5. Configura el script Fetch User Profile para obtener la información del perfil desde el endpoint user_info de TikTok. Asigna los atributos al perfil de usuario normalizado de Auth0.

   Auth0 solo requiere el atributo user_id, que corresponde al union_id de TikTok.

function fetchUserProfile(accessToken, context, cb) {
  const axios = require('axios@0.22.0');
  const userInfoEndpoint = 'https://open.tiktokapis.com/v2/user/info?fields=union_id';
  const headers = { 'Authorization': 'Bearer ' + accessToken };

  axios
    .get(userInfoEndpoint, { headers })
    .then(res => {
      if (res.status !== 200) {
        return cb(new Error(res.data));
      }

      const profile = {
        user_id: res.data.user.union_id,
      };

      cb(null, profile);
    })
    .catch(err => cb(err));
}

6. Haga clic en Crear.

7. Vaya a la aplicación que desea usar con la conexión de TikTok en Dashboard > Applications > Applications.

8. En la pestaña Conexiones, active la opción de TikTok.

​

Pase parámetros personalizados a TikTok con la Management API

Dado que TikTok usa un parámetro client_key en lugar de client_id, debe usar la Management API para pasar el parámetro client_key durante la autenticación.

Para usar la Management API, debe generar un token de acceso.

1. Vaya a Auth0 Dashboard > Applications > APIs y seleccione la Auth0 Management API.

2. Seleccione la pestaña API Explorer.

3. Seleccione Create & Authorize Test Application.

4. Copie el token proporcionado.

5. Vaya al Auth0 Management API Explorer. Es posible que deba abrir una ventana de incógnito.

6. Seleccione Set API Token en la esquina superior izquierda.

   

7. Pegue el token y seleccione Set Token.

Ahora debería poder configurar su inquilino de Auth0 con la Management API.

​

Configure el campo client_key

1. Use el método Obtener una conexión para recuperar los valores del objeto options. A continuación, se muestra un objeto de respuesta de ejemplo:

{
  "options": {
    "client_id": "",
    "client_secret": "",
    "scope": "user.info.basic"
  }
}

2. Agrega el objeto upstream_params con el campo client_key:

{
  "options": {
    "client_id": "",
    "client_secret": "",
    "scope": "user.info.basic",
    "upstream_params": { 
      "client_key": { "value": "<Client Key from TikTok>" } 
    }
  }
}

3. Use el método Update a connection con el objeto options en el cuerpo. Auth0 enviará el parámetro client_key=<value> al endpoint de autorización de TikTok.

​

Solicitud de token de acceso

No es posible pasar parámetros personalizados en una solicitud al endpoint /token de Authentication API para obtener un token de acceso o un token de ID. Debe enviar la solicitud mediante un proxy al endpoint de token y agregar el parámetro client_key mediante programación con endpoints proxy en su entorno.

​

Implementa el proxy de integración de TikTok

1. Usa el código de ejemplo del repositorio de GitHub y sigue las instrucciones del README para instalar las dependencias e iniciar el servidor de desarrollo.

   1. El servidor de ejemplo tiene una ruta POST, /proxy/token. El servidor debería estar en ejecución en http://localhost:3333.

2. Copia el endpoint del proxy para usarlo en la configuración de TikTok Developer. El endpoint del proxy debería ser similar a https://405a-104-129-13b-250.ngrok.io/proxy/token.

3. En TikTok Developer, vuelve a la configuración de la conexión social. Actualiza la URL del Token que configuraste como https://example.com e introduce la URL del proxy.

Una vez que guardes la configuración, tus usuarios podrán iniciar sesión con TikTok.