> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

# Créer une connexion sociale personnalisée avec TikTok

<Card title="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](https://developer.tiktok.com/).
  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](https://developers.tiktok.com/doc/getting-started-faq/).
  4. [Node.js](https://nodejs.org/en/) et [ngrok](https://ngrok.com/) installés dans votre environnement local.
</Card>

<div id="configure-tiktok">
  ## Configurer TikTok
</div>

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](http://manage.auth0.com/#/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.

<div id="configure-auth0">
  ## Configurer Auth0
</div>

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

1. Accédez à [Auth0 Dashboard > Authentication > Social](http://manage.auth0.com/#/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](/docs/fr-ca/secure/tokens/token-vault/connected-accounts-for-token-vault#user-authentication-vs-connected-accounts).
5. Configurez le [Fetch User Profile Script](/docs/fr-ca/authenticate/identity-providers/social-identity-providers/oauth2#fetch-user-profile-script) pour récupérer les renseignements de profil à partir du [endpoint user\_info de TikTok](https://developers.tiktok.com/doc/tiktok-api-v2-get-user-info/). Mappez les attributs au profil utilisateur normalisé d’Auth0.

   <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
     Auth0 exige uniquement l’attribut `user_id attribute`, qui correspond au `union_id` de TikTok.
   </Callout>

```javascript lines theme={null}
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](http://manage.auth0.com/#/applications).

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

<div id="pass-customs-parameters-to-tiktok-with-the-management-api">
  ## Transmettre des paramètres personnalisés à TikTok avec la Management API
</div>

Comme TikTok utilise un paramètre `client_key` au lieu de `client_id`, vous devez utiliser la <Tooltip tip="Management API : un produit qui permet aux clients d'effectuer des tâches administratives." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Management+API">Management API</Tooltip> pour transmettre le paramètre `client_key` pendant l’authentification.

Pour utiliser la Management API, vous devez générer un <Tooltip tip="Jeton d’accès : justificatif d’autorisation, sous la forme d’une chaîne opaque ou d’un JWT, utilisé pour accéder à une API." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=access+token">jeton d’accès</Tooltip>.

1. Accédez à Auth0 [Dashboard > Applications > APIs](http://manage.auth0.com/#/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](https://auth0.com/docs/api/management/v2). Vous devrez peut-être ouvrir une fenêtre de navigation privée.
6. Sélectionnez **Set API Token** dans le coin supérieur gauche.

   <Frame>
     <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/6994KjTIdvDNrye8ghN4og/a6d1eb83bce4a5b38f8ebce7188ee2ca/image2.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=b2764464c367f309342acf3d317e7198" alt="Capture d’écran de Set API Token pour TikTok" width="1999" height="1011" data-path="docs/images/cdy7uua7fh8z/6994KjTIdvDNrye8ghN4og/a6d1eb83bce4a5b38f8ebce7188ee2ca/image2.png" />
   </Frame>
7. Collez le jeton, puis sélectionnez **Set Token**.

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

<div id="configure-the-client_key-field">
  ### Configurer le champ `client_key`
</div>

1. Utilisez la méthode [Get a connection](https://auth0.com/docs/api/management/v2#!/Connections/get_connections_by_id) pour récupérer les valeurs de l’objet `options`. Voici un exemple d’objet de réponse :

```json lines theme={null}
{
  "options": {
    "client_id": "",
    "client_secret": "",
    "scope": "user.info.basic"
  }
}
```

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

```json lines theme={null}
{
  "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](https://auth0.com/docs/api/management/v2#!/Connections/patch_connections_by_id) 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](https://developers.tiktok.com/doc/login-kit-web/).

<div id="access-token-request">
  ## Requête de jeton d’accès
</div>

Vous ne pouvez pas transmettre de paramètres personnalisés dans une requête au point de terminaison [`/token`](https://developers.tiktok.com/doc/login-kit-manage-user-access-tokens/) de l’API d’authentification pour obtenir un jeton d’accès ou un <Tooltip tip="ID Token : Information d’identification destinée au client lui-même, plutôt que pour accéder à une ressource." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=ID+token">ID token</Tooltip>. Vous devez acheminer la requête vers le <Tooltip tip="ID Token : Information d’identification destinée au client lui-même, plutôt que pour accéder à une ressource." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=token+endpoint">point de terminaison de jeton</Tooltip> et ajouter par programmation le paramètre `client_key` à l’aide de points de terminaison proxy dans votre environnement.

<div id="deploy-tiktok-integration-proxy">
  ### Déployer le proxy d’intégration TikTok
</div>

1. Utilisez l’exemple de code du dépôt [GitHub](https://github.com/tylerkeesling/tiktok-access-token-proxy) 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.