feat(swagger): handle redirects from OIDC IdP and initialize swagger

[andrewwylde]

This is related to this PR to investigate enabling some of the methods available for OAuth2 Try It Out Authorization in swagger-ui using our spec renderer.

Please see https://gist.github.com/andrewwylde/d47c94c7629a81a0232ac80ef862e788 for setup.

[nateslo]

Is it possible to use this.$route.query to get the params?

[Mierenga]

This algorithm won't be able to handle params that don't have a value (e.g., query params strings like a=z&x).

I think it would be better to have an algorithm like

Suggested change

	const arr = qp.split('&')
	arr.forEach(function (v, i, _arr) { _arr[i] = '"' + v.replace('=', '":"') + '"' })
	qp = qp
	? JSON.parse('{' + arr.join() + '}',
	function (key, value) {
	return key === '' ? value : decodeURIComponent(value)
	}
	)
	: {}
	qp = Object.fromEntries(qp.split('&').map(param => param.split('=')))

or if possible use another way of accessing query params on the route as Nate commented.

[andrewwylde]

Yeah makes sense, this was a direct lift from the helper functions in swagger-ui. I'll port it over to be more vue-friendly and hopefully catch more edge cases.

[andrewwylde]

How does this look, @Mierenga ? I think this should pretty safely account for both cases as well as empty

// called with $route.hash or $route.query
const parseRouteData = (routeData: string | LocationQuery): Record<string, string> => {
  if (!routeData) return {};

  // handle locationQuery
  if (typeof routeData === 'object') {
    // decode any URI components:
    const routeDataDecoded = Object.keys(routeData).reduce((acc, key) => {
      acc[key] = decodeURIComponent(routeData[key].toString())
      return acc
    }, {})
    return routeDataDecoded
  }

  const data = routeData.startsWith('#') ? routeData.substring(1) : routeData;
  const pairs = data.split('&');
  const result = {};

  pairs.forEach(pair => {
    const [key, value] = pair.split('=');
    result[key] = decodeURIComponent(value);
  });

  return result;
};

Meaning that:

window.open('http://localhost:5173/spec/8c655d31-0c89-4660-96d0-829dd92f9e98/oauth2-redirect.html?a=z&x')

const routeHashData = parseRouteData($route.hash);
const routeQueryData = parseRouteData($route.query);
const routeData = { ...routeHashData, ...routeQueryData };

// routeData becomes `{a:'z',x:''}`

[andrewwylde]

OK, should be ready for re-review @Mierenga @nateslo @425devon

[Mierenga]

LGTM, thanks for clarifying things with the refactor