mirror of
https://github.com/netbirdio/docs.git
synced 2026-04-24 03:16:40 +00:00
Fix class of wrapped images
This commit is contained in:
@@ -75,14 +75,14 @@ You can enable it by following these steps:
|
||||
- Click `Create`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-create-interactive-login-app.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-create-interactive-login-app.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Click `Settings` tab
|
||||
- Copy **`Client ID`** to `NETBIRD_AUTH_DEVICE_AUTH_CLIENT_ID` in the `setup.env` file
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-interactive-login-settings.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-interactive-login-settings.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Scroll down to the `Advanced Settings` section
|
||||
@@ -90,7 +90,7 @@ You can enable it by following these steps:
|
||||
- Click `Save Changes`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-grant-types.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-grant-types.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
|
||||
@@ -119,7 +119,7 @@ to your network using the [Interactive SSO Login feature](/how-to/getting-starte
|
||||
over Keycloak.
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-auth-grant.gif" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-auth-grant.gif" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
### Step 1: Check your Keycloak Instance
|
||||
@@ -143,7 +143,7 @@ To create a realm you need to:
|
||||
- Click `Create`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-realm.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-realm.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
|
||||
@@ -160,7 +160,7 @@ In this step we will create a NetBird administrator user.
|
||||
- Click `Create`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-user.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-user.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
The user will need an initial password set to be able to log in. To do this:
|
||||
@@ -171,7 +171,7 @@ The user will need an initial password set to be able to log in. To do this:
|
||||
- Click `Save`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-set-password.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-set-password.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
### Step 4: Create a NetBird client
|
||||
@@ -188,14 +188,14 @@ In this step we will create NetBird application client and register with the Key
|
||||
- Your newly client `netbird-client` will be used later to set `NETBIRD_AUTH_CLIENT_ID` in the `setup.env`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-client.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-client.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
|
||||
- Check the checkboxes as on the screenshot below and click Save
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-enable-auth.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-enable-auth.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
### Step 5: Adjust NetBird client access settings
|
||||
@@ -215,7 +215,7 @@ In this step we will configure NetBird application client access with the NetBir
|
||||
- Click `Save`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-access-settings.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-access-settings.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
### Step 6: Create a NetBird client scope
|
||||
@@ -233,7 +233,7 @@ In this step, we will create and configure the NetBird client audience for Keycl
|
||||
- Click `Save`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-client-scope.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-client-scope.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- While in the newly created Client Scope, switch to the `Mappers` tab
|
||||
@@ -241,7 +241,7 @@ In this step, we will create and configure the NetBird client audience for Keycl
|
||||
- Choose the `Audience` mapping
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-configure-audience-mapper.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-configure-audience-mapper.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Fill in the form with the following values:
|
||||
@@ -251,7 +251,7 @@ In this step, we will create and configure the NetBird client audience for Keycl
|
||||
- Click `Save`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-configure-audience-mapper-2.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-configure-audience-mapper-2.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
### Step 7: Add client scope to NetBird client
|
||||
@@ -267,7 +267,7 @@ In this step, we will create and configure the NetBird client audience for Keycl
|
||||
- The value `netbird-client` will be used as audience
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloack-add-client-scope.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloack-add-client-scope.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
### Step 8: Create a NetBird-Backend client
|
||||
@@ -284,13 +284,13 @@ In this step we will create NetBird backend client and register with the Keycloa
|
||||
- Your newly client `netbird-backend` will be used later to set `KeycloakClientCredentials` in the `management.json`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-backend-client.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-backend-client.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Check the checkboxes as on the screenshot below and click Save
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-backend-client-auth.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-backend-client-auth.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
The client will need secret to authenticate. To do this:
|
||||
@@ -298,7 +298,7 @@ The client will need secret to authenticate. To do this:
|
||||
- Copy `client secret` will be used later to set `ClientSecret` in the `management.json`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-backend-client-credentials.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-backend-client-credentials.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
### Step 9: Add manage-users role to netbird-backend
|
||||
@@ -312,13 +312,13 @@ The client will need secret to authenticate. To do this:
|
||||
- Select `Filter by clients` and search for `manage-users`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-service-account-role.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-service-account-role.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Check the role checkbox and click assign
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-add-role.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-add-role.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
Your authority OIDC configuration will be available under:
|
||||
@@ -388,7 +388,7 @@ In this step, we will create and configure NetBird application in azure AD.
|
||||
- Redirect URI: select `Single-page application (SPA)` and URI as `https://<yournetbirddomain.com>/silent-auth`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-new-application.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-new-application.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
### Step 2. Platform configurations
|
||||
@@ -396,13 +396,13 @@ In this step, we will create and configure NetBird application in azure AD.
|
||||
- Under the `Single-page application` Section, add another URI `https://<yournetbirddomain.com>/auth`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-spa-uri-setup.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-spa-uri-setup.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Scroll down and setup other options as on the screenshot below and click Save
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-flows-setup.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-flows-setup.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
### Step 3. Create a NetBird application scope
|
||||
@@ -413,7 +413,7 @@ In this step, we will create and configure NetBird application in azure AD.
|
||||
- Scope name: `api`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-add-scope.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-add-scope.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Under `Authorized client Applications`, click on `+ add a client application` and enter the following:
|
||||
@@ -421,7 +421,7 @@ In this step, we will create and configure NetBird application in azure AD.
|
||||
- Client ID: same as your Application ID URI minus the `api://`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-add-application-scope.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-add-application-scope.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
|
||||
@@ -432,7 +432,7 @@ In this step, we will create and configure NetBird application in azure AD.
|
||||
- Click `My APIs` tab, and select `Netbird`. Next check `api` permission checkbox and click `Add permissions`.
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-netbird-api-permisssions.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-netbird-api-permisssions.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Add `Delagated permissions` to Microsoft Graph
|
||||
@@ -440,7 +440,7 @@ In this step, we will create and configure NetBird application in azure AD.
|
||||
- Click `Microsoft Graph` and then click `Delagated permissions` tab and check all permissions under the `OpenId permissions` section and click `Add permissions`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-openid-permissions.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-openid-permissions.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
|
||||
@@ -450,19 +450,19 @@ In this step, we will create and configure NetBird application in azure AD.
|
||||
- Search for `User.ReadWrite.All` and under `User` sections and check `User.ReadWrite.All` checkbox section
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-user-permissions.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-user-permissions.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Search for `Application.ReadWrite.All` and under `Application` sections and check `Application.ReadWrite.All` checkbox section and click `Add permissions`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-applications-permissions.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-applications-permissions.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Click `Grant admin conset for Default Directory` and click `Yes`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-grant-admin-conset.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-grant-admin-conset.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
### Step 5. Update token version
|
||||
@@ -478,7 +478,7 @@ In this step, we will create and configure NetBird application in azure AD.
|
||||
- Copy `Value` and save it as it can be viewed only once after creation.
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-client-secret.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-client-secret.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
Your authority OIDC configuration will be available under:
|
||||
@@ -546,7 +546,7 @@ Create new zitadel project
|
||||
- Name: `NETBIRD`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-project.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-project.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
Create new zitadel application
|
||||
@@ -557,14 +557,14 @@ Create new zitadel application
|
||||
- TYPE OF APPLICATION: `User Agent`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Fill in the form with the following values and click `Continue`
|
||||
- Authentication Method: `PKCE`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application-auth.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application-auth.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Fill in the form with the following values and click `Continue`
|
||||
@@ -572,14 +572,14 @@ Create new zitadel application
|
||||
- Post Logout URIs: `https://<domain>/silent-auth` and click `+`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application-uri.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application-uri.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Verify applications details and Click `Create` and then click `Close`
|
||||
- Check `Refresh Token` checkbox and click `Save`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application-overview.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application-overview.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
- Copy `Client ID` will be used later in the `setup.env`
|
||||
@@ -597,7 +597,7 @@ To configure `netbird` application token you need to:
|
||||
- Click `Save`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-token-settings.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-token-settings.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
### Step 3: Application Redirect Configuration
|
||||
@@ -616,7 +616,7 @@ To configure `netbird` application redirect you need to:
|
||||
- Click `Save`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-redirect-settings.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-redirect-settings.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
### Step 4: Create a Service User
|
||||
@@ -634,7 +634,7 @@ In this step we will create a `netbird` service user.
|
||||
- Click `Create`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-create-user.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-create-user.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
In this step we will generate `ClientSecret` for the `netbird` service user.
|
||||
@@ -643,7 +643,7 @@ In this step we will generate `ClientSecret` for the `netbird` service user.
|
||||
- Copy `ClientSecret` from the dialog will be used later to set `ClientSecret` in the `management.json`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-service-user-secret.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-service-user-secret.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
### Step 5: Grant manage-users role to netbird service user
|
||||
@@ -657,7 +657,7 @@ In this step we will grant `Org User Manager` role to `netbird` service user.
|
||||
- Click `Add`
|
||||
|
||||
<p>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-service-account-role.png" alt="high-level-dia" class="imagewrapper"/>
|
||||
<img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-service-account-role.png" alt="high-level-dia" className="imagewrapper"/>
|
||||
</p>
|
||||
|
||||
Your authority OIDC configuration will be available under:
|
||||
|
||||
Reference in New Issue
Block a user