adding login details to custom idp docs, centering/adjusting images (#…

…1866)

## Type of change
<!-- Please be sure to add the appropriate label to your PR. -->
This PR adds information to each of the three IDP example docs about how
to actually log in with the new identity provider. I also went ahead and
resized and centered the images in each doc because: why not?

### What should this PR do?
<!-- Does this PR resolve an issue? Please include a reference to it.
-->
Resolves chainguard-dev/internal#4329

### Why are we making this change?
<!-- What larger problem does this PR address? -->
This came from a customer request about the microsoft entra id doc
specifically (see [this
thread](https://chainguard-dev.slack.com/archives/C04PYHWPE1F/p1728673068946739)
from @cartyc)

### What are the acceptance criteria? 
<!-- What should be happening for this PR to be accepted? Please list
criteria. -->
<!-- Do any stakeholders need to be tagged in this review? If so, please
add them. -->

### How should this PR be tested?
<!-- What should your reviewer do to test this PR? Please list steps.
-->
Should read well, images should look ok.

---------

Signed-off-by: Mark Drake <[email protected]>

content/chainguard/administration/custom-idps/ms-entra-id/index.md

@@ -7,7 +7,7 @@ lead: ""
 description: "Procedural tutorial on how to register a Microsoft Entra ID Application and integrate it with the Chainguard platform."
 type: "article"
 date: 2023-04-17T08:48:45+00:00
-lastmod: 2024-09-25T15:22:20+01:00
+lastmod: 2024-10-28T15:22:20+01:00
 draft: false
 tags: ["CHAINGUARD IMAGES", "PROCEDURAL"]
 images: []
@@ -31,36 +31,41 @@ To complete this guide, you will need the following.
 
 To integrate Microsoft Entra ID with the Chainguard platform, log in to [Azure](https://azure.microsoft.com). In the left-hand navigation menu, select **Microsoft Entra ID**.
 
-![Screenshot of Azure's left-hand navigation menu, with the "Microsoft Entra ID" option highglighted in a yellow box.](meid-0.png)
+<center><img src="meid-0.png" alt="Screenshot of Azure's left-hand navigation menu, with the 'Microsoft Entra ID' option highglighted in a yellow box." style="width:300px;"></center>
+<br /> 
 
 From the Default Directory **Overview** page, click the **➕ Add** button and select **App Registration** from the dropdown menu.
 
-![Screenshot of the Overview in the Azure console. The "Add" dropdown menu has been opened and the "App Registration" option is highlighted in a yellow box.](meid-1.png)
+<center><img src="meid-1.png" alt="Screenshot of the Overview in the Azure console. The "Add" dropdown menu has been opened and the "App Registration" option is highlighted in a yellow box." style="width:1050px;"></center>
+<br /> 
 
 In the **Register an application** screen, configure the application as follows.
 
 * **Name**: Set the username to "Chainguard" (or similar) to ensure users recognize this application is for authentication to the Chainguard platform.
 * **Supported account types**: Select the **Single tenant** option so that only your organization can use this application to authenticate to Chainguard.
 * **Redirect URI**: Set the platform to **Web** and the redirect URI to `https://issuer.enforce.dev/oauth/callback`.
 
-![Screenshot of the Register an application screen with the following settings selected: the Name is set to "chainguard"; Supported account types is set to the "Accounts in this organizational directory only (default Directory only - Single tenant)" option; and the Redirect URI is set to "Web" with "https://issuer.enforce.dev/oauth/callback" set as the URI.](meid-2.png)
+<center><img src="meid-2.png" alt="Screenshot of the Register an application screen with the following settings selected: the Name is set to 'chainguard'; Supported account types is set to the 'Accounts in this organizational directory only (default Directory only - Single tenant)' option; and the Redirect URI is set to 'Web' with 'https://issuer.enforce.dev/oauth/callback' set as the URI." style="width:950px;"></center>
+<br /> 
 
 Save your configuration by clicking the **Register** button.
 
 Next, you can optionally set additional branding for the application by selecting **Branding and properties** from the **Manage** dropdown menu.
 
 Here you can set additional metadata for the application, including a Chainguard logo icon here to help your users visually identify this integration. If you'd like, you can use the icon from the [Chainguard Console](https://console.chainguard.dev/logo512.png). The console homepage is [console.chainguard.dev](https://console.chainguard.dev), and our terms of service and private statements can be found at [chainguard.dev/terms-of-service](https://www.chainguard.dev/terms-of-service) and [chainguard.dev/privacy-notice](https://www.chainguard.dev/privacy-notice), respectively.
 
-![Screenshot of the Branding & properties screen with the following settings: Name is set to "Chainguard"; Logo shows the sample Linky logo uploaded; Home page URL is set to "https://console.chainguard.dev"; Terms of service URL is set to "https://www.chainguard.dev/terms-of-service"; and the Privacy statement URL is set to "https://www.chainguard.dev/privacy-notice".](meid-3.png)
+<center><img src="meid-3.png" alt="Screenshot of the Branding & properties screen with the following settings: Name is set to 'Chainguard'; Logo shows the sample Linky logo uploaded; Home page URL is set to 'https://console.chainguard.dev'; Terms of service URL is set to 'https://www.chainguard.dev/terms-of-service'; and the Privacy statement URL is set to 'https://www.chainguard.dev/privacy-notice." style="width:950px;"></center>
+<br /> 
 
 Finally, navigate to the **Certificates & secrets** tab in the **Manage** dropdown to create a client secret to authenticate the Chainguard platform to Microsoft Entra ID. Select **New client secret** to add a client secret. In the resulting modal window, add a description and set an expiration date.
 
-![Screenshot showing the Certificates & secrets landing page with the Add a client secret screen opened. The "Certificates & secrets" tab is highlighted in yellow, as is the "New client secret" button.](meid-4.png)
+<center><img src="meid-4.png" alt="Screenshot showing the Certificates & secrets landing page with the Add a client secret screen opened. The 'Certificates & secrets' tab is highlighted in yellow, as is the 'New client secret' button." style="width:950px;"></center>
+<br /> 
 
 Finally, take note of the client secret “Value” that is created. You'll need this to configure the Chainguard platform to use this Microsoft Entra ID application.
 
-![Screenshot showing the "Client secrets" tab, with the Value highlighted in yellow.](meid-5.png)
-
+<center><img src="meid-5.png" alt="Screenshot showing the 'Client secrets' tab, with the Value highlighted in yellow." style="width:950px;"></center>
+<br /> 
 
 ## Configuring Chainguard to use Microsoft Entra ID
 
@@ -80,7 +85,8 @@ To configure Chainguard, make a note of the following details from your Microsof
 * **Client Secret**: You noted this down when you set up the client secret in the previous step.
 * **Directory (tenant) Id**: This can also be found on the **Overview** tab of the Chainguard application.
 
-![Screenshot of a portion of the Overview page showing the "Essentials" information. The Application (client) ID and the Directory (tenant) ID are both highlighted in yellow boxes, though their values have been blurred.](meid-6.png)
+<center><img src="meid-6.png" alt="Screenshot of a portion of the Overview page showing the 'Essentials' information. The Application (client) ID and the Directory (tenant) ID are both highlighted in yellow boxes, though their values have been blurred."></center>
+<br /> 
 
 You will also need the UIDP for the Chainguard organization under which you want to install the identity provider.  Your selection won’t affect how your users authenticate but will have implications on who has permission to modify the SSO configuration.
 
@@ -122,3 +128,13 @@ chainctl iam identity-provider create \
 Note the `--default-role` option. This defines the default role granted to users registering with this identity provider. This example specifies the `viewer` role, but depending on your needs you might choose `editor` or `owner`. If you don't include this option, you'll be prompted to specify the role interactively. For more information, refer to the [IAM and Security section](/chainguard/administration/custom-idps/custom-idps/#iam-and-security) of our Introduction to Custom Identity Providers in Chainguard tutorial.
 
 You can refer to our [Generic Integration Guide](/chainguard/administration/custom-idps/custom-idps/#generic-integration-guide) in our Introduction to Custom Identity Providers doc for more information about the `chainctl iam identity-provider create` command and its required options.
+
+To log in to the Chainguard Console with the new identity provider you just created, navigate to [console.chainguard.dev](https://console.chainguard.dev) and click **Use Your Identity Provider**. Next, click **Use Your Organization Name** and enter the name of the organization associated with the new identity provider. Finally, click the **Login with Provider** button. This will open up a new window with the Microsoft Entra ID login flow, allowing you to complete the login process through there.
+
+You can also use the custom identity provider to log in through `chainctl`. To do this, run the `chainctl auth login` command and add the `--identity-provider` option followed by the identity provider's ID value:
+
+```sh
+chainctl auth login --identity-provider <IDP-ID>
+```
+
+The ID value appears in the `ID` column of the table returned by the `chainctl iam identity-provider create` command you ran previously. You can also retrieve this table at any time by running `chainctl iam identity-provider ls -o table` when logged in.

content/chainguard/administration/custom-idps/okta/index.md

@@ -5,7 +5,7 @@ lead: ""
 description: "Procedural tutorial on how to create an Okta App Integration"
 type: "article"
 date: 2023-04-17T08:48:45+00:00
-lastmod: 2024-06-26T15:22:20+01:00
+lastmod: 2024-10-28T15:22:20+01:00
 draft: false
 tags: ["Chainguard Images", "Procedural"]
 images: []
@@ -29,11 +29,13 @@ To complete this guide, you will need the following.
 
 To integrate your Okta identity provider with the Chainguard platform, [log in to Okta](https://www.okta.com/login/) and navigate to the **Applications** landing page in the Admin console. There, click the **Create App Integration** button.
 
-![Screenshot of the Okta Admin console, showing the Applications landing page. "Applications" is circled in the left hand sidebar menu, as is the "Create App Integration" button.](okta-1.png)
+<center><img src="okta-1.png" alt="Screenshot of the Okta Admin console, showing the Applications landing page. 'Applications' is circled in the left hand sidebar menu, as is the 'Create App Integration' button." style="width:950px;"></center>
+<br /> 
 
 Select **OIDC - OpenID Connect** as the sign-in method and **Web Application** as the application type.
 
-![Screenshot of the Okta Admin console, showing the "Create a new app integration" modal window. This image shows the "OIDC - Open ID Connect" option selected next to "Sign-in Method", and the "web Application" option selected next to "Application type."](okta_2_create_buttons.png)
+<center><img src="okta-2.png" alt="Screenshot of the Okta Admin console, showing the 'Create a new app integration' modal window. This image shows the 'OIDC - Open ID Connect' option selected next to 'Sign-in Method', and the 'web Application' option selected next to 'Application type'." style="width:950px;"></center>
+<br /> 
 
 Next, in the **General Settings** window, configure the application as follows.
 
@@ -46,15 +48,18 @@ Next, in the **General Settings** window, configure the application as follows.
 * **Sign-in redirect URIs**: Set the redirect URI to `https://issuer.enforce.dev/oauth/callback`
 * **Sign-out redirect URIs**: This will have a URI field set to `http://localhost:8080` by default. Click the **X** icon to remove the sign-out redirect entirely, leaving this field blank.
 
-![Screenshot of the New Web App Integration process, showing the General Settings window. This window shows the following options: App integration name is set to "Chainguard"; Grant type is set to "Authorization Code"; Sign-in redirect URIs is set to "https://issuer.enforce.dev/oauth/callback"; and there are no URIs listed under Sign-out redirect URIs.](okta_3_new-web-app-int.png)
+<center><img src="okta-3.png" alt="Screenshot of the New Web App Integration process, showing the General Settings window. This window shows the following options: App integration name is set to 'Chainguard'; Grant type is set to 'Authorization Code'; Sign-in redirect URIs is set to 'https://issuer.enforce.dev/oauth/callback'; and there are no URIs listed under Sign-out redirect URIs." style="width:750px;"></center>
+<br /> 
 
 Click the **Save** button. Then, select the **Sign On** tab. Find the **OpenID Connect ID Token** section and click the **Edit** button.
 
-![Screenshots showing the OpenID Connect ID Token section of the Sign On tab. The Sign On tab and the relevant Edit button are circled in red.](okta-4-5.png)
+<center><img src="okta-4-5.png" alt="Screenshots showing the OpenID Connect ID Token section of the Sign On tab. The Sign On tab and the relevant Edit button are circled in red." style="width:950px;"></center>
+<br />
 
 Set the **Issuer** option to **Okta URL**, then click the **Save** button.
 
-![Screenshot showing the OpenID Connect ID Token section being edited. The Issuer field is set to the "Okta URL" option, while the rest of the options are set as their default options.](okta_6_open_id_connect-2.png)
+<center><img src="okta-6.png" alt="Screenshot showing the OpenID Connect ID Token section being edited. The Issuer field is set to the 'Okta URL' option, while the rest of the options are set as their default options." style="width:750px;"></center>
+<br />
 
 That completes our configuration of the Okta Application. Next, we need to configure the Chainguard platform to use our Okta application.
 
@@ -116,3 +121,13 @@ chainctl iam identity-provider create \
 Note the `--default-role` option. This defines the default role granted to users registering with this identity provider. This example specifies the `viewer` role, but depending on your needs you might choose `editor` or `owner`. If you don't include this option, you'll be prompted to specify the role interactively. For more information, refer to the [IAM and Security section](/chainguard/administration/custom-idps/custom-idps/#iam-and-security) of our Introduction to Custom Identity Providers in Chainguard tutorial.
 
 You can refer to our [Generic Integration Guide](/chainguard/administration/custom-idps/custom-idps/#generic-integration-guide) in our Introduction to Custom Identity Providers article for more information about the `chainctl iam identity-provider create` command and its required options.
+
+To log in to the Chainguard Console with the new identity provider you just created, navigate to [console.chainguard.dev](https://console.chainguard.dev) and click **Use Your Identity Provider**. Next, click **Use Your Organization Name** and enter the name of the organization associated with the new identity provider. Finally, click the **Login with Provider** button. This will open up a new window with the Okta login flow, allowing you to complete the login process through there.
+
+You can also use the custom identity provider to log in through `chainctl`. To do this, run the `chainctl auth login` command and add the `--identity-provider` option followed by the identity provider's ID value:
+
+```sh
+chainctl auth login --identity-provider <IDP-ID>
+```
+
+The ID value appears in the `ID` column of the table returned by the `chainctl iam identity-provider create` command you ran previously. You can also retrieve this table at any time by running `chainctl iam identity-provider ls -o table` when logged in.