Aanmelden met eenvoudig of gekoppeld toegangsbeheer

// Capture any widget that is present or will be present on the webpage.
vl.widget.client.capture(function (widget) {
  // Only process the widget if widget is a global header.
  if (widget.getPluginTypeId() === 'global_header') {
    // Get the Citizen Profile Session extension from the global header widget.
    widget.getExtension('citizen_profile.session').then(function (session) {
      
      /**
       * Event handler which extends a Citizen Profile session.
       */
      function activityEventHandler() {
        // Inform the Citizen Profile Session extension about activity.
        session.extend();
      }

      // Build a list of event names which should be used for activity tracking.
      var eventNames = [
        'mousedown', 
        'mousemove', 
        'mousewheel', 
        'DOMMouseScroll', 
        'scroll', 
         'wheel', 
         'keydown', 
         'keypress', 
         'touchmove', 
         'touchstart'
      ];
      // Iterate through the events names.
      for (var i = 0; i < eventNames.length; i++) {
        // Register our event handler given event name.
        window.addEventListener(eventNames[i], activityEventHandler);
      }
    });
  }
});

// Capture any widget that is present or will be present on the webpage.
vl.widget.client.capture(function (widget) {
  // Only process the widget if widget is a global header.
  if (widget.getPluginTypeId() === 'global_header') {
    // Get the Citizen Profile Session extension from the global header widget.
    widget.getExtension('citizen_profile.session').then(function (session) {
      // This variable is purely to indicate which values are allowed (true / false).
      var websiteHasAuthenticatedSession = false;
      // Inform the session extension about the current session state of the website.
      session.configure({
        active: websiteHasAuthenticatedSession,
        endpoints: {
          loginUrl: '/login',
          loginRedirectUrl: '/profile',
          logoutUrl: '/logout'
        }
      });
    });
  }
});

// Capture any widget that is present or will be present on the webpage.
vl.widget.client.capture(function (widget) {
  // Only process the widget if widget is a global header.
 if (widget.getPluginTypeId() === 'global_header') {
    // Get the Citizen Profile Session extension from the global header widget.
    widget.getExtension('citizen_profile.session').then(function (session) {
      // This variable is purely to indicate which values are allowed (true / false).
      var websiteHasAuthenticatedSession = false;
      // Inform the session extension about the current session state of the website. Keep in mind
      // this operation can only be performed once on every page load.
      session.configure({
        active: websiteHasAuthenticatedSession,
        endpoints: {
          loginUrl: '/login',
          loginRedirectUrl: '/profile',
          logoutUrl: '/logout'
        }
      });
     });
    }
  });

// Capture any widget that is present or will be present on the webpage.
vl.widget.client.capture(function (widget) {
  // Only process the widget if widget is a global header.
  if (widget.getPluginTypeId() === 'global_header') {
    // Register for session extend event.
    widget.on('citizen_profile.session.extend', function (event) {
      // Perform custom website specific session extend logic.
      console.debug('Received session extend request');
    }); 
  }
});

// Capture any widget that is present or will be present on the webpage.
vl.widget.client.capture(function (widget) {
  // Only process the widget if widget is a global header.
  if (widget.getPluginTypeId() === 'global_header') {
    // Get the Citizen Profile Session extension from the global header widget.
    widget.on('citizen_profile.session.logout.request', function (logoutRequest) {
      // Acknowledge the logout request to prevent the session extension from performing default
      // action due to response timeout (5 seconds).
      logoutRequest.acknowledge();

      // Evaluate the type of logout request.
      switch (logoutRequest.getRequest().getReason()) (
        // Logout was requested because the citizen profile extension has detected an expired
        // session which prevents the user from accessing citizen profile without a step-up.
        // This could be the result of an application logout or external logout.
        case 'expired':
          // Validate whether our application still has a valid session. Keep in mind that this 
          // implementation is purely as an example and does not enforce any rules on how a session
          // state is detected. In our example the API call will return 204 if session is present,
          // otherwise 401.
          fetch('http://localhost/api/v1/session/validate')
            .then(function (response) {
              // Check whether the application backend reported an active session.
              if (response.status === 204) {
                // Reject the logout request as our application still has an active session.
                logoutRequest.reject();
              }
              else {
                // Accept the logout request as our application has no active session or failed to
                // generate a valid response.
                logoutRequest.accept();
              }
            })
            .catch(function () {
              // Failed to determine the session state accept the request to ensure no session
              // inconsistency.
              logoutRequest.accept();
            });
          break;

        // Logout was requested by the user. This request should never be rejected in normal
        // circumstances.
        case 'user':
        // Logout was requested as the citizen profile extension has detected inactivity from
        // the user.
        case 'inactivity':
          // Accept the request for website logout.
          logoutRequest.accept();
          break;

        default:
          // Reject the request for website logout.
          logoutRequest.reject();
          break;
      }
    }); 
  }
});

