<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Shailesh Mangal</title>
    <description>The latest articles on DEV Community by Shailesh Mangal (@zombee).</description>
    <link>https://dev.to/zombee</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1036605%2F35e8772c-44c0-4825-9e2e-f97548194d9c.png</url>
      <title>DEV Community: Shailesh Mangal</title>
      <link>https://dev.to/zombee</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/zombee"/>
    <language>en</language>
    <item>
      <title>Panel SSO with Keycloak</title>
      <dc:creator>Shailesh Mangal</dc:creator>
      <pubDate>Wed, 01 Mar 2023 20:40:18 +0000</pubDate>
      <link>https://dev.to/zombee/panel-sso-with-keycloak-1ld1</link>
      <guid>https://dev.to/zombee/panel-sso-with-keycloak-1ld1</guid>
      <description>&lt;p&gt;Over last few years, &lt;a href="https://panel.holoviz.org/index.html" rel="noopener noreferrer"&gt;Panel&lt;/a&gt; has gained lots of popularity thro’ its unlimited list of features to fetch, analyze, present any and all types of data and bring familiar python tools. And all this, without having to write a single line of UI code (You can, if you really want to). There is a lot that has been written about Panel features and its capabilities. This post is primarily around connecting and authenticating panel with oAuth.&lt;/p&gt;

&lt;p&gt;Panel has a built in &lt;a href="https://panel.holoviz.org/index.html" rel="noopener noreferrer"&gt;authentication&lt;/a&gt; and authorization framework. Out of the box, Panel supports&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1. azure&lt;/li&gt;
&lt;li&gt;2. bitbucket&lt;/li&gt;
&lt;li&gt;3. github&lt;/li&gt;
&lt;li&gt;4. gitlab&lt;/li&gt;
&lt;li&gt;5. google&lt;/li&gt;
&lt;li&gt;6. okta
In addition to this, Panel can also connect to any generic oAuth provider. One that I definitely wanted to work with is &lt;a href="http://www.keycloak.org/" rel="noopener noreferrer"&gt;Keycloak&lt;/a&gt; which is missing from this list. This is not well documented, however its really easy to do. This can be done in one of the two ways.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Environment Variable&lt;/strong&gt;&lt;br&gt;
You can setup following env variable with appropriate values. This will be covered in detail in Keycloak example.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export PANEL_OAUTH_KEY
export PANEL_OAUTH_SECRET
export PANEL_OAUTH_AUTHORIZE_URL
export PANEL_OAUTH_TOKEN_URL
export PANEL_OAUTH_USER_URL
export PANEL_COOKIE_SECRET
export PANEL_OAUTH_REDIRECT_URL
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Command Line Parameter&lt;/strong&gt;&lt;br&gt;
You can pass following parameters with appropriate values thro’ command line to panel runtime.&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;panel serve MyAnalysis.py --oauth-provider=generic \&lt;br&gt;
--oauth-key=ClientID --oauth-secret=SECRET --cookie-secret=panel \&lt;br&gt;
--oauth-redirect-uri="multiple_pages" --oauth-extra-params="{'TOKEN_URL':'', 'AUTHORIZE_URL':'', 'USER_URL':''}"&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  Setting Keycloak for oAuth SSO
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Setup client :
&lt;/h4&gt;

&lt;h5&gt;
  
  
  Create a Realm
&lt;/h5&gt;

&lt;p&gt;Create client inside that realm. Make sure you choose Access Type as Confidential&lt;br&gt;
Fill out other URL appropriately&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmgv5p7s9k2o51pc4xi0r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmgv5p7s9k2o51pc4xi0r.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Access Type should be confidential&lt;br&gt;
Get oAuth URLs&lt;/p&gt;

&lt;p&gt;Get client Secret and copy to &lt;code&gt;PANEL_OAUTH_SECRET&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frc21r9phqxvk0ru270bw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frc21r9phqxvk0ru270bw.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Go to Realm Setting → General → Endpoints&lt;br&gt;
Click on &lt;code&gt;OpenID Endpoint Configuration&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwhsovq2yzrdgxzznkp2z.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwhsovq2yzrdgxzznkp2z.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Note down following URLs&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"authorization_endpoint": "http://localhost:8080/realms/myrealm/protocol/openid-connect/auth",
"token_endpoint": "http://localhost:8080/realms/myrealm/protocol/openid-connect/token",
"introspection_endpoint": "http://localhost:8080/realms/myrealm/protocol/openid-connect/token/introspect",
"userinfo_endpoint": "http://localhost:8080/realms/myrealm/protocol/openid-connect/userinfo",
"end_session_endpoint": "http://localhost:8080/realms/myrealm/protocol/openid-connect/logout",
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Export these as Env Variables&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;export PANEL_OAUTH_KEY=panel-sso
export PANEL_OAUTH_SECRET="Pm8Bcs6QgygjaiyxRxSTfPpIzUkW40lM"
export PANEL_OAUTH_AUTHORIZE_URL="http://localhost:8080/realms/myrealm/protocol/openid-connect/auth"
export PANEL_OAUTH_TOKEN_URL="http://localhost:8080/realms/myrealm/protocol/openid-connect/token"
export PANEL_OAUTH_USER_URL="http://localhost:8080/realms/myrealm/protocol/openid-connect/userinfo"
export PANEL_COOKIE_SECRET="bZJc2sWbQLKos6GkHn/VB9oXwQt8S0R0kRvJ5/xJ89E="
export PANEL_OAUTH_REDIRECT_URL="http://localhost:5006"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Run panel with generic SSO
&lt;/h4&gt;

&lt;p&gt;&lt;code&gt;panel serve my_pages.py --oauth-provider=generic&lt;/code&gt;&lt;br&gt;
You should be able to see keycloak login&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8eyb49x2wve3n00z8jo7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8eyb49x2wve3n00z8jo7.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Panel is an amazing tool. Being able to connect with any generic oAuth provider is simple and should make it securely accessible.&lt;/p&gt;

</description>
      <category>keycloak</category>
      <category>sso</category>
      <category>oauth</category>
      <category>jupyter</category>
    </item>
  </channel>
</rss>
