-
+
+
{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}
- [
+ [
{{ redirect }}
- {{ i < oidcAppRequest.postLogoutRedirectUrisList.length - 1 ? ', ' : '' }} ]
-
-
+
+
{{ 'APP.AUTHMETHOD' | translate }}
- {{ 'APP.API.AUTHMETHOD.' + apiAppRequest.authMethodType | translate }}
+ {{ 'APP.API.AUTHMETHOD.' + authMethodType?.value | translate }}
+
+
+
+
+
+
+
+
+ {{ 'APP.SAML.METADATA' | translate }}
+
+
+
+ {{ metadataUrl?.value }}
+
+
+ {{ 'APP.SAML.METADATAFROMFILE' | translate }}
@@ -278,15 +374,56 @@
-
- {{ 'APP.AUTHMETHOD' | translate }}
-
-
- {{ 'APP.OIDC.AUTHMETHOD.' + type.type | translate }}
- {{ 'APP.API.AUTHMETHOD.' + type.type | translate }}
-
-
-
+
+
+ {{ 'APP.AUTHMETHOD' | translate }}
+
+
+ {{ 'APP.OIDC.AUTHMETHOD.' + type.type | translate }}
+ {{ 'APP.API.AUTHMETHOD.' + type.type | translate }}
+
+
+
+
+
+
+
+
+ {{ 'APP.SAML.URL' | translate }}
+
+
+
+
{{ 'APP.SAML.OR' | translate }}
+
+
+
+
+
+
+
+
@@ -294,22 +431,22 @@
diff --git a/console/src/app/pages/projects/apps/app-create/app-create.component.scss b/console/src/app/pages/projects/apps/app-create/app-create.component.scss
index a040ea3e50..9a5baa1ec5 100644
--- a/console/src/app/pages/projects/apps/app-create/app-create.component.scss
+++ b/console/src/app/pages/projects/apps/app-create/app-create.component.scss
@@ -61,6 +61,10 @@ p.desc {
}
}
+.cnsl-app-or {
+ margin-right: 1rem;
+}
+
.row {
display: flex;
justify-content: space-between;
@@ -72,10 +76,20 @@ p.desc {
}
}
+.saml-xml {
+ margin-top: 2rem;
+
+ &.disabled {
+ opacity: 0.5;
+ pointer-events: none;
+ }
+}
+
.app-create-actions {
- margin-top: 1rem;
+ margin-top: 2rem;
display: flex;
align-items: center;
+ justify-content: space-between;
.bck-button {
margin-right: 1rem;
@@ -102,6 +116,12 @@ p.desc {
flex-basis: 80%;
}
}
+
+ .saml {
+ display: block;
+ width: 100%;
+ margin: 0 0.5rem;
+ }
}
.continue-button {
diff --git a/console/src/app/pages/projects/apps/app-create/app-create.component.ts b/console/src/app/pages/projects/apps/app-create/app-create.component.ts
index 0d9d12cc18..caf0cefa49 100644
--- a/console/src/app/pages/projects/apps/app-create/app-create.component.ts
+++ b/console/src/app/pages/projects/apps/app-create/app-create.component.ts
@@ -5,6 +5,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Buffer } from 'buffer';
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';
@@ -14,12 +15,14 @@ import {
OIDCAuthMethodType,
OIDCGrantType,
OIDCResponseType,
+ SAMLConfig,
} from 'src/app/proto/generated/zitadel/app_pb';
import {
AddAPIAppRequest,
AddAPIAppResponse,
AddOIDCAppRequest,
AddOIDCAppResponse,
+ AddSAMLAppRequest,
} from 'src/app/proto/generated/zitadel/management_pb';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
@@ -35,7 +38,9 @@ import {
PKCE_METHOD,
POST_METHOD,
} from '../authmethods';
-import { API_TYPE, AppCreateType, NATIVE_TYPE, RadioItemAppType, USER_AGENT_TYPE, WEB_TYPE } from '../authtypes';
+import { API_TYPE, AppCreateType, NATIVE_TYPE, RadioItemAppType, SAML_TYPE, USER_AGENT_TYPE, WEB_TYPE } from '../authtypes';
+
+const MAX_ALLOWED_SIZE = 1 * 1024 * 1024;
@Component({
selector: 'cnsl-app-create',
@@ -49,11 +54,11 @@ export class AppCreateComponent implements OnInit, OnDestroy {
public projectId: string = '';
public loading: boolean = false;
- public createSteps: number = 4;
public currentCreateStep: number = 1;
- public oidcAppRequest: AddOIDCAppRequest.AsObject = new AddOIDCAppRequest().toObject();
- public apiAppRequest: AddAPIAppRequest.AsObject = new AddAPIAppRequest().toObject();
+ public oidcAppRequest: AddOIDCAppRequest = new AddOIDCAppRequest();
+ public apiAppRequest: AddAPIAppRequest = new AddAPIAppRequest();
+ public samlAppRequest: AddSAMLAppRequest = new AddSAMLAppRequest();
public oidcResponseTypes: { type: OIDCResponseType; checked: boolean; disabled: boolean }[] = [
{ type: OIDCResponseType.OIDC_RESPONSE_TYPE_CODE, checked: false, disabled: false },
@@ -66,7 +71,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
OIDCAppType.OIDC_APP_TYPE_NATIVE,
OIDCAppType.OIDC_APP_TYPE_USER_AGENT,
];
- public appTypes: any = [WEB_TYPE, NATIVE_TYPE, USER_AGENT_TYPE, API_TYPE];
+ public appTypes: any = [WEB_TYPE, NATIVE_TYPE, USER_AGENT_TYPE, API_TYPE, SAML_TYPE];
public authMethods: RadioItemAuthType[] = [PKCE_METHOD, CODE_METHOD, PK_JWT_METHOD, POST_METHOD];
@@ -84,8 +89,12 @@ export class AppCreateComponent implements OnInit, OnDestroy {
];
// stepper
- firstFormGroup!: UntypedFormGroup;
- secondFormGroup!: UntypedFormGroup;
+ public firstFormGroup!: UntypedFormGroup;
+ public secondFormGroup!: UntypedFormGroup;
+ public samlConfigForm!: UntypedFormGroup;
+
+ public redirectUrisList: string[] = [];
+ public postLogoutRedirectUrisList: string[] = [];
// devmode
public form!: UntypedFormGroup;
@@ -121,10 +130,13 @@ export class AppCreateComponent implements OnInit, OnDestroy {
) {
this.form = this.fb.group({
name: ['', [Validators.required]],
- responseTypesList: ['', [Validators.required]],
- grantTypesList: ['', [Validators.required]],
appType: ['', [Validators.required]],
- authMethodType: ['', [Validators.required]],
+ // apptype OIDC
+ responseTypesList: ['', []],
+ grantTypesList: ['', []],
+ authMethodType: ['', []],
+ // apptype SAML
+ metadataUrl: ['', []],
});
this.initForm();
@@ -134,25 +146,30 @@ export class AppCreateComponent implements OnInit, OnDestroy {
appType: [WEB_TYPE, [Validators.required]],
});
+ this.samlConfigForm = this.fb.group({
+ metadataUrl: ['', []],
+ });
+
this.firstFormGroup.valueChanges.subscribe((value) => {
if (this.firstFormGroup.valid) {
- this.oidcAppRequest.name = this.name?.value;
- this.apiAppRequest.name = this.name?.value;
+ this.oidcAppRequest.setName(this.name?.value);
+ this.apiAppRequest.setName(this.name?.value);
+ this.samlAppRequest.setName(this.name?.value);
if (this.isStepperOIDC) {
const oidcAppType = (this.appType?.value as RadioItemAppType).oidcAppType;
if (oidcAppType !== undefined) {
- this.oidcAppRequest.appType = oidcAppType;
+ this.oidcAppRequest.setAppType(oidcAppType);
}
- switch (this.oidcAppRequest.appType) {
+ switch (this.appType?.value.oidcAppType) {
case OIDCAppType.OIDC_APP_TYPE_NATIVE:
this.authMethods = [PKCE_METHOD];
// automatically set to PKCE and skip step
- this.oidcAppRequest.responseTypesList = [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE];
- this.oidcAppRequest.grantTypesList = [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE];
- this.oidcAppRequest.authMethodType = OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE;
+ this.oidcAppRequest.setResponseTypesList([OIDCResponseType.OIDC_RESPONSE_TYPE_CODE]);
+ this.oidcAppRequest.setGrantTypesList([OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE]);
+ this.oidcAppRequest.setAuthMethodType(OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE);
break;
case OIDCAppType.OIDC_APP_TYPE_WEB:
@@ -179,19 +196,28 @@ export class AppCreateComponent implements OnInit, OnDestroy {
this.secondFormGroup = this.fb.group({
authMethod: [this.authMethods[0].key, [Validators.required]],
});
+
this.secondFormGroup.valueChanges.subscribe((form) => {
const partialConfig = getPartialConfigFromAuthMethod(form.authMethod);
if (this.isStepperOIDC && partialConfig && partialConfig.oidc) {
- this.oidcAppRequest.responseTypesList = partialConfig.oidc?.responseTypesList ?? [];
+ this.oidcAppRequest.setResponseTypesList(partialConfig.oidc?.responseTypesList ?? []);
- this.oidcAppRequest.grantTypesList = partialConfig.oidc?.grantTypesList ?? [];
+ this.oidcAppRequest.setGrantTypesList(partialConfig.oidc?.grantTypesList ?? []);
- this.oidcAppRequest.authMethodType =
- partialConfig.oidc?.authMethodType ?? OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE;
+ this.oidcAppRequest.setAuthMethodType(
+ partialConfig.oidc?.authMethodType ?? OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
+ );
} else if (this.isStepperAPI && partialConfig && partialConfig.api) {
- this.apiAppRequest.authMethodType =
- partialConfig.api?.authMethodType ?? APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC;
+ this.apiAppRequest.setAuthMethodType(
+ partialConfig.api?.authMethodType ?? APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC,
+ );
+ }
+ });
+
+ this.samlConfigForm.valueChanges.subscribe((form) => {
+ if (form.metadataUrl && form.metadataUrl.length > 0) {
+ this.samlAppRequest.setMetadataUrl(form.metadataUrl);
}
});
}
@@ -225,18 +251,23 @@ export class AppCreateComponent implements OnInit, OnDestroy {
public initForm(): void {
this.form.valueChanges.pipe(takeUntil(this.destroyed$), debounceTime(150)).subscribe(() => {
- this.oidcAppRequest.name = this.formname?.value;
- this.apiAppRequest.name = this.formname?.value;
+ this.oidcAppRequest.setName(this.formname?.value);
+ this.apiAppRequest.setName(this.formname?.value);
+ this.samlAppRequest.setName(this.formname?.value);
- this.oidcAppRequest.responseTypesList = this.formresponseTypesList?.value;
- this.oidcAppRequest.grantTypesList = this.formgrantTypesList?.value;
+ this.oidcAppRequest.setResponseTypesList(this.formresponseTypesList?.value);
+ this.oidcAppRequest.setGrantTypesList(this.grantTypesList?.value);
- this.oidcAppRequest.authMethodType = this.formauthMethodType?.value;
- this.apiAppRequest.authMethodType = this.formauthMethodType?.value;
+ this.oidcAppRequest.setAuthMethodType(this.authMethodType?.value);
+ this.apiAppRequest.setAuthMethodType(this.authMethodType?.value);
+
+ if (this.formMetadataUrl?.value) {
+ this.samlAppRequest.setMetadataUrl(this.formMetadataUrl?.value);
+ }
const oidcAppType = (this.formappType?.value as RadioItemAppType).oidcAppType;
if (oidcAppType !== undefined) {
- this.oidcAppRequest.appType = oidcAppType;
+ this.oidcAppRequest.setAppType(oidcAppType);
}
});
@@ -282,17 +313,41 @@ export class AppCreateComponent implements OnInit, OnDestroy {
private async getData({ projectid }: Params): Promise {
this.projectId = projectid;
- this.oidcAppRequest.projectId = projectid;
- this.apiAppRequest.projectId = projectid;
+ this.oidcAppRequest.setProjectId(projectid);
+ this.apiAppRequest.setProjectId(projectid);
+ this.samlAppRequest.setProjectId(projectid);
}
public close(): void {
this._location.back();
}
+ public onDropXML(filelist: FileList): void {
+ const file = filelist.item(0);
+ this.metadataUrl?.setValue('');
+ if (file) {
+ if (file.size > MAX_ALLOWED_SIZE) {
+ this.toast.showInfo('POLICY.PRIVATELABELING.MAXSIZEEXCEEDED', true);
+ } else {
+ const reader = new FileReader();
+ reader.onload = ((aXML) => {
+ return (e) => {
+ const xmlBase64 = e.target?.result;
+ if (xmlBase64 && typeof xmlBase64 === 'string') {
+ const cropped = xmlBase64.replace('data:text/xml;base64,', '');
+ this.samlAppRequest.setMetadataXml(cropped);
+ }
+ };
+ })(file);
+ reader.readAsDataURL(file);
+ }
+ }
+ }
+
public createApp(): void {
const appOIDCCheck = this.devmode ? this.isDevOIDC : this.isStepperOIDC;
const appAPICheck = this.devmode ? this.isDevAPI : this.isStepperAPI;
+ const appSAMLCheck = this.devmode ? this.isDevSAML : this.isStepperSAML;
if (appOIDCCheck) {
this.requestRedirectValuesSubject$.next();
@@ -331,6 +386,19 @@ export class AppCreateComponent implements OnInit, OnDestroy {
this.loading = false;
this.toast.showError(error);
});
+ } else if (appSAMLCheck) {
+ this.loading = true;
+ this.toast.showInfo('APP.TOAST.CREATED', true);
+ this.mgmtService
+ .addSAMLApp(this.samlAppRequest)
+ .then((resp) => {
+ this.loading = false;
+ this.router.navigate(['projects', this.projectId, 'apps', resp.appId]);
+ })
+ .catch((error) => {
+ this.loading = false;
+ this.toast.showError(error);
+ });
}
}
@@ -381,19 +449,27 @@ export class AppCreateComponent implements OnInit, OnDestroy {
get formname(): AbstractControl | null {
return this.form.get('name');
}
+
get formresponseTypesList(): AbstractControl | null {
return this.form.get('responseTypesList');
}
- get formgrantTypesList(): AbstractControl | null {
+
+ get grantTypesList(): AbstractControl | null {
return this.form.get('grantTypesList');
}
+
get formappType(): AbstractControl | null {
return this.form.get('appType');
}
+
+ get formMetadataUrl(): AbstractControl | null {
+ return this.form.get('metadataUrl');
+ }
// get formapplicationType(): AbstractControl | null {
// return this.form.get('applicationType');
// }
- get formauthMethodType(): AbstractControl | null {
+
+ get authMethodType(): AbstractControl | null {
return this.form.get('authMethodType');
}
@@ -409,7 +485,35 @@ export class AppCreateComponent implements OnInit, OnDestroy {
return (this.formappType?.value as RadioItemAppType).createType === AppCreateType.API;
}
+ get isDevSAML(): boolean {
+ return (this.formappType?.value as RadioItemAppType).createType === AppCreateType.SAML;
+ }
+
get isStepperAPI(): boolean {
return (this.appType?.value as RadioItemAppType).createType === AppCreateType.API;
}
+
+ get isStepperSAML(): boolean {
+ return (this.appType?.value as RadioItemAppType).createType === AppCreateType.SAML;
+ }
+
+ get decodedBase64(): string {
+ const samlReq = this.samlAppRequest.toObject();
+ if (samlReq && samlReq.metadataXml && typeof samlReq.metadataXml === 'string') {
+ return Buffer.from(samlReq.metadataXml, 'base64').toString('ascii');
+ } else {
+ return '';
+ }
+ }
+
+ set decodedBase64(xmlString) {
+ if (this.samlAppRequest) {
+ const base64 = Buffer.from(xmlString, 'ascii').toString('base64');
+ this.samlAppRequest.setMetadataXml(base64);
+ }
+ }
+
+ public get metadataUrl(): AbstractControl | null {
+ return this.samlConfigForm.get('metadataUrl');
+ }
}
diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
index 78688eed71..1feab1b10c 100644
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
@@ -2,7 +2,7 @@
title="{{ app?.name }}"
[hasActions]="isZitadel === false && (['project.app.write:' + projectId, 'project.app.write'] | hasRole | async)"
docLink="https://docs.zitadel.com/docs/guides/basics/projects"
- [sub]="app?.oidcConfig ? ('APP.OIDC.APPTYPE.' + app?.oidcConfig?.appType | translate) : 'API'"
+ [sub]="app?.oidcConfig ? ('APP.OIDC.APPTYPE.' + app?.oidcConfig?.appType | translate) : app?.apiConfig ? 'API' : 'SAML'"
[isActive]="app?.state === AppState.APP_STATE_ACTIVE"
[isInactive]="app?.state === AppState.APP_STATE_INACTIVE"
stateTooltip="{{ 'APP.PAGES.DETAIL.STATE.' + app?.state | translate }}"
@@ -156,6 +156,60 @@