"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduction", "hProperties": { "id": "introduction" } }, "depth": 2, "value": "Introduction" }, { "data": { "id": "oauth-20-vs-openid-connect", "hProperties": { "id": "oauth-20-vs-openid-connect" } }, "depth": 2, "value": "OAuth 2.0 vs. OpenID Connect" }, { "data": { "id": "oauth-20", "hProperties": { "id": "oauth-20" } }, "depth": 3, "value": "OAuth 2.0" }, { "data": { "id": "openid-connect-oidc", "hProperties": { "id": "openid-connect-oidc" } }, "depth": 3, "value": "OpenID Connect (OIDC)" }, { "data": { "id": "types-dapplications", "hProperties": { "id": "types-dapplications" } }, "depth": 2, "value": "Types d'applications" }, { "data": { "id": "applications-web-sexécutant-sur-un-serveur", "hProperties": { "id": "applications-web-sexécutant-sur-un-serveur" } }, "depth": 3, "value": "Applications web s'exécutant sur un serveur" }, { "data": { "id": "applications-à-page-unique-spas", "hProperties": { "id": "applications-à-page-unique-spas" } }, "depth": 3, "value": "Applications à page unique (SPAs)" }, { "data": { "id": "applications-mobiles", "hProperties": { "id": "applications-mobiles" } }, "depth": 3, "value": "Applications mobiles" }, { "data": { "id": "applications-machine-à-machine-m2m", "hProperties": { "id": "applications-machine-à-machine-m2m" } }, "depth": 3, "value": "Applications machine-à-machine (M2M)" }, { "data": { "id": "applications-sexécutant-sur-des-appareils-iot", "hProperties": { "id": "applications-sexécutant-sur-des-appareils-iot" } }, "depth": 3, "value": "Applications s'exécutant sur des appareils IoT" }, { "data": { "id": "protéger-votre-api", "hProperties": { "id": "protéger-votre-api" } }, "depth": 2, "value": "Protéger votre API" }, { "data": { "id": "conception-de-lautorisation", "hProperties": { "id": "conception-de-lautorisation" } }, "depth": 3, "value": "Conception de l'autorisation" }, { "data": { "id": "jetons-daccès", "hProperties": { "id": "jetons-daccès" } }, "depth": 3, "value": "Jetons d'accès" }, { "data": { "id": "indicateurs-de-ressources", "hProperties": { "id": "indicateurs-de-ressources" } }, "depth": 3, "value": "Indicateurs de ressources" }, { "data": { "id": "mettre-le-tout-ensemble", "hProperties": { "id": "mettre-le-tout-ensemble" } }, "depth": 2, "value": "Mettre le tout ensemble" }, { "data": { "id": "remarques-de-clôture", "hProperties": { "id": "remarques-de-clôture" } }, "depth": 2, "value": "Remarques de clôture" }]; const readingTime = { "minutes": 14, "words": 4339, "text": "14 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "introduction", children: ["Introduction", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduction", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Les applications basées sur le cloud sont la tendance de nos jours. Bien que le type d'application varie (web, mobile, bureau, etc.), elles ont toutes un backend cloud qui fournit des services comme le stockage, le calcul et les bases de données. La plupart du temps, ces applications doivent authentifier les utilisateurs et les autoriser à accéder à certaines ressources." }), "\n", _jsx(_components.p, { children: "Bien que des mécanismes d'authentification et d'autorisation maison soient possibles, la sécurité est devenue l'une des principales préoccupations lors du développement d'applications cloud. Heureusement, notre industrie dispose de normes éprouvées comme OAuth 2.0 et OpenID Connect pour nous aider à implémenter une authentification et une autorisation sécurisées." }), "\n", _jsx(_components.p, { children: "Ce post suppose les points suivants :" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Vous avez une compréhension de base du développement d'applications (web, mobile ou d'un autre type)." }), "\n", _jsx(_components.li, { children: "Vous avez entendu parler des concepts d'authentification et d'autorisation." }), "\n", _jsxs(_components.li, { children: ["Vous avez entendu parler d'", _jsx(_components.a, { href: "https://auth.wiki/oauth-2.0", children: "OAuth 2.0" }), " et d'", _jsx(_components.a, { href: "https://auth.wiki/openid-connect", children: "OpenID Connect" }), "."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Oui, \"entendu\" est suffisant pour les points 2 et 3. Ce post utilisera des exemples concrets pour expliquer les concepts et illustrera le processus avec des diagrammes. Commençons !" }), "\n", _jsxs(_components.h2, { id: "oauth-20-vs-openid-connect", children: ["OAuth 2.0 vs. OpenID Connect", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#oauth-20-vs-openid-connect", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Si vous êtes familier avec OAuth 2.0 et OpenID Connect, vous pouvez également continuer à lire car nous couvrirons quelques exemples concrets dans cette section ; si vous êtes nouveau à ces normes, vous pouvez également continuer car nous les présenterons de manière simple." }), "\n", _jsxs(_components.h3, { id: "oauth-20", children: ["OAuth 2.0", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#oauth-20", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://auth.wiki/oauth-2.0", children: "OAuth 2.0" }), " est un cadre d'autorisation qui permet à une application d'obtenir un accès limité à des ressources protégées sur une autre application pour le compte d'un utilisateur ou de l'application elle-même. La plupart des services populaires comme Google, Facebook et GitHub utilisent OAuth 2.0 pour la connexion sociale (par exemple, \"Se connecter avec Google\")."] }), "\n", _jsx(_components.p, { children: "Par exemple, vous avez une application web MyApp qui souhaite accéder au Google Drive de l'utilisateur. Plutôt que de demander à l'utilisateur de partager ses identifiants Google Drive, MyApp peut utiliser OAuth 2.0 pour demander l'accès à Google Drive pour le compte de l'utilisateur. Voici un flux simplifié :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User\n participant MyApp\n participant Google\n\n User->>MyApp: Ouvrir MyApp et
cliquer sur \"Connecter Google Drive\"\n MyApp->>Google: Rediriger vers Google\n Google->>User: Se connecter à Google\n User->>Google: Se connecter\n Google->>User: Demander la permission
d'accéder à Google Drive\n User->>Google: Accorder l'accès à MyApp\n Google->>MyApp: Rediriger vers MyApp
avec les données d'autorisation (par exemple, access token)\n MyApp->>Google: Accéder à Google Drive de l'utilisateur\n" }) }), "\n", _jsxs(_components.p, { children: ["Dans ce flux, MyApp ne voit jamais les identifiants Google Drive de l'utilisateur. Au lieu de cela, elle reçoit un ", _jsx(_components.a, { href: "https://auth.wiki/access-token", children: "access token" }), " de Google qui lui permet d'accéder à Google Drive pour le compte de l'utilisateur."] }), "\n", _jsxs(_components.p, { children: ["En termes d'OAuth 2.0, MyApp est le ", _jsx(_components.a, { href: "https://auth.wiki/client", children: "client" }), ", Google est à la fois le ", _jsx(_components.a, { href: "https://auth.wiki/authorization-server", children: "serveur d'autorisation" }), " et le ", _jsx(_components.a, { href: "https://auth.wiki/resource-server", children: "serveur de ressources" }), " pour simplifier. Dans le monde réel, nous avons souvent des serveurs d'autorisation et de ressources séparés pour offrir une expérience de connexion unique (SSO). Par exemple, Google est le serveur d'autorisation et peut avoir plusieurs serveurs de ressources comme Google Drive, Gmail et YouTube."] }), "\n", _jsx(_components.p, { children: "Notez que le flux d'autorisation réel est plus complexe que cela. OAuth 2.0 a différents types de subventions, des portées et d'autres concepts dont vous devez être conscient. Mettons cela de côté pour l'instant et passons à OpenID Connect." }), "\n", _jsxs(_components.h3, { id: "openid-connect-oidc", children: ["OpenID Connect (OIDC)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#openid-connect-oidc", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["OAuth 2.0 est excellent pour l'autorisation, mais vous pouvez remarquer qu'il n'a pas de moyen d'identifier l'utilisateur (c'est-à-dire, l'authentification). ", _jsx(_components.a, { href: "https://auth.wiki/openid-connect", children: "OpenID Connect" }), " est une couche d'identité sur OAuth 2.0 qui ajoute des capacités d'authentification."] }), "\n", _jsx(_components.p, { children: "Dans l'exemple ci-dessus, MyApp doit savoir qui est l'utilisateur avant d'initier le flux d'autorisation. Notez qu'il y a deux utilisateurs impliqués ici : l'utilisateur de MyApp et l'utilisateur de Google Drive. Dans ce cas, MyApp doit connaître l'utilisateur de sa propre application." }), "\n", _jsx(_components.p, { children: "Voyons un exemple simple, en supposant que les utilisateurs peuvent se connecter à MyApp en utilisant un nom d'utilisateur et un mot de passe :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User\n participant MyApp\n participant IdP as Fournisseur d'identité (IdP)\n\n User->>MyApp: Ouvrir MyApp et
cliquer sur \"Se connecter\"\n MyApp->>IdP: Rediriger vers IdP\n IdP->>User: Demander le nom d'utilisateur et le mot de passe\n User->>IdP: Entrer le nom d'utilisateur et le mot de passe\n IdP->>IdP: Authentifier l'utilisateur\n IdP->>MyApp: Rediriger vers MyApp
avec les données d'authentification et
d'autorisation (par exemple, ID token)\n MyApp->>User: Afficher le profil de l'utilisateur
(via ID token ou endpoint userinfo)\n" }) }), "\n", _jsxs(_components.p, { children: ["Puisque nous authentifions l'utilisateur de notre propre application, il n'est généralement pas nécessaire de demander la permission comme Google l'a fait dans le flux OAuth 2.0. Entre-temps, nous avons besoin de quelque chose qui puisse identifier l'utilisateur. OpenID Connect introduit des concepts comme le ", _jsx(_components.strong, { children: "jeton d'identité" }), " et le ", _jsx(_components.strong, { children: "point d'extrémité userinfo" }), " pour nous aider avec cela."] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["Vous pouvez remarquer que le ", _jsx(_components.strong, { children: _jsx(_components.a, { href: "https://auth.wiki/identity-provider", children: "fournisseur d'identité (IdP)" }) }), " est un nouveau participant autonome dans le flux. Il est le même que le ", _jsx(_components.strong, { children: "serveur d'autorisation" }), " dans OAuth 2.0, mais pour plus de clarté, nous utilisons le terme IdP pour montrer qu'il est responsable de l'authentification de l'utilisateur et de la gestion de l'identité."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Lorsque votre entreprise se développe, vous pouvez avoir plusieurs applications qui partagent la même base de données utilisateur. Tout comme OAuth 2.0, OpenID Connect vous permet d'avoir un serveur d'autorisation unique qui peut authentifier les utilisateurs pour plusieurs applications. Si l'utilisateur est déjà connecté à une application, il n'a pas besoin de saisir ses identifiants à nouveau lorsqu'une autre application les redirige vers l'IdP. Le flux peut se faire automatiquement sans interaction de l'utilisateur. C'est ce qu'on appelle la connexion unique (SSO)." }), "\n", _jsx(_components.p, { children: "Encore une fois, il s'agit d'un flux très simplifié et il y a plus de détails sous le capot. Pour l'instant, passons à la section suivante pour éviter la surcharge d'informations." }), "\n", _jsxs(_components.h2, { id: "types-dapplications", children: ["Types d'applications", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#types-dapplications", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Dans la section précédente, nous avons utilisé des applications web en tant qu'exemples alors que le monde est plus diversifié que cela. Pour un fournisseur d'identité, le langage de programmation exact, le cadre ou la plateforme que vous utilisez n'a pas vraiment d'importance. En pratique, une différence notable est si l'application est un ", _jsx(_components.a, { href: "https://auth.wiki/client#public-clients", children: "client public" }), " ou un ", _jsx(_components.a, { href: "https://auth.wiki/client#private-clients", children: "client privé (de confiance)" }), " :"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Client public" }), " : Un client qui ne peut pas garder ses identifiants confidentiels, ce qui signifie que le propriétaire de la ressource (utilisateur) peut y accéder. Par exemple, une application web s'exécutant dans un navigateur (par exemple, une application à page unique)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Client privé" }), " : Un client qui a la capacité de garder ses identifiants confidentiels sans les exposer aux propriétaires de ressources (utilisateurs). Par exemple, une application web s'exécutant sur un serveur (par exemple, application web côté serveur) ou un service API."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Avec cela à l'esprit, voyons comment OAuth 2.0 et OpenID Connect peuvent être utilisés dans différents types d'applications." }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "\"Application\" et \"client\" peuvent être utilisés de manière interchangeable dans le contexte de cet article." }), "\n"] }), "\n", _jsxs(_components.h3, { id: "applications-web-sexécutant-sur-un-serveur", children: ["Applications web s'exécutant sur un serveur", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#applications-web-sexécutant-sur-un-serveur", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "L'application s'exécute sur un serveur et sert des pages HTML aux utilisateurs. De nombreux cadres web populaires comme Express.js, Django et Ruby on Rails entrent dans cette catégorie ; et les cadres backend-for-frontend (BFF) comme Next.js et Nuxt.js sont également inclus. Ces applications ont les caractéristiques suivantes :" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Puisqu'un serveur permet uniquement un accès privé (il n'y a pas moyen pour les utilisateurs publics de voir le code ou les identifiants du serveur), il est considéré comme un client privé." }), "\n", _jsx(_components.li, { children: "Le flux global d'authentification de l'utilisateur est le même que celui que nous avons discuté dans la section \"OpenID Connect\"." }), "\n", _jsx(_components.li, { children: "L'application peut utiliser le token d'identité émis par le fournisseur d'identité (c'est-à-dire, Providence OpenID Connect) pour identifier l'utilisateur et afficher du contenu spécifique à l'utilisateur." }), "\n", _jsxs(_components.li, { children: ["Pour garder l'application sécurisée, l'application utilise généralement le ", _jsx(_components.strong, { children: "flow du code d'autorisation" }), " pour l'authentification des utilisateurs et pour obtenir des tokens."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Dans le même temps, l'application peut avoir besoin d'accéder à d'autres services API internes dans une architecture de microservices ; ou c'est une application monolithique qui nécessite un contrôle d'accès pour différentes parties de l'application. Nous aborderons cela dans la section \"Protéger votre API\"." }), "\n", _jsxs(_components.h3, { id: "applications-à-page-unique-spas", children: ["Applications à page unique (SPAs)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#applications-à-page-unique-spas", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "L'application s'exécute dans le navigateur d'un utilisateur et communique avec le serveur via des APIs. React, Angular et Vue.js sont des cadres populaires pour construire des SPAs. Ces applications ont les caractéristiques suivantes :" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Puisque le code de l'application est visible du public, elle est considérée comme un client public." }), "\n", _jsx(_components.li, { children: "Le flux global d'authentification de l'utilisateur est le même que celui que nous avons discuté dans la section \"OpenID Connect\"." }), "\n", _jsx(_components.li, { children: "L'application peut utiliser le token d'identité émis par le fournisseur d'identité (c'est-à-dire, Providence OpenID Connect) pour identifier l'utilisateur et afficher du contenu spécifique à l'utilisateur." }), "\n", _jsxs(_components.li, { children: ["Pour garder l'application sécurisée, l'application utilise généralement le ", _jsx(_components.strong, { children: "flow du code d'autorisation avec PKCE (Proof Key for Code Exchange)" }), " pour l'authentification des utilisateurs et pour obtenir des tokens."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Généralement, les SPAs ont besoin d'accéder à d'autres services API pour la récupération et la mise à jour des données. Nous abordons cela dans la section \"Protéger votre API\"." }), "\n", _jsxs(_components.h3, { id: "applications-mobiles", children: ["Applications mobiles", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#applications-mobiles", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "L'application s'exécute sur un appareil mobile (iOS, Android, etc.) et communique avec le serveur via des APIs. Dans la plupart des cas, ces applications ont les mêmes caractéristiques que les SPAs." }), "\n", _jsxs(_components.h3, { id: "applications-machine-à-machine-m2m", children: ["Applications machine-à-machine (M2M)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#applications-machine-à-machine-m2m", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Les applications ", _jsx(_components.a, { href: "https://auth.wiki/machine-to-machine", children: "machine-à-machine" }), " sont des ", _jsx(_components.a, { href: "https://auth.wiki/client", children: "clients" }), " qui s'exécutent sur un serveur (machine) et communiquent avec d'autres serveurs. Ces applications ont les caractéristiques suivantes :"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Comme les applications web s'exécutant sur un serveur, les applications M2M sont des clients privés." }), "\n", _jsx(_components.li, { children: "L'application peut ne pas avoir besoin d'identifier l'utilisateur ; au lieu de cela, elle doit s'authentifier pour accéder à d'autres services." }), "\n", _jsx(_components.li, { children: "L'application peut utiliser le jeton d'accès émis par le fournisseur d'identité (c'est-à-dire, le fournisseur OAuth 2.0) pour accéder à d'autres services." }), "\n", _jsxs(_components.li, { children: ["Pour garder l'application sécurisée, l'application utilise généralement le ", _jsx(_components.strong, { children: "flow des informations d'identification client" }), " pour obtenir des jetons d'accès."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Lors de l'accès à d'autres services, l'application peut avoir besoin de fournir le jeton d'accès dans l'en-tête de la requête. Nous aborderons cela dans la section \"Protéger votre API\"." }), "\n", _jsxs(_components.h3, { id: "applications-sexécutant-sur-des-appareils-iot", children: ["Applications s'exécutant sur des appareils IoT", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#applications-sexécutant-sur-des-appareils-iot", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "L'application s'exécute sur un appareil IoT (par exemple, appareils domestiques intelligents, objets connectés, etc.) et communique avec le serveur via des APIs. Ces applications ont les caractéristiques suivantes :" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Selon la capacité de l'appareil, il peut s'agir d'un client public ou privé." }), "\n", _jsx(_components.li, { children: "Le flux global d'authentification peut être différent de celui que nous avons discuté dans la section \"OpenID Connect\" en fonction de la capacité de l'appareil. Par exemple, certains appareils peuvent ne pas avoir d'écran pour que les utilisateurs saisissent leurs identifiants." }), "\n", _jsx(_components.li, { children: "Si l'appareil n'a pas besoin d'identifier l'utilisateur, il peut ne pas avoir besoin d'utiliser des jetons d'identité ou des points d'extrémité userinfo ; au lieu de cela, il peut être traité comme une application machine-à-machine (M2M)." }), "\n", _jsxs(_components.li, { children: ["Pour garder l'application sécurisée, l'application peut utiliser le ", _jsx(_components.strong, { children: "flow du code d'autorisation avec PKCE (Proof Key for Code Exchange)" }), " pour l'authentification des utilisateurs et obtenir des jetons ou le ", _jsx(_components.strong, { children: "flow des informations d'identification client" }), " pour obtenir des jetons d'accès."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Lors de la communication avec le serveur, l'appareil peut avoir besoin de fournir le jeton d'accès dans l'en-tête de la requête. Nous aborderons cela dans la section \"Protéger votre API\"." }), "\n", _jsxs(_components.h2, { id: "protéger-votre-api", children: ["Protéger votre API", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#protéger-votre-api", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Avec OpenID Connect, il est possible d'identifier l'utilisateur et de récupérer des données spécifiques à l'utilisateur via des ", _jsx(_components.a, { href: "https://auth.wiki/id-token", children: "jetons d'identité" }), " ou des ", _jsx(_components.a, { href: "https://auth.wiki/userinfo-endpoint", children: "points d'extrémité userinfo" }), ". Ce processus est appelé authentification. Mais vous ne souhaitez probablement pas exposer toutes vos ressources à tous les utilisateurs authentifiés, par exemple, seuls les administrateurs peuvent accéder à la page de gestion des utilisateurs."] }), "\n", _jsx(_components.p, { children: "C'est là qu'intervient l'autorisation. Rappelez-vous qu'OAuth 2.0 est un cadre d'autorisation, et OpenID Connect est une couche d'identité sur OAuth 2.0 ; ce qui signifie que vous pouvez également utiliser OAuth 2.0 lorsque OpenID Connect est déjà en place." }), "\n", _jsxs(_components.p, { children: ["Rappelons l'exemple que nous avons utilisé dans la section \"OAuth 2.0\" : MyApp souhaite accéder au Google Drive de l'utilisateur. Il n'est pas pratique de laisser MyApp accéder à tous les fichiers de l'utilisateur sur Google Drive. Au lieu de cela, MyApp devrait explicitement déclarer ce qu'elle veut accéder (par exemple, un accès en lecture seule aux fichiers dans un dossier spécifique). En termes d'OAuth 2.0, cela s'appelle un ", _jsx(_components.strong, { children: "scope" }), "."] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "Vous pouvez voir le terme \"permission\" utilisé de manière interchangeable avec \"scope\" dans le contexte d'OAuth 2.0 car parfois \"scope\" est ambigu pour les utilisateurs non techniques." }), "\n"] }), "\n", _jsx(_components.p, { children: "Lorsque l'utilisateur accorde l'accès à MyApp, le serveur d'autorisation émet un jeton d'accès avec la portée demandée. Le jeton d'accès est ensuite envoyé au serveur de ressources (Google Drive) pour accéder aux fichiers de l'utilisateur." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User\n participant MyApp\n participant Google\n\n User->>MyApp: Ouvrir MyApp et
cliquer sur \"Connecter Google Drive\"\n MyApp->>Google: Rediriger vers Google\n Google->>User: MyApp veut accéder à votre
Google Drive avec une portée \"lecture seule\"\n User->>Google: D'accord, accorder l'accès à MyApp\n Google->>MyApp: Rediriger vers MyApp
avec les données d'autorisation (par exemple, jeton d'accès)\n MyApp->>Google: Accéder au Google Drive de l'utilisateur
avec le jeton d'accès et la portée\n" }) }), "\n", _jsx(_components.p, { children: "Naturellement, nous pouvons remplacer Google Drive par nos propres services API. Par exemple, MyApp a besoin d'accéder à OrderService pour récupérer l'historique des commandes de l'utilisateur. Cette fois, puisque l'authentification de l'utilisateur est déjà effectuée par le fournisseur d'identité et que MyApp et OrderService sont sous notre contrôle, nous pouvons éviter de demander à l'utilisateur d'accorder l'accès ; MyApp peut envoyer directement la requête à OrderService avec le jeton d'accès émis par le fournisseur d'identité." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User\n participant MyApp\n participant OrderService\n\n User->>MyApp: Ouvrir l'historique des commandes\n MyApp->>OrderService: Récupérer mon historique de commandes (avec jeton d'accès)\n OrderService->>MyApp: Retourner l'historique des commandes\n MyApp->>User: Afficher l'historique des commandes\n" }) }), "\n", _jsxs(_components.p, { children: ["Le jeton d'accès peut contenir un ", _jsx(_components.code, { children: "read:order" }), " ", _jsx(_components.a, { href: "https://auth.wiki/scope", children: "scope" }), " indiquant que l'utilisateur peut lire son historique de commandes."] }), "\n", _jsxs(_components.p, { children: ["Maintenant, supposons que l'utilisateur entre accidentellement une URL de page d'administration dans le navigateur. Puisque l'utilisateur n'est pas un administrateur, il n'y a pas de scope ", _jsx(_components.code, { children: "admin" }), " dans le jeton d'accès. Le service OrderService rejettera la demande et renverra un message d'erreur."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User\n participant MyApp\n participant OrderService\n\n User->>MyApp: Ouvrir la page d'administration\n MyApp->>OrderService: Récupérer la page d'administration (avec jeton d'accès)\n OrderService->>MyApp: Erreur : Accès refusé\n MyApp->>User: Afficher le message d'erreur\n" }) }), "\n", _jsx(_components.p, { children: "Dans ce cas, le service OrderService peut renvoyer un code de statut 403 Interdit pour indiquer que l'utilisateur n'est pas autorisé à accéder à la page d'administration." }), "\n", _jsx(_components.p, { children: "Pour les applications machine-à-machine (M2M), aucun utilisateur n'est impliqué dans le processus. Les applications peuvent demander directement des jetons d'accès au fournisseur d'identité et les utiliser pour accéder à d'autres services. Le même concept s'applique : le jeton d'accès contient les scopes nécessaires pour accéder aux ressources." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant MyApp\n participant OrderService\n\n MyApp->>OrderService: Récupérer toutes les commandes (avec jeton d'accès)\n OrderService->>MyApp: Retourner toutes les commandes\n" }) }), "\n", _jsxs(_components.h3, { id: "conception-de-lautorisation", children: ["Conception de l'autorisation", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conception-de-lautorisation", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Nous pouvons voir deux éléments importants à considérer lors de la conception de l'", _jsx(_components.a, { href: "https://auth.wiki/authorization", children: "autorisation" }), " pour protéger vos services API :"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Scopes" }), " : Définir ce que le client peut accéder. Les portées peuvent être granulaires (par exemple, ", _jsx(_components.code, { children: "read:order" }), ", ", _jsx(_components.code, { children: "write:order" }), ") ou plus générales (par exemple, ", _jsx(_components.code, { children: "order" }), ") selon vos besoins."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Contrôle d'accès" }), " : Définir qui peut avoir des scopes spécifiques. Par exemple, seuls les administrateurs peuvent avoir le scope ", _jsx(_components.code, { children: "admin" }), "."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Concernant le ", _jsx(_components.a, { href: "https://auth.wiki/access-control", children: "contrôle d'accès" }), ", certaines approches populaires sont :"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Contrôle d'accès basé sur les rôles (RBAC)" }), " : Attribuer des rôles aux utilisateurs et définir quels rôles peuvent accéder à quelles ressources. Par exemple, un rôle administrateur peut accéder à la page d'administration."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Contrôle d'accès basé sur les attributs (ABAC)" }), " : Définir des politiques basées sur des attributs (par exemple, le département de l'utilisateur, la localisation, etc.) et prendre des décisions de contrôle d'accès basées sur ces attributs. Par exemple, un utilisateur du département \"Ingénierie\" peut accéder à la page d'ingénierie."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Il convient de mentionner que pour les deux approches, la méthode standard pour vérifier le contrôle d'accès est de vérifier les scopes des jetons d'accès, plutôt que les rôles ou les attributs. Les rôles et les attributs peuvent être très dynamiques et les scopes sont plus statiques, ce qui facilite grandement leur gestion." }), "\n", _jsxs(_components.p, { children: ["Pour plus d'informations sur le contrôle d'accès, vous pouvez consulter ", _jsx(_components.a, { href: "https://blog.logto.io/rbac-and-abac", children: "RBAC et ABAC : Les modèles de contrôle d'accès que vous devriez connaître" }), "."] }), "\n", _jsxs(_components.h3, { id: "jetons-daccès", children: ["Jetons d'accès", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#jetons-daccès", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Bien que nous ayons mentionné le terme \"", _jsx(_components.a, { href: "https://auth.wiki/access-token", children: "jeton d'accès" }), "\" de nombreuses fois, nous n'avons pas discuté de la façon d'en obtenir un. Dans OAuth 2.0, un jeton d'accès est émis par le serveur d'autorisation (fournisseur d'identité) après un flux d'autorisation réussi."] }), "\n", _jsx(_components.p, { children: "Regardons de plus près l'exemple de Google Drive et supposons que nous utilisons le flow du code d'autorisation :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n autonumber\n participant User\n participant MyApp\n participant Google\n\n User->>MyApp: Ouvrir MyApp et
cliquer sur \"Connecter Google Drive\"\n MyApp->>Google: Rediriger vers Google\n Google->>User: Se connecter à Google\n User->>Google: Se connecter\n Google->>User: Demander la permission
d'accéder à Google Drive\n User->>Google: Accorder l'accès à MyApp\n Google->>MyApp: Rediriger vers MyApp
avec les données d'autorisation (par exemple, code d'autorisation)\n MyApp->>Google: Utiliser le code d'autorisation pour
échanger contre un jeton d'accès\n Google->>MyApp: Retourner un jeton d'accès\n MyApp->>Google: Accéder au Google Drive de l'utilisateur avec le jeton d'accès\n" }) }), "\n", _jsx(_components.p, { children: "Il y a quelques étapes importantes dans le flux pour l'émission des jetons d'accès :" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Étape 2 (Rediriger vers Google) : MyApp redirige l'utilisateur vers Google avec une ", _jsx(_components.strong, { children: "demande d'autorisation" }), ". En général, cette demande inclut les informations suivantes :", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Quel client (MyApp) initie la demande" }), "\n", _jsx(_components.li, { children: "Quels scopes MyApp demande" }), "\n", _jsx(_components.li, { children: "Où Google doit rediriger l'utilisateur après l'autorisation" }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["Étape 5 (Demander la permission d'accéder à Google Drive) : Google demande à l'utilisateur d'accorder l'accès à MyApp. L'utilisateur peut choisir d'accorder ou de refuser l'accès. Cette étape s'appelle ", _jsx(_components.strong, { children: "consentement" }), "."] }), "\n", _jsxs(_components.li, { children: ["Étape 7 (Rediriger vers MyApp avec les données d'autorisation) : Cette étape est nouvellement introduite dans le diagramme. Plutôt que de retourner directement le jeton d'accès, Google retourne un ", _jsx(_components.strong, { children: "code d'autorisation" }), " unique à MyApp pour un échange plus sécurisé. Ce code est utilisé pour obtenir le jeton d'accès."] }), "\n", _jsxs(_components.li, { children: ["Étape 8 (Utiliser le code d'autorisation pour échanger contre un jeton d'accès) : C'est également une nouvelle étape. MyApp envoie le code d'autorisation à Google pour échanger contre un jeton d'accès. En tant que fournisseur d'identité, Google composera le contexte de la requête et décidera s'il convient d'émettre un jeton d'accès :", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Le client (MyApp) est celui qu'il prétend être" }), "\n", _jsx(_components.li, { children: "L'utilisateur a accordé l'accès au client" }), "\n", _jsx(_components.li, { children: "L'utilisateur est celui qu'il prétend être" }), "\n", _jsx(_components.li, { children: "L'utilisateur a les scopes nécessaires" }), "\n", _jsx(_components.li, { children: "Le code d'autorisation est valide et n'a pas expiré" }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.p, { children: "L'exemple ci-dessus suppose que le serveur d'autorisation (fournisseur d'identité) et le serveur de ressources sont les mêmes (Google). S'ils sont séparés, prenant l'exemple de MyApp et OrderService, le flux sera comme ceci :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n autonumber\n participant User\n participant MyApp\n participant IdP as Fournisseur d'identité (IdP)\n participant OrderService\n\n User->>MyApp: Ouvrir MyApp et
cliquer sur \"Se connecter\"\n MyApp->>IdP: Rediriger vers IdP\n IdP->>User: Demander le nom d'utilisateur et le mot de passe\n User->>IdP: Entrer le nom d'utilisateur et le mot de passe\n IdP->>IdP: Authentifier l'utilisateur\n IdP->>MyApp: Rediriger vers MyApp
avec les données d'autorisation (par exemple, code d'autorisation)\n MyApp->>IdP: Utiliser le code d'autorisation pour
échanger contre des jetons (ID token, jeton d'accès)\n IdP->>MyApp: Retourner des jetons\n MyApp->>OrderService: Récupérer mon historique de commandes (avec jeton d'accès)\n OrderService->>OrderService: Vérifier le jeton d'accès\n OrderService->>MyApp: Retourner l'historique des commandes\n" }) }), "\n", _jsx(_components.p, { children: "Dans ce flux, le serveur d'autorisation (IdP) émet à la fois un jeton d'identité et un jeton d'accès à MyApp (étape 8). Le jeton d'identité est utilisé pour identifier l'utilisateur, et le jeton d'accès est utilisé pour accéder à d'autres services comme OrderService. Puisque MyApp et OrderService sont des services de première partie, généralement ils ne demandent pas à l'utilisateur d'accorder l'accès ; au lieu de cela, ils s'appuient sur le contrôle d'accès dans le fournisseur d'identité pour déterminer si l'utilisateur peut accéder aux ressources (c'est-à-dire si le jeton d'accès contient les scopes nécessaires)." }), "\n", _jsx(_components.p, { children: "Enfin, voyons comment le jeton d'accès est utilisé dans les applications machine-à-machine (M2M). Puisqu'aucun utilisateur n'est impliqué dans le processus et que l'application est de confiance, elle peut demander directement un jeton d'accès au fournisseur d'identité :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n autonumber\n participant MyApp\n participant IdP as Fournisseur d'identité (IdP)\n participant OrderService\n\n MyApp->>IdP: Demander un jeton d'accès\n IdP->>MyApp: Retourner un jeton d'accès\n MyApp->>OrderService: Récupérer toutes les commandes (avec jeton d'accès)\n OrderService->>OrderService: Vérifier le jeton d'accès\n OrderService->>MyApp: Retourner toutes les commandes\n" }) }), "\n", _jsx(_components.p, { children: "Le contrôle d'accès peut encore être appliqué ici. Pour OrderService, peu importe qui est l'utilisateur ou quelle application demande les données ; il ne se préoccupe que du jeton d'accès et des scopes qu'il contient." }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["Les jetons d'accès sont généralement encodés en JSON Web Tokens (JWT). Pour en savoir plus sur les JWT, vous pouvez vous référer à ", _jsx(_components.a, { href: "https://blog.logto.io/what-is-jwt", children: "Qu'est-ce qu'un JSON Web Token (JWT) ?" }), "."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "indicateurs-de-ressources", children: ["Indicateurs de ressources", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#indicateurs-de-ressources", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "OAuth 2.0 introduit le concept de scopes pour le contrôle d'accès. Cependant, vous pouvez rapidement réaliser que les scopes ne suffisent pas :" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["OpenID Connect définit un ensemble de scopes standards comme ", _jsx(_components.code, { children: "openid" }), ", ", _jsx(_components.code, { children: "offline_access" }), " et ", _jsx(_components.code, { children: "profile" }), ". Il peut être déroutant de mélanger ces scopes standards avec vos scopes personnalisés."] }), "\n", _jsx(_components.li, { children: "Vous pouvez avoir plusieurs services API partageant le même nom de scope mais ayant des significations différentes." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Une solution courante est d'ajouter des suffixes (ou des préfixes) aux noms des scopes pour indiquer la ressource (service API). Par exemple, ", _jsx(_components.code, { children: "read:order" }), " et ", _jsx(_components.code, { children: "read:product" }), " sont plus clairs que ", _jsx(_components.code, { children: "read" }), " et ", _jsx(_components.code, { children: "read" }), ". Une extension OAuth 2.0 ", _jsx(_components.a, { href: "https://tools.ietf.org/html/rfc8707", children: "RFC 8707" }), " introduit un nouveau paramètre ", _jsx(_components.code, { children: "resource" }), " pour indiquer le ", _jsx(_components.strong, { children: "serveur de ressources" }), " que le client souhaite accéder."] }), "\n", _jsxs(_components.p, { children: ["En réalité, les services API sont généralement définis par des URLs, donc il est plus naturel d'utiliser des URLs comme ", _jsx(_components.a, { href: "https://auth.wiki/resource-indicator", children: "indicateurs de ressources" }), ". Par exemple, l'API OrderService peut être représentée par :"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "https://api.example.com/orders\n" }) }), "\n", _jsxs(_components.p, { children: ["Comme vous pouvez le voir, le paramètre apporte la commodité d'utiliser les URLs de ressources réelles dans les demandes d'autorisation et les jetons d'accès. Il convient de mentionner que la RFC 8707 peut ne pas être implémentée par tous les fournisseurs d'identité. Vous devriez vérifier la documentation de votre fournisseur d'identité pour voir s'il prend en charge le paramètre ", _jsx(_components.code, { children: "resource" }), " (Logto le prend en charge)."] }), "\n", _jsxs(_components.p, { children: ["En un mot, le paramètre ", _jsx(_components.code, { children: "resource" }), " peut être utilisé dans les demandes d'autorisation et les jetons d'accès pour indiquer la ressource que le client souhaite accéder."] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["Il n'y a aucune restriction sur l'accessibilité des indicateurs de ressources, c'est-à-dire que l'indicateur de ressources n'a pas besoin d'être une URL réelle pointant vers un service API. Ainsi, le nom \"indicateur de ressource\" reflète correctement son rôle dans le processus d'autorisation. Vous pouvez utiliser des URLs virtuelles pour représenter les ressources que vous souhaitez protéger. Par exemple, vous pouvez définir une URL virtuelle ", _jsx(_components.code, { children: "https://api.example.com/admin" }), " dans votre application monolithique pour représenter la ressource à laquelle seuls les administrateurs peuvent accéder."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "mettre-le-tout-ensemble", children: ["Mettre le tout ensemble", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mettre-le-tout-ensemble", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "À ce stade, nous avons couvert les bases de OAuth 2.0 et OpenID Connect, et comment les utiliser dans différents types d'applications et scénarios. Bien que nous les ayons discutés séparément, vous pouvez les combiner selon vos besoins d'affaires. L'architecture globale peut être aussi simple que cela :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "flowchart LR\n MyApp --- IdP\n" }) }), "\n", _jsx(_components.p, { children: "Ou un peu plus complexe :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "flowchart LR\n WA[Application web] --- IdP[Fournisseur d'identité]\n MA[Application mobile] --- IdP\n OS[OrderService] --- IdP\n AS[AdminService] --- IdP\n WA --- OS\n MA --- OS\n SA[Application à page unique] --- IdP\n SA --- AS\n OS --- AS\n" }) }), "\n", _jsx(_components.p, { children: "À mesure que votre application se développe, vous verrez que le fournisseur d'identité (IdP) joue un rôle crucial dans l'architecture ; mais cela n'a pas de rapport direct avec vos objectifs commerciaux. Bien qu'il soit une excellente idée de l'externaliser à un fournisseur fiable, nous devons choisir judicieusement le fournisseur d'identité. Un bon fournisseur d'identité peut grandement simplifier le processus, réduire l'effort de développement et vous éviter des pièges de sécurité potentiels." }), "\n", _jsxs(_components.h2, { id: "remarques-de-clôture", children: ["Remarques de clôture", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#remarques-de-clôture", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Pour les applications cloud modernes, le fournisseur d'identité (ou serveur d'autorisation) est l'endroit central pour l'", _jsx(_components.a, { href: "https://auth.wiki/authentication", children: "authentification" }), " utilisateur, la ", _jsx(_components.a, { href: "https://auth.wiki/iam", children: "gestion des identités" }), ", et le ", _jsx(_components.a, { href: "https://auth.wiki/access-control", children: "contrôle d'accès" }), ". Bien que nous ayons discuté de nombreux concepts dans cet article, il reste encore de nombreuses nuances à considérer lors de la mise en œuvre d'un tel système. Si vous êtes intéressé à en savoir plus, vous pouvez parcourir notre blog pour des articles plus approfondis."] }), "\n", _jsx(LogtoCloudButton, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }