Cette page fait partie de la documentation de la plate-forme d'applications Chrome, qui a été abandonnée en 2020. Les clients Enterprise et Education sur ChromeOS continueront d'y avoir accès au moins jusqu'en janvier 2025. En savoir plus sur la migration de votre application

Cette page a été traduite par l'API Cloud Translation.

Authentification des utilisateurs

Les protocoles d'authentification Web utilisent des fonctionnalités HTTP, mais les applications Chrome s'exécutent dans le conteneur de l'application. Elles ne se chargent pas via HTTP et ne peuvent pas effectuer de redirections ni définir de cookies.

Utilisez l'API Chrome Identity pour authentifier les utilisateurs: le getAuthToken pour les utilisateurs connectés à leur compte Google et le launchWebAuthFlow pour les utilisateurs connectés à un compte autre que Google. Si votre application utilise son propre serveur pour authentifier les utilisateurs, vous devrez utiliser ce dernier.

Fonctionnement

Les utilisateurs des applications Chrome disposent d'un compte Google associé à leur profil. Les applications peuvent obtenir des jetons OAuth2 pour ces utilisateurs à l'aide de l'API getAuthToken.

Les applications qui souhaitent s'authentifier avec des fournisseurs d'identité autres que Google doivent appeler launchWebAuthFlow. Cette méthode utilise un pop-up de navigateur pour afficher les pages du fournisseur et capture les redirections vers les formats d'URL spécifiques. Les URL de redirection sont transmises à l'application, qui extrait le jeton de l'URL.

Authentification du compte Google

Voici les cinq étapes à suivre:

Ajoutez des autorisations à votre fichier manifeste et importez votre application.
Copiez la clé du fichier manifest.json installé dans votre fichier manifeste source afin que votre ID application reste constant pendant le développement.
Obtenez un ID client OAuth2 pour votre application Chrome.
Mettez à jour votre fichier manifeste pour inclure l'ID client et les niveaux d'accès.
Obtenez le jeton d'authentification.

Ajouter des autorisations et importer l'application

Vous devez vous assurer que l'autorisation liée à l'identité figure dans votre fichier manifeste. Vous pouvez ensuite importer votre application sur la page de gestion des applications et des extensions (voir Publier).

"permissions": [
  "identity"
]

Copier la clé dans votre fichier manifeste

Lorsque vous enregistrez votre application dans la console Google OAuth, vous devez fournir son ID, qui sera vérifié lors des requêtes de jeton. Il est donc important d'avoir un ID application cohérent pendant le développement.

Pour que votre ID application reste constant, vous devez copier la clé du fichier manifest.json installé dans votre fichier manifeste source. Il ne s'agit pas de la tâche la plus facile, mais voici comment cela fonctionne:

Accédez à votre répertoire de données utilisateur. Exemple sur macOS : ~/Library/Application\ Support/Google/Chrome/Default/Extensions
Répertoriez les applications et les extensions installées, et associez l'ID de votre application sur la page de gestion des applications et des extensions au même ID ici.
Accédez au répertoire de l'application installée (il s'agit d'une version figurant dans l'ID de l'application). Ouvrez le fichier manifest.json installé (pico est un moyen rapide d'ouvrir le fichier).
Copiez la "clé" dans le fichier manifest.json installé et collez-la dans le fichier manifeste source de votre application.

Obtenir votre ID client OAuth2

Vous devez enregistrer votre application dans la console des API Google pour obtenir l'ID client:

Connectez-vous à la console des API Google avec le compte Google que vous avez utilisé pour importer votre application sur le Chrome Web Store.
Créez un projet en développant le menu déroulant en haut à gauche et en sélectionnant l'élément de menu Create... (Créer).
Une fois créé et nommé, accédez à l'élément de menu de navigation "Services" et activez tous les services Google dont votre application a besoin.
Accédez à l'élément de menu de navigation "API Access" (Accès à l'API), puis cliquez sur le bouton bleu Create an OAuth 2.0 client ID... (Créer un ID client OAuth 2.0).
Saisissez les informations de branding demandées, puis sélectionnez le type Application installée.
Sélectionnez Application Chrome, puis saisissez l'ID de votre application (le même ID que celui affiché sur la page de gestion des applications et des extensions).

Mettre à jour le fichier manifeste avec l'ID client et les champs d'application OAuth2

Vous devez mettre à jour votre fichier manifeste pour inclure l'ID client et les champs d'application. Voici l'exemple "oauth2" pour l'exemple gdrive:

"oauth2": {
    "client_id": "665859454684.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/drive"
    ]
  }

Obtenir des jetons d'accès

Vous êtes maintenant prêt à obtenir le jeton d'authentification en appelant identity.getAuthToken.

chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
  // Use the token.
});

Interaction de l'utilisateur

