ststeiger/testSAML.htm

## testSAML.htm
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />

    <!--
http://localhost:10004/Kamikatze/ajax/testSAML.htm
    -->


    <title>Fetch Request Example</title>

    <style type="text/css" media="all">
        /*<![CDATA[*/

        html, body
        {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        /*]]>*/
    </style>

</head>
<body>
    <div style="padding-left: 1cm; padding-top: 1cm;">
        <h1>Fetch Request Example</h1>
    </div>
    <script>
        //<![CDATA[

        // sections: get, form, header, server, cookie

        var httpLog = {
            "data": {
                "header": {
                    "item": [
                        {
                            "key": "ShibIdentityProvider",
                            "value": "https://sts.windows.net/00000000-0000-0000-0000-000000000000/"
                        },
                        {
                            "key": "account",
                            "value": "max.mustermann@example.com"
                        },
                        {
                            "key": "emailaddress",
                            "value": "max.mustermann@example.com"
                        },
                        {
                            "key": "givenname",
                            "value": "Max"
                        },
                        {
                            "key": "groups",
                            "value": "Superuser;Portfolio_Austria;AllUsers;Portfolio_Germany;Portfolio_Switzerland"
                        },
                        {
                            "key": "surname",
                            "value": "Mustermann"
                        }
                    ]
                }
                , "get": {}
                // , "get": { "param1": "value1", "param2": "value2" }

                , "form": {}
                // , "form": { "param_1": "value_1", "param_2": "value_2" , "param_3": "value_3" }

                , "cookie": {
                    "item": {
                        "key": "auth_cookie_1_name",
                        "value": "value_of_auth_cookie_1"
                    }
                }
            }
        };


        window.devtoolsFormatters = [
            {
                // Formatter for FormData objects
                header: function (obj)
                {
                    if (obj instanceof FormData)
                    {
                        // https://mdigi.tools/darken-color/#f5f5dc
                        if (Array.from(obj.entries()).length == 0) // #FFFFE1 beige: #F5F5DC
                            return ["div", { "style": "padding: 2px; background-color: #efefab; font-weight: bold; " }, "Empty FormData Object"];

                        const formDataTable = [
                            "table",
                            {},
                            ["tr", { "style": "background-color: #5b9bd5; color: #FFF; font-weight: bold;" },
                                ["td", { "style": "padding: 1mm; " }, "Key"],
                                ["td", { "style": "padding: 1mm; " }, "Value"]
                            ],
                            ...Array.from(obj.entries()).map(([key, value], index) =>
                            {
                                // Alternate row colors based on index
                                const rowColor = index % 2 === 0 ? "#DCE6F1" : "ivory";
                                return ["tr", { "style": `background-color: ${rowColor};` },
                                    ["td", { "style": "padding: 1mm; padding-right: 5mm; " }, key],
                                    ["td", { "style": "padding: 1mm; padding-right: 5mm; " }, value]
                                ];
                            })
                        ];

                        return formDataTable;
                    } else
                    {
                        return null;
                    }
                },
                hasBody: function ()
                {
                    return false; // FormData object doesn't need to display additional details
                }
            },
            {
                // Formatter for Headers objects
                header: function (obj)
                {
                    if (obj instanceof Headers)
                    {
                        // return ["div", { "style": "background-color: hotpink;" }, "headers Object"];
                        if (Array.from(obj.entries()).length == 0)
                            return ["div", { "style": "padding: 2px; background-color: #efefab; font-weight: bold; " }, "Empty Headers Object"];

                        const headersTable = [
                            "table",
                            {},
                            ["tr", { "style": "background-color: #5b9bd5; color: #FFF; font-weight: bold;" },
                                ["td", { "style": "padding: 1mm; " }, "Key"],
                                ["td", { "style": "padding: 1mm; " }, "Value"]
                            ],
                            ...Array.from(obj.entries()).map(([key, value], index) =>
                            {
                                // Alternate row colors based on index
                                const rowColor = index % 2 === 0 ? "#DCE6F1" : "ivory";
                                return ["tr", { "style": `background-color: ${rowColor};` },
                                    ["td", { "style": "padding: 1mm; padding-right: 5mm; "}, key],
                                    ["td", { "style": "padding: 1mm; padding-right: 5mm; "}, value]
                                ];
                            })
                        ];
                        return headersTable;
                    } else
                    {
                        return null;
                    }
                },
                hasBody: function ()
                {
                    return false; // Headers object doesn't need to display additional details
                }
            }
        ];


        async function testSAML()
        {
            try
            {
                const url = 'SAML.ashx'; // Replace with your URL

                const queryParams = new URLSearchParams(httpLog.data.get).toString();
                const queryString = queryParams ? '?' + queryParams : '';

                const headers = new Headers();

                httpLog.data.header.item.forEach(item =>
                {
                    // console.log("adding", item.key, item.value);
                    headers.append(item.key, item.value);
                });

                const formData = new FormData();
                Object.entries(httpLog.data.form).forEach(([key, value]) =>
                {
                    formData.append(key, value);
                });

                const options = {
                    method: 'POST', // Change method to 'POST'
                    headers: headers,
                    credentials: 'include', // Include cookies
                    body: formData // Attach form data to the request body
                };


                let uri = url + queryString;
                console.log("fetchUrl:", uri, "options", options);

                console.log(formData);
                console.log(headers);

                let res = await fetch(uri, options);
                console.log("res", res);

                // Output response status and status message
                console.log('Response status:', res.status);
                console.log('Response status message:', res.statusText);

                // Output response headers as JSON
                const headersAsJson = {};
                res.headers.forEach((value, key) =>
                {
                    headersAsJson[key] = value;
                });
                console.log('Response headers:', JSON.stringify(headersAsJson, null, 2));

                // Output response body as text if present
                const responseBody = await res.text();
                if (responseBody)
                {
                    console.log('Response body:', responseBody);
                }
            }
            catch (err)
            {
                console.log("err", err);
            }

        }

        testSAML();
        //]]>
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />

	<!--
	http://localhost:10004/Kamikatze/ajax/testSAML.htm
	-->


	<title>Fetch Request Example</title>

	<style type="text/css" media="all">
	/<![CDATA[/

	html, body
	{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	/]]>/
	</style>

	</head>
	<body>
	<div style="padding-left: 1cm; padding-top: 1cm;">
	<h1>Fetch Request Example</h1>
	</div>
	<script>
	//<![CDATA[

	// sections: get, form, header, server, cookie

	var httpLog = {
	"data": {
	"header": {
	"item": [
	{
	"key": "ShibIdentityProvider",
	"value": "https://sts.windows.net/00000000-0000-0000-0000-000000000000/"
	},
	{
	"key": "account",
	"value": "max.mustermann@example.com"
	},
	{
	"key": "emailaddress",
	"value": "max.mustermann@example.com"
	},
	{
	"key": "givenname",
	"value": "Max"
	},
	{
	"key": "groups",
	"value": "Superuser;Portfolio_Austria;AllUsers;Portfolio_Germany;Portfolio_Switzerland"
	},
	{
	"key": "surname",
	"value": "Mustermann"
	}
	]
	}
	, "get": {}
	// , "get": { "param1": "value1", "param2": "value2" }

	, "form": {}
	// , "form": { "param_1": "value_1", "param_2": "value_2" , "param_3": "value_3" }

	, "cookie": {
	"item": {
	"key": "auth_cookie_1_name",
	"value": "value_of_auth_cookie_1"
	}
	}
	}
	};


	window.devtoolsFormatters = [
	{
	// Formatter for FormData objects
	header: function (obj)
	{
	if (obj instanceof FormData)
	{
	// https://mdigi.tools/darken-color/#f5f5dc
	if (Array.from(obj.entries()).length == 0) // #FFFFE1 beige: #F5F5DC
	return ["div", { "style": "padding: 2px; background-color: #efefab; font-weight: bold; " }, "Empty FormData Object"];

	const formDataTable = [
	"table",
	{},
	["tr", { "style": "background-color: #5b9bd5; color: #FFF; font-weight: bold;" },
	["td", { "style": "padding: 1mm; " }, "Key"],
	["td", { "style": "padding: 1mm; " }, "Value"]
	],
	...Array.from(obj.entries()).map(([key, value], index) =>
	{
	// Alternate row colors based on index
	const rowColor = index % 2 === 0 ? "#DCE6F1" : "ivory";
	return ["tr", { "style": `background-color: ${rowColor};` },
	["td", { "style": "padding: 1mm; padding-right: 5mm; " }, key],
	["td", { "style": "padding: 1mm; padding-right: 5mm; " }, value]
	];
	})
	];

	return formDataTable;
	} else
	{
	return null;
	}
	},
	hasBody: function ()
	{
	return false; // FormData object doesn't need to display additional details
	}
	},
	{
	// Formatter for Headers objects
	header: function (obj)
	{
	if (obj instanceof Headers)
	{
	// return ["div", { "style": "background-color: hotpink;" }, "headers Object"];
	if (Array.from(obj.entries()).length == 0)
	return ["div", { "style": "padding: 2px; background-color: #efefab; font-weight: bold; " }, "Empty Headers Object"];

	const headersTable = [
	"table",
	{},
	["tr", { "style": "background-color: #5b9bd5; color: #FFF; font-weight: bold;" },
	["td", { "style": "padding: 1mm; " }, "Key"],
	["td", { "style": "padding: 1mm; " }, "Value"]
	],
	...Array.from(obj.entries()).map(([key, value], index) =>
	{
	// Alternate row colors based on index
	const rowColor = index % 2 === 0 ? "#DCE6F1" : "ivory";
	return ["tr", { "style": `background-color: ${rowColor};` },
	["td", { "style": "padding: 1mm; padding-right: 5mm; "}, key],
	["td", { "style": "padding: 1mm; padding-right: 5mm; "}, value]
	];
	})
	];
	return headersTable;
	} else
	{
	return null;
	}
	},
	hasBody: function ()
	{
	return false; // Headers object doesn't need to display additional details
	}
	}
	];


	async function testSAML()
	{
	try
	{
	const url = 'SAML.ashx'; // Replace with your URL

	const queryParams = new URLSearchParams(httpLog.data.get).toString();
	const queryString = queryParams ? '?' + queryParams : '';

	const headers = new Headers();

	httpLog.data.header.item.forEach(item =>
	{
	// console.log("adding", item.key, item.value);
	headers.append(item.key, item.value);
	});

	const formData = new FormData();
	Object.entries(httpLog.data.form).forEach(([key, value]) =>
	{
	formData.append(key, value);
	});

	const options = {
	method: 'POST', // Change method to 'POST'
	headers: headers,
	credentials: 'include', // Include cookies
	body: formData // Attach form data to the request body
	};



	let uri = url + queryString;
	console.log("fetchUrl:", uri, "options", options);

	console.log(formData);
	console.log(headers);

	let res = await fetch(uri, options);
	console.log("res", res);

	// Output response status and status message
	console.log('Response status:', res.status);
	console.log('Response status message:', res.statusText);

	// Output response headers as JSON
	const headersAsJson = {};
	res.headers.forEach((value, key) =>
	{
	headersAsJson[key] = value;
	});
	console.log('Response headers:', JSON.stringify(headersAsJson, null, 2));

	// Output response body as text if present
	const responseBody = await res.text();
	if (responseBody)
	{
	console.log('Response body:', responseBody);
	}
	}
	catch (err)
	{
	console.log("err", err);
	}

	}

	testSAML();
	//]]>
	</script>
	</body>
	</html>