This requires the client to provide a signed key in lieu of having the client secret accessible to every user in a Basic header. I found this nice GitHub sample on implementing using ES6 JS:
This works perfectly from Chrome on my laptop. However, when I embed this code into a WebView component so that it works on iOS, I get an error in the preview app:
The issue seems to be that crypto.subtle is undefined because iOS WebView uses Safari, and it only supports the subtle API in secure contexts (Crypto.subtle - Web APIs | MDN).
So you’ll only have access to the API on a page loaded under https, not in e.g. locally defined html. Unfortunately crypto.subtle does not seem to be available in the general engine (JavaScriptCore) outside the WebView context either, so that leaves few options.
I’d suggest one of the following:
Host a page that generates the verifier and challenge for the host app with the subtle API, and point the WebView there initially. The code is still run on the client, but should work now if the page is loaded under https.
Do the challenge hashing remotely through an API if you have access to or can create one.
If you’re comfortable with JS, use a shim or polyfill for the digest API (or another implementation).
This should be easier than it is currently, and would be great to have as a formula for example. But for having something working right now, I’d look at one of the alternative methods.