aljaz/pubky-core
1
0
Fork 0
mirror of https://github.com/aljazceru/pubky-core.git synced 2025-12-18 22:44:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

examples(authz): update authz 3rd party app

Browse Source
This commit is contained in:
nazeh
2024-09-17 20:56:02 +03:00
parent 78aad43f52
commit d39e3b933c
4 changed files with 94 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/authz/3rd-party-app/index.html
View File

@@ -13,14 +13,22 @@
</head> </head>
<body> <body>
<pubky-auth-widget <pubky-auth-widget
id="widget"
relay="https://demo.httprelay.io/link/" relay="https://demo.httprelay.io/link/"
caps="/pub/pubky.app/:rw,/pub/example.com/nested:rw"
> >
</pubky-auth-widget> </pubky-auth-widget>
<main> <main>
<h1>Third Party app!</h1> <h1>Third Party app!</h1>
<p>this is a demo for using Pubky Auth in an unhosted (no backend) app.</p> <p>this is a demo for using Pubky Auth in an unhosted (no backend) app.</p>
<form>
<label style="display:block">
<input type="checkbox" onChange="document.getElementById('widget').switchTestnet()">testnet (use local test network)</input>
</label>
<label style="display:block">
<input type="checkbox" onChange="let w = document.getElementById('widget'); w.caps.length > 0 ? w.setCapabilities(null) : w.setCapabilities('/pub/pubky.app/:rw,/pub/example.com/nested:rw')">Authz (Authorization, set if your pubky has an account on a Homeserver)</input>
</label>
</form>
</main> </main>
</body> </body>
</html> </html>

18
examples/authz/3rd-party-app/package-lock.json generated
View File

@@ -8,7 +8,7 @@
"name": "pubky-auth-3rd-party", "name": "pubky-auth-3rd-party",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@synonymdev/pubky": "file:../../../pubky/pkg", "@synonymdev/pubky": "^0.1.16",
"lit": "^3.2.0", "lit": "^3.2.0",
"qrcode": "^1.5.4" "qrcode": "^1.5.4"
}, },
@@ -16,17 +16,6 @@
"vite": "^5.4.2" "vite": "^5.4.2"
} }
}, },
"../../../pubky/pkg": {
"name": "@synonymdev/pubky",
"version": "0.1.14",
"license": "MIT",
"devDependencies": {
"browser-resolve": "^2.0.0",
"esmify": "^2.1.1",
"tape": "^5.8.1",
"tape-run": "^11.0.0"
}
},
"node_modules/@esbuild/aix-ppc64": { "node_modules/@esbuild/aix-ppc64": {
"version": "0.21.5", "version": "0.21.5",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -617,8 +606,9 @@
] ]
}, },
"node_modules/@synonymdev/pubky": { "node_modules/@synonymdev/pubky": {
"resolved": "../../../pubky/pkg", "version": "0.1.16",
"link": true "resolved": "https://registry.npmjs.org/@synonymdev/pubky/-/pubky-0.1.16.tgz",
"integrity": "sha512-jtFahEUUDfrTE7vpZx6m/uB4wMEBoqpEtuUoWCf30HH8cmm0Hfrv8v0xmwaSwPfSdcZlIG8beE5XjbX+eLmLUA=="
}, },
"node_modules/@types/estree": { "node_modules/@types/estree": {
"version": "1.0.5", "version": "1.0.5",

2
examples/authz/3rd-party-app/package.json
View File

@@ -10,7 +10,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@synonymdev/pubky": "file:../../../pubky/pkg", "@synonymdev/pubky": "^0.1.16",
"lit": "^3.2.0", "lit": "^3.2.0",
"qrcode": "^1.5.4" "qrcode": "^1.5.4"
}, },

128
examples/authz/3rd-party-app/src/pubky-auth-widget.js
View File

