Créer une connexion sociale personnalisée avec TikTok

Découvrez comment créer une connexion sociale personnalisée avec TikTok

Avant de commencer

Avant de commencer à configurer votre application pour utiliser TikTok comme connexion sociale, vous devez disposer des éléments suivants :

1. Un compte développeur TikTok.
2. Un compte Auth0 avec une application qui utilise Auth0 pour authentifier vos utilisateurs.
3. L’URL de votre page des conditions d’utilisation pour le processus d’examen des applications TikTok.
4. Node.js et ngrok installés dans votre environnement local.

​

Configurer TikTok

Vous pouvez utiliser TikTok comme connexion sociale pour votre application. Accédez à votre compte développeur TikTok et configurez-le en suivant les étapes ci-dessous :

1. Dans TikTok developer, sélectionnez Manage apps.

2. Sélectionnez Connect an app.

3. Dans la section Configuration, ajoutez une icône d’application, un nom d’application et une description.

4. Sous Platforms, choisissez votre type d’application :

   1. Pour les applications Web, ajoutez une URL valide.
   2. Pour Android, ajoutez le nom du package Android, l’URL du Play Store et la ou les signatures de l’application.
   3. Pour iOS, ajoutez l’URL de l’App Store et le Bundle ID.

5. Dans le menu Product, sélectionnez Add Product.

6. Sélectionnez Login Kit.

7. Ensuite, sélectionnez TikTok API.

8. Dans la section Product, ajoutez l’URL de votre page de conditions d’utilisation, l’URL de votre page de politique de confidentialité et votre domaine de redirection à Login Kit. Le domaine de redirection correspond à votre Auth0 domain, que vous trouverez dans Dashboard > Applications > Applications, sous l’onglet Settings. Par exemple : dev-test-1.us.auth0.com.

9. Sélectionnez Save Changes. Ensuite, sélectionnez Submit for review.

10. Attendez que le status de votre application passe de Staging à Production. TikTok peut prendre plusieurs heures pour examiner votre application et mettre à jour le status.

​

Configurer Auth0

Vous devez créer une connexion personnalisée pour associer votre instance TikTok à Auth0.

1. Accédez à Auth0 Dashboard > Authentication > Social.

2. Sélectionnez Create Connection.

3. Faites défiler jusqu’au bas de la liste et sélectionnez Create Custom.

4. Saisissez les éléments suivants pour créer une nouvelle connexion sociale personnalisée :

   1. Nom : TikTok
   2. URL d’autorisation : l’URL d’autorisation de TikTok https://www.tiktok.com/auth/authorize/
   3. Token URL : il s’agira éventuellement de votre proxy. Utilisez une URL fictive : https://example.com
   4. Scope : user.info.basic
   5. Client ID : la clé client qui vous a été attribuée par TikTok
   6. Client Secret : le secret client qui vous a été attribué par TikTok
   7. Purpose : activez la connexion pour l’authentification, Connected Accounts for Token Vault, ou les deux. Pour en savoir plus, consultez Authentification de l’utilisateur vs comptes connectés.

5. Configurez le Fetch User Profile Script pour récupérer les renseignements de profil à partir du endpoint user_info de TikTok. Mappez les attributs au profil utilisateur normalisé d’Auth0.

   Auth0 exige uniquement l’attribut user_id attribute, qui correspond au 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. Cliquez sur Create.

7. Accédez à l’application que vous voulez utiliser avec la connexion TikTok sous Dashboard > Applications > Applications.

8. Sous l’onglet Connections, activez l’option TikTok.

​

Transmettre des paramètres personnalisés à TikTok avec la Management API

Comme TikTok utilise un paramètre client_key au lieu de client_id, vous devez utiliser la Management API pour transmettre le paramètre client_key pendant l’authentification.

Pour utiliser la Management API, vous devez générer un jeton d’accès.

1. Accédez à Auth0 Dashboard > Applications > APIs et sélectionnez Auth0 Management API.

2. Sélectionnez l’onglet API Explorer.

3. Sélectionnez Create & Authorize Test Application.

4. Copiez le jeton fourni.

5. Accédez à l’Auth0 Management API Explorer. Vous devrez peut-être ouvrir une fenêtre de navigation privée.

6. Sélectionnez Set API Token dans le coin supérieur gauche.

   

7. Collez le jeton, puis sélectionnez Set Token.

Vous devriez maintenant pouvoir configurer votre tenant Auth0 avec la Management API.

​

Configurer le champ client_key

1. Utilisez la méthode Get a connection pour récupérer les valeurs de l’objet options. Voici un exemple d’objet de réponse :

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

2. Ajoutez l’objet upstream_params avec le champ client_key :

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

3. Utilisez la méthode Mettre à jour une connexion avec l’objet options dans le corps de la requête. Auth0 enverra le paramètre client_key=<value> au point de terminaison d’autorisation de TikTok.

​

Requête de jeton d’accès

Vous ne pouvez pas transmettre de paramètres personnalisés dans une requête au point de terminaison /token de l’API d’authentification pour obtenir un jeton d’accès ou un ID token. Vous devez acheminer la requête vers le point de terminaison de jeton et ajouter par programmation le paramètre client_key à l’aide de points de terminaison proxy dans votre environnement.

​

Déployer le proxy d’intégration TikTok

1. Utilisez l’exemple de code du dépôt GitHub et suivez les instructions du README pour installer les dépendances et démarrer le serveur de développement.

   1. Le serveur d’exemple comporte une route POST, /proxy/token. Le serveur doit être en cours d’exécution à l’adresse http://localhost:3333.

2. Copiez le point de terminaison proxy à utiliser dans votre configuration TikTok Developer. Le point de terminaison proxy devrait ressembler à https://405a-104-129-13b-250.ngrok.io/proxy/token.

3. Dans TikTok Developer, retournez à la configuration de la connexion sociale. Mettez à jour la valeur de Token URL que vous avez définie sur https://example.com, puis saisissez l’URL du proxy.

Une fois la configuration enregistrée, vos utilisateurs devraient pouvoir se connecter avec TikTok.