Gatekeeper Stack

Lock and Key For Your Site

Concept

The Gatekeeper stack provides the core of this suite of stacks:

End-user interface
Security parameters
Layout settings
Sync page (Preview Mode)

While Gatekeeper cannot be displayed in RapidWeaver Preview, the stack uses the preview mode to display the sync page, where you can scan the QR-Code.

Documentation

Gatekeeper - Preview

Preview in Gatekeeper fulfils a different goal than in other stacks:

It can display the Sync Page where the relevant information is shown which you need to synchronise your Smart Phone or Yubikey with the app
It can display a Secret Key Generator which calculates a random Base32 Secret for you to use in this configuration
You can override the Stacks fields for Secret, Issuer and Account Name. Instead you have to provide a file containing a valid Secret yourself.

You can activate or de-activate this feature in order to properly display the Preview of the other stacks on your page.

Generate Secret Key

^{Created locally on your computer!}

Synchronization

The synchronisation is dependent on the application and/or device you are using, e.g. Google Authenticator, Authy or FreeOTP.
This stack has also been successfully tested with Yubikey Series 5.

Gatekeeper - OTP

Secret - enter the Secret Key for your site. Make sure to change the initial value and replace it with a BASE32 string (capital letters A-Z, numbers 2-7, length 16 characters.
Issuer - enter any text you like; the industry standard is to use the Domain name. Avoid any blanks and special characters.
Account Name - enter any text you like; the industry standard is to use an e-mail address. Avoid any blanks and special characters.

If the File option has been selected, you have to provide a file containing a valid Secret. We recommend to download the example from below and to edit the Secret.

Make sure to change the initial value and replace it with a BASE32 string (capital letters A-Z, numbers 2-7, length 16 characters.

Afterwards you have to post it into the Resources of your Gatekeeper project.
After publishing, the contents of this file can be edited on the target site.
However, this flexibility comes at the price of the comfortable synchronisation inside RapidWeaver/Stacks.

Download File

Generate Secret Key

^{Created locally on your computer!}

Gatekeeper ID - in conjunction with the included Stack-Keeper stack, this allows you to secure multiple pages with a single login page. Enter any text and without blanks and special characters.
Enter the same text in Stack-Keeper to connect both.

Expire Units - select from Days, Hours, Minutes
Expires - set the expiry
Together, this information indicates how long the session is valid until it expires.

Redirect on Login
Return - select this option if you want to return to the page which called the Login-Page after a successful login.
Link - set this URL if you want to redirect to a different page after a successful login.
For both options, the target should/could be an implementation of the Stack-Keeper stack.

Redirect on Logout - set this URL if you want to redirect to a different page after logging out (e.g. back to the log-in page).

Cookies Msg. - Gatekeeper uses cookies to store valid log-ins. This means if the visitor has disabled cookies, Gatekeeper cannot work. This is the warning message which is displayed int this case.
[The cookies used by Gatekeeper do not track user data and are regarded as "essential" and therefore GDPR compliant.]

Gatekeeper - Page

Page Title - enter the Page Title for the Gatekeeper login page (after logging in this will be replaced by the settings given in RapidWeaver).
Margin - sets the margin for the page content. Can be expanded to more detailed settings.
Margin Units - select the margin units from the drop-down.
Backgr. Type - select the background type from the drop-down.Available are: Solid, Linear and Radial Gradient.
Color/Gradient: select the colors for the background.

Gatekeeper - Image Backdrop

If you want your Log-In page to feature an image backdrop instead of a color/gradient, you can set this here.

For warehoused images, you can select the Warehoused Image option and provide a link to the image via the standard Link Dialog.
Additionally, you can add an Alternative Text.

In non Warehouse-Mode you can either browse to the particular picture or drag and drop it onto the image-well.

Image Tiling - select a tiling option. I you want your image to cover the entire width of the Hero stack, select None
Image Size - select one of the image sizing options
Poition - if your image does not completely cover the Hero stack, select one of the Position options to place your image
Lock Background - not available

Gatekeeper - Header/Footer

The explanations in this section are valid for the Header- and the Footer-section accordingly.

Header Image - if selected, opens the drop-zone for the header image.
Header Text - if selected, opens the drop-zone for the header text.
Alignment - sets the alignment for the header elements.
Color - sets the color options (Text and Links) for the header text.
Font Style - select a font style from the drop-down. Available are: Normal, Italic.
Font Weight - select a font style from the drop-down. Available are: Normal, Bold, Lighter, Bolder.

Gatekeeper - Input

The settings in this section format the input area for the One-Time-Password.

Header Image - sets the size of the input field.
Alignment - sets the alignment of the input field (Left, Center, Right).
Input Color - sets the text color of the input field.
Focus Color - sets the focus color (when the cursor is inside the field) of the input field.
Input Line Color - sets the color of the placeholder lines.

Gatekeeper Stacks

Made with Platform