<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Antoine BLONDEAU, Author at Clever Cloud</title>
	<atom:link href="https://stagingv6.cleverapps.io/blog/author/antoine-blondeauclever-cloud-com/feed/" rel="self" type="application/rss+xml" />
	<link></link>
	<description>From Code to Product</description>
	<lastBuildDate>Wed, 11 May 2022 06:43:26 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://staging-cc-assetsv6.cellar-c2.services.clever-cloud.com/uploads/2023/03/cropped-cropped-favicon-32x32.png</url>
	<title>Antoine BLONDEAU, Author at Clever Cloud</title>
	<link></link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>How to deploy Keycloak on Clever Cloud</title>
		<link>https://stagingv6.cleverapps.io/blog/features/2022/05/11/how-to-deploy-keycloak-on-clever-cloud/</link>
		
		<dc:creator><![CDATA[Antoine BLONDEAU]]></dc:creator>
		<pubDate>Wed, 11 May 2022 06:43:26 +0000</pubDate>
				<category><![CDATA[Features]]></category>
		<category><![CDATA[Engineering]]></category>
		<guid isPermaLink="false">https://stagingv6.cleverapps.io/?p=6138</guid>

					<description><![CDATA[<p><img width="1400" height="540" src="https://staging-cc-assetsv6.cellar-c2.services.clever-cloud.com/uploads/2022/04/banniere-keycloak.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="banniere_keycloak" decoding="async" fetchpriority="high" srcset="https://staging-cc-assetsv6.cellar-c2.services.clever-cloud.com/uploads/2022/04/banniere-keycloak.png 1400w, https://staging-cc-assetsv6.cellar-c2.services.clever-cloud.com/uploads/2022/04/banniere-keycloak-300x116.png 300w, https://staging-cc-assetsv6.cellar-c2.services.clever-cloud.com/uploads/2022/04/banniere-keycloak-1024x395.png 1024w, https://staging-cc-assetsv6.cellar-c2.services.clever-cloud.com/uploads/2022/04/banniere-keycloak-768x296.png 768w, https://staging-cc-assetsv6.cellar-c2.services.clever-cloud.com/uploads/2022/04/banniere-keycloak-1368x528.png 1368w" sizes="(max-width: 1400px) 100vw, 1400px" /></p><!-- wp:paragraph -->
<p>Keycloak is a modern and efficient way to deal with identity and access management. It allows for single sign-on, user federation across multiple user directories. It is also compliant with standard authentication protocols like OpenID Connect, OAuth2 or SAML. All details are available on its <a href="https://www.keycloak.org/">website</a>. This blogpost will go through steps to deploy Keycloack and Grafana on Clever Cloud.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>How to deploy Keycloak</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Setup</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Keycloak is written in Java, and gives a JAR file in their release, which means we will use a <a href="https://stagingv6.cleverapps.io/doc/deploy/application/java/java-jar/">a JAVA runtime with a JAR deployment</a>. It also requires a <a href="https://www.postgresql.org/">PostgreSQL Database</a>, which means we will deploy a <a href="https://stagingv6.cleverapps.io/doc/deploy/addon/postgresql/postgresql/">PostgreSQL addon</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash"># Get lastest Keycloak release
wget https://github.com/keycloak/keycloak/releases/download/17.0.1/keycloak-17.0.1.zip

# Extract the archive
unzip keycloak-17.0.1.zip

# Go to the folder
cd keycloak-17.0.1

# Create the jar application
clever create --type jar keycloak-server
export KEYCLOAK_DOMAIN=$(clever domain | xargs)

# Create the PG addon
clever addon create postgresql-addon --plan s_sml --addon-version 10 keycloak-postgres

# Link the addon
clever service link-addon keycloak-postgres</code></pre>
<!-- /wp:html -->

<!-- wp:heading {"level":3} -->
<h3>Configure</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>For now we will configure Keycloak through environment variables. Note that you can also do configure Keycloak through its CLI or through a file, as stated in its <a href="https://www.keycloak.org/server/configuration">documentation</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Note:</strong> For the configuration through environment variables; the pattern to use is <code>KC_</code> and the uppercase name of any configuration key, separated by underscores.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash"># Export env for templating purpose
export $(clever env | sed '/^#/d;s/\"//g')

clever env set CC_JAR_PATH lib/quarkus-run.jar
clever env set CC_JAVA_VERSION 11
clever env set CC_RUN_COMMAND "bin/kc.sh start --auto-build"

clever env set KC_DB postgres
clever env set KC_DB_USERNAME $POSTGRESQL_ADDON_USER
clever env set KC_DB_PASSWORD $POSTGRESQL_ADDON_PASSWORD
clever env set KC_DB_URL "jdbc:postgresql://$POSTGRESQL_ADDON_HOST:$POSTGRESQL_ADDON_PORT/$POSTGRESQL_ADDON_DB"
clever env set KC_HOSTNAME $KEYCLOAK_DOMAIN
clever env set KC_HTTP_ENABLED true
clever env set KC_PROXY passthrough
clever env set KC_PROXY_ADDRESS_FORWARDING true
</code></pre>
<!-- /wp:html -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Note: </strong>Consider setting KC_DB_POOL_MAX_SIZE at a lower value (default is 100) regarding the database size you ordered earlier. You can find the connection limit <a href="https://stagingv6.cleverapps.io/pricing/#databases">here</a>. If you used the S_SML size that is in the command earlier, you can ignore this message. You can also fine tune the database connection pool using KC_DB_POOL_INITIAL_SIZE and KC_DB_POOL_MIN_SIZE</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>Now, you need to define KEYCLOAK_ADMIN and KEYCLOAK_ADMIN_PASSWORD :</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash">clever env set KEYCLOAK_ADMIN &lt;choose an admin username&gt;
clever env set KEYCLOAK_ADMIN_PASSWORD &lt;choose an admin password&gt;</code></pre>
<!-- /wp:html -->

<!-- wp:heading {"level":3} -->
<h3>Deploy</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Deploy Keycloak on Clever Cloud:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash"># Init a git repository
git init

# Add your files
git add .

# Create the first commit
git commit -m "clever init"

# Deploy the application
clever deploy

# Open Keycloak in your browser
clever open</code></pre>
<!-- /wp:html -->

<!-- wp:heading {"level":3} -->
<h3>Validate the configuration</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can follow the Keycloak documentation starting <a href="https://www.keycloak.org/getting-started/getting-started-zip#_create_a_realm">here</a> to ensure Keycloak works as expected. It will take you through a realm (tenant) creation, user creation and client creation/test.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Create an Initial Keycloak configuration</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In the keycloak UI, ensure you create a Realm called "myrealm" (hover "Master" on the top left corner). Ensure the realm "<code>myrealm</code>" is selected.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> Then, go to <em><strong>Users &gt; Add a User</strong></em>. Fill the Username, Email, First Name and Last Name fields, then hit <strong>save</strong>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the credentials tab of the user, add the password of your choice and <strong>deselect  "Temporary", the set password.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You're all set.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>A real world scenario</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":6184,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://cdn.clever-cloud.com/uploads/2022/04/giphy-1-1.webp" alt="" class="wp-image-6184"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Let's see how we can use Keycloak in the real world: as an SSO Proxy for Grafana, using Oauth 2.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Setup Grafana on Clever Cloud</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you need a in-depth guide on how to use or deploy Grafana please read this <a href="https://stagingv6.cleverapps.io/blog/features/2021/10/28/a-grafana-to-plot-applications-metrics/">article</a>, the following is a helper to illustrate the usages of Keycloak.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's use the <a href="https://github.com/CleverCloud/grafana-example">grafana-example</a> on Clever Cloud's Github repository.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash"># Clone the repository
git clone https://github.com/CleverCloud/grafana-example.git

# Enter the directory
cd grafana-example

# Create a NodeJS Application
clever create --type node grafana
export GRAFANA_DOMAIN=$(clever domain | xargs)

# Configure Grafana
clever env set GRAFANA_VERSION 8.5.2
clever env set GRAFANA_PLUGINS "grafana-worldmap-panel"
clever env set GF_PLUGIN_DIR ./data/plugins

clever env set GF_SERVER_HTTP_PORT 8080
clever env set GF_SERVER_ROOT_URL "https://$GRAFANA_DOMAIN"</code></pre>
<!-- /wp:html -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Note: </strong>In this section you need to set the GRAFANA_SHA_256 variable yourself. You can find the SHA256SUM required <a href="https://grafana.com/grafana/download/8.5.2?pg=get&amp;plcmt=selfmanaged-box1-cta1&amp;edition=oss">here</a>, next to "Standalone Linux Binaries"</p></blockquote>
<!-- /wp:quote -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash">clever env set GRAFANA_SHA_256 &lt;SHA256SUM&gt;</code></pre>
<!-- /wp:html -->

<!-- wp:heading {"level":3} -->
<h3>Configure Keycloak for OAuth 2</h3>
<!-- /wp:heading -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Note: </strong> In this section, you need to replace <code><code>$GRAFANA_DOMAIN</code></code> with the value you exported in the last section. You can find this value by running the following command: <code><code>clever domain</code></code></p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>In the Keyloak UI, Go to <strong><em>Configure &gt; Clients &gt; Create</em></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Create a new client with these configurations:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash">Client ID: $GRAFANA_DOMAIN
Client Protocol: openid-connect
Root URL: https://$GRAFANA_DOMAIN</code></pre>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>Further make these configurations:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash">Access Type: confidentials // The OAuth client must use a client id and secret.
Root URL: ${authBaseUrl}
Valid Redirect URIs: https://$GRAFANA_DOMAIN/login/generic_oauth
Base URL: /login/generic_oauth</code></pre>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>Clear <strong>Admin URL</strong> and <strong>Web Origins</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Click save and open the <strong>Credentials</strong> tab. Copy the Secret into a separate note, we will need it in the second and third part of this tutorial.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Open the tab <strong>Roles</strong> and click <strong>Add Role</strong>. Create a new role with name <code>admin</code>. This role defines the access level for Grafana.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Head over to <strong>Scope</strong> tab and set <strong>Full Scope Allowed </strong>to <code>OFF</code>. We do not want to share any other details about the realm in the client token.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Then, we are going to configure a client mapper for the roles property. We must ensure that Grafana can extract the access role from the JWT token. Open the <strong>Mappers</strong> tab and click on <strong>Create</strong>. Create an entry with these options:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash">Name: Roles
Mapper Type: User Client Role
Client ID: $GRAFANA_DOMAIN
Token Claim Name: roles
Claim JSON type: string</code></pre>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>Finally, assign the client role to your Keycloak user: Go to<strong> </strong><em><strong>Users &gt; View All Users</strong></em> and click on the I<strong>D of your user</strong>. Click on the <strong>Role</strong> <strong>Mapping</strong> tab, then in the <strong>Client Roles</strong> selector, select <strong>$GRAFANA_DOMAIN</strong>. In the Available Roles section, select <code>admin</code> and click <strong>Add selected</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Configure Grafana for OAuth 2</h3>
<!-- /wp:heading -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash"># Configure appropriate env vars
clever env set GF_SERVER_DOMAIN $GRAFANA_DOMAIN
clever env set GF_SERVER_ROOT_URL "https://$GRAFANA_DOMAIN"
clever env set GF_AUTH_GENERIC_OAUTH_ENABLED true
clever env set GF_AUTH_GENERIC_OAUTH_NAME Keycloak
clever env set GF_AUTH_GENERIC_OAUTH_ALLOW_SIGN_UP true
clever env set GF_AUTH_GENERIC_OAUTH_CLIENT_ID $GRAFANA_DOMAIN

clever env set GF_AUTH_GENERIC_OAUTH_SCOPES profile
clever env set GF_AUTH_GENERIC_OAUTH_AUTH_URL "https://$KEYCLOAK_DOMAIN/realms/myrealm/protocol/openid-connect/auth"
clever env set GF_AUTH_GENERIC_OAUTH_TOKEN_URL "https://$KEYCLOAK_DOMAIN/realms/myrealm/protocol/openid-connect/token"
clever env set GF_AUTH_GENERIC_OAUTH_API_URL "https://$KEYCLOAK_DOMAIN/realms/myrealm/protocol/openid-connect/userinfo"
clever env set GF_AUTH_GENERIC_OAUTH_ROLE_ATTRIBUTE_PATH "contains(roles[*], 'admin') &amp;&amp; 'Admin' || contains(roles[*], 'editor') &amp;&amp; 'Editor' || 'Viewer'"</code></pre>
<!-- /wp:html -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Note:</strong> In this section, you need to define GF_AUTH_GENERIC_OAUTH_CLIENT_SECRET yourself, using the value in Keycloak UI, under Client &gt; $GRAFANA_URL &gt; Credentials</p></blockquote>
<!-- /wp:quote -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash">clever env set GF_AUTH_GENERIC_OAUTH_CLIENT_SECRET &lt;KEYCLOAK_CLIENT_SECRET&gt;</code></pre>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>You can now deploy Grafana:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash"># Deploy grafana
clever deploy

# Open grafana and try the Login with Keycloak button !
clever open</code></pre>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>Now hit login with Keycloak, and use the username and password you defined for the user you created Earlier in Keycloak.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Using the same procedure describe earlier to create the first user, you can now create more users and roles. Create the roles "editor" and/or "viewer" and assign them to your new users within Keycloak. Try to connect with those on Grafana and you will see the roles are propagated to Grafana.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Sources: </p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://janikvonrotz.ch/2020/08/27/grafana-oauth-with-keycloak-and-how-to-validate-a-jwt-token/">https://janikvonrotz.ch/2020/08/27/grafana-oauth-with-keycloak-and-how-to-validate-a-jwt-token/</a></li><li><a href="https://www.keycloak.org/getting-started/getting-started-zip">https://www.keycloak.org/getting-started/getting-started-zip</a></li></ul>
<!-- /wp:list -->]]></description>
										<content:encoded><![CDATA[<p><img width="1400" height="540" src="https://staging-cc-assetsv6.cellar-c2.services.clever-cloud.com/uploads/2022/04/banniere-keycloak.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="banniere_keycloak" decoding="async" srcset="https://staging-cc-assetsv6.cellar-c2.services.clever-cloud.com/uploads/2022/04/banniere-keycloak.png 1400w, https://staging-cc-assetsv6.cellar-c2.services.clever-cloud.com/uploads/2022/04/banniere-keycloak-300x116.png 300w, https://staging-cc-assetsv6.cellar-c2.services.clever-cloud.com/uploads/2022/04/banniere-keycloak-1024x395.png 1024w, https://staging-cc-assetsv6.cellar-c2.services.clever-cloud.com/uploads/2022/04/banniere-keycloak-768x296.png 768w, https://staging-cc-assetsv6.cellar-c2.services.clever-cloud.com/uploads/2022/04/banniere-keycloak-1368x528.png 1368w" sizes="(max-width: 1400px) 100vw, 1400px" /></p><!-- wp:paragraph -->
<p>Keycloak is a modern and efficient way to deal with identity and access management. It allows for single sign-on, user federation across multiple user directories. It is also compliant with standard authentication protocols like OpenID Connect, OAuth2 or SAML. All details are available on its <a href="https://www.keycloak.org/">website</a>. This blogpost will go through steps to deploy Keycloack and Grafana on Clever Cloud.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>How to deploy Keycloak</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Setup</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Keycloak is written in Java, and gives a JAR file in their release, which means we will use a <a href="https://stagingv6.cleverapps.io/doc/deploy/application/java/java-jar/">a JAVA runtime with a JAR deployment</a>. It also requires a <a href="https://www.postgresql.org/">PostgreSQL Database</a>, which means we will deploy a <a href="https://stagingv6.cleverapps.io/doc/deploy/addon/postgresql/postgresql/">PostgreSQL addon</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash"># Get lastest Keycloak release
wget https://github.com/keycloak/keycloak/releases/download/17.0.1/keycloak-17.0.1.zip

# Extract the archive
unzip keycloak-17.0.1.zip

# Go to the folder
cd keycloak-17.0.1

# Create the jar application
clever create --type jar keycloak-server
export KEYCLOAK_DOMAIN=$(clever domain | xargs)

# Create the PG addon
clever addon create postgresql-addon --plan s_sml --addon-version 10 keycloak-postgres

# Link the addon
clever service link-addon keycloak-postgres</code></pre>
<!-- /wp:html -->

<!-- wp:heading {"level":3} -->
<h3>Configure</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>For now we will configure Keycloak through environment variables. Note that you can also do configure Keycloak through its CLI or through a file, as stated in its <a href="https://www.keycloak.org/server/configuration">documentation</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Note:</strong> For the configuration through environment variables; the pattern to use is <code>KC_</code> and the uppercase name of any configuration key, separated by underscores.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash"># Export env for templating purpose
export $(clever env | sed '/^#/d;s/\"//g')

clever env set CC_JAR_PATH lib/quarkus-run.jar
clever env set CC_JAVA_VERSION 11
clever env set CC_RUN_COMMAND "bin/kc.sh start --auto-build"

clever env set KC_DB postgres
clever env set KC_DB_USERNAME $POSTGRESQL_ADDON_USER
clever env set KC_DB_PASSWORD $POSTGRESQL_ADDON_PASSWORD
clever env set KC_DB_URL "jdbc:postgresql://$POSTGRESQL_ADDON_HOST:$POSTGRESQL_ADDON_PORT/$POSTGRESQL_ADDON_DB"
clever env set KC_HOSTNAME $KEYCLOAK_DOMAIN
clever env set KC_HTTP_ENABLED true
clever env set KC_PROXY passthrough
clever env set KC_PROXY_ADDRESS_FORWARDING true
</code></pre>
<!-- /wp:html -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Note: </strong>Consider setting KC_DB_POOL_MAX_SIZE at a lower value (default is 100) regarding the database size you ordered earlier. You can find the connection limit <a href="https://stagingv6.cleverapps.io/pricing/#databases">here</a>. If you used the S_SML size that is in the command earlier, you can ignore this message. You can also fine tune the database connection pool using KC_DB_POOL_INITIAL_SIZE and KC_DB_POOL_MIN_SIZE</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>Now, you need to define KEYCLOAK_ADMIN and KEYCLOAK_ADMIN_PASSWORD :</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash">clever env set KEYCLOAK_ADMIN &lt;choose an admin username&gt;
clever env set KEYCLOAK_ADMIN_PASSWORD &lt;choose an admin password&gt;</code></pre>
<!-- /wp:html -->

<!-- wp:heading {"level":3} -->
<h3>Deploy</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Deploy Keycloak on Clever Cloud:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash"># Init a git repository
git init

# Add your files
git add .

# Create the first commit
git commit -m "clever init"

# Deploy the application
clever deploy

# Open Keycloak in your browser
clever open</code></pre>
<!-- /wp:html -->

<!-- wp:heading {"level":3} -->
<h3>Validate the configuration</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can follow the Keycloak documentation starting <a href="https://www.keycloak.org/getting-started/getting-started-zip#_create_a_realm">here</a> to ensure Keycloak works as expected. It will take you through a realm (tenant) creation, user creation and client creation/test.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Create an Initial Keycloak configuration</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In the keycloak UI, ensure you create a Realm called "myrealm" (hover "Master" on the top left corner). Ensure the realm "<code>myrealm</code>" is selected.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> Then, go to <em><strong>Users &gt; Add a User</strong></em>. Fill the Username, Email, First Name and Last Name fields, then hit <strong>save</strong>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the credentials tab of the user, add the password of your choice and <strong>deselect  "Temporary", the set password.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You're all set.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>A real world scenario</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":6184,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://cdn.clever-cloud.com/uploads/2022/04/giphy-1-1.webp" alt="" class="wp-image-6184"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Let's see how we can use Keycloak in the real world: as an SSO Proxy for Grafana, using Oauth 2.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Setup Grafana on Clever Cloud</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you need a in-depth guide on how to use or deploy Grafana please read this <a href="https://stagingv6.cleverapps.io/blog/features/2021/10/28/a-grafana-to-plot-applications-metrics/">article</a>, the following is a helper to illustrate the usages of Keycloak.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's use the <a href="https://github.com/CleverCloud/grafana-example">grafana-example</a> on Clever Cloud's Github repository.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash"># Clone the repository
git clone https://github.com/CleverCloud/grafana-example.git

# Enter the directory
cd grafana-example

# Create a NodeJS Application
clever create --type node grafana
export GRAFANA_DOMAIN=$(clever domain | xargs)

# Configure Grafana
clever env set GRAFANA_VERSION 8.5.2
clever env set GRAFANA_PLUGINS "grafana-worldmap-panel"
clever env set GF_PLUGIN_DIR ./data/plugins

clever env set GF_SERVER_HTTP_PORT 8080
clever env set GF_SERVER_ROOT_URL "https://$GRAFANA_DOMAIN"</code></pre>
<!-- /wp:html -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Note: </strong>In this section you need to set the GRAFANA_SHA_256 variable yourself. You can find the SHA256SUM required <a href="https://grafana.com/grafana/download/8.5.2?pg=get&amp;plcmt=selfmanaged-box1-cta1&amp;edition=oss">here</a>, next to "Standalone Linux Binaries"</p></blockquote>
<!-- /wp:quote -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash">clever env set GRAFANA_SHA_256 &lt;SHA256SUM&gt;</code></pre>
<!-- /wp:html -->

<!-- wp:heading {"level":3} -->
<h3>Configure Keycloak for OAuth 2</h3>
<!-- /wp:heading -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Note: </strong> In this section, you need to replace <code><code>$GRAFANA_DOMAIN</code></code> with the value you exported in the last section. You can find this value by running the following command: <code><code>clever domain</code></code></p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>In the Keyloak UI, Go to <strong><em>Configure &gt; Clients &gt; Create</em></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Create a new client with these configurations:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash">Client ID: $GRAFANA_DOMAIN
Client Protocol: openid-connect
Root URL: https://$GRAFANA_DOMAIN</code></pre>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>Further make these configurations:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash">Access Type: confidentials // The OAuth client must use a client id and secret.
Root URL: ${authBaseUrl}
Valid Redirect URIs: https://$GRAFANA_DOMAIN/login/generic_oauth
Base URL: /login/generic_oauth</code></pre>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>Clear <strong>Admin URL</strong> and <strong>Web Origins</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Click save and open the <strong>Credentials</strong> tab. Copy the Secret into a separate note, we will need it in the second and third part of this tutorial.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Open the tab <strong>Roles</strong> and click <strong>Add Role</strong>. Create a new role with name <code>admin</code>. This role defines the access level for Grafana.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Head over to <strong>Scope</strong> tab and set <strong>Full Scope Allowed </strong>to <code>OFF</code>. We do not want to share any other details about the realm in the client token.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Then, we are going to configure a client mapper for the roles property. We must ensure that Grafana can extract the access role from the JWT token. Open the <strong>Mappers</strong> tab and click on <strong>Create</strong>. Create an entry with these options:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash">Name: Roles
Mapper Type: User Client Role
Client ID: $GRAFANA_DOMAIN
Token Claim Name: roles
Claim JSON type: string</code></pre>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>Finally, assign the client role to your Keycloak user: Go to<strong> </strong><em><strong>Users &gt; View All Users</strong></em> and click on the I<strong>D of your user</strong>. Click on the <strong>Role</strong> <strong>Mapping</strong> tab, then in the <strong>Client Roles</strong> selector, select <strong>$GRAFANA_DOMAIN</strong>. In the Available Roles section, select <code>admin</code> and click <strong>Add selected</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Configure Grafana for OAuth 2</h3>
<!-- /wp:heading -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash"># Configure appropriate env vars
clever env set GF_SERVER_DOMAIN $GRAFANA_DOMAIN
clever env set GF_SERVER_ROOT_URL "https://$GRAFANA_DOMAIN"
clever env set GF_AUTH_GENERIC_OAUTH_ENABLED true
clever env set GF_AUTH_GENERIC_OAUTH_NAME Keycloak
clever env set GF_AUTH_GENERIC_OAUTH_ALLOW_SIGN_UP true
clever env set GF_AUTH_GENERIC_OAUTH_CLIENT_ID $GRAFANA_DOMAIN

clever env set GF_AUTH_GENERIC_OAUTH_SCOPES profile
clever env set GF_AUTH_GENERIC_OAUTH_AUTH_URL "https://$KEYCLOAK_DOMAIN/realms/myrealm/protocol/openid-connect/auth"
clever env set GF_AUTH_GENERIC_OAUTH_TOKEN_URL "https://$KEYCLOAK_DOMAIN/realms/myrealm/protocol/openid-connect/token"
clever env set GF_AUTH_GENERIC_OAUTH_API_URL "https://$KEYCLOAK_DOMAIN/realms/myrealm/protocol/openid-connect/userinfo"
clever env set GF_AUTH_GENERIC_OAUTH_ROLE_ATTRIBUTE_PATH "contains(roles[*], 'admin') &amp;&amp; 'Admin' || contains(roles[*], 'editor') &amp;&amp; 'Editor' || 'Viewer'"</code></pre>
<!-- /wp:html -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Note:</strong> In this section, you need to define GF_AUTH_GENERIC_OAUTH_CLIENT_SECRET yourself, using the value in Keycloak UI, under Client &gt; $GRAFANA_URL &gt; Credentials</p></blockquote>
<!-- /wp:quote -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash">clever env set GF_AUTH_GENERIC_OAUTH_CLIENT_SECRET &lt;KEYCLOAK_CLIENT_SECRET&gt;</code></pre>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>You can now deploy Grafana:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<pre class="wp-block-code"><code class="lang-bash"># Deploy grafana
clever deploy

# Open grafana and try the Login with Keycloak button !
clever open</code></pre>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>Now hit login with Keycloak, and use the username and password you defined for the user you created Earlier in Keycloak.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Using the same procedure describe earlier to create the first user, you can now create more users and roles. Create the roles "editor" and/or "viewer" and assign them to your new users within Keycloak. Try to connect with those on Grafana and you will see the roles are propagated to Grafana.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Sources: </p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://janikvonrotz.ch/2020/08/27/grafana-oauth-with-keycloak-and-how-to-validate-a-jwt-token/">https://janikvonrotz.ch/2020/08/27/grafana-oauth-with-keycloak-and-how-to-validate-a-jwt-token/</a></li><li><a href="https://www.keycloak.org/getting-started/getting-started-zip">https://www.keycloak.org/getting-started/getting-started-zip</a></li></ul>
<!-- /wp:list -->]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
