source: Klonkt/src/assets/js/mod/paid-gate.js@ 59f404a

main
Last change on this file since 59f404a was 59f404a, checked in by Robin <roboburr@…>, 4 days ago

De laatste twee scripts uit gewisselde inhoud (shaer-0i6)

shaer-bqr haalde de eigen logica van paid-gate en paid-passkey al uit de
pagina naar een module, maar liet de WebAuthn-bibliotheek als losse tag in
de body staan. Beide pagina's gaan via renderPage, dus bij een navigatie
binnen de site komen ze als fragment binnen -- met de nonce van dat
verzoek, die het al geladen document niet kent. Precies de vorm die Bart
destijds gemeld zag.

Het gevolg was stil: de module laadde wel, vond window.SimpleWebAuthn-
Browser niet, en viel terug op "geen WebAuthn hier". De passkey-knop deed
niets; de ontgrendelknop verdween. Alleen na een harde herlading werkte
het, en dat is precies waarom dit lang onzichtbaar bleef.

De modules halen de bibliotheek nu zelf op met loadWebAuthn() in lib.js.
Een dynamische import vanuit een module die de shell met een geldige nonce
startte is toegestaan -- daar is strict-dynamic voor. De UMD-bundel zet
zichzelf zonder CommonJS of AMD op globalThis, dus de global staat er na
afloop. init() wacht erop voordat hij bedraadt, anders zet de terugval de
knop uit terwijl er niets aan de hand is.

Verder nagelopen wat nog meer een scripttag draagt: vijf views hebben er
een van type application/json (een datablok, dat voert de browser nooit
uit) en twee gaan via res.render in plaats van renderPage -- losse
documenten die htmx nooit inwisselt. Die staan als uitzondering in de
nieuwe toets, met een tweede toets die controleert dat ze nog bestaan,
zodat een hernoeming de uitzondering niet stilletjes uitholt.

MOD_V naar 63: er wijzigde iets in mod/.

  • Property mode set to 100644
File size: 3.2 KB
Line 
1// De betaalmuur -- verplaatst uit inline script, shaer-bqr.
2//
3// Inline script wordt door de CSP geweigerd zodra deze pagina via een link
4// BINNEN de site binnenkomt (shaer-0i6). Servergegevens komen uit pageData();
5// interpolatie kan niet in een statisch bestand.
6
7import { pageData, loadWebAuthn } from './lib.js';
8
9// Element-bedrading leeft zo lang als de pagina; de bootstrap roept init()
10// aan bij elke paginawissel waarop deze module actief is (shaer-5s1).
11//
12// EERST de bibliotheek, dan pas bedraden (shaer-0i6): die stond als
13// `<script src>` in de pagina en overleefde een htmx-navigatie niet. Wacht
14// run() daar niet op, dan valt hij terug op "geen WebAuthn" en verbergt hij
15// de ontgrendelknop op een pagina waar ontgrendelen gewoon kan.
16export async function init() { await loadWebAuthn(); run(); }
17
18function run() {
19(function () {
20 var _d = pageData();
21 var base = _d.base || "";
22 var slug = _d.slug || "";
23 var hasPatron = !!_d.hasPatron;
24 var I = _d.i18n || {};
25 var btn = document.getElementById('pg-unlock');
26 var status = document.getElementById('pg-status');
27 function say(msg, err) { status.hidden = false; status.textContent = msg; status.classList.toggle('is-err', !!err); }
28 function toLink() { location.href = base + '/paid/link?post=' + encodeURIComponent(slug); }
29
30 // No WebAuthn here: an assertion is impossible. With a Patreon page there is
31 // already a "Word supporter" button, so hide the (dead) unlock button rather
32 // than turn it into a second "Word supporter". Without one, this IS the button.
33 if (!window.SimpleWebAuthnBrowser || !window.PublicKeyCredential) {
34 if (hasPatron) { btn.style.display = 'none'; }
35 else { btn.textContent = I.join; btn.addEventListener('click', toLink); }
36 return;
37 }
38
39 btn.addEventListener('click', function () {
40 btn.disabled = true;
41 say(I.confirm);
42 fetch(base + '/paid/challenge?post=' + encodeURIComponent(slug))
43 .then(function (r) { if (!r.ok) throw { link: true }; return r.json(); })
44 .then(function (data) {
45 return window.SimpleWebAuthnBrowser.startAuthentication({ optionsJSON: data.options })
46 .then(function (response) {
47 return fetch(base + '/paid/unlock', {
48 method: 'POST', headers: { 'Content-Type': 'application/json' },
49 body: JSON.stringify({ response: response, blob: data.blob }),
50 });
51 });
52 })
53 .then(function (r) { return r.json().then(function (j) { return { status: r.status, j: j }; }); })
54 .then(function (res) {
55 if (res.j && res.j.ok && res.j.redirect) {
56 // Reload the real post page via the one-shot unlock capability, so it
57 // renders through its normal template (layout, styles, audio).
58 location.href = res.j.redirect;
59 } else if (res.status === 403) {
60 toLink(); // no valid passkey yet (or lapsed tier): link via Patreon
61 } else {
62 btn.disabled = false; say(I.failed, true);
63 }
64 })
65 .catch(function (e) {
66 if (e && e.link) { toLink(); return; }
67 if (e && e.name === 'NotAllowedError') { toLink(); return; } // cancelled / no passkey -> link
68 btn.disabled = false; say(I.error, true);
69 });
70 });
71})();
72}
Note: See TracBrowser for help on using the repository browser.