Créer une connexion sociale personnalisée avec TikTok

Vous pouvez utiliser TikTok comme connexion sociale pour votre application. Accédez et configurez votre compte de développeur TikTok en suivant les étapes suivantes :

1. Sur la plateforme TikTok Developer, sélectionnez Gestion des applications.

2. Sélectionnez Connecter une application.

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

4. Sous Plateformes, 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 App Store et le Bundle ID (Identifiant de paquet).

5. Dans le menu Produit, sélectionnez Ajouter un produit.

6. Sélectionnez la Trousse de connexion.

7. Ensuite, sélectionnez la TikTok API.

8. Dans la section Produit, ajoutez l’URL de votre page de Conditions d’utilisation générales, l’URL de votre Politique de confidentialité et votre domaine de redirection vers la trousse de connexion. Le domaine de redirection est votre domaine Auth0 trouvé dans Dashboard > Applications > Applications sous l’onglet Réglages. Par exemple : dev-test-1.us.auth0.com.

9. Sélectionnez Sauvegarder les changements. Ensuite, sélectionnez Soumettre pour examen.

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

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

1. Allez dans Auth0 Dashboard > Authentification > Social.

2. Choisissez Créer la connexion.

3. Faites défiler l’écran jusqu’en bas de la liste et choisissez Créer une connexion personnalisée.

4. Saisissez ce qui suit pour créer une nouvelle connexion sociale personnalisée :

   1. Nom : TikTok

   2. URL d’autorisation : URL d’autorisation de TikTok https://www.tiktok.com/auth/authorize/

   3. URL du jeton : Ce sera éventuellement votre serveur proxy. Utilisez une URL fictive : https://example.com

   4. Permission : user.info.basic

   5. ID client : Clé de client qui vous a été attribuée par TikTok

   6. Secret client : Secret client qui vous a été attribué par TikTok

5. Configurez le Fetch User Profile Script (Script de récupération du profil utilisateur) pour récupérer les informations de profil à partir du point de terminaison user_info de TikTok. Mappez les attributs sur le profil utilisateur normalisé d’Auth0.

   Auth0 ne nécessite que l’attribut user_id lequel correspond à 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 Créer.

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

8. Sous l’onglet Connexions, sélectionnez l’option TikTok.

Étant donné que TikTok utilise un paramètre client_key au lieu de client_id, vous devez utiliser Managment API pour transmettre le paramètre client_key lors de l’authentification.

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

1. Accédez à Auth0 Dashboard > Applications > API , puis sélectionnez Auth0 Management API.

2. Sélectionnez l’onglet Explorateur API.

3. Sélectionnez Créer et autoriser l’application de test.

4. Copiez le jeton fourni.

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

6. Sélectionnez Définir le jeton API dans le coin supérieur gauche.

   

7. Collez le jeton et sélectionnez Définir le jeton.

Vous devriez maintenant pouvoir configurer votre locataire Auth0 avec Management API.

1. Utilisez la méthode Obtenir une connexion 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 Update a connection (Mettre à jour une connexion) avec l’objet options comme corps. Auth0 enverra le paramètre client_key=<value> au point de terminaison d’autorisation de TikTok.

Vous ne pouvez pas transmettre de paramètres personnalisés dans une requête au point de terminaison /token de l’Authentication API pour obtenir un jeton d’accès ou d’ID. Vous devez envoyer la demande via le proxy au point de terminaison du jeton et ajouter le paramètre client_key par programmation avec les points de terminaison du proxy de votre environnement.

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

   1. L’exemple de serveur possède une route POST, /proxy/token. Le serveur doit fonctionner sur http://localhost:3333.

2. Copiez le point de terminaison du proxy à utiliser dans votre configuration de développeur TikTok. Le point de terminaison du proxy doit 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 avez défini à https://example.com et saisissez l’URL du proxy.

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