browZer id_token->access_token refactor (Entra changes)

openziti · Nov 8, 2024 · d58d46a · d58d46a
1 parent 562f477
commit d58d46a
Show file tree

Hide file tree

Showing 27 changed files with 14,864 additions and 10,333 deletions.
diff --git a/docusaurus/docs/guides/Identity_Providers/entra/index.md b/docusaurus/docs/guides/Identity_Providers/entra/index.md
@@ -4,8 +4,6 @@ sidebar_label: Microsoft Entra ID
 slug: /identity-providers-for-browZer-entra
 ---
 
-import IdPGeneric from '/docs/_browzer-idp-generic.mdx';
-
 <head>
   <title>Microsoft Entra ID for OpenZiti BrowZer</title>
   <meta
@@ -16,4 +14,300 @@ import IdPGeneric from '/docs/_browzer-idp-generic.mdx';
 
 <img src="/icons/logo-entra.jpg" alt="How to configure Microsoft Entra ID for OpenZiti BrowZer" width="20%"/>
 
-<IdPGeneric />
+### Get an Entra ID Account
+
+If you don't already have an account you can sign up at https://entra.microsoft.com/
+
+### Add a new Application
+
+Once you have an Azure account, click on the "Entra" icon in the navbar:
+
+<p align="center">
+
+![Entra icon](/img/entra-1.jpg)
+
+</p>
+<br/>
+Then click on the "App Registrations" item in the left navbar:
+
+<p align="center">
+
+![Entra App Registrations](/img/entra-3.jpg)
+
+</p>
+<br/>
+Then Click "New registration":
+
+<p align="center">
+
+![Entra New registration](/img/entra-4.jpg)
+
+</p>
+
+Now Register an Application:
+
+For the `Name` of the application, enter the URL where you will be hosting your browZer bootstrapper. For the example used in this documentation, we will use `https://entra-demo.ziti.netfoundry.io`
+
+For the `Supported account types`, click the top option (`single tenant`)
+
+For the `Redirect URI`, make sure to select `SPA` and then enter the URL where you will be hosting your browZer bootstrapper. For the example used in this documentation, we will use `https://entra-demo.ziti.netfoundry.io`
+
+For example:
+
+<p align="center">
+
+![Entra Register an Application](/img/entra-5.jpg)
+
+</p>
+
+Once all the above fields have been filled in, click the `Register` button at the bottom of the form.
+
+### Token configuration
+
+Then click on the "Token configuration" item in the left navbar:
+
+<p align="center">
+
+![Entra icon](/img/entra-7.jpg)
+
+</p>
+<br/>
+
+Then click "Add optional claim":
+
+<p align="center">
+
+![Entra icon](/img/entra-8.jpg)
+
+</p>
+<br/>
+
+Then select `Access` as the token type, and select `email` from the list of claims.
+
+Then click the `Add` button at the bottom of the form.
+
+For example:
+
+<p align="center">
+
+![Entra icon](/img/entra-9.jpg)
+
+</p>
+<br/>
+
+A form will appear. Select the checkbox `Microsoft Graph email permission`,
+Then click the `Add` button.
+
+For example:
+
+<p align="center">
+
+![Entra icon](/img/entra-10.jpg)
+
+</p>
+<br/>
+
+### Expose an API
+
+Then click on the "Expose an API" item in the left navbar:
+
+<p align="center">
+
+![Entra icon](/img/entra-11.jpg)
+
+</p>
+<br/>
+
+Click  `Add a scope`
+
+<p align="center">
+
+![Entra icon](/img/entra-12.jpg)
+
+</p>
+<br/>
+
+For the `Application ID URI`, enter the URL where you will be hosting your browZer bootstrapper. For the example used in this documentation, we will use `https://entra-demo.ziti.netfoundry.io`
+
+<p align="center">
+
+![Entra icon](/img/entra-13.jpg)
+
+</p>
+<br/>
+
+For the `Scope name`, enter `OpenZiti.BrowZer`.
+
+For `Who can consent`, choose `Admins and users`.
+
+Enter what you like for the descriptions.
+
+Make sure the `State` is `Enabled`.
+
+Then click the `Add scope` button at the borrom of the form.
+
+For example:
+
+<p align="center">
+
+![Entra icon](/img/entra-14.jpg)
+
+</p>
+<br/>
+
+### Owners
+
+Then click on the "Owners" item in the left navbar:
+
+<p align="center">
+
+![Entra icon](/img/entra-18.jpg)
+
+</p>
+<br/>
+
+Add yourself as an owner of the application:
+
+<p align="center">
+
+![Entra icon](/img/entra-19.jpg)
+
+</p>
+<br/>
+
+
+### API permissions
+
+Then click on the "API permissions" item in the left navbar:
+
+<p align="center">
+
+![Entra icon](/img/entra-15.jpg)
+
+</p>
+<br/>
+
+The `User.Read` permission is not needed for browZer, so you may use the 3-dot menu on the right side to remove it.
+
+<p align="center">
+
+![Entra icon](/img/entra-16.jpg)
+
+</p>
+<br/>
+
+Now click `Add a permission`.
+
+<p align="center">
+
+![Entra icon](/img/entra-17.jpg)
+
+</p>
+<br/>
+
+Now click `My APIs`.
+
+<p align="center">
+
+![Entra icon](/img/entra-22.jpg)
+
+</p>
+<br/>
+
+Now click the item representing the URL where you will be hosting your browZer bootstrapper. For the example used in this documentation, we will use `https://entra-demo.ziti.netfoundry.io`
+
+<p align="center">
+
+![Entra icon](/img/entra-23.jpg)
+
+</p>
+<br/>
+
+Select the checkbox for `OpenZiti.BrowZer`, then click the `Add permissions` button at the bottom of the form.
+
+<p align="center">
+
+![Entra icon](/img/entra-24.jpg)
+
+</p>
+<br/>
+
+### Manifest
+
+Then click on the "Manifest" item in the left navbar:
+
+
+Now click `Microsoft Graph App Manifest`, then scroll the JSON down to line 31 where you see `requestedAccessTokenVersion`. This field defaults to `null`.
+Change the value to `2`. This is extremely important. Failure to complete this step will results in invalid `access_token`'s being produced by Entra during the `PKCE` process performed between browZer and Entra when a user authenticates.
+
+Then click `Save`
+
+For example:
+
+<p align="center">
+
+![Entra icon](/img/entra-26.jpg)
+
+</p>
+<br/>
+
+### Gather IdP Information
+
+Your OpenZiti network must be configured to become aware of your Entra identity provider.  OpenZiti refers to the identity provider as an `External JWT Signer`.  Before you can set up the new JWT signer, you must gather some information from the new Entra Application that you just created:
+- the `clientId`
+- the `issuer`
+- the `jwks_uri`
+<br/>
+<br/>
+
+#### Gather `clientId`
+
+The `clientID` value can be found in the `Overview` tab of the Application you Registered above:
+
+<p align="center">
+
+![Auth0 clientId](/img/entra-27.jpg)
+
+</p>
+<br/>
+
+#### Gather `issuer`
+
+The `issuer` can be found via the openid-configuration endpoint that all OIDC-compliant identity providers expose.  
+
+The openid-configuration endpoint URL for Entra looks like this:
+
+<p align="center">
+
+`https://login.microsoftonline.com/<YOUR_TENANT_ID>/v2.0/.well-known/openid-configuration`
+
+</p>
+
+where the value for `<YOUR_TENANT_ID>` can be found in the `Overview` tab of the Application you Registered above:
+
+<p align="center">
+
+![Auth0 Domain](/img/entra-28.jpg)
+
+</p>
+
+When you enter the openid-configuration endpoint URL (`https://login.microsoftonline.com/<YOUR_TENANT_ID>/v2.0/.well-known/openid-configuration`) into a browser, you will receive a response resembling the following:
+
+<p align="center">
+
+![Auth0 OIDC config](/img/entra-29.jpg)
+
+</p>
+<br/>
+
+Take note of the `issuer` value.
+<br/>
+
+
+#### Gather `jwks_uri`
+Take note of the `jwks_uri` value returned from the above openid-configuration endpoint URL.
+<br/>
+
+### Create External JWT Signer
+Using the values described above, use the `ziti` CLI to configure an external JWT signer that represents your Auth0 identity provider.  You can find details on how to do this in the [BrowZer Quickstart documentation](/docs/learn/quickstarts/browzer/)
+
diff --git a/docusaurus/package.json b/docusaurus/package.json
@@ -46,7 +46,7 @@
     "react-github-btn": "^1.4.0",
     "react-helmet": "^6.1.0",
     "react-is": ">= 16.8.0",
