"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": "application-types", "hProperties": { "id": "application-types" } }, "depth": 2, "value": "Application types" }, { "data": { "id": "web-applications-running-on-a-server", "hProperties": { "id": "web-applications-running-on-a-server" } }, "depth": 3, "value": "Web applications running on a server" }, { "data": { "id": "single-page-applications-spas", "hProperties": { "id": "single-page-applications-spas" } }, "depth": 3, "value": "Single-page applications (SPAs)" }, { "data": { "id": "mobile-applications", "hProperties": { "id": "mobile-applications" } }, "depth": 3, "value": "Mobile applications" }, { "data": { "id": "machine-to-machine-m2m-applications", "hProperties": { "id": "machine-to-machine-m2m-applications" } }, "depth": 3, "value": "Machine-to-machine (M2M) applications" }, { "data": { "id": "applications-running-on-iot-devices", "hProperties": { "id": "applications-running-on-iot-devices" } }, "depth": 3, "value": "Applications running on IoT devices" }, { "data": { "id": "protect-your-api", "hProperties": { "id": "protect-your-api" } }, "depth": 2, "value": "Protect your API" }, { "data": { "id": "authorization-design", "hProperties": { "id": "authorization-design" } }, "depth": 3, "value": "Authorization design" }, { "data": { "id": "access-tokens", "hProperties": { "id": "access-tokens" } }, "depth": 3, "value": "Access tokens" }, { "data": { "id": "resource-indicators", "hProperties": { "id": "resource-indicators" } }, "depth": 3, "value": "Resource indicators" }, { "data": { "id": "bring-it-all-together", "hProperties": { "id": "bring-it-all-together" } }, "depth": 2, "value": "Bring it all together" }, { "data": { "id": "closing-notes", "hProperties": { "id": "closing-notes" } }, "depth": 2, "value": "Closing notes" }]; const readingTime = { "minutes": 12, "words": 3668, "text": "12 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: "Cloud-based applications are the trend nowadays. While the application type varies (web, mobile, desktop, etc.), they all have a cloud backend that provides services like storage, computing, and databases. Most of the time, these applications need to authenticate users and authorize them to access certain resources." }), "\n", _jsx(_components.p, { children: "While homegrown authentication and authorization mechanisms are possible, security has become one of the top concerns when developing cloud applications. Luckily, our industry has battle-tested standards like OAuth 2.0 and OpenID Connect to help us implement secure authentication and authorization." }), "\n", _jsx(_components.p, { children: "This post has the following assumptions:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "You have a basic understanding of application development (web, mobile, or any other type)." }), "\n", _jsx(_components.li, { children: "You've heard about the concepts of authentication and authorization." }), "\n", _jsxs(_components.li, { children: ["You've heard about ", _jsx(_components.a, { href: "https://auth.wiki/oauth-2.0", children: "OAuth 2.0" }), " and ", _jsx(_components.a, { href: "https://auth.wiki/openid-connect", children: "OpenID Connect" }), "."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Yes, \"heard\" is sufficient for both 2 and 3. This post will use real-world examples to explain concepts and illustrate the process with diagrams. Let's get started!" }), "\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: "If you are familiar with OAuth 2.0 and OpenID Connect, you can also continue reading because we will cover some real-world examples in this section; if you are new to these standards, it's also safe to continue as we will introduce them in a simple way." }), "\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" }), " is an authorization framework that allows an application to obtain limited access to protected resources on another application on behalf of a user or the application itself. Most of popular services like Google, Facebook, and GitHub use OAuth 2.0 for social login (e.g., \"Sign in with Google\")."] }), "\n", _jsx(_components.p, { children: "For example, you have a web application MyApp that wants to access the user's Google Drive. Instead of asking the user to share their Google Drive credentials, MyApp can use OAuth 2.0 to request access to Google Drive on behalf of the user. Here's a simplified flow:" }), "\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: Open MyApp and
click \"Connect Google Drive\"\n MyApp->>Google: Redirect to Google\n Google->>User: Sign in to Google\n User->>Google: Sign in\n Google->>User: Ask for permission
to access Google Drive\n User->>Google: Grant access to MyApp\n Google->>MyApp: Redirect to MyApp
with authorization data (e.g., access token)\n MyApp->>Google: Access user's Google Drive\n" }) }), "\n", _jsxs(_components.p, { children: ["In this flow, MyApp never sees the user's Google Drive credentials. Instead, it receives an ", _jsx(_components.a, { href: "https://auth.wiki/access-token", children: "access token" }), " from Google that allows it to access Google Drive on behalf of the user."] }), "\n", _jsxs(_components.p, { children: ["In OAuth 2.0 terms, MyApp is the ", _jsx(_components.a, { href: "https://auth.wiki/client", children: "client" }), ", Google is both the ", _jsx(_components.a, { href: "https://auth.wiki/authorization-server", children: "authorization server" }), " and the ", _jsx(_components.a, { href: "https://auth.wiki/resource-server", children: "resource server" }), " for simplicity. In the real world, we often have separate authorization and resource servers to offer a single sign-on (SSO) experience. For example, Google is the authorization server and it may have multiple resource servers like Google Drive, Gmail, and YouTube."] }), "\n", _jsx(_components.p, { children: "Note that the actual authorization flow is more complex than this. OAuth 2.0 has different grant types, scopes, and other concepts that you should be aware of. Let's put that aside for now and move on to 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 is great for authorization, but you may notice that it doesn't have a way to identify the user (i.e., authentication). ", _jsx(_components.a, { href: "https://auth.wiki/openid-connect", children: "OpenID Connect" }), " is an identity layer on top of OAuth 2.0 that adds authentication capabilities."] }), "\n", _jsx(_components.p, { children: "In the example above, MyApp needs to know who the user is before initiating the authorization flow. Note that there are two users involved here: the user of MyApp and the user of Google Drive. In this case, MyApp needs to know the user of its own application." }), "\n", _jsx(_components.p, { children: "Let's see a straightforward example, assuming users can sign in to MyApp using username and password:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User\n participant MyApp\n participant IdP as Identity provider (IdP)\n\n User->>MyApp: Open MyApp and
click \"Sign in\"\n MyApp->>IdP: Redirect to IdP\n IdP->>User: Ask for username and password\n User->>IdP: Enter username and password\n IdP->>IdP: Authenticate user\n IdP->>MyApp: Redirect to MyApp
with authentication and
authorization data (e.g., ID token)\n MyApp->>User: Display user's profile
(via ID token or userinfo endpoint)\n" }) }), "\n", _jsxs(_components.p, { children: ["Since we are authenticating the user of our own application, usually there's no need to ask for permission like what Google did in the OAuth 2.0 flow. In the meantime, we need something that can identify the user. OpenID Connect introduces the concepts like ", _jsx(_components.strong, { children: "ID token" }), " and ", _jsx(_components.strong, { children: "userinfo endpoint" }), " to help us with that."] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["You may notice that the ", _jsx(_components.strong, { children: _jsx(_components.a, { href: "https://auth.wiki/identity-provider", children: "identity provider (IdP)" }) }), " is a new standalone participant in the flow. It is the same as the ", _jsx(_components.strong, { children: "authorization server" }), " in OAuth 2.0, but for better clarity, we use the term IdP to show that it is responsible for user authentication and identity management."] }), "\n"] }), "\n", _jsx(_components.p, { children: "When your business grows, you may have multiple applications that share the same user database. Just like OAuth 2.0, OpenID Connect allows you to have a single authorization server that can authenticate users for multiple applications. If the user is already signed in to one application, they don't need to enter their credentials again when another application redirects them to the IdP. The flow can be done automatically without user interaction. This is called single sign-on (SSO)." }), "\n", _jsx(_components.p, { children: "Again, this is a highly simplified flow and there are more details under the hood. For now let's move on to the next section to prevent information overload." }), "\n", _jsxs(_components.h2, { id: "application-types", children: ["Application types", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#application-types", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["In the previous section, we used web applications as examples while the world is more diverse than that. To an identity provider, the exact programming language, framework, or platform you use doesn't really matter. In practice, one notable difference is if the application is a ", _jsx(_components.a, { href: "https://auth.wiki/client#public-clients", children: "public client" }), " or a ", _jsx(_components.a, { href: "https://auth.wiki/client#private-clients", children: "private (trusted) client" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Public client" }), ": A client that cannot keep its credentials confidential, which means the resource owner (user) can access them. For example, a web application running in a browser (e.g. single-page application)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Private client" }), ": A client that has the ability to keep its credentials confidential without exposing it to (resource owners) users. For example, a web application running on a server (e.g. server-side web application) or an API service."] }), "\n"] }), "\n", _jsx(_components.p, { children: "With this in mind, let's see how OAuth 2.0 and OpenID Connect can be used in different application types." }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "\"Application\" and \"client\" can be used interchangeably in the context of this post." }), "\n"] }), "\n", _jsxs(_components.h3, { id: "web-applications-running-on-a-server", children: ["Web applications running on a server", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#web-applications-running-on-a-server", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "The application runs on a server and serves HTML pages to users. Many popular web frameworks like Express.js, Django, and Ruby on Rails fall into this category; and backend-for-frontend (BFF) frameworks like Next.js and Nuxt.js are also included. These applications have the following characteristics:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Since a server only allows private access (there's no way for public users to see the server's code or credentials), it is considered a private client." }), "\n", _jsx(_components.li, { children: "The overall user authentication flow is the same as the one we discussed in the \"OpenID Connect\" section." }), "\n", _jsx(_components.li, { children: "The application can use the ID token issued by the identity provider (i.e., the OpenID Connect provider) to identify the user and display user-specific content." }), "\n", _jsxs(_components.li, { children: ["To keep the application secure, the application usually use the ", _jsx(_components.strong, { children: "authorization code flow" }), " for user authentication and to obtain tokens."] }), "\n"] }), "\n", _jsx(_components.p, { children: "In the meantime, the application may need to access other internal API services in a microservices architecture; or it is a monolithic application that needs access control for different parts of the application. We'll discuss this in the \"Protect your API\" section." }), "\n", _jsxs(_components.h3, { id: "single-page-applications-spas", children: ["Single-page applications (SPAs)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#single-page-applications-spas", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "The application runs in a user's browser and communicates with the server via APIs. React, Angular, and Vue.js are popular frameworks for building SPAs. These applications have the following characteristics:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Since the application's code is visible to the public, it is considered a public client." }), "\n", _jsx(_components.li, { children: "The overall user authentication flow is the same as the one we discussed in the \"OpenID Connect\" section." }), "\n", _jsx(_components.li, { children: "The application can use the ID token issued by the identity provider (i.e., the OpenID Connect provider) to identify the user and display user-specific content." }), "\n", _jsxs(_components.li, { children: ["To keep the application secure, the application usually use the ", _jsx(_components.strong, { children: "authorization code flow with PKCE (Proof Key for Code Exchange)" }), " for user authentication and to obtain tokens."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Usually, SPAs need to access other API services for data fetching and updating. We'll discuss this in the \"Protect your API\" section." }), "\n", _jsxs(_components.h3, { id: "mobile-applications", children: ["Mobile applications", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mobile-applications", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "The application runs on a mobile device (iOS, Android, etc.) and communicates with the server via APIs. In most cases, theses applications have the same characteristics as SPAs." }), "\n", _jsxs(_components.h3, { id: "machine-to-machine-m2m-applications", children: ["Machine-to-machine (M2M) applications", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#machine-to-machine-m2m-applications", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://auth.wiki/machine-to-machine", children: "Machine-to-machine" }), " applications are ", _jsx(_components.a, { href: "https://auth.wiki/client", children: "clients" }), " that run on a server (machine) and communicate with other servers. These applications have the following characteristics:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Like web applications running on a server, M2M applications are private clients." }), "\n", _jsx(_components.li, { children: "The application may not need to identify the user; instead, it needs to authenticate itself to access other services." }), "\n", _jsx(_components.li, { children: "The application can use the access token issued by the identity provider (i.e., the OAuth 2.0 provider) to access other services." }), "\n", _jsxs(_components.li, { children: ["To keep the application secure, the application usually use the ", _jsx(_components.strong, { children: "client credentials flow" }), " to obtain access tokens."] }), "\n"] }), "\n", _jsx(_components.p, { children: "When accessing other services, the application may need to provide the access token in the request header. We'll discuss this in the \"Protect your API\" section." }), "\n", _jsxs(_components.h3, { id: "applications-running-on-iot-devices", children: ["Applications running on IoT devices", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#applications-running-on-iot-devices", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "The application runs on an IoT device (e.g., smart home devices, wearables, etc.) and communicates with the server via APIs. These applications have the following characteristics:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Depending on the device's capability, it can be a public or private client." }), "\n", _jsx(_components.li, { children: "The overall authentication flow may be different from the one we discussed in the \"OpenID Connect\" section according to the device's capability. For example, some devices may not have a screen for users to enter their credentials." }), "\n", _jsx(_components.li, { children: "If the device doesn't need to identify the user, it may not need to use ID tokens or userinfo endpoints; instead, it can be treated as a machine-to-machine (M2M) application." }), "\n", _jsxs(_components.li, { children: ["To keep the application secure, the application may use the ", _jsx(_components.strong, { children: "authorization code flow with PKCE (Proof Key for Code Exchange)" }), " for user authentication and obtain tokens or the ", _jsx(_components.strong, { children: "client credentials flow" }), " to obtain access tokens."] }), "\n"] }), "\n", _jsx(_components.p, { children: "When communicating with the server, the device may need to provide the access token in the request header. We'll discuss this in the \"Protect your API\" section." }), "\n", _jsxs(_components.h2, { id: "protect-your-api", children: ["Protect your API", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#protect-your-api", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["With OpenID Connect, it's possible to identify the user and fetch user-specific data via ", _jsx(_components.a, { href: "https://auth.wiki/id-token", children: "ID tokens" }), " or ", _jsx(_components.a, { href: "https://auth.wiki/userinfo-endpoint", children: "userinfo endpoints" }), ". This process is called authentication. But you probably don't want to expose all your resources to all authenticated users, for example, only administrators can access the user management page."] }), "\n", _jsx(_components.p, { children: "This is where authorization comes into play. Remember that OAuth 2.0 is an authorization framework, and OpenID Connect is an identity layer on top of OAuth 2.0; which means you can also use OAuth 2.0 when OpenID Connect is already in place." }), "\n", _jsxs(_components.p, { children: ["Let's recall the example we used in the \"OAuth 2.0\" section: MyApp wants to access the user's Google Drive. It's not practical to let MyApp access all the user's files in Google Drive. Instead, MyApp should explicitly claim what it wants to access (e.g., read-only access to files in a specific folder). In OAuth 2.0 terms, this is called a ", _jsx(_components.strong, { children: "scope" }), "."] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "You may see the term \"permission\" used interchangeably with \"scope\" in the context of OAuth 2.0 as sometimes \"scope\" is ambiguous for non-technical users." }), "\n"] }), "\n", _jsx(_components.p, { children: "When the user grants access to MyApp, the authorization server issues an access token with the requested scope. The access token is then sent to the resource server (Google Drive) to access the user's files." }), "\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: Open MyApp and
click \"Connect Google Drive\"\n MyApp->>Google: Redirect to Google\n Google->>User: MyApp wants to access your
Google Drive with \"read-only\" scope\n User->>Google: Okay, grant access to MyApp\n Google->>MyApp: Redirect to MyApp
with authorization data (e.g., access token)\n MyApp->>Google: Access user's Google Drive
with access token and scope\n" }) }), "\n", _jsx(_components.p, { children: "Naturally, we can replace Google Drive with our own API services. For example, MyApp needs to access the OrderService to fetch the user's order history. This time, since user authentication is already done by the identity provider and both MyApp and OrderService are under our control, we can skip asking the user to grant access; MyApp can directly send the request to OrderService with the access token issued by the identity provider." }), "\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: Open order history\n MyApp->>OrderService: Fetch my order history (with access token)\n OrderService->>MyApp: Return order history\n MyApp->>User: Display order history\n" }) }), "\n", _jsxs(_components.p, { children: ["The access token may contain a ", _jsx(_components.code, { children: "read:order" }), " ", _jsx(_components.a, { href: "https://auth.wiki/scope", children: "scope" }), " to indicate that the user can read their order history."] }), "\n", _jsxs(_components.p, { children: ["Now, let's say the user accidentally enters an admin page URL in the browser. Since the user is not an admin, there's no ", _jsx(_components.code, { children: "admin" }), " scope in the access token. The OrderService will reject the request and return an error message."] }), "\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: Open admin page\n MyApp->>OrderService: Fetch admin page (with access token)\n OrderService->>MyApp: Error: Access denied\n MyApp->>User: Display error message\n" }) }), "\n", _jsx(_components.p, { children: "In this case, the OrderService may return a 403 Forbidden status code to indicate that the user is not authorized to access the admin page." }), "\n", _jsx(_components.p, { children: "For machine-to-machine (M2M) applications, no user is involved in the process. Applications can directly request access tokens from the identity provider and use them to access other services. The same concept applies: the access token contains the necessary scopes to access the resources." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant MyApp\n participant OrderService\n\n MyApp->>OrderService: Fetch all orders (with access token)\n OrderService->>MyApp: Return all orders\n" }) }), "\n", _jsxs(_components.h3, { id: "authorization-design", children: ["Authorization design", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#authorization-design", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["We can see two important things to consider when designing ", _jsx(_components.a, { href: "https://auth.wiki/authorization", children: "authorization" }), " to protect your API services:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Scopes" }), ": Define what the client can access. Scopes can be fine-grained (e.g., ", _jsx(_components.code, { children: "read:order" }), ", ", _jsx(_components.code, { children: "write:order" }), ") or more general (e.g., ", _jsx(_components.code, { children: "order" }), ") depending on your requirements."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Access control" }), ": Define who can have specific scopes. For example, only administrators can have the ", _jsx(_components.code, { children: "admin" }), " scope."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Regarding ", _jsx(_components.a, { href: "https://auth.wiki/access-control", children: "access control" }), ", some popular approaches are:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Role-based access control (RBAC)" }), ": Assign roles to users and define what roles can access what resources. For example, an administrator role can access the admin page."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Attribute-based access control (ABAC)" }), ": Define policies based on attributes (e.g., user's department, location, etc.) and make access control decisions based on these attributes. For example, a user from the \"Engineering\" department can access the engineering page."] }), "\n"] }), "\n", _jsx(_components.p, { children: "It's worth mentioning that for the both approaches, the standard way for verifying access control is to check the access token's scopes, instead of roles or attributes. Roles and attributes can be very dynamic and scopes are more static which makes much easier to manage." }), "\n", _jsxs(_components.p, { children: ["For detailed information about access control, you can refer to ", _jsx(_components.a, { href: "https://blog.logto.io/rbac-and-abac", children: "RBAC and ABAC: The access control models you should know" }), "."] }), "\n", _jsxs(_components.h3, { id: "access-tokens", children: ["Access tokens", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#access-tokens", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Although we've mentioned the term \"", _jsx(_components.a, { href: "https://auth.wiki/access-token", children: "access token" }), "\" many times, we haven't discussed how to get one. In OAuth 2.0, an access token is issued by the authorization server (identity provider) after a successful authorization flow."] }), "\n", _jsx(_components.p, { children: "Let's have a closer look at the Google Drive example and assume we are using the authorization code flow:" }), "\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: Open MyApp and
click \"Connect Google Drive\"\n MyApp->>Google: Redirect to Google\n Google->>User: Sign in to Google\n User->>Google: Sign in\n Google->>User: Ask for permission
to access Google Drive\n User->>Google: Grant access to MyApp\n Google->>MyApp: Redirect to MyApp
with authorization data (e.g., authorization code)\n MyApp->>Google: Use authorization code to
exchange for access token\n Google->>MyApp: Return access token\n MyApp->>Google: Access user's Google Drive with access token\n" }) }), "\n", _jsx(_components.p, { children: "There are some important steps in the flow for access token issuance:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Step 2 (Redirect to Google): MyApp redirects the user to Google with an ", _jsx(_components.strong, { children: "authorization request" }), ". Typically, this request includes the following information:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Which client (MyApp) is initiating the request" }), "\n", _jsx(_components.li, { children: "What scopes MyApp is requesting" }), "\n", _jsx(_components.li, { children: "Where Google should redirect the user after the authorization is done" }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["Step 5 (Ask for permission to access Google Drive): Google asks the user to grant access to MyApp. The user can choose to grant or deny access. This step is called ", _jsx(_components.strong, { children: "consent" }), "."] }), "\n", _jsxs(_components.li, { children: ["Step 7 (Redirect to MyApp with authorization data): This step is newly introduced in the diagram. Rather than returning the access token directly, Google returns an one-time ", _jsx(_components.strong, { children: "authorization code" }), " to MyApp for a more secure exchange. This code is used to obtain the access token."] }), "\n", _jsxs(_components.li, { children: ["Step 8 (Use authorization code to exchange for access token): This is also a new step. MyApp sends the authorization code to Google to exchange for an access token. As an identity provider, Google will compose the context of the request and decide whether to issue an access token:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "The client (MyApp) is who it claims to be" }), "\n", _jsx(_components.li, { children: "The user has granted access to the client" }), "\n", _jsx(_components.li, { children: "The user is who they claim to be" }), "\n", _jsx(_components.li, { children: "The user has the necessary scopes" }), "\n", _jsx(_components.li, { children: "The authorization code is valid and not expired" }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.p, { children: "The above example assumes that the authorization server (identity provider) and the resource server are the same (Google). If they are separate, taking the example of MyApp and OrderService, the flow will be like this:" }), "\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 Identity provider (IdP)\n participant OrderService\n\n User->>MyApp: Open MyApp and
click \"Sign in\"\n MyApp->>IdP: Redirect to IdP\n IdP->>User: Ask for username and password\n User->>IdP: Enter username and password\n IdP->>IdP: Authenticate user\n IdP->>MyApp: Redirect to MyApp
with authorization data (e.g., authorization code)\n MyApp->>IdP: Use authorization code to
exchange for tokens (ID token, access token)\n IdP->>MyApp: Return tokens\n MyApp->>OrderService: Fetch my order history (with access token)\n OrderService->>OrderService: Verify access token\n OrderService->>MyApp: Return order history\n" }) }), "\n", _jsx(_components.p, { children: "In this flow, the authorization server (IdP) issues both an ID token and an access token to MyApp (step 8). The ID token is used to identify the user, and the access token is used to access other services like OrderService. Since both MyApp and OrderService are first-party services, usually they don't ask the user to grant access; instead, they rely on the access control in the identity provider to determine whether the user can access the resources (i.e. whether the access token contains the necessary scopes)." }), "\n", _jsx(_components.p, { children: "Finally, let's see how the access token is used in machine-to-machine (M2M) applications. Since no user is involved in the process and the application is trusted, it can directly request an access token from the identity provider:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n autonumber\n participant MyApp\n participant IdP as Identity provider (IdP)\n participant OrderService\n\n MyApp->>IdP: Request access token\n IdP->>MyApp: Return access token\n MyApp->>OrderService: Fetch all orders (with access token)\n OrderService->>OrderService: Verify access token\n OrderService->>MyApp: Return all orders\n" }) }), "\n", _jsx(_components.p, { children: "Access control can still be applied here. To OrderService, it doesn't matter who the user is or which application is requesting the data; it only cares about the access token and the scopes it contains." }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["Access tokens are usually encoded as JSON Web Tokens (JWT). To learn more about JWT, you can refer to ", _jsx(_components.a, { href: "https://blog.logto.io/what-is-jwt", children: "What is JSON Web Token (JWT)?" }), "."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "resource-indicators", children: ["Resource indicators", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#resource-indicators", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "OAuth 2.0 introduces the concept of scopes for access control. However, you may quickly realize that scopes are not enough:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["OpenID Connect defines a set of standard scopes like ", _jsx(_components.code, { children: "openid" }), ", ", _jsx(_components.code, { children: "offline_access" }), " and ", _jsx(_components.code, { children: "profile" }), ". It may be confusing to mix these standard scopes with your custom scopes."] }), "\n", _jsx(_components.li, { children: "You may have multiple API services that share the same scope name but have different meanings." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["One common solution is to add suffixes (or prefixes) to the scope names to indicate the resource (API service). For example, ", _jsx(_components.code, { children: "read:order" }), " and ", _jsx(_components.code, { children: "read:product" }), " are more clear than ", _jsx(_components.code, { children: "read" }), " and ", _jsx(_components.code, { children: "read" }), ". An OAuth 2.0 extension ", _jsx(_components.a, { href: "https://tools.ietf.org/html/rfc8707", children: "RFC 8707" }), " introduces a new parameter ", _jsx(_components.code, { children: "resource" }), " to indicate the ", _jsx(_components.strong, { children: "resource server" }), " that the client wants to access."] }), "\n", _jsxs(_components.p, { children: ["In reality, API services are usually defined by URLs, so it's more natural to use URLs as ", _jsx(_components.a, { href: "https://auth.wiki/resource-indicator", children: "resource indicators" }), ". For example, the OrderService API can be represented as:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "https://api.example.com/orders\n" }) }), "\n", _jsxs(_components.p, { children: ["As you can see, the parameter brings the convenience of using the actual resource URLs in the authorization requests and access tokens. It's worth mentioning that the RFC 8707 may not be implemented by all identity providers. You should check the documentation of your identity provider to see if it supports the ", _jsx(_components.code, { children: "resource" }), " parameter (Logto supports it)."] }), "\n", _jsxs(_components.p, { children: ["In a nutshell, the ", _jsx(_components.code, { children: "resource" }), " parameter can be used in authorization requests and access tokens to indicate the resource that the client wants to access."] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["There's no restriction on the accessibility of the resource indicators, i.e. the resource indicator doesn't need to be a real URL that points to an API service. Thus the name \"resource indicator\" properly reflects its role in the authorization process. You can use virtual URLs to represent resources you want to protect. For example, you can define a virtual URL ", _jsx(_components.code, { children: "https://api.example.com/admin" }), " in your monolithic application to represent the resource that only administrators can access."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "bring-it-all-together", children: ["Bring it all together", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bring-it-all-together", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "At this point, we've covered the basics of OAuth 2.0 and OpenID Connect, and how to use them in different application types and scenarios. Although we've discussed them separately, you can combine them according to your business requirements. The overall architecture can be as simple as this:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "flowchart LR\n MyApp --- IdP\n" }) }), "\n", _jsx(_components.p, { children: "Or a bit more complex:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "flowchart LR\n WA[Web application] --- IdP[Identity provider]\n MA[Mobile application] --- IdP\n OS[OrderService] --- IdP\n AS[AdminService] --- IdP\n WA --- OS\n MA --- OS\n SA[Single-page application] --- IdP\n SA --- AS\n OS --- AS\n" }) }), "\n", _jsx(_components.p, { children: "As your application grows, you will see identity provider (IdP) plays a critical role in the architecture; but it doesn't relate to your business goals directly. While it's a great idea to offload it to a reliable vendor, we need to choose the identity provider wisely. A good identity provider can greatly simplify the process, reduce the development effort, and save you from potential security pitfalls." }), "\n", _jsxs(_components.h2, { id: "closing-notes", children: ["Closing notes", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#closing-notes", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["For modern cloud applications, identity provider (or authorization server) is the central place for user ", _jsx(_components.a, { href: "https://auth.wiki/authentication", children: "authentication" }), ", ", _jsx(_components.a, { href: "https://auth.wiki/iam", children: "identity management" }), ", and ", _jsx(_components.a, { href: "https://auth.wiki/access-control", children: "access control" }), ". While we discussed a lot concepts in this post, there are still many nuances to consider when implementing such a system. If you are interested in learning more, you can browse our blog for more in-depth articles."] }), "\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."); }