Customize user login\

Klouldfuse uses oauth2-proxy to provide authentication for users.

Additionally, you can customize the user Login to comply with corporate standards, and to taylor it to the needs of your organization.

Create a Login Template
Create a Config Map
Update custom-values.yaml file

You can create a custom HTML login page for your website. The oauth2 protocol uses Go templates to generate the approprite interfaces.

You must define and implement the following templates: * A sign in template * An error template

Refer to the default Oath2-proxy sign-in template to get started.

Template

Encapsulate the template in {{ define "sign_in.html }}":

{{ define "sign_in.html" }}
<! -- The test of your template here -->
{{ end }}

html

Local login

By default, Kloudfuse uses local login.

To disable it, see Disable local login.

To leave it available for emergencies, such as sutuations when your SSO provider is unavailable, we recommend that you leave it enabled.

Specify these fields to support a local login in the template:

username - User’s name
password - User’s password

rd - Redirect URL; get this from the Oauth configuration using the {{ .Redirect }} variable.

The {{ .CustomLogin }} variable is a boolean value that evaluates whether htpasswdFile has been enabled. The following example demonstrates a local login with an enabled htpasswdFile.

{{ if .CustomLogin }}
<form method="POST" autocomplete="off" action="{{.ProxyPrefix}}/sign_in" class="block">
  <input type="hidden" name="rd" value="{{.Redirect}}">
  <label>Username</label><input name="username">
  <label>Password</label><input name="password">
  <button type="submit">Login</button>
</form>
{{ end }}

html

Authentication errors

If the login attempt fails, it sets the {{ .StatusCode }} variable. The values depend on the type of error:

{{ .StatusCode }} 400: Username was empty.

{{ .StatusCode }} 401: Invalid login. The Username/password combination could not be validated.

For example,

{{ if eq .StatusCode 400 401 }}
<div class="alert">
  {{ if eq .StatusCode 400 }}
  {{.StatusCode}}: Username cannot be empty
  {{ else }}
  {{.StatusCode}}: Invalid Username or Password
  {{ end }}
</div>
{{ end }}

html

External provider

Kloudfuse works with an external authentication provider, such as Okta, Google, and so on.

Authentication with an external provider redirects to another page or site for authentication. It then redirects the user back to Kloudfuse, along with the user credentials. To support this, include the following code:

<form method="POST" autocomplete="off" action="{{.ProxyPrefix}}/sign_in" class="block">
    <button type="submit">Login</button>
</form>

html

Error template

This template is more basic; you can find the default error template here.

For Reference,

Create a Configmap

You need to create a configmap that will be used to load your file. To create the configmap run this command,

kubectl create configmap custom-kfuse-signin-templates --from-file=sign_in.html=./path/to/my/custom_login.html --from-file=error.html=./path/to/my/custom_error.html

bash

Update custom-values.yaml file

You will need to update these values to ensure that the custom templates will be used instead of the default ones.

kfuse-auth:
  oauth2-proxy:
    extraVolumes:
      - name: custom-templates
        configMap:
          name: custom-kfuse-signin-templates

yaml

CORS, External Files

If you need to refer to files that are not locally available, they may be blocked by a CORS policy. To address this you add the website(s) to the Content-Security-policy under ingress-nginx… (ex: https://fonts.googleapis.com/)

ingress-nginx:
  controller:
    addHeaders:
      Content-Security-Policy: "$YOUR_EXTERNAL_WEBSITES default-src 'self' https://*.jsdelivr.net/ https://fonts.googleapis.com/ https://apis.google.com/js/ https://fonts.gstatic.com/ https://*.configcat.com/ https://*.ingest.sentry.io/ https://ui.observe.kloudfuse.io/ https://observe.kloudfuse.io/ https://raw.githubusercontent.com/kloudfuse/ http://www.w3.org/ 'unsafe-inline' 'unsafe-eval'; worker-src 'self' blob:;"

yaml