Http Provider

The HTTP Provider is employed when the desired data is present within an HTML element on a designated webpage. This type of provider requires the following parameters to be configured:

name - The name of the provider (e.g., the name of the website the user is logging into)
logoUrl - The URL of the logo of the provider
url - The URL of the webpage where the desired data is present
loginUrl - The URL of the webpage where the user can log into it
loginCookies - The cookies that are required to log into the website
responseSelection - The HTML element that contains the desired data
useZk - Whether to use zero knowledge proof to selectively disclose the data

A typical request object using http provider looks like this:

{
    "name": "",
    "logoUrl": "",
    "url": "",
    "loginUrl": "",
    "loginCookies": [],
    "responseSelection": [
        {
            "xPath": "", // optional
            "jsonPath": "", //optional
            "responseMatch": ""
        }
    ],
    "useZk": true
}

🎉

Developer tool for building this object coming soon - apply for early access

Until then, let's build this object manually.

Here is a step by step guide on how to request proof of credentials using http provider:

🎯

Website - https://www.reddit.com/ (opens in a new tab)

Data to be extracted - Karma points

Open the website in browser

Open the website that has the data you want to request in browser. In this case, we will open https://www.reddit.com/ (opens in a new tab)

Open the developer console

Open the developer console by pressing F12 or Ctrl + Shift + I on Windows and Cmd + Option + I on Mac.

Go to Elements tab

Go to Elements tab in the developer console.

Find the data

Find the data you want to request. In this case, we will find the karma points.

For quick search, press Ctrl + F on Windows and Cmd + F on Mac. Enter the data you want to request. In this case, we will enter 1 karma. Replace 1 with your karma points.

Find the element

Find the element that contains the data. In this case, we will find the element that contains the karma points.

Create `responseMatch` field

responseMatch field accepts a regex expression. Create a regex expression that matches the data you want to request. In this case, we will create a regex expression that matches the username and karma points.

We replace the karma points with {{KARMA_POINTS}} and username with {{USERNAME}} in the regex expression. The reclaim wallet will take care of replacing the {{KARMA_POINTS}} with the actual karma points.

{
    "name": "",
    "logoUrl": "",
    "url": "",
    "loginUrl": "",
    "loginCookies": [],
    "responseSelection": [
        {
            "responseMatch": "<span class=\"_2BMnTatQ5gjKGK5OWROgaG\">{{USERNAME}}</span>.*?<span>{{KARMA_POINTS}} karma</span>"
        },
    ],
    "useZk": true
}

Find the `url`

Open the network tab

Open the network tab in the developer console.
Reload the page you are on
Find the network request that contains the data you want to request. In this case, we will find the request that contains the karma points.

In our case it is present in the https://www.reddit.com/ request.

Copy the url

Copy the url to your clipboard.

Paste the url

Paste the url in the url field of the request. In this case, we will paste the url in the url field of the request.

{
    "name": "",
    "logoUrl": "",
    "url": "https://www.reddit.com/",
    "loginUrl": "",
    "loginCookies": [],
    "responseSelection": [
        {
            "responseMatch": "<span class=\"_2BMnTatQ5gjKGK5OWROgaG\">{{username}}</span>.*?<span>{{karma}} karma</span>"
        },
    ],
    "useZk": true
}

Set login cookies

Check the cookies that were sent with the request. In this case, we will check the cookies that were sent with the https://www.reddit.com/ request.

edgeBucket
loid
token_v2
reddit_session
session

{
    "name": "",
    "logoUrl": "",
    "url": "https://www.reddit.com/",
    "loginUrl": "",
    "loginCookies": ["edgeBucket", "loid", "token_v2", "session", "reddit_session"],
    "responseSelection": [
        {
            "responseMatch": "<span class=\"_2BMnTatQ5gjKGK5OWROgaG\">{{username}}</span>.*?<span>{{karma}} karma</span>"
        },
    ],
    "useZk": true
}

Set the login url

Set the login url in the loginUrl field of the request.

In our case it is https://www.reddit.com/login/

{
    "name": "",
    "logoUrl": "",
    "url": "https://www.reddit.com/",
    "loginUrl": "https://www.reddit.com/login/",
    "loginCookies": ["edgeBucket", "loid", "token_v2", "session", "reddit_session"],
    "responseSelection": [
        {
            "responseMatch": "<span class=\"_2BMnTatQ5gjKGK5OWROgaG\">{{username}}</span>.*?<span>{{karma}} karma</span>"
        },
    ],
    "useZk": true
}

Give a name to your http provider

Give a name to your http provider in the name field of the request.

In our case it is Reddit

{
    "name": "Reddit",
    "logoUrl": "",
    "url": "https://www.reddit.com/",
    "loginUrl": "https://www.reddit.com/login/",
    "loginCookies": ["edgeBucket", "loid", "token_v2", "session", "reddit_session"],
    "responseSelection": [
        {
            "responseMatch": "<span class=\"_2BMnTatQ5gjKGK5OWROgaG\">{{username}}</span>.*?<span>{{karma}} karma</span>"
        },
    ],
    "useZk": true
}

Now you can use the http provider request in your reclaim SDK

import { reclaimprotocol } from '@reclaimprotocol/reclaim-sdk';
 
const reclaim = new reclaimprotocol.Reclaim();
 
const request = reclaim.requestedProofs({
    title: 'My super app',
    baseCallbackUrl: 'https://my-super-app.com',
    contextMessage: 'We need to verify your karma points',
    requestedProofs: [
        new reclaim.HttpsProvider(
            {
                "name": "Reddit",
                "logoUrl": "",
                "url": "https://www.reddit.com/",
                "loginUrl": "https://www.reddit.com/login/",
                "loginCookies": ["edgeBucket", "loid", "token_v2", "session", "reddit_session"],
                "responseSelection": [
                    {
                        "responseMatch": "<span class=\"_2BMnTatQ5gjKGK5OWROgaG\">{{username}}</span>.*?<span>{{karma}} karma</span>"
                    },
                ],
            },
        )
    ],
    "useZk": true
})

Custom Provider Whitepaper