Passer au contenu principal

Avant de commencer

Avant de commencer à configurer votre application pour utiliser TikTok comme connexion sociale, vous devez disposer de :
  1. Un compte développeur TikTok.
  2. Un compte Auth0 avec une application qui utilise Auth0 pour authentifier vos utilisateurs.
  3. Une URL pour la page de vos conditions d’utilisation dans le cadre du 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 suivantes :
  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 le 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. Sélectionnez ensuite TikTok API.
  8. Dans la section Product, ajoutez au Login Kit l’URL de votre page Conditions d’utilisation, l’URL de votre page Politique de confidentialité et votre domaine de redirection. Le domaine de redirection correspond à votre domaine Auth0, que vous trouverez dans Auth0 Dashboard > Applications > Applications, sous l’onglet Settings. Par exemple : dev-test-1.us.auth0.com.
  9. Sélectionnez Save Changes. Sélectionnez ensuite Submit for review.
  10. Attendez que le statut de votre application passe de Staging à Production. TikTok peut prendre jusqu’à რამდენიმე heures pour examiner votre application et mettre à jour son statut.

​
Configurer Auth0

Vous devez créer une connexion personnalisée pour associer votre instance TikTok à Auth0.
  1. Accédez à Auth0 Dashboard > Authentication > Social.
  2. Choisissez Create Connection.
  3. Faites défiler la liste jusqu’en bas et choisissez Create Custom.
  4. Saisissez les éléments suivants pour créer une New Custom Social Connection :
    1. Nom : TikTok
    2. URL d’autorisation : l’URL d’autorisation de TikTok https://www.tiktok.com/auth/authorize/
    3. URL du jeton : il s’agira éventuellement de votre proxy. Utilisez une URL temporaire : https://example.com
    4. Scope : user.info.basic
    5. ID client : clé client attribuée par TikTok
    6. Secret client : secret client attribué par TikTok
    7. Objectif : activez la connexion pour l’authentification, Connected Accounts for Token Vault, ou les deux. Pour en savoir plus, consultez User authentication vs Connected Accounts.
  5. Configurez le Fetch User Profile Script pour récupérer les informations du profil à partir du point de terminaison user_info de TikTok. Faites correspondre les attributs au profil utilisateur normalisé d’Auth0.
    Auth0 exige uniquement l’attribut user_id, qui correspond à union_id dans 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));
}
  1. Cliquez sur Create.
  2. Accédez à l’application que vous souhaitez utiliser avec la connexion TikTok dans Auth0 Dashboard > Applications > Applications.
  3. Dans 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 pour transmettre le paramètre client_key lors de l’authentification. Pour utiliser la Management API, vous devez générer un .
  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.
    Capture d’écran de Set API Token pour TikTok
  7. Collez le jeton, puis sélectionnez Set Token.
Vous devriez maintenant pouvoir configurer votre locataire 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 de réponse :
{
  "options": {
    "client_id": "",
    "client_secret": "",
    "scope": "user.info.basic"
  }
}
  1. 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>" } 
    }
  }
}
  1. Utilisez la méthode Mettre à jour une connexion en utilisant l’objet options comme corps de la requête. Auth0 enverra le paramètre client_key=<value> au point de terminaison d’autorisation de TikTok.

​
Demande de jeton d’accès

Vous ne pouvez pas transmettre de paramètres personnalisés dans une requête envoyée au point de terminaison /token de l’Authentication API pour obtenir un jeton d’accès ou un . Vous devez acheminer la requête via un proxy vers le et y 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 seule route POST, /proxy/token. Le serveur devrait être en cours d’exécution à l’adresse http://localhost:3333.
  2. Copiez le point de terminaison du proxy à utiliser dans votre configuration TikTok Developer. Le point de terminaison du proxy devrait ressembler à https://405a-104-129-13b-250.ngrok.io/proxy/token.
  3. Dans TikTok Developer, revenez à la configuration de la connexion sociale. Mettez à jour l’URL du jeton que vous aviez définie à https://example.com, puis saisissez l’URL du proxy.
Une fois la configuration enregistrée, vos utilisateurs devraient pouvoir se connecter avec TikTok.