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

Requirements:

• Node.js (v16)
• Recommended: https://github.com/nvm-sh/nvm#intro

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:

• 2 accounts at https://start.inrupt.com/profile
• 2 accounts at https://wallet.ilpv4.dev

1) Login using Inrupt Provider.

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

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

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".

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.

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).

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

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

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

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

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.

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

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.

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

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

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

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

More info:

• Web Monetization: http://webmonetization.org/docs/explainer
• Interledger: https://interledger.org/developer-tools/get-started/manage-accounts/