如何在客户端以角度方式解码SAML？

Question

我有 SAML 代码。

PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj48L25zMzpSZXNwb25zZT4=

我需要对其进行解码并使用角度获取值。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.scss']
})
export class LandingComponent implements OnInit {
  concatenatedCookie: string = '';
  decodedSAMLResponse: string = '';

  constructor() { }

  ngOnInit(): void {
    let mergedSamlResponse = '';


    for (let i = 0; i <= 5; i++) {
      const samlResponse = this.getCookie(`SAMLResponse_${i}`);
      mergedSamlResponse += samlResponse;
    }

    console.log('mergedSamlResponse' + mergedSamlResponse);

    // Assign the concatenated cookie value to the concatenatedCookie property
    this.concatenatedCookie = mergedSamlResponse;

    this.decodedSAMLResponse = atob(mergedSamlResponse);

    // this.decodedSAMLResponse = decodeURIComponent(base64EncodedData);

  }

  // Function to retrieve cookie by name
  getCookie(name: string): string {
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
      const [cookieName, cookieValue] = cookie.split('=');
      if (cookieName.trim() === name) {
        return cookieValue;
      }
    }
    return '';
  }
}

SAML 位于

mergedSamlResponse

变量中。 我使用了

decodeURIComponent

，但它不起作用。

Answer 1

这是您要找的吗？我正在使用该包

saml2js

您需要执行一个步骤才能在角度中使用它

  "compilerOptions": {
    ...
    "noImplicitAny": false,
    ...

完整代码

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import Saml2js from 'saml2js';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
  `,
})
export class App {
  name = 'Angular';

  ngOnInit() {
    const SAMLResponse =
      'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj48L25zMzpSZXNwb25zZT4=';
    const parser = new Saml2js(SAMLResponse);

    const assertion = parser.parse(SAMLResponse);
    console.log(assertion);
  }
}

bootstrapApplication(App);

堆栈闪电战