-    "react-loadable": "*",
+    "react-loadable": "^5.5.0",
     "react-markdown": "^8.0.7",
     "react-player": "^2.12.0",
     "react-render-markup": "^3.6.1",

diff --git a/docusaurus/static/img/entra-1.jpg b/docusaurus/static/img/entra-1.jpg
diff --git a/docusaurus/static/img/entra-10.jpg b/docusaurus/static/img/entra-10.jpg
diff --git a/docusaurus/static/img/entra-11.jpg b/docusaurus/static/img/entra-11.jpg
diff --git a/docusaurus/static/img/entra-12.jpg b/docusaurus/static/img/entra-12.jpg
diff --git a/docusaurus/static/img/entra-13.jpg b/docusaurus/static/img/entra-13.jpg
diff --git a/docusaurus/static/img/entra-14.jpg b/docusaurus/static/img/entra-14.jpg
diff --git a/docusaurus/static/img/entra-15.jpg b/docusaurus/static/img/entra-15.jpg
diff --git a/docusaurus/static/img/entra-16.jpg b/docusaurus/static/img/entra-16.jpg
diff --git a/docusaurus/static/img/entra-17.jpg b/docusaurus/static/img/entra-17.jpg
diff --git a/docusaurus/static/img/entra-18.jpg b/docusaurus/static/img/entra-18.jpg
diff --git a/docusaurus/static/img/entra-19.jpg b/docusaurus/static/img/entra-19.jpg
diff --git a/docusaurus/static/img/entra-22.jpg b/docusaurus/static/img/entra-22.jpg
diff --git a/docusaurus/static/img/entra-23.jpg b/docusaurus/static/img/entra-23.jpg
diff --git a/docusaurus/static/img/entra-24.jpg b/docusaurus/static/img/entra-24.jpg
diff --git a/docusaurus/static/img/entra-26.jpg b/docusaurus/static/img/entra-26.jpg
diff --git a/docusaurus/static/img/entra-27.jpg b/docusaurus/static/img/entra-27.jpg
diff --git a/docusaurus/static/img/entra-28.jpg b/docusaurus/static/img/entra-28.jpg
diff --git a/docusaurus/static/img/entra-29.jpg b/docusaurus/static/img/entra-29.jpg
diff --git a/docusaurus/static/img/entra-3.jpg b/docusaurus/static/img/entra-3.jpg
diff --git a/docusaurus/static/img/entra-4.jpg b/docusaurus/static/img/entra-4.jpg
diff --git a/docusaurus/static/img/entra-5.jpg b/docusaurus/static/img/entra-5.jpg
diff --git a/docusaurus/static/img/entra-7.jpg b/docusaurus/static/img/entra-7.jpg
diff --git a/docusaurus/static/img/entra-8.jpg b/docusaurus/static/img/entra-8.jpg
diff --git a/docusaurus/static/img/entra-9.jpg b/docusaurus/static/img/entra-9.jpg