fan-droide / buywatch_POC

SOLID + Micropyaments Proof Of Concept

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

buywatch (Proof Of Concept)

SOLID + Web Monetization and Micropyaments for media distribution.

Demo.Edit.BuyWatch3.mp4

Summary:

This prototype represents an original idea about how can be combined the decentralized web and the web monetization API for micropayments with the focus on media files.

Architecture

Architecture Diagram

Requirements:

How to run it locally:

  • Optional: nvm use 16 (see Requirements)

  • git clone https://github.com/fan-droide/buywatch_POC.git

  • cd buywatch_POC

IMPORTANT!!

  • npm ci

NOTE: do not run npm i, otherwise the code will not work, the probelm might be related to @inrupt/universal-fetch and undici dependency

  • At app/ folder, rename config.tamplate.js to config.js

  • Get Bearer token value from https://wallet.ilpv4.dev/ (See Step 13 below)

  • npm start

  • Open http://localhost:3001

Demo:

Required:

1) Login using Inrupt Provider.

Step 1 -

2) Choose an account for publishing content as a Seller.

Step 2 -

3) Successful login shows the Seller WebId at home page.

Step 3 -

4) Go to the Upload tab and fill the form. Select Pod, price and name. Include the payment endpoint and then attach a file. Click on "Send New Data to Pod".

Step 4 -

5) Sign in at backend level to generate a session in the server for the seller, so the server can access resources and also give permission to buyers.

Step 5 -

6) Check at the Market tab that the new item is added to the backend DB (NOTE: right now data is stored in memory only).

Step 6 -

7) Go to Inrupt's Pod and verify that the content is successfully uploaded.

Step 7 -

8) In a different browser session, login with a buyer account using Inrupt Provider.

Step 8 -

9) NOTE: Try to fetch existing content in Market throws 401 error (unathorized) when user is not authenticated.

Step 9 -

10) Click on the "Fetch" button. If the user is logged in the error is 403, Forbidden, as it has no permission.

Step 10 -

11) To start the purchase process click on "Buy". A prompt will ask for the buyer's user name in the payment provider. IN this example you can get it from https://wallet.ilpv4.dev. This step is only a mockup to showcase the payment experience in a test environment.

Step 11 -

12) After introducing the user name, the application will request the secret token.

Step 12 -

13) The secret token, a bearer, can be extracted from the aforementioned website (https://wallet.ilpv4.dev) by inspecting the headers in the network requests. Copy the value as the image shows. This is a temporary solution and not recommended.

Step 13 -

14) Paste the value of the bearer in the prompt.

Step 14 -

15) Dialog shows the result "Access Granted" in case the payment is successful.

Step 15 -

16) The result of the payment transaction is shown in the console.

Step 16 -

17) If you click on the "Fetch" button now, the content will be accessible and retrieved.

Step 17 -

More info:

About

SOLID + Micropyaments Proof Of Concept

License:MIT License


Languages

Language:JavaScript 67.5%Language:HTML 23.0%Language:CSS 9.5%Language:Procfile 0.1%