feat(console): add SAML certificate link and endpoints (#6841)

* feat(console): add SAML certificate link and endpoints

* fix: add missing translations for cs and ru

* fix: add @eliobischof review suggestions

---------

Co-authored-by: Elio Bischof <elio@zitadel.com>

console/src/app/pages/projects/apps/app-create/app-create.component.html

@@ -381,6 +381,19 @@
             </span>
           </span>
         </div>
+        <div class="row">
+          <span class="left cnsl-secondary-text">
+            {{ 'APP.SAML.CERTIFICATE' | translate }}
+          </span>
+          <a
+            *ngIf="samlCertificateURL$ | async as samlCertificateURL"
+            href="{{ samlCertificateURL }}"
+            class="cert"
+            rel="noreferrer"
+            download
+            >{{ 'APP.SAML.DOWNLOADCERT' | translate }}</a
+          >
+        </div>
       </ng-container>
 
       <div class="app-create-actions">

console/src/app/pages/projects/apps/app-create/app-create.component.scss

@@ -161,3 +161,15 @@ p.desc {
     font-size: 14px;
   }
 }
+
+.cert {
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+  font-family: inherit;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

console/src/app/pages/projects/apps/app-create/app-create.component.ts

@@ -7,7 +7,7 @@ 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 { debounceTime, map, takeUntil } from 'rxjs/operators';
 import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
 import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
 import {
@@ -28,7 +28,6 @@ import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
-import { MatLegacySlideToggleChange } from '@angular/material/legacy-slide-toggle';
 import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
 import {
   BASIC_AUTH_METHOD,
@@ -41,6 +40,7 @@ import {
   POST_METHOD,
 } from '../authmethods';
 import { API_TYPE, AppCreateType, NATIVE_TYPE, RadioItemAppType, SAML_TYPE, USER_AGENT_TYPE, WEB_TYPE } from '../authtypes';
+import { EnvironmentService } from 'src/app/services/environment.service';
 
 const MAX_ALLOWED_SIZE = 1 * 1024 * 1024;
 
@@ -119,6 +119,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
 
   public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
   public requestRedirectValuesSubject$: Subject<void> = new Subject();
+  public samlCertificateURL$ = this.envSvc.env.pipe(map((env) => `${env.issuer}/saml/v2/certificate`));
 
   constructor(
     private router: Router,
@@ -129,6 +130,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
     private fb: UntypedFormBuilder,
     private _location: Location,
     private breadcrumbService: BreadcrumbService,
+    private envSvc: EnvironmentService,
   ) {
     this.form = this.fb.group({
       name: ['', [requiredValidator]],

console/src/app/pages/projects/apps/app-detail/app-detail.component.html

@@ -414,10 +414,11 @@
           </cnsl-card>
         </ng-container>
 
-        <ng-container *ngIf="currentSetting === 'urls'">
+        <ng-container *ngIf="currentSetting === 'urls' && !app?.samlConfig">
           <cnsl-card title=" {{ 'APP.URLS' | translate }}" *ngIf="environmentMap$ | async as environmentMap">
             <cnsl-info-section *ngIf="environmentMap.issuer">
               <div
+                class="link"
                 [innerHtml]="
                   'APP.OIDC.WELLKNOWN' | translate: { url: environmentMap['issuer'] + '/.well-known/openid-configuration' }
                 "
@@ -466,6 +467,65 @@
           </cnsl-card>
         </ng-container>
 
+        <ng-container *ngIf="currentSetting === 'urls' && samlForm && app?.samlConfig">
+          <cnsl-card title=" {{ 'APP.URLS' | translate }}" *ngIf="environmentMap$ | async as environmentMap">
+            <div class="app-info-row">
+              <div class="app-info-wrapper" *ngIf="environmentMap['samlCertificateURL']">
+                <p class="app-info-row-title cnsl-secondary-text">{{ 'APP.SAML.CERTIFICATE' | translate }}</p>
+                <div class="app-copy-row">
+                  <div class="environment">
+                    <button
+                      [disabled]="copied === environmentMap['samlCertificateURL']"
+                      [matTooltip]="
+                        (copied !== environmentMap['samlCertificateURL'] ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate
+                      "
+                      cnslCopyToClipboard
+                      [valueToCopy]="environmentMap['samlCertificateURL']"
+                      (copiedValue)="copied = environmentMap['samlCertificateURL']"
+                    >
+                      {{ environmentMap['samlCertificateURL'] }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div class="app-info-wrapper" *ngIf="environmentMap['samlSSO']">
+                <p class="app-info-row-title cnsl-secondary-text">Single Sign On (SSO)</p>
+                <div class="app-copy-row">
+                  <div class="environment">
+                    <button
+                      [disabled]="copied === environmentMap['samlSSO']"
+                      [matTooltip]="(copied !== environmentMap['samlSSO'] ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
+                      cnslCopyToClipboard
+                      [valueToCopy]="environmentMap['samlSSO']"
+                      (copiedValue)="copied = environmentMap['samlSSO']"
+                    >
+                      {{ environmentMap['samlSSO'] }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div class="app-info-wrapper" *ngIf="environmentMap['samlSLO']">
+                <p class="app-info-row-title cnsl-secondary-text">Single Logoout (SLO)</p>
+                <div class="app-copy-row">
+                  <div class="environment">
+                    <button
+                      [disabled]="copied === environmentMap['samlSLO']"
+                      [matTooltip]="(copied !== environmentMap['samlSLO'] ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
+                      cnslCopyToClipboard
+                      [valueToCopy]="environmentMap['samlSLO']"
+                      (copiedValue)="copied = environmentMap['samlSLO']"
+                    >
+                      {{ environmentMap['samlSLO'] }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </cnsl-card>
+        </ng-container>
+
         <ng-container *ngIf="currentSetting === 'configuration'">
           <cnsl-card
             *ngIf="initialAuthMethod === 'PK_JWT' && projectId && app && app.id"

console/src/app/pages/projects/apps/app-detail/app-detail.component.scss

@@ -288,3 +288,14 @@
   justify-content: flex-end;
   margin-top: 1rem;
 }
+
+.link a {
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+  font-family: inherit;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

console/src/app/pages/projects/apps/app-detail/app-detail.component.ts

@@ -86,6 +86,9 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         adminServiceUrl: `${env.api}/admin/v1`,
         mgmtServiceUrl: `${env.api}/management/v1`,
         authServiceUrl: `${env.api}/auth/v1`,
+        samlCertificateURL: `${env.issuer}/saml/v2/certificate`,
+        samlSSO: `${env.issuer}/saml/v2/SSO`,
+        samlSLO: `${env.issuer}/saml/v2/SLO`,
       };
     }),
   );
@@ -351,7 +354,10 @@ export class AppDetailComponent implements OnInit, OnDestroy {
                   this.authMethods = this.authMethods.filter((element) => element !== CUSTOM_METHOD);
                 }
               } else if (this.app.samlConfig) {
-                this.settingsList = [{ id: 'configuration', i18nKey: 'APP.CONFIGURATION' }];
+                this.settingsList = [
+                  { id: 'configuration', i18nKey: 'APP.CONFIGURATION' },
+                  { id: 'urls', i18nKey: 'APP.URLS' },
+                ];
               }
 
               if (allowed) {

console/src/assets/i18n/bg.json

@@ -2086,6 +2086,8 @@
       "UPLOAD": "Качете XML файл",
       "METADATA": "Метаданни",
       "METADATAFROMFILE": "Метаданни от файл",
+      "CERTIFICATE": "SAML сертификат",
+      "DOWNLOADCERT": "Изтеглете SAML сертификат",
       "CREATEMETADATA": "Създайте метаданни",
       "ENTITYID": "Entity ID",
       "ACSURL": "ACS endpoint URL"

console/src/assets/i18n/cs.json

@@ -2104,6 +2104,8 @@
       "UPLOAD": "Nahrát XML soubor",
       "METADATA": "Metadata",
       "METADATAFROMFILE": "Metadata ze souboru",
+      "CERTIFICATE": "certifikát SAML",
+      "DOWNLOADCERT": "Stáhněte si certifikát SAML",
       "CREATEMETADATA": "Vytvořit metadata",
       "ENTITYID": "Entity ID",
       "ACSURL": "ACS koncová URL"

console/src/assets/i18n/de.json

@@ -2095,6 +2095,8 @@
       "UPLOAD": "XML-Datei hochladen",
       "METADATA": "Metadaten",
       "METADATAFROMFILE": "Metadata aus Datei",
+      "CERTIFICATE": "SAML-Zertifikat",
+      "DOWNLOADCERT": "Laden Sie das SAML-Zertifikat herunter",
       "CREATEMETADATA": "Create metadata",
       "ENTITYID": "Entity ID",
       "ACSURL": "ACS endpoint URL"

console/src/assets/i18n/en.json

@@ -2114,6 +2114,8 @@
       "UPLOAD": "Upload XML file",
       "METADATA": "Metadata",
       "METADATAFROMFILE": "Metadata from file",
+      "CERTIFICATE": "SAML certificate",
+      "DOWNLOADCERT": "Download SAML certificate",
       "CREATEMETADATA": "Create metadata",
       "ENTITYID": "Entity ID",
       "ACSURL": "ACS endpoint URL"

console/src/assets/i18n/es.json

@@ -2092,6 +2092,8 @@
       "UPLOAD": "Subir fichero XML",
       "METADATA": "Metadatos",
       "METADATAFROMFILE": "Metadatos desde un fichero",
+      "CERTIFICATE": "Certificado SAML",
+      "DOWNLOADCERT": "Descargar certificado SAML",
       "CREATEMETADATA": "Crear metadatos",
       "ENTITYID": "Entity ID",
       "ACSURL": "ACS endpoint URL"

console/src/assets/i18n/fr.json

@@ -2096,6 +2096,8 @@
       "UPLOAD": "Télécharger le fichier XML",
       "METADATA": "Métadonnées",
       "METADATAFROMFILE": "Métadonnées du fichier",
+      "CERTIFICATE": "Certificat SAML",
+      "DOWNLOADCERT": "Télécharger le certificat SAML",
       "CREATEMETADATA": "Créer des métadonnées",
       "ENTITYID": "Entity ID",
       "ACSURL": "ACS endpoint URL"

console/src/assets/i18n/it.json

@@ -2096,6 +2096,8 @@
       "UPLOAD": "Carica il file XML",
       "METADATA": "Metadata",
       "METADATAFROMFILE": "Metadati dal file",
+      "CERTIFICATE": "Certificato SAML",
+      "DOWNLOADCERT": "Scarica il certificato SAML",
       "CREATEMETADATA": "Crea metadati",
       "ENTITYID": "Entity ID",
       "ACSURL": "ACS endpoint URL"

console/src/assets/i18n/ja.json

@@ -2087,6 +2087,8 @@
       "UPLOAD": "XMLファイルをアップロードする",
       "METADATA": "メタデータ",
       "METADATAFROMFILE": "ファイルからのメタデータ",
+      "CERTIFICATE": "SAML証明書",
+      "DOWNLOADCERT": "SAML証明書をダウンロードする",
       "CREATEMETADATA": "メタデータの作成",
       "ENTITYID": "Entity ID",
       "ACSURL": "ACS endpoint URL"

console/src/assets/i18n/mk.json

@@ -2093,6 +2093,8 @@
       "UPLOAD": "Поставете XML датотека",
       "METADATA": "Метаподатоци",
       "METADATAFROMFILE": "Метаподатоци од датотека",
+      "CERTIFICATE": "SAML сертификат",
+      "DOWNLOADCERT": "Преземете SAML сертификат",
       "CREATEMETADATA": "Креирајте метаподатоци",
       "ENTITYID": "Entity ID",
       "ACSURL": "ACS endpoint URL"

console/src/assets/i18n/pl.json

@@ -2096,6 +2096,8 @@
       "UPLOAD": "Prześlij plik XML",
       "METADATA": "Metadane",
       "METADATAFROMFILE": "Metadane z pliku",
+      "CERTIFICATE": "Certyfikat SAML-a",
+      "DOWNLOADCERT": "Pobierz certyfikat SAML",
       "CREATEMETADATA": "Utwórz metadane",
       "ENTITYID": "Entity ID",
       "ACSURL": "ACS endpoint URL"

console/src/assets/i18n/pt.json

@@ -2091,6 +2091,8 @@
       "UPLOAD": "Prześlij plik XML",
       "METADATA": "Metadados",
       "METADATAFROMFILE": "Metadados do Arquivo",
+      "CERTIFICATE": "Certificado SAML",
+      "DOWNLOADCERT": "Baixar certificado SAML",
       "CREATEMETADATA": "Criar metadados",
       "ENTITYID": "Entity ID",
       "ACSURL": "ACS endpoint URL"

console/src/assets/i18n/ru.json

@@ -2084,7 +2084,12 @@
       "OR": "или",
       "XML": "Загрузить XML-метаданные",
       "METADATA": "Метаданные",
-      "METADATAFROMFILE": "Метаданные из файла"
+      "METADATAFROMFILE": "Метаданные из файла",
+      "CERTIFICATE": "SAML-сертификат",
+      "DOWNLOADCERT": "Скачать сертификат SAML",
+      "CREATEMETADATA": "Создать метаданные",
+      "ENTITYID": "Идентификатор объекта",
+      "ACSURL": "URL-адрес конечной точки ACS"
     },
     "AUTHMETHODS": {
       "CODE": {

console/src/assets/i18n/zh.json

@@ -2095,6 +2095,8 @@
       "UPLOAD": "上传 XML 文件",
       "METADATA": "元数据",
       "METADATAFROMFILE": "文件中的元数据",
+      "CERTIFICATE": "SAML证书",
+      "DOWNLOADCERT": "下载 SAML 证书",
       "CREATEMETADATA": "创建元数据",
       "ENTITYID": "Entity ID",
       "ACSURL": "ACS endpoint URL"