@@ -7,8 +7,11 @@ const DEFAULT_HTTP_RELAY = "https://demo.httprelay.io/link"
/** /**
*/ */
export class PubkyAuthWidget extends LitElement { export class PubkyAuthWidget extends LitElement {
static get properties() { static get properties() {
return { return {
// === Config ===
/** /**
* Relay endpoint for the widget to receive Pubky AuthTokens * Relay endpoint for the widget to receive Pubky AuthTokens
* *
@@ -23,6 +26,9 @@ export class PubkyAuthWidget extends LitElement {
* Capabilities requested or this application encoded as a string. * Capabilities requested or this application encoded as a string.
*/ */
caps: { type: String }, caps: { type: String },
// === State ===
/** /**
* Widget's state (open or closed) * Widget's state (open or closed)
*/ */
@@ -31,6 +37,10 @@ export class PubkyAuthWidget extends LitElement {
* Show "copied to clipboard" note * Show "copied to clipboard" note
*/ */
showCopied: { type: Boolean }, showCopied: { type: Boolean },
// === Internal ===
testnet: { type: Boolean },
pubky: { type: Object }
} }
} }
@@ -43,11 +53,11 @@ export class PubkyAuthWidget extends LitElement {
super() super()
this.testnet = false;
this.open = false; this.open = false;
// TODO: allow using mainnet
/** @type {import("@synonymdev/pubky").PubkyClient} */ /** @type {import("@synonymdev/pubky").PubkyClient} */
this.pubkyClient = window.pubky.PubkyClient.testnet(); this.pubkyClient = new window.pubky.PubkyClient();
this.caps = this.caps || "" this.caps = this.caps || ""
} }
@@ -55,56 +65,55 @@ export class PubkyAuthWidget extends LitElement {
connectedCallback() { connectedCallback() {
super.connectedCallback() super.connectedCallback()
this._generateURL()
}
switchTestnet() {
this.testnet = !this.testnet;
console.debug("Switching testnet");
if (this.testnet) {
this.pubkyClient = window.pubky.PubkyClient.testnet()
} else {
this.pubkyClient = new window.pubky.PubkyClient();
}
console.debug("Pkarr Relays: " + this.pubkyClient.getPkarrRelays())
this._generateURL()
}
setCapabilities(caps) {
this.caps = caps || ""
this._generateURL(this.caps);
console.debug("Updated capabilities");
}
_generateURL() {
let [url, promise] = this.pubkyClient.authRequest(this.relay || DEFAULT_HTTP_RELAY, this.caps); let [url, promise] = this.pubkyClient.authRequest(this.relay || DEFAULT_HTTP_RELAY, this.caps);
promise.then(pubky => { promise.then(pubky => {
if (this.caps?.length > 0) { this.pubky = pubky.z32();
alert(`Successfully signed in to ${pubky.z32()} with capabilities: ${this.caps}`)
} else {
alert(`Successfully authenticated ${pubky.z32()} without signing in to their homeserver`)
}
}).catch(e => { }).catch(e => {
console.error(e) console.error(e)
}) })
// let keypair = pubky.Keypair.random();
// const Homeserver = pubky.PublicKey.from('8pinxxgqs41n4aididenw5apqp1urfmzdztr8jt4abrkdn435ewo')
// this.pubkyClient.signup(keypair, Homeserver).then(() => {
// this.pubkyClient.sendAuthToken(keypair, url)
// })
this.authUrl = url this.authUrl = url
this._updateQr();
} }
render() { _updateQr() {
return html` if (this.canvas) {
<div this._setQr(this.canvas);
id="widget" }
class=${this.open ? "open" : ""}
>
<button class="header" @click=${this._switchOpen}>
<svg id="pubky-icon" version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1511 1511"><path fill-rule="evenodd" d="m636.3 1066.7 14.9-59.7c50.5-27.7 90.8-71.7 113.7-124.9-47.3 51.3-115.2 83.4-190.6 83.4-51.9 0-100.1-15.1-140.5-41.2L394 1066.7H193.9L356.4 447H567l-.1.1q3.7-.1 7.4-.1c77.7 0 147.3 34 194.8 88l22-88h202.1l-47 180.9L1130 447h249l-323 332.8 224 286.9H989L872.4 912l-40.3 154.7H636.3z" style="fill:#fff"/></svg>
<span class="text">
Pubky Auth
</span>
</button>
<div class="line"></div>
<div id="widget-content">
<p>Scan or copy Pubky auth URL</p>
<div class="card">
<canvas id="qr" ${ref(this._setQr)}></canvas>
</div>
<button class="card url" @click=${this._copyToClipboard}>
<div class="copied ${this.showCopied ? "show" : ""}">Copied to Clipboard</div>
<p>${this.authUrl}</p>
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="12" rx="2" fill="white"></rect><rect x="3" y="3" width="10" height="12" rx="2" fill="white" stroke="#3B3B3B"></rect></svg>
</button>
</div>
</div>
`
} }
_setQr(canvas) { _setQr(canvas) {
this.canvas = canvas
QRCode.toCanvas(canvas, this.authUrl, { QRCode.toCanvas(canvas, this.authUrl, {
margin: 2, margin: 2,
scale: 8, scale: 8,
@@ -118,6 +127,7 @@ export class PubkyAuthWidget extends LitElement {
_switchOpen() { _switchOpen() {
this.open = !this.open this.open = !this.open
setTimeout(() => { this.pubky = null }, 80)
} }
async _copyToClipboard() { async _copyToClipboard() {
@@ -156,20 +166,42 @@ export class PubkyAuthWidget extends LitElement {
</button> </button>
<div class="line"></div> <div class="line"></div>
<div id="widget-content"> <div id="widget-content">
<p>Scan or copy Pubky auth URL</p> ${this.pubky
<div class="card"> ? this.caps.length > 0
<canvas id="qr" ${ref(this._setQr)}></canvas> ? html`
</div> <p>Successfully authorized: </p>
<button class="card url" @click=${this._copyToClipboard}> <p>${this.pubky}</p>
<div class="copied ${this.showCopied ? "show" : ""}">Copied to Clipboard</div> <p>With capabilities</p>
<p>${this.authUrl}</p> ${this.caps.split(",").map(cap => html`
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="12" rx="2" fill="white"></rect><rect x="3" y="3" width="10" height="12" rx="2" fill="white" stroke="#3B3B3B"></rect></svg> <p>${cap}</p>
</button> `)
}
`
: html`
<p>Successfully authenticated to: </p>
<p>${this.pubky}</p>
`
: html`
<p>Scan or copy Pubky auth URL</p>
<div class="card">
<canvas id="qr" ${ref(this._setQr)}></canvas>
</div>
<button class="card url" @click=${this._copyToClipboard}>
<div class="copied ${this.showCopied ? "show" : ""}">Copied to Clipboard</div>
<p>${this.authUrl}</p>
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="12" rx="2" fill="white"></rect><rect x="3" y="3" width="10" height="12" rx="2" fill="white" stroke="#3B3B3B"></rect></svg>
</button>
`
}
</div> </div>
</div> </div>
` `
} }
_renderWidgetContentBase() {
}
static get styles() { static get styles() {
return css` return css`
* { * {