You are here: Start » Web HMI » Authorization in WebHMI

Authorization in WebHMI

  1. Introduction
  2. Key Concepts
    1. Authorize Property on Windows
    2. Login Endpoint
    3. Authorization Providers
  3. Setting Up Authorization - Step by Step
    1. Step 1: Use the Login Template
    2. Step 2: Create Protected Windows
    3. Step 3: Configure OAuth Providers
  4. Authorization Flow
  5. User Information in Windows
  6. Security Guidelines
  7. Summary

Introduction

Aurora Vision WebHMI provides authorization to protect sensitive windows. The system supports two authentication methods: Local Authentication (username/password managed by the application) and OAuth 2.0 (delegated to Google, Microsoft, etc.).

Key Concepts

Authorize Property on Windows

The Authorize property on a Window control determines whether authentication is required. When set to true, unauthenticated users are redirected to the login endpoint. Windows with Authorize="false" remain public.

Login Endpoint

The Login Endpoint is a public window where users authenticate. It displays the login form or OAuth buttons and handles redirection to protected content after successful authentication.

Authorization Providers

Two provider types are available: Local Provider (validates credentials internally) and OAuth Provider (delegates to Google, Microsoft, etc.).

Setting Up Authorization - Step by Step

Step 1: Use the Login Template

When adding a new WebHMI to the project, select the Login template from Edit » Add Web HMI...

The template automatically creates:

  • A login window with pre-configured controls for Local Authentication (username/password input)
  • Error message display for failed authentication attempts
  • OAuth buttons for multiple providers (Google, Microsoft, GitHub, etc.)
  • Pre-configured LocalAuthProvider and OAuthProvider components in the application

The login window is set to Endpoint="login" and does not have Authorize="true", making it publicly accessible for all users.

Step 2: Create Protected Windows

Create additional windows for your application's protected content and set their Authorize property to true. When users try to access these windows without authentication, they are automatically redirected to the login endpoint.

Step 3: Configure OAuth Providers

If the Login template was used in Step 1, the authorization structure is already pre-configured in the application:

  • LocalAuthProvider is ready for local username/password authentication
  • OAuthProvider elements are pre-configured for common providers (Google, Microsoft, GitHub)
  • LoginEndpoint is set to login

To enable OAuth authentication, configure each provider with the required credentials:

  • ClientId - Obtain from your OAuth provider's developer console
  • ClientSecret - Obtain from your OAuth provider's developer console
  • RedirectUri - Set to your application's callback URL (e.g., http://localhost:9090/auth/callback)

Authorization Flow

  1. User visits a protected window
  2. System checks for valid authentication token
  3. If unauthenticated, user is redirected to the login endpoint
  4. User authenticates via Local or OAuth
  5. Token is issued and user is redirected to original destination
  6. Protected content is displayed

When the token expires or the user logs out, re-authentication is required to access protected windows.

User Information in Windows

After authentication, the Authorization system tracks:

  • CurrentUserName - Display name of the authenticated user
  • LogoutUrl - URL for signing out

Bind these to controls in the designer. Example: 

<TextBlock Text="{Binding #authorization.CurrentUserName, StringFormat='Welcome, {0}!'}" />

Security Guidelines

  • HTTPS only in production - All communication must be encrypted; see Securing WebHMI with SSL for setup instructions
  • Provide logout buttons - Allow users to sign out and clear session tokens
  • Token expiration - Tokens expire after a configured time period; re-authentication is then required
  • Selective protection - Use Authorize="true" only on windows that require authentication
  • Secure WebSockets - Use WSS (WebSocket Secure) instead of unencrypted WS

Summary

Authorization in WebHMI requires four steps:

  1. Create a public login window at the configured endpoint
  2. Set Authorize="true" on protected windows
  3. Configure Authorization settings in the App control (Local or OAuth provider)
  4. Optionally bind CurrentUserName or LogoutUrl to controls
Previous: Handling WebHMI Events Next: Securing WebHMI with SSL