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 ceux qui sont connectés à leur compte Google et le launchWebAuthFlow pour ceux qui sont 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 ont 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 effectuer une authentification 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.jsoninstallé 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 étendues.
- Obtenez le jeton d'authentification.
Ajouter des autorisations et importer l'application
Vous devez vous assurer que l'autorisation d'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 fournissez son ID, qui sera vérifié lors des requêtes de jeton. Il est donc important d'avoir un ID d'application cohérent pendant le développement.
Pour que votre ID d'application reste constant, vous devez copier la clé dans le manifest.json installé dans votre fichier manifeste source. Ce n'est pas la tâche la plus élégante, mais voici comment procéder:
- Accédez à votre répertoire des données utilisateur. Exemple sur MacOs :
~/Library/Application\ Support/Google/Chrome/Default/Extensions - Listez les applications et extensions installées, puis faites correspondre l'ID de votre application sur la page de gestion des applications et des extensions à celui indiqué ici.
- Accédez au répertoire de l'application installée (il s'agit d'une version de l'ID de l'application). Ouvrez le
manifest.jsoninstallé (pico est un moyen rapide d'ouvrir le fichier). - Copiez la "clé" dans le fichier
manifest.jsoninstallé et collez-la dans le fichier manifeste source de votre application.
Obtenir votre ID client OAuth2
Vous devez enregistrer votre application dans la console Google APIs pour obtenir l'ID client:
- Connectez-vous à la console Google APIs à l'aide du même compte Google que celui utilisé pour importer votre application sur le Chrome Web Store.
- Créez un projet en développant le menu déroulant en haut à gauche, puis en sélectionnant l'élément de menu Create (Créer).
- Une fois l'application créée et nommée, accédez à l'élément de menu de navigation "Services", puis activez les services Google dont votre application a besoin.
- Accédez à l'élément de menu de navigation "Accès aux API", puis cliquez sur le bouton bleu 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 votre ID d'application (identique à celui affiché sur la page de gestion des applications et des extensions).
Mettre à jour votre fichier manifeste avec l'ID client OAuth2 et les champs d'application
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'autorisation 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 interface de connexion et/ou d'approbation s'affiche lorsque nécessaire, comme illustré dans la capture d'écran ci-dessous:
Si vous appelez l'API en mode silencieux, elle ne renvoie un jeton que si elle peut en générer un sans afficher d'UI. 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 utilisateur n'est impliqué.
Nous vous recommandons d'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, si l'utilisateur a cliqué sur le bouton "Se connecter" dans votre application). Notez que nous n'exigeons aucun geste.
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'un jeton. L'expiration du jeton est gérée automatiquement par le cache.
Vous pouvez consulter l'état actuel du cache de 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 à renvoyer un code d'état HTTP 401. Si vous constatez que cela s'est produit, 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 d'un compte autre que Google
Voici les trois étapes à suivre:
- S'inscrire auprès du fournisseur.
- Ajoutez des autorisations pour les ressources du fournisseur auxquelles votre application aura accès.
- Obtenir 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 votre ID d'application est abcdefghijklmnopqrstuvwxyzabcdef et que vous souhaitez que provider_cb soit le chemin d'accès, pour le distinguer des URI de redirection d'autres fournisseurs, vous devez utiliser :
https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb
Ajouter des autorisations pour le fournisseur
Pour effectuer des requêtes XHR inter-origines vers 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 servant à 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 effectue l'authentification et, le cas échéant, affiche l'UI de connexion et/ou d'approbation à l'utilisateur. Il redirigera ensuite vers https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb#authToken=<auth-token>
Chrome le capturera 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 ou mode 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 de connexion et/ou d'approbation, ou toute interface spécifique au fournisseur).
Si vous appelez l'API en mode silencieux, elle ne renverra un jeton que si le fournisseur est en mesure de fournir un jeton sans afficher d'UI. 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 utilisateur n'est impliqué.
Nous vous recommandons d'utiliser le mode silencieux lorsqu'aucun geste de l'utilisateur n'est impliqué et d'utiliser le mode interactif en cas de geste de l'utilisateur (par exemple, si l'utilisateur a cliqué sur le bouton de connexion dans votre application). Notez que nous n'exigeons pas de geste.