Fix class of wrapped images

This commit is contained in:
braginini
2023-05-25 14:56:29 +02:00
parent b7e8d09673
commit 30b1988eee
12 changed files with 91 additions and 91 deletions

View File

@@ -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: