STEGO CONNECT API Angular Module

This package contains the msal authentication required for getting an access token for the STEGO CONNECT. Is also contains services for all STEGO CONNECT APIs and the respective model classes. This package is intended to be used in Angular projects.

Peer dependencies

The package requires Angular 12 and the Angular MSAL packages @azure/msal-angular and @azure/msal-browser in at least version 2.0.2.

Usage

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MsalGuard, MsalInterceptor, MsalModule, MsalRedirectComponent } from '@azure/msal-angular';
import { ApiModule, ConnectApiModule, getApiConfiguration, getMsalConfiguration } from '@stegoconnect/ngx-connect-api';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

const msalConfiguration = getMsalConfiguration('<clientId of the third party app>', '<redirectUrl of the third party app>', '<dev or prod, depending what environment to authenticate against>');
const apiConfiguration = getApiConfiguration('<dev or prod, depending which api should be called>');

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, HttpClientModule, AppRoutingModule, ConnectApiModule, ApiModule.forRoot(() => apiConfiguration), MsalModule.forRoot(...msalConfiguration)],
    providers: [
        MsalGuard,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true,
        },
    ],
    bootstrap: [AppComponent, MsalRedirectComponent],
})
export class AppModule {}

Calling the API

The API can be called by using the existing API services. The tenant id is received based on the application url (e.g. https://thirdpartyapp.de/tenantId). It can be injected with the TENANT_ID token.

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
    public edgeDevices$: Observable<EdgeDeviceItemsResult> = of();

    constructor(@Inject(TENANT_ID) private readonly tenantId: string, private readonly edgeDeviceService: EdgeDevicesService) {}

    public ngOnInit(): void {
        this.edgeDevices$ = this.edgeDeviceService.getEdgeDevices(this.tenantId);
    }
}

Redirect to tenant with permission

The current tenant is ready from the url of the application. The SDK comes with an Angular startup service that can be used to redirect the current user to either the first tenant they have permission if the user has no permissions to the specified tenant or to redirect them to a not found page if they have no permissions to any tenant. You can add this behavior by specificing the following in the app.component:

providers: [
        ...
        TenantStartupService,
        {
            provide: APP_INITIALIZER,
            useFactory: tenantStartupServiceFactory,
            deps: [TenantStartupService],
            multi: true,
        },
    ],