Skip to content

Commit 810c9c5

Browse files
authored
Merge pull request #226 from m4sterbunny/fix-quickstart-demo
First pass fixes for quickstart demo
2 parents 4076d61 + 634f537 commit 810c9c5

File tree

1 file changed

+98
-58
lines changed

1 file changed

+98
-58
lines changed

docs/quick-start-demo.md

+98-58
Original file line numberDiff line numberDiff line change
@@ -15,98 +15,132 @@ keywords:
1515
---
1616

1717
import useBaseUrl from '@docusaurus/useBaseUrl';
18+
import Tabs from '@theme/Tabs';
19+
import TabItem from '@theme/TabItem';
1820

19-
This tutorial is a quick demonstration of some of Privado ID's main functionalities. To illustrate how Privado ID works, we will walk you through some of its products and tools by following along a simple POAP use case.
20-
POAP stands for Proof of Attendance Protocol, which is used to prove that someone has taken part in a given event.
21+
This tutorial illustrates Privado ID's main functionalities. It walks through Privado ID's products and tools by presenting a simple POAP use case. POAP stands for Proof of Attendance Protocol, which is used to prove that someone has taken part in a given event.
2122

22-
This guide will briefly touch on the 3 roles of the [Triangle of Trust](introduction.md#core-concepts-of-privado-id-verifiable-credentials-identity-holder-issuer-and-verifier), namely the Identity Holder, the Issuer and the Verifier. For that, we will take the case of an individual who needs to prove that they were able to participate in a particular event.
23-
24-
These are the steps we will cover in this article:
23+
In this tutorial, you will assume each of the 3 roles required by the [Triangle of Trust](introduction.md#core-concepts-of-privado-id-verifiable-credentials-identity-holder-issuer-and-verifier): the Identity Holder, the Issuer, and the Verifier. You will:
2524

2625
1. [Set up a Privado ID wallet](#set-up-a-privado-id-wallet)
27-
2. [Issue a new credential to attest to the ID Holder's attendance to the event](#issue-a-new-credential-to-attest-to-the-id-holders-event-attendance)
26+
2. [Issue the POAP credential](#issue-the-poap-credential)
2827
3. [Fetch the newly created credential](#fetch-the-newly-created-credential)
2928
4. [Verify the ID holder credential](#verify-the-id-holder-credential)
3029

3130
## Set up a Privado ID wallet
3231

33-
To store verifiable credentials, the Identity Holder (the individual receiving the credential) needs a compatible wallet. Here, we’ll use the Privado ID Wallet, which supports both mobile and web-based access.
32+
To store verifiable credentials, the Identity Holder (the individual receiving the credential) needs a compatible wallet. Here, we’ll use the Privado ID Wallet, which supports both Mobile and Web-based access.
33+
3434
:::note
3535

36-
You can also use any Privado ID compatible wallet. Please, check our [<ins>Ecosystem page</ins>](https://marketplace.privado.id/ecosystem) for other options.
36+
You may use any Privado ID compatible wallet. Our [<ins>Ecosystem page</ins>](https://marketplace.privado.id/ecosystem) lists all supported wallets.
3737

3838
:::
3939

40-
To get started with the Privado ID Wallet, you can either visit the [Privado ID Web Wallet](https://wallet.privado.id/) in your browser or download the mobile app and create an Identity.
40+
To get started with the Privado ID Wallet, either visit the [Privado ID Web Wallet](https://wallet.privado.id/) in your browser or download the Mobile App and create an Identity.
4141

42-
- Web Browser: <a href="https://wallet.privado.id/" target="_blank">Privado ID Web Wallet</a>
43-
- For Android: <a href="https://play.google.com/store/apps/details?id=id.privado.wallet" target="_blank">Privado ID Wallet App on Google Play</a>
44-
- For iOS: <a href="https://apps.apple.com/us/app/privadoid/id6566184703" target="_blank">Privado ID Wallet App on the App Store</a>
4542

43+
<Tabs>
44+
<TabItem value="Web Wallet">
45+
46+
<a href="https://wallet.privado.id/" target="_blank">Privado ID Web Wallet</a>
4647

4748
:::note
48-
- The Privado ID Web Wallet is a web based identity wallet. It is a reference implementation built using our [<ins>JS SDK</ins>](/docs/js-sdk/js-sdk-overview.md). Learn more about the Web Wallet [<ins>here</ins>](/docs/wallet/web-wallet.md).
49-
- Privado ID Wallet App is an implementation of the [<ins>Wallet SDK</ins>](/docs/category/wallet-sdk), as a way of showcasing its possibilities. Learn more about the Wallet App [<ins>here</ins>](/docs/wallet/wallet-app/privadoid-app.md).
49+
The Privado ID Web Wallet is a Web-based identity wallet. It is a reference implementation built using our [<ins>JS SDK</ins>](/docs/js-sdk/js-sdk-overview.md). [<ins>Learn more about the Web Wallet</ins>](/docs/wallet/web-wallet.md).
5050
:::
5151

52-
## Issue a new credential to attest to the ID Holder's event attendance
52+
</TabItem>
53+
54+
<TabItem value="Mobile Wallet">
55+
56+
- Android: <a href="https://play.google.com/store/apps/details?id=id.privado.wallet" target="_blank">Privado ID Wallet App on Google Play</a>
57+
- iOS: <a href="https://apps.apple.com/us/app/privadoid/id6566184703" target="_blank">Privado ID Wallet App on the App Store</a>
58+
59+
:::note
60+
Privado ID Wallet App is an implementation of the [<ins>Wallet SDK</ins>](/docs/category/wallet-sdk), as a way of showcasing its possibilities. [<ins>Learn more about the Molbile Wallet</ins>](/docs/wallet/wallet-app/privadoid-app.md).
61+
:::
5362

54-
A trusted entity, for instance, a private institution will now play the role of an issuer. It will be responsible for creating the credential and sending it to the ID Holder.
63+
</TabItem>
64+
</Tabs>
5565

56-
We are using <a href="https://issuer-demo.privado.id/">the Issuer Node UI Demo environment</a> to manage credentials. This is the place where you as an issuer can can create and manage identities and credentials, generate connections and manage schemas.
5766

58-
However, if you are using a new credential type, you actually need to create a schema for that credential, which basically is the set of JSON files that gather all the attributes of that specific credential.
67+
## Issue the POAP credential
5968

60-
To facilitate this issuance process, we have already created the credential schema with schema type POAP01 whose URLs are the following:
69+
You will now take the role of an Issuer, in this example, the private institution/trusted entity that held the event and creates a POAP. The Issuer is responsible for both creating the credential and sending it to the Identity Holder.
6170

62-
- JSON schema URL
63-
`ipfs://QmTSwnuCB9grYMB2z5EKXDagfChurK5MiMCS6efrRbsyVX`
64-
- JSON-LD Context
65-
`ipfs://QmdH1Vu79p2NcZLFbHxzJnLuUHJiMZnBeT7SNpLaqK7k9X`
71+
We will use <a href="https://issuer-demo.privado.id/">the Issuer Node UI Demo environment</a> to manage credentials. This environment enables an Issuer to create and manage identities and credentials, generate connections, and manage schemas.
6672

6773
:::note
6874

69-
To learn how to set up your own issuer environment by deploying an issuer node, visit the [<ins>Issuer section in the documentation</ins>](./issuer/issuer-overview.md).
75+
When an Issuer releases a new credential type, they create a schema representation of the credential. This comprises a set of JSON files that gather all the credential's attributes.
76+
77+
[<ins>Learn how to set up your own Issuer environment by deploying an Issuer node</ins>](/docs/issuer/issuer-overview.md).
7078

7179
:::
7280

81+
To simplify this demo issuance, we provide an existing credential schema with schema type POAP01:
82+
83+
<Tabs>
84+
<TabItem value="JSON schema URL">
85+
86+
```ipfs://QmTSwnuCB9grYMB2z5EKXDagfChurK5MiMCS6efrRbsyVX```
87+
88+
> View this credential's data using an <a href="https://ipfs.io/ipfs/QmTSwnuCB9grYMB2z5EKXDagfChurK5MiMCS6efrRbsyVX" target="_blank">online gateway</a>.
89+
90+
91+
</TabItem>
92+
93+
<TabItem value="JSON-LD context URL">
94+
95+
```ipfs://QmdH1Vu79p2NcZLFbHxzJnLuUHJiMZnBeT7SNpLaqK7k9X```
96+
97+
> View this credential's data using an <a href="https://ipfs.io/ipfs/QmdH1Vu79p2NcZLFbHxzJnLuUHJiMZnBeT7SNpLaqK7k9X" target="_blank">online gateway</a>.
98+
99+
100+
</TabItem>
101+
</Tabs>
102+
73103
:::info
74104

75-
The schema used in this demo was built using the Privado ID Schema Builder and is available on [<ins>the Privado ID Schema Explorer</ins>](https://tools.privado.id/schemas/1fa99457-b2ae-4884-ae12-d658bd6abf69). Learn more about creating new schemas on [<ins>the Schema Builder UI guide</ins>](/docs/issuer/schema-builder/).
105+
The schema used in this demo was built using the Privado ID Schema Builder and is available on [<ins>the Privado ID Schema Explorer</ins>](https://tools.privado.id/schemas/1fa99457-b2ae-4884-ae12-d658bd6abf69). Learn more about creating new schemas from [<ins>the Schema Builder UI guide</ins>](/docs/issuer/schema-builder/).
76106

77107
:::
78108

79-
### Issue a new credential to attest to the ID Holder's attendance to the event
109+
### Generate the credential
80110

81-
With the new schema in hand, the issuer should now be able to generate a credential.
111+
With the new schema in hand, the Issuer can generate a credential.
82112

83-
1. First, go to the <a href="https://issuer-demo.privado.id/">the Issuer Node UI testing environment</a>.
113+
1. Navigate to <a href="https://issuer-demo.privado.id/">the Issuer Node UI testing environment</a>.
84114

85115
:::warning
86116

87-
This Issuer Node is publicly available and used only for testing purposes. Do not use personal or sensitive data. All data is deleted every 48 hours.
117+
Only use this publicly available Issuer Node for testing purposes. Do not submit personal or sensitive data. All data is deleted every 48 hours.
88118

89119
:::
90120

91-
2. Now you need to import the schema. Click on **Import Schema** and paste our previously generated schema IPFS address `ipfs://QmTSwnuCB9grYMB2z5EKXDagfChurK5MiMCS6efrRbsyVX`:
121+
2. Next, import the schema.
92122

93-
<div align="center">
94-
<img width="100%" src={useBaseUrl("img/quick-start-demo/import-schema.png")}></img>
95-
</div>
123+
2.1 Click on **Import Schema** and paste the schema's IPFS address `ipfs://QmTSwnuCB9grYMB2z5EKXDagfChurK5MiMCS6efrRbsyVX`:
96124

97-
You may preview the schema and then Import it.
125+
<div align="center">
126+
<img width="100%" src={useBaseUrl("img/quick-start-demo/import-schema.png")}></img>
127+
</div>
98128

99-
3. You can go ahead and click on **Issue Credential** in the top righ-hand corner. Choose **Credential Link** on the next page and your schema on the dropdown menu ("POAP01", in our case). For this credential, we are providing a proof of attendance to an event in Paris:
129+
2.2 Preview the schema and then Import it.
130+
131+
3. Next, click on **Issue Credential** in the top right-hand corner. Choose **Credential Link** on the next page and your schema on the dropdown menu ("POAP01", in our case). For this credential, we are providing a proof of attendance at an event in Paris:
100132

101133
<div align="center">
102134
<img width="500" src={useBaseUrl("img/quick-start-demo/create-credential.png")}></img>
103135
</div>
104136

105-
4. After you click on **Create Credential Link**, you'll be presented with a Universal Link and a Deep Link to the credential offer, along with a QR code configured for these links. The QR code can be scanned directly with the Privado ID Wallet app.
137+
4. Click on **Create Credential Link** to be presented with links and a QR code configured for these links to claim the credential. The QR code can be scanned directly with supporting mobile apps, e.g. the Privado Mobile Wallet app.
106138

107139
:::info
108140

109-
When the user interacts with the [<ins>Universal Link</ins>](/docs/wallet/universal-links.md) , it will launch the Privado ID Web Wallet in the browser or Privado ID Wallet app in case of a mobile phone displaying the credential offer to claim the credential. Deep link could be handled only by mobile wallet app though.
141+
Two link types are created to provide access to the credential:
142+
- Mobile Wallet apps such as the Privado ID Mobile App and other supported mobile wallets support Deep Link
143+
- The Privado ID Web Wallet and other Mobile Wallet apps [<ins> support the Universal Link</ins>](/docs/wallet/universal-links.md)
110144

111145
:::
112146

@@ -116,82 +150,88 @@ With the new schema in hand, the issuer should now be able to generate a credent
116150

117151
## Fetch the newly created credential
118152

119-
Now we are back to the ID Holder role. You can either use the Web Wallet on the browser or the Wallet App to accept the credential via the link or the QR code generated by the issuer in the last step.
153+
Next, you will take the second role in this tutorial: the ID Holder. You can either use the Web Wallet in the browser or the Mobile Wallet to accept the credential via the link or the QR code generated by the Issuer in the previous step.
120154

121155
:::note
122-
To sync the identity and its associated credentials between the Privado ID Web Wallet and the Privado ID Wallet App, the user must log in with the same crypto wallet account on both platforms. Once you claim a credential on one platform, it will be visible on the other.
156+
157+
To sync the identity and its associated credentials between the Privado ID Web Wallet and the Privado ID Mobile Wallet, the user must log in with the same crypto wallet account on both platforms. Once you claim a credential on one platform, it will then be visible on the other.
158+
123159
:::
124160

125-
#### Web Wallet
161+
To fetch the credential:
162+
163+
<Tabs>
164+
<TabItem value="Web Wallet">
126165

127-
After clicking the Universal link, it will take you to the Web Wallet. Click **Sign In** and connect your crypto wallet such as Metamask. Click **Add to my wallet**. This should add the credential to your wallet.
166+
1. Click the Universal link, which will take you to the Web Wallet. Click **Sign In** and connect your crypto wallet such as MetaMask. Click **Add to my wallet**. This should add the credential to your wallet.
128167

129168

130169
<div align="center">
131170
<img src={useBaseUrl("img/quick-start-demo/web-wallet.png")}></img>
132171
</div>
172+
</TabItem>
133173

134-
Click on **Manage your credentials** to view and manage the credential in the Web Wallet.
174+
<TabItem value="Mobile Wallet">
175+
176+
1. Scan the QR code. Click **Sign In**. This should authenticate and add the credential to the Wallet.
135177

136178
<div align="center">
137-
<img src={useBaseUrl("img/quick-start-demo/web-wallet-2.png")}></img>
179+
<img src={useBaseUrl("img/quick-start-demo/wallet-app.png")}></img>
138180
</div>
181+
</TabItem>
182+
</Tabs>
139183

140-
#### Mobile Wallet App
141184

142-
Alternatively, Scan the QR code from the Wallet App. Click **Sign In**. This should authenticate and add the credential to the Wallet.
185+
2. Click on **Manage your credentials** to view and manage the credential in the Wallet.
143186

144187
<div align="center">
145-
<img src={useBaseUrl("img/quick-start-demo/wallet-app.png")}></img>
188+
<img src={useBaseUrl("img/quick-start-demo/web-wallet-2.png")}></img>
146189
</div>
147190

148-
149191
## Verify the ID holder credential
150192

151-
Here comes the third role in this tutorial: the verifier. This could be represented by an organization that needs to verify some details of someone's credentials. In our use case, this organization wants to verify whether the ID holder actually attended our made-up Paris event.
193+
Next, you will take the third role in this tutorial: the Verifier. This might be an organization that needs to verify some details of a person's credentials. In our use case, this organization wants to verify whether the Identity Holder actually attended our made-up Paris event.
152194

153-
Here are the steps to verify the credential:
195+
To verify the credential:
154196

155-
1. Visit the [Query builder website](https://tools.privado.id/query-builder/). The [Query Builder](/docs/verifier/query-builder/) is a tool designed to simplify the creation of verification queries.
197+
1. Visit the [Query Builder website](https://tools.privado.id/query-builder/). The [Query Builder](/docs/verifier/query-builder/) is a tool designed to simplify the creation of verification queries.
156198

157199
<div align="center">
158200
<img width="600" src={useBaseUrl("img/quick-start-demo/verifier-home.png")}></img>
159201
</div>
160202

161-
2. You now need to define the query. You will now make use of the JSON-LD URL which we have also provided: `ipfs://QmdH1Vu79p2NcZLFbHxzJnLuUHJiMZnBeT7SNpLaqK7k9X`. Here is how the query should look like:
203+
2. Define the query. We will use the existing JSON-LD URL: `ipfs://QmdH1Vu79p2NcZLFbHxzJnLuUHJiMZnBeT7SNpLaqK7k9X`. The query should look like this:
162204

163205
<div align="center">
164206
<img width="600" src={useBaseUrl("img/quick-start-demo/verifier-query-1.png")}></img>
165207
</div>
166208

167-
3. Click **Create Query**. Now click **Test query** button which will take you the Privado ID Web Wallet
209+
3. Click **Create Query**. Now click the **Test query** button which will take you to the Privado ID Web Wallet:
168210

169211
<div align="center">
170212
<img width="600" src={useBaseUrl("img/quick-start-demo/verifier-query-2.png")}></img>
171213
</div>
172214

173-
4. Click **Sign in** and connect your crypto wallet. As you have already claimed the credential, it shows as 'claimed'. Click **Verify**, after which the process of generating the proof starts.
215+
4. Click **Sign in** and connect your crypto wallet. As you have already claimed the credential, it shows as 'claimed'. Click **Verify**, to initiate the process of generating the proof.
174216

175217
<div align="center">
176218
<img width="900" src={useBaseUrl("img/quick-start-demo/web-wallet-verification.png")}></img>
177219
</div>
178220

179-
5. Finally, the proof is generated and sent to the verifier. The verifier will then check the revocation status and any additional information to validate the proof. You will receive the following response on the Query Builder website:
221+
5. Finally, the proof is generated and sent to the Verifier. The Verifier will then check the revocation status and any additional information to validate the proof. You will receive the following response on the Query Builder website:
180222
<div align="center">
181223
<img width="600" src={useBaseUrl("img/quick-start-demo/verifier-validation.png")}></img>
182224
</div>
183225

184-
Alternatively, you can also use Privado ID Wallet app to verify.
226+
Alternatively, you can also use the Privado ID Wallet app to verify.
185227
After Step 3, once you are redirected to Web Wallet, click on **Continue via app**,
186228
this should present a QR code. Open the Privado ID Wallet App and scan the QR code.
187229
Click on **Verify**
188230
<div align="center">
189231
<img width="900" src={useBaseUrl("img/quick-start-demo/wallet-app-verification.png")}></img>
190232
</div>
191233

192-
193234
<br></br>
194235

195-
This quick-start guide demonstrates Privado ID’s basic functionalities through a POAP use case, covering wallet setup, credential issuance, retrieval, and verification. While this is a simplified example, Privado ID provides a comprehensive suite of SSI tools for managing decentralized identity and verifiable credentials.
196-
236+
This quick-start guide demonstrates Privado ID’s basic functionalities through a POAP use case, covering wallet setup, credential issuance, retrieval, and verification. This example requires the user to participate in all three roles to demonstrate Privado ID's comprehensive suite of Self-Sovereign Identity (SSI) tools for managing decentralized identity and verifiable credentials. In real-world uses cases, a single entity would typically fit just one of these roles.
197237

0 commit comments

Comments
 (0)