// Serialize the login complete message.
var message = JSON.stringify({
  type: 'vl.widget.global_header.citizen_profile.session.login.complete'
});
// Notify the top most window about our login progress.
window.top.postMessage(message, '*');

// Capture any widget that is present or will be present on the webpage.
vl.widget.client.capture(function (widget) {
  // Only process the widget if widget is a global header.
  if (widget.getPluginTypeId() === 'global_header') {
    // Get the Citizen Profile Session extension from the global header widget.
    widget.getExtension('citizen_profile.session').then(function (session) {
      // This variable is purely to indicate which values are allowed (true / false).
      var websiteHasAuthenticatedSession = false;
      // Inform the session extension about the current session state of the website.
      session.configure({
        active: websiteHasAuthenticatedSession,
        endpoints: {
          loginUrl: '/login',
          loginRedirectUrl: '/profile',
          logoutUrl: '/logout',
          // Pad welke volgende specificatie implementeert:
          // https://authenticatie.vlaanderen.be/docs/beveiligen-van-toepassingen/integratie-methoden/oidc/technische-info/gericht-aanmelden/
          switchCapacityUrl: '/wisselen-van-account'
        }
      });
    });
  }
});

// Serialize the login failed message.
var message = JSON.stringify({
  type: 'vl.widget.global_header.citizen_profile.session.login.failure',
  // Optional, human readable message about the reason of failure.
  message: '<human readable error message>'
});
// Notify the top most window about our login progress.
window.top.postMessage(message, '*');

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ... 
    <a id="login-button" href="/login">Login</a>
    <a id="logout-button" href="/logout">Logout</a>
    ...
    <script type="text/javascript">
      // Capture any widget that is present or will be present on the webpage.
      vl.widget.client.capture(function (widget) {
        // Only process the widget if widget is a global header.
        if (widget.getPluginTypeId() === 'global_header') {
          // Get the Citizen Profile Session extension from the global header widget.
          widget.getExtension('citizen_profile.session').then(function (session) {
            // Ensure the fallback login button uses the session instead of redirect to login page.
            document.getElementById('login-button').addEventListener('click', function (event) {
              // Start the login flow using the Citizen Profile Session extension.
              session.login();
              // Prevent default behavior as the redirect is no longer required.
              event.preventDefault();
            });

            // Ensure the fallback logout button uses the session instead of redirect to
            // logout page.
            document.getElementById('logout-button').addEventListener('click', function (event) {
              // Start the logout flow using the Citizen Profile Session extension.
              session.logout();
              // Prevent default behavior as the redirect is no longer required.
              event.preventDefault();
            });

            // This variable is purely to indicate which values are allowed (true / false).
            var websiteHasAuthenticatedSession = false;
            // Inform the session extension about the current session state of the website. Keep in mind
            // this operation can only be performed once on every page load.
            session.configure({ active: websiteHasAuthenticatedSession });
          });
        }
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script type="text/javascript">
      // Serialize the login complete message.
      var message = JSON.stringify({
        type: 'vl.widget.global_header.citizen_profile.session.login.complete'
      });
      // Notify the top most window about our login progress.
      window.top.postMessage(message, '*');

      // Check whether the page is being displayed without iframe.
      if (window.top === window) {
        // Manually redirect the browser to the authenticated page.
        window.location.replace('http://localhost/some-authenticated-homepage');
      }

      // Capture any widget that is present or will be present on the webpage.
      vl.widget.client.capture(function (widget) {
        // Only process the widget if widget is a global header.
        if (widget.getPluginTypeId() === 'global_header') {
          // Get the Citizen Profile Session extension from the global header widget.
          widget.getExtension('citizen_profile.session').then(function (session) {
            // Ensure the fallback login button uses the session instead of redirect to login page.
            document.getElementById('login-button').addEventListener('click', function (event) {
              // Start the login flow using the Citizen Profile Session extension.
              session.login();
              // Prevent default behavior as the redirect is no longer required.
              event.preventDefault();
            });

            // This variable is purely to indicate which values are allowed (true / false).
            var websiteHasAuthenticatedSession = false;
            // Inform the session extension about the current session state of the website. Keep in mind
            // this operation can only be performed once on every page load.
            session.configure({ active: websiteHasAuthenticatedSession });
          });
        }
      });
    </script>
  </body>
</html>