Giter Club home page Giter Club logo

alfresco-keycloak-theme's Introduction

Alfresco Keycloak Theme

Build Status

Overview

The Alfresco Identity Service uses Keycloak. Out of the box, the UI provided by Keycloak is quite different from the rest of Alfresco. But Keycloak allows a customer to provide alternative themes to replace the default Keycloak themes. We use this mechanism to provide an Alfresco theme.

Design

The following themes can be replaced.

  • login
  • account
  • email
  • admin

This projects contains a theme that can be used to replace the login theme to provide an experience that is consistent with Alfresco.

Several approaches are possible.

  1. Extend the existing themes. With this approach, a copy of the default theme is made and selective edits are made to the theme. For example, different style sheets can be used but otherwise the layout provide by Keycloak could stay the same.
  2. Use ADF. With this approach, the ADF component is used directly, effectively making Keycloak an ADF app.
  3. Custom login page. With this approach, a page is provided that uses the same approved Alfresco styles.

This project currently uses the approach of a custom login page (option #3).

Implementation

Since Keycloak supports Freemarker, a template file is provided along with css styles and images like those documented to look like the approved designs

The project also includes improvements to the translated messages for the languages supported by Alfresco.

Deployment of the Theme Files

Deployment with the Alfresco Identity Service

If you deploy the Alfresco Identity Service as described here, the Alfresco Keycloak Theme is deployed automatically.

Deployment to a standalone Keycloak server

  1. After installing Keycloak, navigate to the themes directory as in e.g.
 ~/development/keycloak-10.0.2/themes
  1. Create a directory named Alfresco.
  2. Copy the login directory from this project to a login directory in the Alfresco theme directory you just created
  3. Start Keycloak

Deployment to a Keycloak server running in a Kubernetes cluster

  1. Find the name of the pod in which the cluster is running
kubectl get pods

... erstwhile-rabbit-key-0  1/1  Running  1  20h

  1. Git clone this repository
  2. Use the kubectl command to copy the login directory from the cloned project to the pod running Keycloak. In the example below,the name of the Kubernetes namespace is default and the name of the pod is erstwhile-rabbit-key-0
# create alfresco theme directory
kubectl exec erstwhile-rabbit-key-0 --namespace default -- mkdir /opt/jboss/keycloak/themes/alfresco
# copy theme files to the pod
kubectl cp ~/IdeaProjects/alfresco-keycloak-theme/theme/login default/erstwhile-rabbit-key-0:/opt/jboss/keycloak/themes/alfresco

Using the Theme

NOTE: These instructions assume you are using a Keycloak realm named Alfresco such as is created by the Alfresco DBP Deployment. But you can also apply the theme to the default realm or some other realm.

  1. Navigate to the admin console for the realm as in e.g.
http://localhost-k8s/auth/admin/master/console/#/realms/alfresco
  1. Choose the Alfresco theme as illustrated. Click Save.
  2. Login to a page in the Alfresco realm that requires authentication (e.g. http://localhost-k8s/auth/realms/alfresco/account) and you should see a form like this.

NOTE: If you are using the Alfresco DBP Deployment to access a resource that is configured to use Keycloak for authentication, such as the Process Workspace, you will also see this login page automatically.

Using the Theme with SAML Identity Providers

The Identity Service also supports the use of SAML Identity Providers. If you use the Keycloak Admin Console to configure one or more such providers you will see a button for each of the providers, as illustrated here. Clicking on one of the buttons will redirect the browser to the authentication page configured for that provider.

More Information

If you want to learn more about how to customize Keycloak themes, go here.

alfresco-keycloak-theme's People

Contributors

jamalkm avatar gbroadbent avatar eromano avatar mauriziovitale avatar baptistemahe avatar flv22 avatar kconkas avatar rpopa avatar anxumalo avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.