Skip to content

Commit

Permalink
refactor: update title in 3rd party app config guide (#744)
Browse files Browse the repository at this point in the history
  • Loading branch information
charIeszhao authored Jul 9, 2024
1 parent d18203a commit fb4f0cb
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 53 deletions.
1 change: 1 addition & 0 deletions docs/docs/recipes/logto-as-idp/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -87,5 +87,6 @@ All third-party applications will be catalogued on the **Applications** page, sp
## Continue with

- [branding customization](./branding-customization)
- [third-party app configuration](./configure-3rd-party-app-in-console)
- [permission management](./permissions-management)
- [application reference](../../references/applications/)
Original file line number Diff line number Diff line change
@@ -1,54 +1,5 @@
import ClientCredentials from './assets/client-credentials.webp';
import DiscoveryEndpoint from './assets/discovery-endpoint.webp';
import EndpointDetails from './assets/endpoint-details.webp';
import RedirectUri from './assets/redirect-uri.webp';
import Content from './fragments/_configure-3rd-party-app.mdx';

## Create an third-party OIDC application in Logto
# Create an third-party OIDC application in Console

Just like how you create a first-party application in Logto, you can also create an application for third-party services that support OIDC. This application will act as an IdP for your third-party applications.

1. Go to the **Logto Console** and navigate to the **Applications** page.

2. Select "Third-party app -> OIDC" as the application type.

If this is the first time you create an application, click on the **View all** link to see all application types.
![application list](./assets/application-list.webp)

Otherwise, click on the **Create application** button on the top right corner of the page and select "Third-party app -> OIDC" as the application type.
![create application](./assets/create-application.webp)

3. Just like creating a Logto first-party application, enter a **name** and **description** for your application and click on the **Create** button. A new third-party OIDC application will be created.

![application details](./assets/application-details.webp)

## Setup the OIDC configurations

In order to set up Logto as an IdP for your third-party applications, you need to configure the OIDC settings under the application details page.

1. Provide the **redirect URI** of your third-party application. This is the URL that the third-party application will redirect users to after they are authenticated by Logto. You can usually find this information in the third-party application's IdP connection settings page.

:::note
Logto supports multiple redirect URIs. You can add more redirect URIs by clicking on the **Add another** button.
:::

<img src={RedirectUri} alt="redirect uri" width={500} />

2. Retrieve the **client ID** and **client secret** from Logto application details page and enter them into your service provider's IdP connection settings page.

<img src={ClientCredentials} alt="client credentials" width={500} />

3. Retrieve the **authorization endpoint** and **token endpoint** from Logto application details page and provide them to your service provider.

If your service provider supports OIDC discovery, you can simply copy the **discovery endpoint** from Logto application details page and provide it to your service provider. The service provider will be able to retrieve all the up to date OIDC authentication information from the discovery endpoint automatically.

<img src={DiscoveryEndpoint} alt="discovery endpoint" width={500} />

Otherwise, click on the **Show endpoint details** button to view all the OIDC authentication endpoints.

<img src={EndpointDetails} alt="endpoint details" width={500} />

## Manage your third-party applications

All third-party applications will be catalogued on the **Applications** page, specifically under the **Third-party apps** tab. This arrangement distinguishes them from first-party applications for you, ensuring easy management.

![third-party apps](./assets/third-party-apps.webp)
<Content />
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
{/* This is a re-usable fragment that currently being referenced by both the recipe and the connector guide */}
import ClientCredentials from '../assets/client-credentials.webp';
import DiscoveryEndpoint from '../assets/discovery-endpoint.webp';
import EndpointDetails from '../assets/endpoint-details.webp';
import RedirectUri from '../assets/redirect-uri.webp';

Just like how you create a first-party application in Logto, you can also create an application for third-party services that support OIDC. This application will act as an IdP for your third-party applications.

1. Go to the **Logto Console** and navigate to the **Applications** page.

2. Select "Third-party app -> OIDC" as the application type.

If this is the first time you create an application, click on the **View all** link to see all application types.
![application list](../assets/application-list.webp)

Otherwise, click on the **Create application** button on the top right corner of the page and select "Third-party app -> OIDC" as the application type.
![create application](../assets/create-application.webp)

3. Just like creating a Logto first-party application, enter a **name** and **description** for your application and click on the **Create** button. A new third-party OIDC application will be created.

![application details](../assets/application-details.webp)

## Setup the OIDC configurations

In order to set up Logto as an IdP for your third-party applications, you need to configure the OIDC settings under the application details page.

1. Provide the **redirect URI** of your third-party application. This is the URL that the third-party application will redirect users to after they are authenticated by Logto. You can usually find this information in the third-party application's IdP connection settings page.

:::note
Logto supports multiple redirect URIs. You can add more redirect URIs by clicking on the **Add another** button.
:::

<img src={RedirectUri} alt="redirect uri" width={500} />

2. Retrieve the **client ID** and **client secret** from Logto application details page and enter them into your service provider's IdP connection settings page.

<img src={ClientCredentials} alt="client credentials" width={500} />

3. Retrieve the **authorization endpoint** and **token endpoint** from Logto application details page and provide them to your service provider.

If your service provider supports OIDC discovery, you can simply copy the **discovery endpoint** from Logto application details page and provide it to your service provider. The service provider will be able to retrieve all the up to date OIDC authentication information from the discovery endpoint automatically.

<img src={DiscoveryEndpoint} alt="discovery endpoint" width={500} />

Otherwise, click on the **Show endpoint details** button to view all the OIDC authentication endpoints.

<img src={EndpointDetails} alt="endpoint details" width={500} />

## Manage your third-party applications

All third-party applications will be catalogued on the **Applications** page, specifically under the **Third-party apps** tab. This arrangement distinguishes them from first-party applications for you, ensuring easy management.

![third-party apps](../assets/third-party-apps.webp)
4 changes: 3 additions & 1 deletion docs/integrations/third-party/oidc/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ sidebar_custom_props:
logoFilename: 'oidc.svg'
---

import Content from '../../../docs/recipes/logto-as-idp/configure-3rd-party-app-in-console.mdx';
import Content from '../../../docs/recipes/logto-as-idp/fragments/_configure-3rd-party-app.mdx';

# Logto as an Identity Provider (IdP)

## Create an third-party OIDC application in Logto

<Content />

0 comments on commit fb4f0cb

Please sign in to comment.