Lorsque vous appelez getAuthToken, vous pouvez transmettre un indicateur ('interactive': true dans l'exemple ci-dessus) indiquant si vous souhaitez que l'API soit appelée en mode interactif ou en mode silencieux. Si vous appelez l'API en mode interactif, une UI de connexion et/ou d'approbation s'affiche si nécessaire, comme illustré dans la capture d'écran ci-dessous:

Capture d'écran montrant l'interface utilisateur lorsqu'une application utilise l'API Identity pour authentifier un compte Google

Si vous appelez l'API en mode silencieux, l'API ne renvoie un jeton que s'il est possible d'en générer un sans afficher d'interface utilisateur. Cela est utile lorsqu'une application effectue le flux au démarrage de l'application, par exemple, ou en général lorsqu'aucun geste de l'utilisateur n'est impliqué.

La bonne pratique que nous suggérons consiste à utiliser le mode silencieux en l'absence de geste de l'utilisateur et le mode interactif s'il y a un geste de l'utilisateur (par exemple, lorsque l'utilisateur a cliqué sur le bouton "Se connecter" dans votre application). Notez que nous n'imposons aucune obligation de gestes.

Mise en cache

Chrome dispose d'un cache en mémoire de jetons d'accès. Vous pouvez donc appeler getAuthToken chaque fois que vous avez besoin d'utiliser un jeton. L'expiration du jeton est gérée automatiquement par le cache.

Vous pouvez voir l'état actuel du cache des jetons sur chrome://identity-internals.

Dans certains cas, par exemple lorsque l'utilisateur modifie son mot de passe, les jetons d'accès non expirés cessent de fonctionner. Les appels d'API utilisant le jeton commenceront par renvoyer le code d'état HTTP 401. Si vous détectez ce problème, vous pouvez supprimer le jeton non valide du cache de Chrome en appelant identity.removeCachedAuthToken.

Exemple d'utilisation de removeCachedAuthToken:

// callback = function (error, httpStatus, responseText);
function authenticatedXhr(method, url, callback) {
  var retry = true;
  function getTokenAndXhr() {
    chrome.identity.getAuthToken({/* details */},
                                 function (access_token) {
      if (chrome.runtime.lastError) {
        callback(chrome.runtime.lastError);
        return;
      }

      var xhr = new XMLHttpRequest();
      xhr.open(method, url);
      xhr.setRequestHeader('Authorization',
                           'Bearer ' + access_token);

      xhr.onload = function () {
        if (this.status === 401 && retry) {
          // This status may indicate that the cached
          // access token was invalid. Retry once with
          // a fresh token.
          retry = false;
          chrome.identity.removeCachedAuthToken(
              { 'token': access_token },
              getTokenAndXhr);
          return;
        }

        callback(null, this.status, this.responseText);
      }
    });
  }
}

Authentification pour un compte autre que Google

Voici les trois étapes à suivre:

S'inscrire auprès du fournisseur
Ajoutez des autorisations pour les ressources de fournisseur auxquelles votre application accédera.
Obtenez le jeton d'authentification.

S'inscrire auprès du fournisseur

Vous devez enregistrer un ID client OAuth2 auprès du fournisseur et le configurer en tant que site Web. Pour que l'URI de redirection soit saisi lors de l'enregistrement, utilisez l'URL au format suivant : https://<extension-id>.chromiumapp.org/<anything-here>

Par exemple, si l'ID de votre application est abcdefghijklmnopqrstuvwxyzabcdef et que vous souhaitez que provider_cb soit le chemin d'accès, pour le distinguer avec des URI de redirection d'autres fournisseurs, vous devez utiliser : https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb

Ajouter des autorisations pour le fournisseur

Pour créer des requêtes XHR multi-origines sur les points de terminaison de l'API du fournisseur, vous devez ajouter les modèles appropriés à la liste d'autorisation dans les autorisations:

"permissions": [
  ...
  "https://www.website-of-provider-with-user-photos.com/photos/*"
]

Obtenir le jeton

Pour obtenir le jeton:

chrome.identity.launchWebAuthFlow(
  {'url': '<url-to-do-auth>', 'interactive': true},
  function(redirect_url) { /* Extract token from redirect_url */ });

<url-to-do-auth> correspond à l'URL utilisée pour s'authentifier auprès du fournisseur à partir d'un site Web. Par exemple, supposons que vous exécutez le flux OAuth2 avec un fournisseur, que vous avez enregistré votre application avec l'ID client 123456789012345 et que vous souhaitez accéder aux photos de l'utilisateur sur le site Web du fournisseur : https://www.website-of-provider-with-user-photos.com/dialog/oauth?client_id=123456789012345& redirect_uri=https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb&response_type=token&scope=user_photos

Le fournisseur procède à l'authentification et, le cas échéant, affiche l'interface utilisateur de connexion et/ou d'approbation à l'utilisateur. Vous serez ensuite redirigé vers https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb#authToken=<auth-token>.

Chrome capturera ces informations et appellera le rappel de l'application avec l'URL de redirection complète. L'application doit extraire le jeton de l'URL.

Mode interactif et silencieux

Lorsque vous appelez launchWebAuthFlow, vous pouvez transmettre un indicateur ('interactive': true dans l'exemple ci-dessus) indiquant si vous souhaitez que l'API soit appelée en mode interactif ou non (mode silencieux). Si vous appelez l'API en mode interactif, l'interface utilisateur s'affiche si nécessaire pour obtenir le jeton (interface utilisateur de connexion et/ou d'approbation, ou toute UI spécifique au fournisseur).

Si vous appelez l'API en mode silencieux, l'API ne renvoie un jeton que si le fournisseur est en mesure de fournir un jeton sans afficher d'interface utilisateur. Cela est utile dans les cas où une application effectue le flux au démarrage de l'application, par exemple, ou en général dans les cas où aucun geste utilisateur n'est impliqué.