Document Properties
Kbid
30A835
Last Modified
12-Jan-2024
Added to KB
18-Apr-2023
Public Access
Everyone
Status
Online
Doc Type
Concepts
Product
Intershop Progressive Web App
Concept - Intershop Progressive Web App - Authentication Concept

Introduction

Several ICM REST operations require an authenticated user.
Authentication also assures enterprise information security.
In the PWA a user can be verified with the help of an identity provider.
An identity provider (IdP) is a service that stores and manages digital identities.
The following identity providers are supported: The default ICM server, the SSO Auth0 and the Punchout identity provider.

Library angular-oauth2-oidc

There is a lot of functionality related to authentication, e.g., logging a user in and out, registering a new user, keeping the user identified even if the user opens further browser tabs, etc.

The PWA uses the library angular-oauth2-oidc to support the implementation of these functionalities.
It is used to fetch data from the icm token endpoint service and can be configured to provide access to other identity providers.

Implementation and Configuration of Identity Providers

To add or change the functionality of an identity provider, the following steps are necessary:

  1. Create/change an <idp>.identity-provider.ts class that implements the interface IdentityProvider. In this interface all methods are declared which have to be implemented in your IdP class.

    In the following code you see a typical implementation of the init method of an IdP class.

    @Injectable({ providedIn: 'root' })
    export class ExampleIdentityProvider implements IdentityProvider {
      constructor(
        private router: Router,
        private apiTokenService: ApiTokenService,
        private accountFacade: AccountFacade
      ) {}
    
      init() {
        this.apiTokenService.restore$().subscribe(noop);
    
        this.apiTokenService.cookieVanishes$.subscribe(([type]) => {
          this.accountFacade.logoutUser({ revokeApiToken: false });
          if (type === 'user') {
            this.router.navigate(['/login'], {
              queryParams: { returnUrl: this.router.url, messageKey: 'session_timeout' },
            });
          }
        });
      }
    }

Note

If an identity provider is using the OAuthService for authentication, the identity provider have to inject the OAuthService with a new instance.
Otherwise, difficult side effects with the TokenService will occur.
Please checkout the Auth0IdentityProvider for an example.

  1. Register the <idp>.identity-provider.ts in the IdentityProviderModule. The APP_INITIALIZER injection token is used to configure and initialize the identity provider before app initialization.

  2. Set the environment variables IdentityProviders and IdentityProvider accordingly.

PWA Initialization

A PWA user has to be identified by the ICM server by a unique authentication token, even if it is an anonymous user.
Once an unknown user creates a basket in the PWA, an anonymous authentication token is requested by the ICM Token REST endpoint.
This happens in the apiToken http interceptor method.
Subsequently, this token will be saved as apiToken cookie and added to all REST requests in the request header, e.g.:

authentication-token: encryption0@PBEWithMD5AndTripleDES:1D7T8HyFqQ0=|k3PQLgujzUq0tudtw+6HLjWnExiwrd4o9/jVU7ZH74kTfTy3RS7/sYadsg7ODRM2

In this way, it is possible to identify users even if they are opening a new browser tab or refreshing the PWA in the browser.

If a user opens the PWA and already has a valid apiToken cookie, no new token is requested by the ICM server but this token is used in the header of the REST requests.

Login, Registration, Token Refreshment, Logout

All these functionalities strongly depend on the implementation of the used identity provider.
This is described in the appropriate identity provider guides in more detail, see Further References below.

Vanishing of the apiToken Cookie

The PWA needs to react in case the apiToken cookie is not available anymore.
This could happen if a PWA is opened in many tabs and the user logs out, or when users remove the cookie themselves.
When the cookie vanishes, the PWA emits a new value for the cookieVanishes$ subject.
The identity provider implementation defines how the application should behave in such a case.
With the ICM identity provider, for example, the user is automatically logged out and routed to the /login page in that case.

Further References

Disclaimer
The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.
The Intershop Knowledge Portal uses only technically necessary cookies. We do not track visitors or have visitors tracked by 3rd parties. Please find further information on privacy in the Intershop Privacy Policy and Legal Notice.
Home
Knowledge Base
Product Releases
Log on to continue
This Knowledge Base document is reserved for registered customers.
Log on with your Intershop Entra ID to continue.
Write an email to supportadmin@intershop.de if you experience login issues,
or if you want to register as customer.