andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-05 13:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Merge master (#1373)

Browse Source 
* feat(console): app infos, api apps, fix redirects on create, fix role update, redesign idps, policy, prettier history  (#1310)

* idp fixes

* idp cleanup and rehaul, complexity policy preview

* policy fixes, orthodox redirect

* link component, add links to policies

* redirect pipe, state labels

* Cnsl map changes (#1315)

* map changes to different format

* fix changes layout, cursor

* set asc values

* fix user appearance in changes, index

* changes

* app create with api

* api app create

* auth method for api config

* authmethods, app card for api, authmethod in dev create

* move machine keys to own module

* jwt method for oidc

* fix app edit

* save toast

* fix changes, change det in app detail

* regenerate secret

* chore(deps-dev): bump @angular-devkit/build-angular in /console (#1324)

Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1102.0 to 0.1102.1.
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Commits](https://github.com/angular/angular-cli/commits)

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* fix policy backlink

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
(cherry picked from commit 40a7e958d712f83585e25f18f4fff620de5e3269)

* fix: i18n refs, unnecessary logs (#1343)

(cherry picked from commit 2e04c977eba295cab6aa533379f6075d2e27ab42)

* fix: tos link (#1345)

(cherry picked from commit 5333ef10c169e3656e3ca8dfb8edf7f738fa0a26)

* fix: reactivate/deactivate idp, remove idp provider (#1348)

* fix: reactivate/deactivate idp, remove idp provider

* fix build

* fix(console): add jwt to selection, idp deactivate reactivate (#1347)

* fix: log error on idp change

* add jwt to method selection

Co-authored-by: Max Peintner <[email protected]>

(cherry picked from commit c8b9888427f4ea6b513d370f9fed555208594edf)

* fix: reactivate/deactivate idp (#1351)

(cherry picked from commit 54f395e2e05d4adb29321e9597d049800c033b61)

Co-authored-by: Max Peintner <[email protected]>
This commit is contained in:
Fabi
2021-03-01 09:01:34 +01:00
committed by GitHub
co-authored by Max Peintner
parent 3c07a186fc
commit 9f417f3957
113 changed files with 2976 additions and 1327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/pages/projects/apps/app-create/app-create.component.html
+122 -91
View File
@@ -15,7 +15,8 @@
{{'APP.OIDC.PROSWITCH' | translate}}
</mat-checkbox>
<mat-horizontal-stepper class="stepper" *ngIf="!devmode" linear #stepper labelPosition="bottom">
<mat-horizontal-stepper class="stepper" *ngIf="!devmode" linear #stepper labelPosition="bottom"
(selectionChange)="changeStep($event)">
<mat-step [stepControl]="firstFormGroup" [editable]="true">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>{{'APP.OIDC.NAMEANDTYPESECTION' | translate}}</ng-template>
@@ -29,8 +30,9 @@
<p class="step-title">{{'APP.OIDC.TYPETITLE' | translate}}</p>
<app-type-radio [types]="oidcAppTypes" (selectedType)="changedAppType($event)"
[selected]="applicationType?.value"></app-type-radio>
<app-type-radio [types]="appTypes" (selectedType)="appType?.setValue($event)"
[selected]="appType?.value">
</app-type-radio>
<div class="actions">
<button mat-raised-button [disabled]="firstFormGroup.invalid" color="primary"
matStepperNext>{{'ACTIONS.CONTINUE' | translate}}</button>
@@ -42,10 +44,11 @@
<mat-step *ngIf="oidcApp.applicationType !== OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE"
[stepControl]="secondFormGroup" [editable]="true">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>{{'APP.OIDC.AUTHMETHODSECTION' | translate}}</ng-template>
<ng-template matStepLabel>{{'APP.AUTHMETHODSECTION' | translate}}</ng-template>
<app-auth-method-radio [authMethods]="authMethods" [selected]="authMethod?.value"
(selectedMethod)="changedAppAuthMethod($event)">
[isOIDC]="appType?.value?.createType == AppCreateType.OIDC"
(selectedMethod)="authMethod?.setValue($event)">
</app-auth-method-radio>
<div class="actions">
@@ -57,7 +60,8 @@
</form>
</mat-step>
<mat-step [editable]="true">
<!-- show redirect step only for OIDC apps -->
<mat-step *ngIf="appType?.value?.createType == AppCreateType.OIDC" [editable]="true">
<ng-template matStepLabel>{{'APP.OIDC.REDIRECTSECTION' | translate}}</ng-template>
<p class="step-title">{{'APP.OIDC.REDIRECTTITLE' | translate}}</p>
@@ -68,8 +72,9 @@
{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
<cnsl-redirect-uris class="redirect-section" [canWrite]="true"
[isNative]="oidcApp.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE"
(changedUris)="oidcApp.redirectUrisList = $event" [urisList]="oidcApp.redirectUrisList"
title="{{ 'APP.OIDC.REDIRECT' | translate }}">
[getValues]="requestRedirectValuesSubject$" title="{{ 'APP.OIDC.REDIRECT' | translate }}">
</cnsl-redirect-uris>
<p class="step-title">{{'APP.OIDC.POSTREDIRECTTITLE' | translate}}</p>
@@ -82,7 +87,9 @@
<cnsl-redirect-uris class="redirect-section" [canWrite]="true"
(changedUris)="oidcApp.postLogoutRedirectUrisList = $event"
[urisList]="oidcApp.postLogoutRedirectUrisList" title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}">
[urisList]="oidcApp.postLogoutRedirectUrisList" title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
[getValues]="requestRedirectValuesSubject$"
[isNative]="oidcApp.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
</cnsl-redirect-uris>
<div class="actions">
@@ -103,78 +110,94 @@
{{oidcApp.name}}
</span>
</div>
<div class="row">
<span class="left">
{{ 'APP.TYPE' | translate }}
</span>
<span class="right">
{{'APP.OIDC.APPTYPE'+oidcApp.applicationType | translate}}
</span>
</div>
<div class="row">
<span class="left">
{{ 'APP.GRANT' | translate }}
</span>
<span class="right" *ngIf="oidcApp.grantTypesList?.length > 0">
[<span *ngFor="let element of oidcApp.grantTypesList; index as i">
{{'APP.OIDC.GRANT'+element | translate}}
{{i < oidcApp.grantTypesList.length - 1 ? ', ' : '' }} </span>]
</span>
</div>
<div class="row">
<span class="left">
{{ 'APP.OIDC.RESPONSE' | translate }}
</span>
<span class="right" *ngIf="oidcApp.responseTypesList?.length > 0">
[<span *ngFor="let element of oidcApp.responseTypesList; index as i">
{{('APP.OIDC.RESPONSE'+element | translate)}}
{{i < oidcApp.responseTypesList.length - 1 ? ', ' : '' }} </span>]
</span>
</div>
<div class="row">
<span class="left">
{{ 'APP.OIDC.AUTHMETHOD' | translate }}
</span>
<span class="right">
<span>
{{'APP.OIDC.AUTHMETHOD'+oidcApp?.authMethodType | translate}}
<ng-container *ngIf="appType?.value?.createType == AppCreateType.OIDC">
<div class="row">
<span class="left">
{{ 'APP.TYPE' | translate }}
</span>
</span>
</div>
<span class="right">
{{'APP.OIDC.APPTYPE.'+oidcApp.applicationType | translate}}
</span>
</div>
<div class="row">
<span class="left">
{{ 'APP.GRANT' | translate }}
</span>
<span class="right" *ngIf="oidcApp.grantTypesList?.length > 0">
[<span *ngFor="let element of oidcApp.grantTypesList; index as i">
{{'APP.OIDC.GRANT.'+element | translate}}
{{i < oidcApp.grantTypesList.length - 1 ? ', ' : '' }} </span>]
</span>
</div>
<div class="row">
<span class="left">
{{ 'APP.OIDC.RESPONSETYPE' | translate }}
</span>
<span class="right" *ngIf="oidcApp.responseTypesList?.length > 0">
[<span *ngFor="let element of oidcApp.responseTypesList; index as i">
{{('APP.OIDC.RESPONSE.'+element | translate)}}
{{i < oidcApp.responseTypesList.length - 1 ? ', ' : '' }} </span>]
</span>
</div>
<div class="row">
<span class="left">
{{ 'APP.OIDC.REDIRECT' | translate }}
</span>
<span class="right" *ngIf="oidcApp.redirectUrisList?.length > 0">
[<span *ngFor="let redirect of oidcApp.redirectUrisList; index as i">
{{redirect}}
{{i < oidcApp.redirectUrisList.length - 1 ? ', ' : '' }} </span>]
<div class="row">
<span class="left">
{{ 'APP.AUTHMETHOD' | translate }}
</span>
</div>
<span class="right">
<span>
{{'APP.OIDC.AUTHMETHOD.'+oidcApp?.authMethodType | translate}}
</span>
</span>
</div>
<div class="row">
<span class="left">
{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}
</span>
<span class="right" *ngIf="oidcApp.postLogoutRedirectUrisList?.length > 0">
[<span *ngFor="let redirect of oidcApp.postLogoutRedirectUrisList; index as i">
{{redirect}}
{{i < oidcApp.postLogoutRedirectUrisList.length - 1 ? ', ' : '' }} </span>]
<div class="row">
<span class="left">
{{ 'APP.OIDC.REDIRECT' | translate }}
</span>
</div>
<span class="right" *ngIf="oidcApp.redirectUrisList?.length > 0">
[<span *ngFor="let redirect of oidcApp.redirectUrisList; index as i">
{{redirect}}
{{i < oidcApp.redirectUrisList.length - 1 ? ', ' : '' }} </span>]
</span>
</div>
<div class="row">
<span class="left">
{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}
</span>
<span class="right" *ngIf="oidcApp.postLogoutRedirectUrisList?.length > 0">
[<span *ngFor="let redirect of oidcApp.postLogoutRedirectUrisList; index as i">
{{redirect}}
{{i < oidcApp.postLogoutRedirectUrisList.length - 1 ? ', ' : '' }} </span>]
</span>
</div>
</ng-container>
<ng-container *ngIf="appType?.value?.createType == AppCreateType.API">
<div class="row">
<span class="left">
{{ 'APP.AUTHMETHOD' | translate }}
</span>
<span class="right">
<span>
{{'APP.API.AUTHMETHOD.'+apiApp?.authMethodType | translate}}
</span>
</span>
</div>
</ng-container>
<div class="actions">
<button mat-stroked-button color="primary" matStepperPrevious>{{'ACTIONS.BACK' | translate}}</button>
<button mat-raised-button color="primary" (click)="saveOIDCApp()">{{'ACTIONS.CREATE' |
<button mat-raised-button color="primary" (click)="createApp()">{{'ACTIONS.CREATE' |
translate}}</button>
</div>
</mat-step>
</mat-horizontal-stepper>
<div *ngIf="devmode" class="dev">
<form [formGroup]="form" (ngSubmit)="saveOIDCApp()">
<form [formGroup]="form" (ngSubmit)="createApp()">
<div class="content">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
@@ -182,51 +205,59 @@
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.OIDC.APPTYPE' | translate }}</cnsl-label>
<mat-select formControlName="applicationType">
<mat-option *ngFor="let type of oidcAppTypes" [value]="type.type">
{{ 'APP.OIDC.APPTYPE'+type.type | translate }}
<cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
<mat-select formControlName="appType">
<mat-option *ngFor="let appType of appTypes" [value]="appType">
{{ appType.titleI18nKey | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.OIDC.GRANT' | translate }}</cnsl-label>
<mat-select formControlName="grantTypesList" multiple>
<mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
{{ ('APP.OIDC.GRANT' + grant.type) | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<ng-container *ngIf="formappType?.value?.createType == AppCreateType.OIDC">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
<mat-select formControlName="grantTypesList" multiple>
<mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
{{ ('APP.OIDC.GRANT.' + grant.type) | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
<mat-select formControlName="responseTypesList" multiple>
<mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
{{ 'APP.OIDC.RESPONSE.'+type.type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
</ng-container>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.OIDC.RESPONSE' | translate }}</cnsl-label>
<mat-select formControlName="responseTypesList" multiple>
<mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
{{ 'APP.OIDC.RESPONSE'+type.type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.OIDC.AUTHMETHOD' | translate }}</cnsl-label>
<cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
<mat-select formControlName="authMethodType">
<mat-option *ngFor="let type of oidcAuthMethodType" [value]="type.type">
{{ 'APP.OIDC.AUTHMETHOD'+type.type | translate }}
<mat-option *ngFor="let type of authMethodTypes" [value]="type.type">
<span *ngIf="type.oidc">{{ 'APP.OIDC.AUTHMETHOD.'+type.type | translate }}</span>
<span *ngIf="type.api">{{ 'APP.API.AUTHMETHOD.'+type.type | translate }}</span>
</mat-option>
</mat-select>
</cnsl-form-field>
</div>
<div class="content" *ngIf="formappType?.value?.createType == AppCreateType.OIDC">
<div class="formfield full-width">
<cnsl-redirect-uris class="redirect-section" [canWrite]="true"
(changedUris)="oidcApp.redirectUrisList = $event" [urisList]="oidcApp.redirectUrisList"
title="{{ 'APP.OIDC.REDIRECT' | translate }}">
title="{{ 'APP.OIDC.REDIRECT' | translate }}" [getValues]="requestRedirectValuesSubject$"
[isNative]="oidcApp.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
</cnsl-redirect-uris>
<cnsl-redirect-uris class="redirect-section" [canWrite]="true"
(changedUris)="oidcApp.postLogoutRedirectUrisList = $event"
[urisList]="oidcApp.postLogoutRedirectUrisList"
title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}">
title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
[getValues]="requestRedirectValuesSubject$"
[isNative]="oidcApp.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
</cnsl-redirect-uris>
</div>
</div>
console/src/app/pages/projects/apps/app-create/app-create.component.ts
+211 -76
View File
@@ -4,14 +4,17 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { Subject, Subscription } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
import {
APIApplicationCreate,
APIAuthMethodType,
Application,
OIDCApplicationCreate,
OIDCApplicationType,
OIDCAuthMethodType,
OIDCConfig,
OIDCGrantType,
OIDCResponseType,
} from 'src/app/proto/generated/management_pb';
@@ -21,11 +24,15 @@ import { ToastService } from 'src/app/services/toast.service';
import {
WEB_TYPE,
NATIVE_TYPE,
USER_AGENT_TYPE
USER_AGENT_TYPE,
API_TYPE,
RadioItemAppType,
AppCreateType
} from '../authtypes';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import { CODE_METHOD, getPartialConfigFromAuthMethod, IMPLICIT_METHOD, PKCE_METHOD, PK_JWT_METHOD, POST_METHOD } from '../authmethods';
import { CODE_METHOD, getPartialConfigFromAuthMethod, IMPLICIT_METHOD, BASIC_AUTH_METHOD, PKCE_METHOD, PK_JWT_METHOD, POST_METHOD } from '../authmethods';
import { StepperSelectionEvent } from '@angular/cdk/stepper';
@Component({
@@ -35,10 +42,13 @@ import { CODE_METHOD, getPartialConfigFromAuthMethod, IMPLICIT_METHOD, PKCE_METH
})
export class AppCreateComponent implements OnInit, OnDestroy {
private subscription?: Subscription;
private destroyed$: Subject<void> = new Subject();
public devmode: boolean = false;
public projectId: string = '';
public loading: boolean = false;
public oidcApp: OIDCApplicationCreate.AsObject = new OIDCApplicationCreate().toObject();
public apiApp: APIApplicationCreate.AsObject = new APIApplicationCreate().toObject();
public oidcResponseTypes: { type: OIDCResponseType, checked: boolean; disabled: boolean; }[] = [
{ type: OIDCResponseType.OIDCRESPONSETYPE_CODE, checked: false, disabled: false },
@@ -46,22 +56,30 @@ export class AppCreateComponent implements OnInit, OnDestroy {
{ type: OIDCResponseType.OIDCRESPONSETYPE_ID_TOKEN_TOKEN, checked: false, disabled: false },
];
public oidcAppTypes: any = [
public oidcAppTypes: OIDCApplicationType[] = [
OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB,
OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE,
OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT,
];
public appTypes: any = [
WEB_TYPE,
NATIVE_TYPE,
USER_AGENT_TYPE,
API_TYPE,
];
public authMethods: RadioItemAuthType[] = [
PKCE_METHOD,
CODE_METHOD,
PK_JWT_METHOD,
POST_METHOD,
];
public oidcAuthMethodType: { type: OIDCAuthMethodType, checked: boolean, disabled: boolean; }[] = [
{ type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC, checked: false, disabled: false },
{ type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE, checked: false, disabled: false },
{ type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST, checked: false, disabled: false },
// set to oidc first
public authMethodTypes: { type: OIDCAuthMethodType | APIAuthMethodType, checked: boolean, disabled: boolean; api?: boolean; oidc?: boolean; }[] = [
{ type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC, checked: false, disabled: false, oidc: true },
{ type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE, checked: false, disabled: false, oidc: true },
{ type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST, checked: false, disabled: false, oidc: true },
];
// stepper
@@ -71,6 +89,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
// devmode
public form!: FormGroup;
public AppCreateType: any = AppCreateType;
public OIDCApplicationType: any = OIDCApplicationType;
public OIDCGrantType: any = OIDCGrantType;
public OIDCAuthMethodType: any = OIDCAuthMethodType;
@@ -87,6 +106,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
];
public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
public requestRedirectValuesSubject$: Subject<void> = new Subject();
constructor(
private router: Router,
@@ -101,57 +121,68 @@ export class AppCreateComponent implements OnInit, OnDestroy {
name: ['', [Validators.required]],
responseTypesList: ['', [Validators.required]],
grantTypesList: ['', [Validators.required]],
applicationType: ['', [Validators.required]],
appType: ['', [Validators.required]],
authMethodType: ['', [Validators.required]],
});
this.form.valueChanges.pipe(debounceTime(300)).subscribe((value) => {
this.oidcApp.name = this.formname?.value;
this.oidcApp.applicationType = this.formapplicationType?.value;
this.oidcApp.responseTypesList = this.formresponseTypesList?.value;
this.oidcApp.grantTypesList = this.formgrantTypesList?.value;
this.oidcApp.authMethodType = this.formauthMethodType?.value;
});
this.initForm();
this.firstFormGroup = this.fb.group({
name: ['', [Validators.required]],
applicationType: [OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB, [Validators.required]],
appType: [WEB_TYPE, [Validators.required]],
});
this.firstFormGroup.valueChanges.subscribe(value => {
if (this.firstFormGroup.valid) {
this.oidcApp.name = this.name?.value;
this.oidcApp.applicationType = this.applicationType?.value;
this.apiApp.name = this.name?.value;
switch (this.applicationType?.value) {
case OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE:
this.authMethods = [
PKCE_METHOD,
];
if (this.isStepperOIDC) {
const oidcAppType = (this.appType?.value as RadioItemAppType).oidcApplicationType;
if (oidcAppType !== undefined) {
this.oidcApp.applicationType = oidcAppType;
}
// automatically set to PKCE and skip step
this.oidcApp.responseTypesList = [OIDCResponseType.OIDCRESPONSETYPE_CODE];
this.oidcApp.grantTypesList = [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE];
this.oidcApp.authMethodType = OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
switch (this.oidcApp.applicationType) {
case OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE:
this.authMethods = [
PKCE_METHOD,
];
break;
case OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB:
this.authMethods = [
PKCE_METHOD,
CODE_METHOD,
POST_METHOD,
];
// automatically set to PKCE and skip step
this.oidcApp.responseTypesList = [OIDCResponseType.OIDCRESPONSETYPE_CODE];
this.oidcApp.grantTypesList = [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE];
this.oidcApp.authMethodType = OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
this.authMethod?.setValue(PKCE_METHOD.key);
break;
case OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT:
this.authMethods = [
PKCE_METHOD,
IMPLICIT_METHOD,
];
break;
case OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB:
// PK_JWT_METHOD.recommended = false;
this.authMethods = [
PKCE_METHOD,
CODE_METHOD,
PK_JWT_METHOD,
POST_METHOD,
];
this.authMethod?.setValue(PKCE_METHOD.key);
break;
this.authMethod?.setValue(PKCE_METHOD.key);
break;
case OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT:
this.authMethods = [
PKCE_METHOD,
IMPLICIT_METHOD,
];
this.authMethod?.setValue(PKCE_METHOD.key);
break;
}
} else if (this.isStepperAPI) {
// PK_JWT_METHOD.recommended = true;
this.authMethods = [
PK_JWT_METHOD,
BASIC_AUTH_METHOD,
];
this.authMethod?.setValue(PK_JWT_METHOD.key);
}
}
});
@@ -162,10 +193,12 @@ export class AppCreateComponent implements OnInit, OnDestroy {
this.secondFormGroup.valueChanges.subscribe(form => {
const partialConfig = getPartialConfigFromAuthMethod(form.authMethod);
if (partialConfig) {
this.oidcApp.responseTypesList = partialConfig.responseTypesList ?? [];
this.oidcApp.grantTypesList = partialConfig.grantTypesList ?? [];
this.oidcApp.authMethodType = partialConfig.authMethodType ?? OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
if (this.isStepperOIDC && partialConfig && partialConfig.oidc) {
this.oidcApp.responseTypesList = partialConfig.oidc?.responseTypesList ?? [];
this.oidcApp.grantTypesList = partialConfig.oidc?.grantTypesList ?? [];
this.oidcApp.authMethodType = partialConfig.oidc?.authMethodType ?? OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
} else if (this.isStepperAPI && partialConfig && partialConfig.api) {
this.apiApp.authMethodType = partialConfig.api?.authMethodType ?? APIAuthMethodType.APIAUTHMETHODTYPE_BASIC;
}
});
}
@@ -176,52 +209,135 @@ export class AppCreateComponent implements OnInit, OnDestroy {
public ngOnDestroy(): void {
this.subscription?.unsubscribe();
this.destroyed$.next();
}
public changedAppType(type: OIDCApplicationType) {
this.firstFormGroup.controls['applicationType'].setValue(type);
public initForm(): void {
this.form.valueChanges.pipe(
takeUntil(this.destroyed$),
debounceTime(150)).subscribe(() => {
this.oidcApp.name = this.formname?.value;
this.apiApp.name = this.formname?.value;
this.oidcApp.responseTypesList = this.formresponseTypesList?.value;
this.oidcApp.grantTypesList = this.formgrantTypesList?.value;
this.oidcApp.authMethodType = this.formauthMethodType?.value;
this.apiApp.authMethodType = this.formauthMethodType?.value;
const oidcAppType = (this.formappType?.value as RadioItemAppType).oidcApplicationType;
if (oidcAppType !== undefined) {
this.oidcApp.applicationType = oidcAppType;
}
});
this.formappType?.valueChanges.pipe(takeUntil(this.destroyed$)).subscribe(() => {
this.setDevFormValidators();
});
}
public changedAppAuthMethod(methodKey: string) {
console.log(methodKey);
this.secondFormGroup.controls['authMethod'].setValue(methodKey);
public setDevFormValidators(): void {
if (this.isDevOIDC) {
const grantTypesControl = new FormControl('', [Validators.required]);
const responseTypesControl = new FormControl('', [Validators.required]);
this.form.addControl('grantTypesList', grantTypesControl);
this.form.addControl('responseTypesList', responseTypesControl);
this.authMethodTypes = [
{ type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC, checked: false, disabled: false, oidc: true },
{ type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE, checked: false, disabled: false, oidc: true },
{ type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST, checked: false, disabled: false, oidc: true },
];
this.authMethod?.setValue(OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC);
} else if (this.isDevAPI) {
this.form.removeControl('grantTypesList');
this.form.removeControl('responseTypesList');
this.authMethodTypes = [
{ type: APIAuthMethodType.APIAUTHMETHODTYPE_PRIVATE_KEY_JWT, checked: false, disabled: false, api: true },
{ type: APIAuthMethodType.APIAUTHMETHODTYPE_BASIC, checked: false, disabled: false, api: true },
];
this.authMethod?.setValue(APIAuthMethodType.APIAUTHMETHODTYPE_PRIVATE_KEY_JWT);
}
this.form.updateValueAndValidity();
}
public changeStep(event: StepperSelectionEvent) {
if (event.selectedIndex >= 2) {
this.requestRedirectValuesSubject$.next();
};
}
private async getData({ projectid }: Params): Promise<void> {
this.projectId = projectid;
this.oidcApp.projectId = projectid;
this.apiApp.projectId = projectid;
}
public close(): void {
this._location.back();
}
public saveOIDCApp(): void {
this.loading = true;
this.mgmtService
.CreateOIDCApp(this.oidcApp)
.then((data: Application) => {
this.loading = false;
const response = data.toObject();
if (response.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE) {
this.showSavedDialog(response);
} else {
this.router.navigate(['projects', this.projectId, 'apps', response.id]);
}
})
.catch(error => {
this.loading = false;
this.toast.showError(error);
});
public createApp(): void {
const appOIDCCheck = this.devmode ? this.isDevOIDC : this.isStepperOIDC;
const appAPICheck = this.devmode ? this.isDevAPI : this.isStepperAPI;
if (appOIDCCheck) {
this.requestRedirectValuesSubject$.next();
this.loading = true;
this.mgmtService
.CreateOIDCApp(this.oidcApp)
.then((data: Application) => {
this.loading = false;
const response = data.toObject();
if (response.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE) {
this.showSavedDialog(response);
} else {
this.router.navigate(['projects', this.projectId, 'apps', response.id]);
}
})
.catch(error => {
this.loading = false;
this.toast.showError(error);
});
} else if (appAPICheck) {
this.loading = true;
this.mgmtService
.CreateAPIApplication(this.apiApp)
.then((data: Application) => {
this.loading = false;
const response = data.toObject();
if (response.apiConfig?.authMethodType == APIAuthMethodType.APIAUTHMETHODTYPE_BASIC) {
this.showSavedDialog(response);
} else {
this.router.navigate(['projects', this.projectId, 'apps', response.id]);
}
})
.catch(error => {
this.loading = false;
this.toast.showError(error);
});
}
}
public showSavedDialog(app: Application.AsObject): void {
if (app.oidcConfig !== undefined) {
if (app.oidcConfig?.clientSecret !== undefined) {
const dialogRef = this.dialog.open(AppSecretDialogComponent, {
data: app.oidcConfig,
});
dialogRef.afterClosed().subscribe(result => {
dialogRef.afterClosed().subscribe(() => {
this.router.navigate(['projects', this.projectId, 'apps', app.id]);
});
}
else if (app.apiConfig?.clientSecret !== undefined) {
const dialogRef = this.dialog.open(AppSecretDialogComponent, {
data: app.apiConfig,
});
dialogRef.afterClosed().subscribe(() => {
this.router.navigate(['projects', this.projectId, 'apps', app.id]);
});
} else {
@@ -232,8 +348,8 @@ export class AppCreateComponent implements OnInit, OnDestroy {
get name(): AbstractControl | null {
return this.firstFormGroup.get('name');
}
get applicationType(): AbstractControl | null {
return this.firstFormGroup.get('applicationType');
get appType(): AbstractControl | null {
return this.firstFormGroup.get('appType');
}
public grantTypeChecked(type: OIDCGrantType): boolean {
return this.oidcGrantTypes.filter(gt => gt.checked).map(gt => gt.type).findIndex(t => t === type) > -1;
@@ -256,11 +372,30 @@ export class AppCreateComponent implements OnInit, OnDestroy {
get formgrantTypesList(): AbstractControl | null {
return this.form.get('grantTypesList');
}
get formapplicationType(): AbstractControl | null {
return this.form.get('applicationType');
get formappType(): AbstractControl | null {
return this.form.get('appType');
}
// get formapplicationType(): AbstractControl | null {
// return this.form.get('applicationType');
// }
get formauthMethodType(): AbstractControl | null {
return this.form.get('authMethodType');
}
get isDevOIDC(): boolean {
return (this.formappType?.value as RadioItemAppType).createType == AppCreateType.OIDC;
}
get isStepperOIDC(): boolean {
return (this.appType?.value as RadioItemAppType).createType == AppCreateType.OIDC;
}
get isDevAPI(): boolean {
return (this.formappType?.value as RadioItemAppType).createType == AppCreateType.API;
}
get isStepperAPI(): boolean {
return (this.appType?.value as RadioItemAppType).createType == AppCreateType.API;
}
};
console/src/app/pages/projects/apps/app-detail/app-detail.component.html
+73 -56
View File
@@ -6,7 +6,9 @@
</a>
<div class="title-col">
<h1>{{app?.name}}</h1>
<span>{{'APP.OIDC.APPTYPE'+app?.oidcConfig?.applicationType | translate}}</span>
<span *ngIf="app?.oidcConfig">{{'APP.OIDC.APPTYPE.'+app?.oidcConfig?.applicationType |
translate}}</span>
<span *ngIf="app?.apiConfig">API</span>
</div>
<ng-container *ngIf="isZitadel === false">
<ng-template appHasRole [appHasRole]="['project.app.write:'+projectId, 'project.app.write']">
@@ -54,10 +56,36 @@
</div>
</form>
<!-- <cnsl-info-section class="docs-line" *ngIf="docs?.discoveryEndpoint">
<p><strong>Discovery Endpoint:</strong> {{docs.discoveryEndpoint}}</p>
<p><strong>Issuer:</strong> {{docs.issuer}}</p>
</cnsl-info-section> -->
<div class="environment-wrapper">
<div class="environment" *ngIf="app?.oidcConfig?.clientId">
<span class="key">{{'APP.OIDC.INFO.CLIENTID' | translate}}</span>
<div class="environment-row">
<span>{{this.app.oidcConfig?.clientId}}</span>
<button color="primary" [disabled]="copiedKey == this.app.oidcConfig?.clientId"
[matTooltip]="(copiedKey != this.app.oidcConfig?.clientId ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
appCopyToClipboard [valueToCopy]="this.app.oidcConfig?.clientId"
(copiedValue)="copiedKey = 'clientId'" mat-icon-button>
<i *ngIf="copiedKey != 'clientId'" class="las la-clipboard"></i>
<i *ngIf="copiedKey == 'clientId'" class="las la-clipboard-check"></i>
</button>
</div>
</div>
<ng-container *ngFor="let environmentV of (environmentMap | keyvalue)">
<div *ngIf="environmentV.value" class="environment">
<span class="key">{{environmentV.key}}</span>
<div class="environment-row">
<span>{{environmentV.value}}</span>
<button color="primary" [disabled]="copiedKey == environmentV.value"
[matTooltip]="(copiedKey != environmentV.value ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
appCopyToClipboard [valueToCopy]="environmentV.value"
(copiedValue)="copiedKey = environmentV.key" mat-icon-button>
<i *ngIf="copiedKey != environmentV.key" class="las la-clipboard"></i>
<i *ngIf="copiedKey == environmentV.key" class="las la-clipboard-check"></i>
</button>
</div>
</div>
</ng-container>
</div>
<div class="compliance"
*ngIf="app?.oidcConfig?.complianceProblemsList && app.oidcConfig?.complianceProblemsList?.length">
@@ -70,7 +98,7 @@
</cnsl-info-section>
</div>
<div class="content">
<div class="content" *ngIf="app?.oidcConfig">
<h3 class="full-width section-title">{{'APP.OIDC.REDIRECTSECTIONTITLE' | translate}}</h3>
<mat-slide-toggle color="primary" class="devmode" [formControl]="devMode" name="devMode"
@@ -83,33 +111,47 @@
<span>{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</span>
</cnsl-info-section>
<p class="step-description"
<cnsl-info-section class="step-description"
*ngIf="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB || applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}
</cnsl-info-section>
<div style="margin: .5rem" class="divider"></div>
<cnsl-redirect-uris class="redirect-section" [canWrite]="canWrite" [devMode]="devMode?.value"
<cnsl-redirect-uris *ngIf="applicationType?.value !== undefined" class="redirect-section"
[canWrite]="canWrite" [devMode]="devMode?.value" [getValues]="requestRedirectValuesSubject$"
(changedUris)="redirectUrisList = $event" [urisList]="redirectUrisList"
title="{{ 'APP.OIDC.REDIRECT' | translate }}">
title="{{ 'APP.OIDC.REDIRECT' | translate }}"
[isNative]="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
</cnsl-redirect-uris>
<cnsl-redirect-uris class="redirect-section" [canWrite]="canWrite" [devMode]="devMode?.value"
(changedUris)="postLogoutRedirectUrisList = $event" [urisList]="postLogoutRedirectUrisList"
title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}">
<cnsl-redirect-uris *ngIf="applicationType?.value !== undefined" class="redirect-section"
[canWrite]="canWrite" [devMode]="devMode?.value" (changedUris)="postLogoutRedirectUrisList = $event"
[urisList]="postLogoutRedirectUrisList" [getValues]="requestRedirectValuesSubject$"
title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
[isNative]="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
</cnsl-redirect-uris>
</div>
<app-auth-method-radio *ngIf="authMethods && initialAuthMethod && app?.oidcConfig" [authMethods]="authMethods"
[selected]="initialAuthMethod" [current]="currentAuthMethod"
(selectedMethod)="setPartialConfigFromAuthMethod($event)">
<app-auth-method-radio *ngIf="authMethods && initialAuthMethod && (app?.oidcConfig || app?.apiConfig)"
[authMethods]="authMethods" [selected]="initialAuthMethod" [current]="currentAuthMethod"
[isOIDC]="app?.oidcConfig !== undefined" (selectedMethod)="setPartialConfigFromAuthMethod($event)">
</app-auth-method-radio>
<form *ngIf="appForm" [formGroup]="appForm" (ngSubmit)="saveOIDCApp()">
<app-card *ngIf="currentAuthMethod == 'PK_JWT' && projectId && app?.id" [expanded]="false"
title="{{ 'USER.MACHINE.KEYSTITLE' | translate }}" description="{{ 'USER.MACHINE.KEYSDESC' | translate }}">
<app-client-keys [projectId]="projectId" [appId]="app.id"></app-client-keys>
</app-card>
<div *ngIf="currentAuthMethod == 'BASIC'">
<button [disabled]="!canWrite" mat-stroked-button
(click)="regenerateAPIClientSecret()">{{'APP.API.REGENERATESECRET' | translate}}</button>
</div>
<form *ngIf="oidcForm && app?.oidcConfig" [formGroup]="oidcForm" (ngSubmit)="saveOIDCApp()">
<app-card title=" {{ 'APP.OIDC.TITLE' | translate }}" *ngIf="app && app.oidcConfig" [expanded]="false">
<div card-actions
*ngIf="app?.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE">
<button [disabled]="!canWrite" mat-stroked-button
<div card-actions *ngIf="currentAuthMethod == 'CODE' || currentAuthMethod == 'POST'">
<button type="button" [disabled]="!canWrite" mat-stroked-button
(click)="regenerateOIDCClientSecret()">{{'APP.OIDC.REGENERATESECRET' | translate}}</button>
</div>
@@ -120,37 +162,37 @@
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'APP.OIDC.RESPONSE' | translate }}</cnsl-label>
<cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
<mat-select formControlName="responseTypesList" multiple>
<mat-option *ngFor="let type of oidcResponseTypes" [value]="type">
{{ 'APP.OIDC.RESPONSE'+type | translate }}
{{ 'APP.OIDC.RESPONSE.'+type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'APP.OIDC.GRANT' | translate }}</cnsl-label>
<cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
<mat-select formControlName="grantTypesList" multiple>
<mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant">
{{ 'APP.OIDC.GRANT'+grant | translate }}
{{ 'APP.OIDC.GRANT.'+grant | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.OIDC.APPTYPE' | translate }}</cnsl-label>
<cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
<mat-select formControlName="applicationType">
<mat-option *ngFor="let type of oidcAppTypes" [value]="type">
{{ 'APP.OIDC.APPTYPE'+type | translate }}
{{ 'APP.OIDC.APPTYPE.'+type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.OIDC.AUTHMETHOD' | translate }}</cnsl-label>
<cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
<mat-select formControlName="authMethodType">
<mat-option *ngFor="let type of oidcAuthMethodType" [value]="type">
{{ 'APP.OIDC.AUTHMETHOD'+type | translate }}
{{ 'APP.OIDC.AUTHMETHOD.'+type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
@@ -200,39 +242,14 @@
</app-card>
<div class="btn-container">
<button class="submit-button" type="submit" color="primary" [disabled]="appForm.invalid || !canWrite"
<button class="submit-button" type="submit" color="primary" [disabled]="oidcForm.invalid || !canWrite"
mat-raised-button>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</form>
<div class="next-steps">
<h5>{{'APP.PAGES.NEXTSTEPS.TITLE' | translate}}</h5>
<div class="row">
<div class="step">
<h6>{{ 'APP.PAGES.NEXTSTEPS.0.TITLE' | translate }}</h6>
<p>{{'APP.PAGES.NEXTSTEPS.0.DESC' | translate}}</p>
<span class="fill-space"></span>
<a [routerLink]="['/projects', this.projectId]" color="primary" mat-mini-fab><i
class="las la-angle-right"></i></a>
</div>
<div class="step">
<h6>{{ 'APP.PAGES.NEXTSTEPS.1.TITLE' | translate }}</h6>
<p>{{'APP.PAGES.NEXTSTEPS.1.DESC' | translate}}</p>
<span class="fill-space"></span>
<a [routerLink]="['/users', 'create']" color="primary" mat-mini-fab><i
class="las la-angle-right"></i></a>
</div>
<div class="step">
<h6>{{ 'APP.PAGES.NEXTSTEPS.2.TITLE' | translate }}</h6>
<p>{{'APP.PAGES.NEXTSTEPS.2.DESC' | translate}}</p>
<span class="fill-space"></span>
<a href="https://docs.zitadel.ch" color="primary" mat-mini-fab><i
class="las la-angle-right"></i></a>
</div>
</div>
</div>
<cnsl-links [links]="nextLinks"></cnsl-links>
</div>
console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
+40 -58
View File
@@ -44,6 +44,46 @@
font-size: 14px;
}
.environment-wrapper {
padding: 1rem 0;
display: flex;
flex-wrap: wrap;
.environment {
min-width: 300px;
.key {
font-size: 12px;
color: var(--grey);
}
.environment-row {
display: flex;
align-items: center;
overflow: hidden;
height: 30px;
button {
transition: opacity .15s ease-in-out;
visibility: hidden;
opacity: 0;
&[disabled] {
visibility: visible;
color: white;
opacity: 1;
}
}
&:hover {
button {
visibility: visible;
opacity: 1;
}
}
}
}
}
.compliance .problem {
font-size: 14px;
}
@@ -174,61 +214,3 @@
height: 1px;
background-color: rgba(#8795a1, .2);
}
.next-steps {
h5 {
text-transform: uppercase;
font-size: 14px;
color: var(--grey);
}
.row {
width: 100%;
display: flex;
overflow-x: auto;
.step {
min-width: 220px;
max-width: 280px;
padding: 1rem;
margin: 0 .5rem;
border: 1px solid var(--grey);
border-radius: .5rem;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
flex: 1;
h6 {
font-size: 1rem;
text-align: center;
margin: 0 0 1rem 0;
}
p {
font-size: 14px;
text-align: center;
color: var(--grey);
}
.fill-space {
flex: 1;
}
button {
display: block;
margin: auto;
}
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
}
console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
+214 -62
View File
@@ -1,20 +1,27 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatButtonToggleChange } from '@angular/material/button-toggle';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute, Params, Router, RouterLink } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
import { Subscription } from 'rxjs';
import { Subject, Subscription } from 'rxjs';
import { take } from 'rxjs/operators';
import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
import { ChangeType } from 'src/app/modules/changes/changes.component';
import { CnslLinks } from 'src/app/modules/links/links.component';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import {
APIAuthMethodType,
APIConfig,
APIConfigUpdate,
Application,
AppState,
ClientSecret,
OIDCApplicationType,
OIDCAuthMethodType,
OIDCConfig,
@@ -29,7 +36,7 @@ import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import { CODE_METHOD, getAuthMethodFromPartialConfig, getPartialConfigFromAuthMethod, IMPLICIT_METHOD, PKCE_METHOD, PK_JWT_METHOD, POST_METHOD, CUSTOM_METHOD } from '../authmethods';
import { CODE_METHOD, getAuthMethodFromPartialConfig, getPartialConfigFromAuthMethod, IMPLICIT_METHOD, PKCE_METHOD, PK_JWT_METHOD, POST_METHOD, CUSTOM_METHOD, BASIC_AUTH_METHOD } from '../authmethods';
@Component({
selector: 'app-app-detail',
@@ -46,11 +53,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public addOnBlur: boolean = true;
public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
public authMethods: RadioItemAuthType[] = [
PKCE_METHOD,
CODE_METHOD,
POST_METHOD,
];
public authMethods: RadioItemAuthType[] = [];
private subscription?: Subscription;
public projectId: string = '';
public app!: Application.AsObject;
@@ -74,6 +77,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_PRIVATE_KEY_JWT,
];
public oidcTokenTypes: OIDCTokenType[] = [
@@ -83,7 +87,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public AppState: any = AppState;
public appNameForm!: FormGroup;
public appForm!: FormGroup;
public oidcForm!: FormGroup;
public apiForm!: FormGroup;
public redirectUrisList: string[] = [];
public postLogoutRedirectUrisList: string[] = [];
@@ -93,9 +98,16 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public OIDCApplicationType: any = OIDCApplicationType;
public OIDCAuthMethodType: any = OIDCAuthMethodType;
public APIAuthMethodType: any = APIAuthMethodType;
public OIDCTokenType: any = OIDCTokenType;
public ChangeType: any = ChangeType;
public requestRedirectValuesSubject$: Subject<void> = new Subject();
public copiedKey: any = '';
public environmentMap: { [key: string]: string; } = {};
public nextLinks: Array<CnslLinks> = [];
constructor(
public translate: TranslateService,
private route: ActivatedRoute,
@@ -106,12 +118,26 @@ export class AppDetailComponent implements OnInit, OnDestroy {
private mgmtService: ManagementService,
private authService: GrpcAuthService,
private router: Router,
private http: HttpClient,
private snackbar: MatSnackBar,
) {
this.http.get('./assets/environment.json')
.toPromise().then((env: any) => {
this.environmentMap = {
issuer: env.issuer,
adminServiceUrl: env.adminServiceUrl,
mgmtServiceUrl: env.mgmtServiceUrl,
authServiceUrl: env.adminServiceUrl,
};
});
this.appNameForm = this.fb.group({
state: [{ value: '', disabled: true }, []],
name: [{ value: '', disabled: true }, [Validators.required]],
});
this.appForm = this.fb.group({
this.oidcForm = this.fb.group({
devMode: [{ value: false, disabled: true }, []],
clientId: [{ value: '', disabled: true }],
responseTypesList: [{ value: [], disabled: true }],
@@ -124,6 +150,10 @@ export class AppDetailComponent implements OnInit, OnDestroy {
idTokenUserinfoAssertion: [{ value: false, disabled: true }],
clockSkewSeconds: [{ value: 0, disabled: true }],
});
this.apiForm = this.fb.group({
authMethodType: [{ value: '', disabled: true }],
});
}
public formatClockSkewLabel(seconds: number): string {
@@ -138,8 +168,30 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.subscription?.unsubscribe();
}
private initLinks(): void {
this.nextLinks = [
{
i18nTitle: 'APP.PAGES.NEXTSTEPS.0.TITLE',
i18nDesc: 'APP.PAGES.NEXTSTEPS.0.DESC',
routerLink: ['/projects', this.projectId],
},
{
i18nTitle: 'APP.PAGES.NEXTSTEPS.1.TITLE',
i18nDesc: 'APP.PAGES.NEXTSTEPS.1.DESC',
routerLink: ['/users', 'create'],
}, {
i18nTitle: 'APP.PAGES.NEXTSTEPS.2.TITLE',
i18nDesc: 'APP.PAGES.NEXTSTEPS.2.DESC',
href: 'https://docs.zitadel.ch'
},
];
}
private async getData({ projectid, id }: Params): Promise<void> {
this.projectId = projectid;
this.initLinks();
this.mgmtService.GetIam().then(iam => {
this.isZitadel = iam.toObject().iamProjectId === this.projectId;
});
@@ -149,9 +201,22 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.app = app.toObject();
this.appNameForm.patchValue(this.app);
this.getAuthMethodOptions();
if (this.app.oidcConfig) {
this.initialAuthMethod = this.authMethodFromPartialConfig(this.app.oidcConfig);
this.getAuthMethodOptions('OIDC');
this.initialAuthMethod = this.authMethodFromPartialConfig({ oidc: this.app.oidcConfig });
this.currentAuthMethod = this.initialAuthMethod;
if (this.initialAuthMethod === CUSTOM_METHOD.key) {
if (!this.authMethods.includes(CUSTOM_METHOD)) {
this.authMethods.push(CUSTOM_METHOD);
}
} else {
this.authMethods = this.authMethods.filter(element => element != CUSTOM_METHOD);
}
} else if (this.app.apiConfig) {
this.getAuthMethodOptions('API');
this.initialAuthMethod = this.authMethodFromPartialConfig({ api: this.app.apiConfig });
this.currentAuthMethod = this.initialAuthMethod;
if (this.initialAuthMethod === CUSTOM_METHOD.key) {
if (!this.authMethods.includes(CUSTOM_METHOD)) {
@@ -164,7 +229,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
if (allowed) {
this.appNameForm.enable();
this.appForm.enable();
this.oidcForm.enable();
this.apiForm.enable();
}
if (this.app.oidcConfig?.redirectUrisList) {
@@ -175,14 +241,14 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
if (this.app.oidcConfig?.clockSkew) {
const inSecs = this.app.oidcConfig?.clockSkew.seconds + this.app.oidcConfig?.clockSkew.nanos / 100000;
this.appForm.controls['clockSkewSeconds'].setValue(inSecs);
this.oidcForm.controls['clockSkewSeconds'].setValue(inSecs);
}
if (this.app.oidcConfig) {
this.appForm.patchValue(this.app.oidcConfig);
this.oidcForm.patchValue(this.app.oidcConfig);
}
this.appForm.valueChanges.subscribe(oidcConfig => {
this.initialAuthMethod = this.authMethodFromPartialConfig(oidcConfig);
this.oidcForm.valueChanges.subscribe((oidcConfig) => {
this.initialAuthMethod = this.authMethodFromPartialConfig({ oidc: oidcConfig });
if (this.initialAuthMethod === CUSTOM_METHOD.key) {
if (!this.authMethods.includes(CUSTOM_METHOD)) {
this.authMethods.push(CUSTOM_METHOD);
@@ -190,6 +256,21 @@ export class AppDetailComponent implements OnInit, OnDestroy {
} else {
this.authMethods = this.authMethods.filter(element => element != CUSTOM_METHOD);
}
this.showSaveSnack();
});
this.apiForm.valueChanges.subscribe((apiConfig) => {
this.initialAuthMethod = this.authMethodFromPartialConfig({ api: apiConfig });
if (this.initialAuthMethod === CUSTOM_METHOD.key) {
if (!this.authMethods.includes(CUSTOM_METHOD)) {
this.authMethods.push(CUSTOM_METHOD);
}
} else {
this.authMethods = this.authMethods.filter(element => element != CUSTOM_METHOD);
}
this.showSaveSnack();
});
}).catch(error => {
console.error(error);
@@ -200,43 +281,68 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.docs = (await this.mgmtService.GetZitadelDocs()).toObject();
}
private getAuthMethodOptions(): void {
switch (this.app.oidcConfig?.applicationType) {
case OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE:
this.authMethods = [
PKCE_METHOD,
CUSTOM_METHOD,
];
break;
case OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB:
this.authMethods = [
PKCE_METHOD,
CODE_METHOD,
POST_METHOD,
];
break;
case OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT:
this.authMethods = [
PKCE_METHOD,
IMPLICIT_METHOD,
];
break;
private async showSaveSnack(): Promise<void> {
const message = await this.translate.get('APP.TOAST.CONFIGCHANGED').toPromise();
const action = await this.translate.get('ACTIONS.SAVENOW').toPromise();
const snackRef = this.snackbar.open(message, action, { duration: 5000, verticalPosition: 'top' });
snackRef.onAction().subscribe(() => {
if (this.app.oidcConfig) {
this.saveOIDCApp();
} else if (this.app.apiConfig) {
this.saveAPIApp();
}
});
}
private getAuthMethodOptions(type: string): void {
if (type == 'OIDC') {
switch (this.app.oidcConfig?.applicationType) {
case OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE:
this.authMethods = [
PKCE_METHOD,
CUSTOM_METHOD,
];
break;
case OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB:
this.authMethods = [
PKCE_METHOD,
CODE_METHOD,
PK_JWT_METHOD,
POST_METHOD,
];
break;
case OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT:
this.authMethods = [
PKCE_METHOD,
IMPLICIT_METHOD,
];
break;
}
}
if (type == 'API') {
this.authMethods = [
PK_JWT_METHOD,
BASIC_AUTH_METHOD,
];
}
}
public authMethodFromPartialConfig(config: OIDCConfig.AsObject): string {
public authMethodFromPartialConfig(config: { oidc?: OIDCConfig.AsObject, api?: APIConfig.AsObject; }): string {
const key = getAuthMethodFromPartialConfig(config);
return key;
}
public setPartialConfigFromAuthMethod(authMethod: string): void {
const partialConfig = getPartialConfigFromAuthMethod(authMethod);
if (partialConfig && this.app.oidcConfig) {
this.app.oidcConfig.responseTypesList = partialConfig.responseTypesList ?? [];
this.app.oidcConfig.grantTypesList = partialConfig.grantTypesList ?? [];
this.app.oidcConfig.authMethodType = partialConfig.authMethodType ?? OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
this.appForm.patchValue(this.app.oidcConfig);
if (partialConfig && partialConfig.oidc && this.app.oidcConfig) {
this.app.oidcConfig.responseTypesList = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).responseTypesList ?? [];
this.app.oidcConfig.grantTypesList = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).grantTypesList ?? [];
this.app.oidcConfig.authMethodType = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).authMethodType ?? OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
this.oidcForm.patchValue(this.app.oidcConfig);
} else if (partialConfig && partialConfig.api && this.app.apiConfig) {
this.app.apiConfig.authMethodType = (partialConfig.api as Partial<APIConfig.AsObject>).authMethodType ?? APIAuthMethodType.APIAUTHMETHODTYPE_BASIC;
this.apiAuthMethodType?.setValue(this.app.apiConfig.authMethodType);
}
}
@@ -286,7 +392,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.mgmtService
.UpdateApplication(this.projectId, this.app.id, this.name?.value)
.then(() => {
this.toast.showInfo('APP.TOAST.OIDCUPDATED', true);
this.toast.showInfo('APP.TOAST.UPDATED', true);
this.editState = false;
})
.catch(error => {
@@ -297,11 +403,12 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public saveOIDCApp(): void {
this.requestRedirectValuesSubject$.next();
if (this.appNameForm.valid) {
this.app.name = this.name?.value;
}
if (this.appForm.valid) {
if (this.oidcForm.valid) {
if (this.app.oidcConfig) {
this.app.oidcConfig.responseTypesList = this.responseTypesList?.value;
this.app.oidcConfig.grantTypesList = this.grantTypesList?.value;
@@ -340,7 +447,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
.UpdateOIDCAppConfig(req)
.then(() => {
if (this.app.oidcConfig) {
this.currentAuthMethod = this.authMethodFromPartialConfig(this.app.oidcConfig);
const config = { oidc: this.app.oidcConfig };
this.currentAuthMethod = this.authMethodFromPartialConfig(config);
}
this.toast.showInfo('APP.TOAST.OIDCUPDATED', true);
})
@@ -351,12 +459,52 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
}
public saveAPIApp(): void {
if (this.apiForm.valid && this.app.apiConfig) {
this.app.apiConfig.authMethodType = this.apiAuthMethodType?.value;
const req = new APIConfigUpdate();
req.setProjectId(this.projectId);
req.setApplicationId(this.app.id);
req.setAuthMethodType(this.app.apiConfig.authMethodType);
this.mgmtService
.UpdateAPIAppConfig(req)
.then(() => {
if (this.app.apiConfig) {
const config = { api: this.app.apiConfig };
this.currentAuthMethod = this.authMethodFromPartialConfig(config);
}
this.toast.showInfo('APP.TOAST.OIDCUPDATED', true);
})
.catch(error => {
this.toast.showError(error);
});
}
}
public regenerateOIDCClientSecret(): void {
this.mgmtService.RegenerateOIDCClientSecret(this.app.id, this.projectId).then((data: OIDCConfig) => {
this.toast.showInfo('APP.TOAST.OIDCCLIENTSECRETREGENERATED', true);
this.mgmtService.RegenerateOIDCClientSecret(this.app.id, this.projectId).then((data: ClientSecret) => {
this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
this.dialog.open(AppSecretDialogComponent, {
data: {
clientId: data.toObject().clientId,
// clientId: data.toObject() as ClientSecret.AsObject.clientId,
clientSecret: data.toObject().clientSecret,
},
width: '400px',
});
}).catch(error => {
this.toast.showError(error);
});
}
public regenerateAPIClientSecret(): void {
this.mgmtService.RegenerateAPIClientSecret(this.app.id, this.projectId).then((data: ClientSecret) => {
this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
this.dialog.open(AppSecretDialogComponent, {
data: {
// clientId: data.toObject().clientId ?? '',
clientSecret: data.toObject().clientSecret,
},
width: '400px',
@@ -376,46 +524,50 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
public get clientId(): AbstractControl | null {
return this.appForm.get('clientId');
return this.oidcForm.get('clientId');
}
public get responseTypesList(): AbstractControl | null {
return this.appForm.get('responseTypesList');
return this.oidcForm.get('responseTypesList');
}
public get grantTypesList(): AbstractControl | null {
return this.appForm.get('grantTypesList');
return this.oidcForm.get('grantTypesList');
}
public get applicationType(): AbstractControl | null {
return this.appForm.get('applicationType');
return this.oidcForm.get('applicationType');
}
public get authMethodType(): AbstractControl | null {
return this.appForm.get('authMethodType');
return this.oidcForm.get('authMethodType');
}
public get apiAuthMethodType(): AbstractControl | null {
return this.apiForm.get('authMethodType');
}
public get devMode(): AbstractControl | null {
return this.appForm.get('devMode');
return this.oidcForm.get('devMode');
}
public get accessTokenType(): AbstractControl | null {
return this.appForm.get('accessTokenType');
return this.oidcForm.get('accessTokenType');
}
public get idTokenRoleAssertion(): AbstractControl | null {
return this.appForm.get('idTokenRoleAssertion');
return this.oidcForm.get('idTokenRoleAssertion');
}
public get accessTokenRoleAssertion(): AbstractControl | null {
return this.appForm.get('accessTokenRoleAssertion');
return this.oidcForm.get('accessTokenRoleAssertion');
}
public get idTokenUserinfoAssertion(): AbstractControl | null {
return this.appForm.get('idTokenUserinfoAssertion');
return this.oidcForm.get('idTokenUserinfoAssertion');
}
public get clockSkewSeconds(): AbstractControl | null {
return this.appForm.get('clockSkewSeconds');
return this.oidcForm.get('clockSkewSeconds');
}
}
console/src/app/pages/projects/apps/apps.module.ts
+6 -1
View File
@@ -32,7 +32,9 @@ import { AppSecretDialogComponent } from './app-secret-dialog/app-secret-dialog.
import { AppsRoutingModule } from './apps-routing.module';
import { A11yModule } from '@angular/cdk/a11y';
import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
import { LinksModule } from 'src/app/modules/links/links.module';
import { RedirectPipeModule } from 'src/app/pipes/redirect-pipe/redirect-pipe.module';
import { ClientKeysModule } from 'src/app/modules/client-keys/client-keys.module';
@NgModule({
declarations: [
AppCreateComponent,
@@ -43,6 +45,8 @@ import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
imports: [
CommonModule,
A11yModule,
RedirectPipeModule,
LinksModule,
AppRadioModule,
AppsRoutingModule,
FormsModule,
@@ -51,6 +55,7 @@ import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
HasRoleModule,
MatMenuModule,
MatChipsModule,
ClientKeysModule,
MatIconModule,
MatSelectModule,
MatButtonToggleModule,
console/src/app/pages/projects/apps/authmethods.ts
+141 -82
View File
@@ -1,10 +1,10 @@
import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
import { OIDCAuthMethodType, OIDCConfig, OIDCGrantType, OIDCResponseType } from 'src/app/proto/generated/management_pb';
import { APIAuthMethodType, APIConfig, OIDCAuthMethodType, OIDCConfig, OIDCGrantType, OIDCResponseType } from 'src/app/proto/generated/management_pb';
export const CODE_METHOD: RadioItemAuthType = {
key: 'CODE',
titleI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.CODE.TITLE',
descI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.CODE.DESCRIPTION',
titleI18nKey: 'APP.AUTHMETHODS.CODE.TITLE',
descI18nKey: 'APP.AUTHMETHODS.CODE.DESCRIPTION',
disabled: false,
prefix: 'CODE',
background: 'rgb(89 115 128)',
@@ -15,8 +15,8 @@ export const CODE_METHOD: RadioItemAuthType = {
};
export const PKCE_METHOD: RadioItemAuthType = {
key: 'PKCE',
titleI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.PKCE.TITLE',
descI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.PKCE.DESCRIPTION',
titleI18nKey: 'APP.AUTHMETHODS.PKCE.TITLE',
descI18nKey: 'APP.AUTHMETHODS.PKCE.DESCRIPTION',
disabled: false,
prefix: 'PKCE',
background: 'rgb(80 110 92)',
@@ -27,11 +27,11 @@ export const PKCE_METHOD: RadioItemAuthType = {
};
export const POST_METHOD: RadioItemAuthType = {
key: 'POST',
titleI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.POST.TITLE',
descI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.POST.DESCRIPTION',
titleI18nKey: 'APP.AUTHMETHODS.POST.TITLE',
descI18nKey: 'APP.AUTHMETHODS.POST.DESCRIPTION',
disabled: false,
prefix: 'POST',
background: '#595d80',
background: 'rgb(144 75 75)',
responseType: OIDCResponseType.OIDCRESPONSETYPE_CODE,
grantType: OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE,
authMethod: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
@@ -39,19 +39,34 @@ export const POST_METHOD: RadioItemAuthType = {
};
export const PK_JWT_METHOD: RadioItemAuthType = {
key: 'PK_JWT',
titleI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.ALTERNATIVE.TITLE',
descI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.ALTERNATIVE.DESCRIPTION',
titleI18nKey: 'APP.AUTHMETHODS.PK_JWT.TITLE',
descI18nKey: 'APP.AUTHMETHODS.PK_JWT.DESCRIPTION',
disabled: false,
prefix: 'PK_JWT',
background: '#6a506e',
prefix: 'JWT',
background: 'rgb(89, 93, 128)',
responseType: OIDCResponseType.OIDCRESPONSETYPE_CODE,
grantType: OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE,
authMethod: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_PRIVATE_KEY_JWT,
apiAuthMethod: APIAuthMethodType.APIAUTHMETHODTYPE_PRIVATE_KEY_JWT,
// recommended: true,
};
export const BASIC_AUTH_METHOD: RadioItemAuthType = {
key: 'BASIC',
titleI18nKey: 'APP.AUTHMETHODS.BASIC.TITLE',
descI18nKey: 'APP.AUTHMETHODS.BASIC.DESCRIPTION',
disabled: false,
prefix: 'BASIC',
background: 'rgb(144 75 75)',
responseType: OIDCResponseType.OIDCRESPONSETYPE_CODE,
grantType: OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE,
authMethod: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
apiAuthMethod: APIAuthMethodType.APIAUTHMETHODTYPE_BASIC,
};
export const IMPLICIT_METHOD: RadioItemAuthType = {
key: 'IMPLICIT',
titleI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.IMPLICIT.TITLE',
descI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.IMPLICIT.DESCRIPTION',
titleI18nKey: 'APP.AUTHMETHODS.IMPLICIT.TITLE',
descI18nKey: 'APP.AUTHMETHODS.IMPLICIT.DESCRIPTION',
disabled: false,
prefix: 'IMP',
background: 'rgb(144 75 75)',
@@ -60,51 +75,84 @@ export const IMPLICIT_METHOD: RadioItemAuthType = {
authMethod: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
notRecommended: true,
};
export const CUSTOM_METHOD: RadioItemAuthType = {
key: 'CUSTOM',
titleI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.CUSTOM.TITLE',
descI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.CUSTOM.DESCRIPTION',
titleI18nKey: 'APP.AUTHMETHODS.CUSTOM.TITLE',
descI18nKey: 'APP.AUTHMETHODS.CUSTOM.DESCRIPTION',
disabled: false,
prefix: 'CUSTOM',
background: '#333',
};
export function getPartialConfigFromAuthMethod(authMethod: string): Partial<OIDCConfig.AsObject> | undefined {
let config: Partial<OIDCConfig.AsObject>;
export function getPartialConfigFromAuthMethod(authMethod: string): {
oidc?: Partial<OIDCConfig.AsObject>;
api?: Partial<APIConfig.AsObject>;
} | undefined {
let config: {
oidc?: Partial<OIDCConfig.AsObject>,
api?: Partial<APIConfig.AsObject>,
};
switch (authMethod) {
case CODE_METHOD.key:
config = {
responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
oidc: {
responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
},
};
return config;
case PKCE_METHOD.key:
config = {
responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
oidc: {
responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
}
};
return config;
case POST_METHOD.key:
config = {
responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
oidc: {
responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
}
};
return config;
case PK_JWT_METHOD.key:
config = {
oidc: {
responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_PRIVATE_KEY_JWT,
},
api: {
authMethodType: APIAuthMethodType.APIAUTHMETHODTYPE_PRIVATE_KEY_JWT,
}
};
return config;
case BASIC_AUTH_METHOD.key:
config = {
oidc: {
authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
},
api: {
authMethodType: APIAuthMethodType.APIAUTHMETHODTYPE_BASIC,
}
};
return config;
// case PK_JWT_METHOD.key:
// config = {
// responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
// grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
// authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
// };
// return config;
case IMPLICIT_METHOD.key:
config = {
responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_ID_TOKEN_TOKEN],
grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_IMPLICIT],
authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
oidc: {
responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_ID_TOKEN_TOKEN],
grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_IMPLICIT],
authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
},
api: {
authMethodType: APIAuthMethodType.APIAUTHMETHODTYPE_PRIVATE_KEY_JWT,
}
};
return config;
default:
@@ -112,55 +160,66 @@ export function getPartialConfigFromAuthMethod(authMethod: string): Partial<OIDC
}
}
export function getAuthMethodFromPartialConfig(config: Partial<OIDCConfig.AsObject> | OIDCConfig.AsObject): string {
const toCheck = [config.responseTypesList, config.grantTypesList, config.authMethodType];
const code = JSON.stringify(
[
[OIDCResponseType.OIDCRESPONSETYPE_CODE],
[OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
]
);
export function getAuthMethodFromPartialConfig(config: { oidc?: Partial<OIDCConfig.AsObject>, api?: Partial<APIConfig.AsObject>; }): string {
if (config?.oidc) {
const toCheck = [config.oidc.responseTypesList, config.oidc.grantTypesList, config.oidc.authMethodType];
const code = JSON.stringify(
[
[OIDCResponseType.OIDCRESPONSETYPE_CODE],
[OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
]
);
const pkce = JSON.stringify(
[
[OIDCResponseType.OIDCRESPONSETYPE_CODE],
[OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
]
);
const pkce = JSON.stringify(
[
[OIDCResponseType.OIDCRESPONSETYPE_CODE],
[OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
]
);
const post = JSON.stringify(
[
[OIDCResponseType.OIDCRESPONSETYPE_CODE],
[OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
]
);
const post = JSON.stringify(
[
[OIDCResponseType.OIDCRESPONSETYPE_CODE],
[OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
]
);
// const pk_jwt = JSON.stringify(
// [
// [OIDCResponseType.OIDCRESPONSETYPE_CODE],
// [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
// OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
// ]
// );
const pk_jwt = JSON.stringify(
[
[OIDCResponseType.OIDCRESPONSETYPE_CODE],
[OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_PRIVATE_KEY_JWT,
]
);
const implicit = JSON.stringify(
[
[OIDCResponseType.OIDCRESPONSETYPE_ID_TOKEN_TOKEN],
[OIDCGrantType.OIDCGRANTTYPE_IMPLICIT],
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
]
);
const implicit = JSON.stringify(
[
[OIDCResponseType.OIDCRESPONSETYPE_ID_TOKEN_TOKEN],
[OIDCGrantType.OIDCGRANTTYPE_IMPLICIT],
OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
]
);
switch (JSON.stringify(toCheck)) {
case code: return CODE_METHOD.key;
case pkce: return PKCE_METHOD.key;
case post: return POST_METHOD.key;
// case pk_jwt: return PK_JWT_METHOD.key;
case implicit: return IMPLICIT_METHOD.key;
default:
return CUSTOM_METHOD.key;
switch (JSON.stringify(toCheck)) {
case code: return CODE_METHOD.key;
case pkce: return PKCE_METHOD.key;
case post: return POST_METHOD.key;
case pk_jwt: return PK_JWT_METHOD.key;
case implicit: return IMPLICIT_METHOD.key;
default:
return CUSTOM_METHOD.key;
}
} else if (config.api && config.api.authMethodType !== undefined) {
switch (config.api.authMethodType.toString()) {
case APIAuthMethodType.APIAUTHMETHODTYPE_PRIVATE_KEY_JWT.toString(): return PK_JWT_METHOD.key;
case APIAuthMethodType.APIAUTHMETHODTYPE_BASIC.toString(): return BASIC_AUTH_METHOD.key;
default:
return CUSTOM_METHOD.key;
}
} else {
return CUSTOM_METHOD.key;
}
}
console/src/app/pages/projects/apps/authtypes.ts
+40 -3
View File
@@ -1,25 +1,62 @@
import { OIDCApplicationType } from 'src/app/proto/generated/management_pb';
// export enum AppType {
// "WEB",
// "USER_AGENT",
// "NATIVE",
// "API"
// }
export enum AppCreateType {
API = "API",
OIDC = "OIDC"
}
export interface RadioItemAppType {
// key: string;
createType: AppCreateType;
oidcApplicationType?: OIDCApplicationType;
titleI18nKey: string;
descI18nKey: string;
prefix: string;
background: string;
}
export const WEB_TYPE = {
// key: AppType.WEB,
titleI18nKey: 'APP.OIDC.SELECTION.APPTYPE.WEB.TITLE',
descI18nKey: 'APP.OIDC.SELECTION.APPTYPE.WEB.DESCRIPTION',
type: OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB,
createType: AppCreateType.OIDC,
oidcApplicationType: OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB,
prefix: 'WEB',
background: 'rgb(80, 110, 110)',
};
export const USER_AGENT_TYPE = {
// key: AppType.USER_AGENT,
titleI18nKey: 'APP.OIDC.SELECTION.APPTYPE.USERAGENT.TITLE',
descI18nKey: 'APP.OIDC.SELECTION.APPTYPE.USERAGENT.DESCRIPTION',
type: OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT,
createType: AppCreateType.OIDC,
oidcApplicationType: OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT,
prefix: 'UA',
background: '#6a506e',
};
export const NATIVE_TYPE = {
// key: AppType.NATIVE,
titleI18nKey: 'APP.OIDC.SELECTION.APPTYPE.NATIVE.TITLE',
descI18nKey: 'APP.OIDC.SELECTION.APPTYPE.NATIVE.DESCRIPTION',
type: OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE,
createType: AppCreateType.OIDC,
oidcApplicationType: OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE,
prefix: 'N',
background: '#595d80',
};
export const API_TYPE = {
// key: AppType.API,
titleI18nKey: 'APP.API.SELECTION.TITLE',
descI18nKey: 'APP.API.SELECTION.DESCRIPTION',
createType: AppCreateType.API,
prefix: 'API',
background: 'rgb(73,73,73)',
};
console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.html
+1 -2
View File
@@ -15,8 +15,7 @@
<span class="uri"
[ngClass]="{'green': !devMode && uri?.startsWith('https://'), 'red': !devMode && !uri?.startsWith('https://')}">{{uri}}</span>
<span class="fill-space"></span>
<i *ngIf="!devMode && !uri?.startsWith('https://')" class="las la-exclamation red"></i>
<!-- <i *ngIf="!devMode && uri?.startsWith('https://')" class="las la-check green"></i> -->
<i *ngIf="!devMode && !(uri | redirect : isNative)" class="las la-exclamation red"></i>
<button matTooltip="{{'ACTIONS.DELETE' | translate}}" mat-icon-button (click)="remove(uri)" class="icon-button">
<mat-icon>cancel</mat-icon>
console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.ts
+16 -3
View File
@@ -1,24 +1,38 @@
import { Component, EventEmitter, Input, OnInit } from '@angular/core';
import { Component, EventEmitter, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable, Subscription } from 'rxjs';
@Component({
selector: 'cnsl-redirect-uris',
templateUrl: './redirect-uris.component.html',
styleUrls: ['./redirect-uris.component.scss']
})
export class RedirectUrisComponent implements OnInit {
export class RedirectUrisComponent implements OnInit, OnDestroy {
@Input() title: string = '';
@Input() devMode: boolean = false;
@Input() canWrite: boolean = false;
@Input() isNative!: boolean;
@Input() public urisList: string[] = [];
@Input() public redirectControl: FormControl = new FormControl({ value: '', disabled: true });
@Input() public changedUris: EventEmitter<string[]> = new EventEmitter();
@Input() public getValues: Observable<void> = new Observable();
@ViewChild('redInput') input!: any;
private sub: Subscription = new Subscription();
constructor() { }
ngOnInit(): void {
if (this.canWrite) {
this.redirectControl.enable();
}
this.sub = this.getValues.subscribe(() => {
this.add(this.input.nativeElement);
});
}
ngOnDestroy(): void {
this.sub.unsubscribe();
}
public add(input: any): void {
@@ -33,7 +47,6 @@ export class RedirectUrisComponent implements OnInit {
}
public remove(redirect: any): void {
console.log(redirect);
const index = this.urisList.indexOf(redirect);
if (index >= 0) {
console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html
+11 -6
View File
@@ -12,18 +12,23 @@
<div [routerLink]="['/projects', projectId, 'apps', app.id ]" class="app-wrap"
*ngFor="let app of appsSubject | async"
matTooltip="{{'APP.OIDC.APPTYPE'+app.oidcConfig.applicationType | translate}}">
<cnsl-app-card class="grid-card" matRipple [type]="app.oidcConfig?.applicationType">
matTooltip="{{'ACTIONS.EDIT' | translate}}">
<cnsl-app-card class="grid-card" matRipple [type]="app.oidcConfig?.applicationType"
[isApiApp]="app.apiConfig !== undefined">
{{ app.name.charAt(0)}}
<i *ngIf="app.oidcConfig.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE"
<i *ngIf="app.oidcConfig?.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE"
class="las la-mobile"></i>
<i *ngIf="app.oidcConfig.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB"
<i *ngIf="app.oidcConfig?.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB"
class="las la-code"></i>
<i *ngIf="app.oidcConfig.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT"
<i *ngIf="app.oidcConfig?.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT"
class="las la-code"></i>
<i *ngIf="app.apiConfig" class="las la-code"></i>
</cnsl-app-card>
<span class="name">{{app.name}}</span>
<span class="type">{{'APP.OIDC.APPTYPE'+app.oidcConfig.applicationType | translate}}</span>
<span *ngIf="app.oidcConfig?.applicationType !== undefined && app.oidcConfig?.applicationType !== null"
class="type">
{{'APP.OIDC.APPTYPE.'+app.oidcConfig?.applicationType | translate}}</span>
<span *ngIf="app.apiConfig !== undefined" class="type"> API</span>
</div>
console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html
+6 -2
View File
@@ -31,10 +31,14 @@
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'APP.OIDC.APPTYPE' | translate }} </th>
<th mat-header-cell *matHeaderCellDef> {{ 'APP.TYPE' | translate }} </th>
<td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id ]" mat-cell
*matCellDef="let app">
{{'APP.OIDC.APPTYPE'+app?.oidcConfig?.applicationType | translate}} </td>
<span *ngIf="app?.oidcConfig?.applicationType !== undefined && app?.oidcConfig?.applicationType !== null">
{{'APP.OIDC.APPTYPE.'+app?.oidcConfig?.applicationType | translate}}
</span>
<span *ngIf="app.apiConfig">API</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>