Giter Club home page Giter Club logo

phasetwo-admin-portal's Introduction

๐Ÿš€ Try it for free in Phase Two's Keycloak as a service.

Phase Two Admin Portal

More self-serve. More better.

The Phase Two Admin Portal ties together functionality from the Keycloak Account Console and Phase Two Organizations to allow your customers' users to self-manage as much of their account and organization functionality as is possible.

The Portal is deployed as a Keycloak extension, much like the Account Console, and is available at https://{host}/{relative-path}/realms/{realm}/portal/. Note that we are considering making this a drop-in replacement for the Account Console that can be selected simply in Realm Settings->Themes, but this would make it impossible to use both at the same time.

ezgif-4-811bfaae78

Quick start

The easiest way to get started is our Docker image. Documentation and examples for using it are in the phasetwo-containers repo. The most recent version of this extension is included.

docker run --name phasetwo_test --rm -p 8080:8080 \
    -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin -e KC_HTTP_RELATIVE_PATH=/auth \
    quay.io/phasetwo/phasetwo-keycloak:$VERSION \
    start-dev --spi-email-template-provider=freemarker-plus-mustache --spi-email-template-freemarker-plus-mustache-enabled=true

Configuration

Requirements

Because this extension relies on the APIs provided by the keycloak-orgs extension, it is required to deploy them in the same Keycloak.

Visibility

Most of the visibilty of functionality in the Portal is controlled by user permissions. However, it is also possible to control visibility through Realm Attributes. These attributes may be set manually, or by using the Phase Two extensions to the Keycloak Admin UI (Styles->Portal tab), which must also be installed in the same Keycloak.

image

When setting the attributes manually, the values are:

Key Description Default
_providerConfig.portal.profile.enabled Profile section (whole) true
_providerConfig.portal.profile.password.enabled Password update true
_providerConfig.portal.profile.twofactor.enabled 2fa create/update true
_providerConfig.portal.profile.activity.enabled Device activity true
_providerConfig.portal.profile.linked.enabled Linked accounts true
_providerConfig.portal.org.enabled Organizations section (whole) true
_providerConfig.portal.org.details.enabled Details edit true
_providerConfig.portal.org.members.enabled Members list true
_providerConfig.portal.org.invitations.enabled Invitations true
_providerConfig.portal.org.domains.enabled Domains true
_providerConfig.portal.org.sso.enabled SSO (requires idp-wizard extension) true
_providerConfig.portal.org.events.enabled Events true

Style

It is also possible to add branding to the portal. It is recommended these, along with logos, are set through the Phase Two extensions to the Keycloak Admin UI, as there are other options there that are reused in Login forms styling, and the UI extensions also ensure that the attributes are set with appropriate values.

The keys specific to the Portal are:

Key Description Default
_providerConfig.assets.portal.primaryColor Primary color [empty]
_providerConfig.assets.portal.secondaryColor Accent color [empty]
_providerConfig.assets.portal.backgroundColor Background color [empty]
_providerConfig.assets.portal.css CSS override [empty]

Developers

Getting Started

First, setup:

yarn

Then, start a Keycloak, create a public OIDC client with http://localhost:3000 Root URL, and update the public/keycloak.json file with the client config.

Finally, run the development server:

yarn start

Open http://localhost:3000 with your browser to see the result.

Build the extension

mvn clean package

Put the jar in target/admin-portal-{version}.jar in the providers/ directory of your Keycloak distribution.


All documentation, source code and other files in this repository are Copyright 2023 Phase Two, Inc.

phasetwo-admin-portal's People

Contributors

paulwer avatar pnzrr avatar tjerabek avatar xgp 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.