'在IPFS上構建零依賴性的應用程序'

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

用戶登錄時，我們不需要電子郵件字段。我們還需要將元素ID更改為特定登錄，而不是註冊。我們還更新了要在表單提交和按鈕標籤上調用的函數。很簡單。

現在，我們可以讓我們創建的變量為我們做一些工作。我們希望這個新函數能夠在每次加載頁面時以及每次執行某些操作時調用更新。所以，我們這樣做。在所有變量聲明之後，在JavaScript代碼的頂部，讓我們調用一個名為pageLoad 的函數，並在其下面創建實際函數：pageLoad;

如果保存文件並在瀏覽器中重新加載index.html文件，則應在控制檯中看到“頁面已加載”。但這不是我們想的。讓我們讓這段代碼真正為我們工作。條件邏輯時間：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

用戶登錄時，我們不需要電子郵件字段。我們還需要將元素ID更改為特定登錄，而不是註冊。我們還更新了要在表單提交和按鈕標籤上調用的函數。很簡單。

現在，我們可以讓我們創建的變量為我們做一些工作。我們希望這個新函數能夠在每次加載頁面時以及每次執行某些操作時調用更新。所以，我們這樣做。在所有變量聲明之後，在JavaScript代碼的頂部，讓我們調用一個名為pageLoad 的函數，並在其下面創建實際函數：pageLoad;

如果保存文件並在瀏覽器中重新加載index.html文件，則應在控制檯中看到“頁面已加載”。但這不是我們想的。讓我們讓這段代碼真正為我們工作。條件邏輯時間：

如果我們保存並重新加載頁面，我們現在應該看到註冊頁面。但是如果用戶想要登錄怎麼辦？我們如何處理這個問題。很簡單。我們可以設置幾個按鈕，讓用戶在登錄和註冊表單之間切換。在HTML正文部分的註冊和登錄表單上方，添加這些按鈕，用div包裝，我們可以根據需要隱藏和顯示：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

用戶登錄時，我們不需要電子郵件字段。我們還需要將元素ID更改為特定登錄，而不是註冊。我們還更新了要在表單提交和按鈕標籤上調用的函數。很簡單。

現在，我們可以讓我們創建的變量為我們做一些工作。我們希望這個新函數能夠在每次加載頁面時以及每次執行某些操作時調用更新。所以，我們這樣做。在所有變量聲明之後，在JavaScript代碼的頂部，讓我們調用一個名為pageLoad 的函數，並在其下面創建實際函數：pageLoad;

如果保存文件並在瀏覽器中重新加載index.html文件，則應在控制檯中看到“頁面已加載”。但這不是我們想的。讓我們讓這段代碼真正為我們工作。條件邏輯時間：

如果我們保存並重新加載頁面，我們現在應該看到註冊頁面。但是如果用戶想要登錄怎麼辦？我們如何處理這個問題。很簡單。我們可以設置幾個按鈕，讓用戶在登錄和註冊表單之間切換。在HTML正文部分的註冊和登錄表單上方，添加這些按鈕，用div包裝，我們可以根據需要隱藏和顯示：

然後我們可以在pageload函數下面創建另一個名為changeform的函數。

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

用戶登錄時，我們不需要電子郵件字段。我們還需要將元素ID更改為特定登錄，而不是註冊。我們還更新了要在表單提交和按鈕標籤上調用的函數。很簡單。

現在，我們可以讓我們創建的變量為我們做一些工作。我們希望這個新函數能夠在每次加載頁面時以及每次執行某些操作時調用更新。所以，我們這樣做。在所有變量聲明之後，在JavaScript代碼的頂部，讓我們調用一個名為pageLoad 的函數，並在其下面創建實際函數：pageLoad;

如果保存文件並在瀏覽器中重新加載index.html文件，則應在控制檯中看到“頁面已加載”。但這不是我們想的。讓我們讓這段代碼真正為我們工作。條件邏輯時間：

如果我們保存並重新加載頁面，我們現在應該看到註冊頁面。但是如果用戶想要登錄怎麼辦？我們如何處理這個問題。很簡單。我們可以設置幾個按鈕，讓用戶在登錄和註冊表單之間切換。在HTML正文部分的註冊和登錄表單上方，添加這些按鈕，用div包裝，我們可以根據需要隱藏和顯示：

然後我們可以在pageload函數下面創建另一個名為changeform的函數。

有很多不同的方法可以解決這個問題，這是一個非常簡單的解決方案，我將繼續下去。如果你願意，歡迎你使用不同的方法。

我們應該在html的主體中添加更多的有條件呈現的部分。我們需要一個用於加載屏幕，一個用於存放登錄用戶的應用程序屏幕。我們可以簡單地模擬一下：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

用戶登錄時，我們不需要電子郵件字段。我們還需要將元素ID更改為特定登錄，而不是註冊。我們還更新了要在表單提交和按鈕標籤上調用的函數。很簡單。

現在，我們可以讓我們創建的變量為我們做一些工作。我們希望這個新函數能夠在每次加載頁面時以及每次執行某些操作時調用更新。所以，我們這樣做。在所有變量聲明之後，在JavaScript代碼的頂部，讓我們調用一個名為pageLoad 的函數，並在其下面創建實際函數：pageLoad;

如果保存文件並在瀏覽器中重新加載index.html文件，則應在控制檯中看到“頁面已加載”。但這不是我們想的。讓我們讓這段代碼真正為我們工作。條件邏輯時間：

如果我們保存並重新加載頁面，我們現在應該看到註冊頁面。但是如果用戶想要登錄怎麼辦？我們如何處理這個問題。很簡單。我們可以設置幾個按鈕，讓用戶在登錄和註冊表單之間切換。在HTML正文部分的註冊和登錄表單上方，添加這些按鈕，用div包裝，我們可以根據需要隱藏和顯示：

然後我們可以在pageload函數下面創建另一個名為changeform的函數。

有很多不同的方法可以解決這個問題，這是一個非常簡單的解決方案，我將繼續下去。如果你願意，歡迎你使用不同的方法。

我們應該在html的主體中添加更多的有條件呈現的部分。我們需要一個用於加載屏幕，一個用於存放登錄用戶的應用程序屏幕。我們可以簡單地模擬一下：

接下來我們需要做的是更新我們的pageLoad函數，並在我們更新應用程序狀態時隨時調用它。該功能現在應該如下所示：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

用戶登錄時，我們不需要電子郵件字段。我們還需要將元素ID更改為特定登錄，而不是註冊。我們還更新了要在表單提交和按鈕標籤上調用的函數。很簡單。

現在，我們可以讓我們創建的變量為我們做一些工作。我們希望這個新函數能夠在每次加載頁面時以及每次執行某些操作時調用更新。所以，我們這樣做。在所有變量聲明之後，在JavaScript代碼的頂部，讓我們調用一個名為pageLoad 的函數，並在其下面創建實際函數：pageLoad;

如果保存文件並在瀏覽器中重新加載index.html文件，則應在控制檯中看到“頁面已加載”。但這不是我們想的。讓我們讓這段代碼真正為我們工作。條件邏輯時間：

如果我們保存並重新加載頁面，我們現在應該看到註冊頁面。但是如果用戶想要登錄怎麼辦？我們如何處理這個問題。很簡單。我們可以設置幾個按鈕，讓用戶在登錄和註冊表單之間切換。在HTML正文部分的註冊和登錄表單上方，添加這些按鈕，用div包裝，我們可以根據需要隱藏和顯示：

然後我們可以在pageload函數下面創建另一個名為changeform的函數。

有很多不同的方法可以解決這個問題，這是一個非常簡單的解決方案，我將繼續下去。如果你願意，歡迎你使用不同的方法。

我們應該在html的主體中添加更多的有條件呈現的部分。我們需要一個用於加載屏幕，一個用於存放登錄用戶的應用程序屏幕。我們可以簡單地模擬一下：

接下來我們需要做的是更新我們的pageLoad函數，並在我們更新應用程序狀態時隨時調用它。該功能現在應該如下所示：

現在，我們已準備好註冊並登錄，開始吧。你之前已經創建了配置對象。所以現在我們只需要捕獲用戶的註冊憑據。

有幾種方法可以做到這一點，為了使它儘可能簡單，我們將只獲取輸入值。在你的signUp功能中，添加：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

用戶登錄時，我們不需要電子郵件字段。我們還需要將元素ID更改為特定登錄，而不是註冊。我們還更新了要在表單提交和按鈕標籤上調用的函數。很簡單。

現在，我們可以讓我們創建的變量為我們做一些工作。我們希望這個新函數能夠在每次加載頁面時以及每次執行某些操作時調用更新。所以，我們這樣做。在所有變量聲明之後，在JavaScript代碼的頂部，讓我們調用一個名為pageLoad 的函數，並在其下面創建實際函數：pageLoad;

如果保存文件並在瀏覽器中重新加載index.html文件，則應在控制檯中看到“頁面已加載”。但這不是我們想的。讓我們讓這段代碼真正為我們工作。條件邏輯時間：

如果我們保存並重新加載頁面，我們現在應該看到註冊頁面。但是如果用戶想要登錄怎麼辦？我們如何處理這個問題。很簡單。我們可以設置幾個按鈕，讓用戶在登錄和註冊表單之間切換。在HTML正文部分的註冊和登錄表單上方，添加這些按鈕，用div包裝，我們可以根據需要隱藏和顯示：

然後我們可以在pageload函數下面創建另一個名為changeform的函數。

有很多不同的方法可以解決這個問題，這是一個非常簡單的解決方案，我將繼續下去。如果你願意，歡迎你使用不同的方法。

我們應該在html的主體中添加更多的有條件呈現的部分。我們需要一個用於加載屏幕，一個用於存放登錄用戶的應用程序屏幕。我們可以簡單地模擬一下：

接下來我們需要做的是更新我們的pageLoad函數，並在我們更新應用程序狀態時隨時調用它。該功能現在應該如下所示：

現在，我們已準備好註冊並登錄，開始吧。你之前已經創建了配置對象。所以現在我們只需要捕獲用戶的註冊憑據。

有幾種方法可以做到這一點，為了使它儘可能簡單，我們將只獲取輸入值。在你的signUp功能中，添加：

這只是我們最終向SimpleID API提出發佈請求的開始。我們將加載變量轉變為true，並捕獲註冊表單的輸入字段。在將輸入元素捕獲為變量後，你會注意到我們調用了pageload函數。這只是一個安全措施，因為我們正在更新頁面狀態以顯示加載屏幕，而不是表單。我們希望確保已存儲用戶名、密碼和電子郵件並準備好使用。

我要花點時間指出，我沒有對這些輸入元素進行任何驗證。這超出了本教程的範圍，但你可以這樣做。

我們還存儲了兩個SimpleID API端點作為變量。實際上需要這兩個用於創建帳戶。第一個創建用戶的密鑰鏈（用戶信息，私鑰等）。第二個返回用於構建用戶會話的必要的特定於應用程序的信息。

現在，在繼續執行signUp函數代碼之前，我們應該設置HTTP請求代碼。我們將在需要向SimpleID API發出請求時調用此函數，並承諾結果。所以繼續創建一個名為postToApi的新函數：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

用戶登錄時，我們不需要電子郵件字段。我們還需要將元素ID更改為特定登錄，而不是註冊。我們還更新了要在表單提交和按鈕標籤上調用的函數。很簡單。

現在，我們可以讓我們創建的變量為我們做一些工作。我們希望這個新函數能夠在每次加載頁面時以及每次執行某些操作時調用更新。所以，我們這樣做。在所有變量聲明之後，在JavaScript代碼的頂部，讓我們調用一個名為pageLoad 的函數，並在其下面創建實際函數：pageLoad;

如果保存文件並在瀏覽器中重新加載index.html文件，則應在控制檯中看到“頁面已加載”。但這不是我們想的。讓我們讓這段代碼真正為我們工作。條件邏輯時間：

如果我們保存並重新加載頁面，我們現在應該看到註冊頁面。但是如果用戶想要登錄怎麼辦？我們如何處理這個問題。很簡單。我們可以設置幾個按鈕，讓用戶在登錄和註冊表單之間切換。在HTML正文部分的註冊和登錄表單上方，添加這些按鈕，用div包裝，我們可以根據需要隱藏和顯示：

然後我們可以在pageload函數下面創建另一個名為changeform的函數。

有很多不同的方法可以解決這個問題，這是一個非常簡單的解決方案，我將繼續下去。如果你願意，歡迎你使用不同的方法。

我們應該在html的主體中添加更多的有條件呈現的部分。我們需要一個用於加載屏幕，一個用於存放登錄用戶的應用程序屏幕。我們可以簡單地模擬一下：

接下來我們需要做的是更新我們的pageLoad函數，並在我們更新應用程序狀態時隨時調用它。該功能現在應該如下所示：

現在，我們已準備好註冊並登錄，開始吧。你之前已經創建了配置對象。所以現在我們只需要捕獲用戶的註冊憑據。

有幾種方法可以做到這一點，為了使它儘可能簡單，我們將只獲取輸入值。在你的signUp功能中，添加：

這只是我們最終向SimpleID API提出發佈請求的開始。我們將加載變量轉變為true，並捕獲註冊表單的輸入字段。在將輸入元素捕獲為變量後，你會注意到我們調用了pageload函數。這只是一個安全措施，因為我們正在更新頁面狀態以顯示加載屏幕，而不是表單。我們希望確保已存儲用戶名、密碼和電子郵件並準備好使用。

我要花點時間指出，我沒有對這些輸入元素進行任何驗證。這超出了本教程的範圍，但你可以這樣做。

我們還存儲了兩個SimpleID API端點作為變量。實際上需要這兩個用於創建帳戶。第一個創建用戶的密鑰鏈（用戶信息，私鑰等）。第二個返回用於構建用戶會話的必要的特定於應用程序的信息。

現在，在繼續執行signUp函數代碼之前，我們應該設置HTTP請求代碼。我們將在需要向SimpleID API發出請求時調用此函數，並承諾結果。所以繼續創建一個名為postToApi的新函數：

根據SimpleID API文檔，我們知道正在發送表單數據，以便設置內容類型。你可能已經注意到，在前面的註冊函數中，我們捕獲了一個名為data的變量，該變量具有urlencoded格式，我們需要將此表單數據傳遞給API。

確保用在SimpleID中創建項目時收到的API密鑰替換API Key。

因為我們已經將此作為承諾，所以當承諾結算時，響應將被髮回。所以現在，我們可以在我們signUp之前編寫的代碼下面的函數中執行此操作：

實際上，你可以保存此文件，並使用我們編寫的代碼測試你的註冊表單。但它要做的就是返回一個身份地址，這個地址本身並不是很有用。請記住，我們還需要調用第二個SimpleID API端點。但是，只有當我們收到的密鑰鏈值不是錯誤時，我們才應該這樣做。在console.log（keychain）下面添加以下內容：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

用戶登錄時，我們不需要電子郵件字段。我們還需要將元素ID更改為特定登錄，而不是註冊。我們還更新了要在表單提交和按鈕標籤上調用的函數。很簡單。

現在，我們可以讓我們創建的變量為我們做一些工作。我們希望這個新函數能夠在每次加載頁面時以及每次執行某些操作時調用更新。所以，我們這樣做。在所有變量聲明之後，在JavaScript代碼的頂部，讓我們調用一個名為pageLoad 的函數，並在其下面創建實際函數：pageLoad;

如果保存文件並在瀏覽器中重新加載index.html文件，則應在控制檯中看到“頁面已加載”。但這不是我們想的。讓我們讓這段代碼真正為我們工作。條件邏輯時間：

如果我們保存並重新加載頁面，我們現在應該看到註冊頁面。但是如果用戶想要登錄怎麼辦？我們如何處理這個問題。很簡單。我們可以設置幾個按鈕，讓用戶在登錄和註冊表單之間切換。在HTML正文部分的註冊和登錄表單上方，添加這些按鈕，用div包裝，我們可以根據需要隱藏和顯示：

然後我們可以在pageload函數下面創建另一個名為changeform的函數。

有很多不同的方法可以解決這個問題，這是一個非常簡單的解決方案，我將繼續下去。如果你願意，歡迎你使用不同的方法。

我們應該在html的主體中添加更多的有條件呈現的部分。我們需要一個用於加載屏幕，一個用於存放登錄用戶的應用程序屏幕。我們可以簡單地模擬一下：

接下來我們需要做的是更新我們的pageLoad函數，並在我們更新應用程序狀態時隨時調用它。該功能現在應該如下所示：

現在，我們已準備好註冊並登錄，開始吧。你之前已經創建了配置對象。所以現在我們只需要捕獲用戶的註冊憑據。

有幾種方法可以做到這一點，為了使它儘可能簡單，我們將只獲取輸入值。在你的signUp功能中，添加：

這只是我們最終向SimpleID API提出發佈請求的開始。我們將加載變量轉變為true，並捕獲註冊表單的輸入字段。在將輸入元素捕獲為變量後，你會注意到我們調用了pageload函數。這只是一個安全措施，因為我們正在更新頁面狀態以顯示加載屏幕，而不是表單。我們希望確保已存儲用戶名、密碼和電子郵件並準備好使用。

我要花點時間指出，我沒有對這些輸入元素進行任何驗證。這超出了本教程的範圍，但你可以這樣做。

我們還存儲了兩個SimpleID API端點作為變量。實際上需要這兩個用於創建帳戶。第一個創建用戶的密鑰鏈（用戶信息，私鑰等）。第二個返回用於構建用戶會話的必要的特定於應用程序的信息。

現在，在繼續執行signUp函數代碼之前，我們應該設置HTTP請求代碼。我們將在需要向SimpleID API發出請求時調用此函數，並承諾結果。所以繼續創建一個名為postToApi的新函數：

根據SimpleID API文檔，我們知道正在發送表單數據，以便設置內容類型。你可能已經注意到，在前面的註冊函數中，我們捕獲了一個名為data的變量，該變量具有urlencoded格式，我們需要將此表單數據傳遞給API。

確保用在SimpleID中創建項目時收到的API密鑰替換API Key。

因為我們已經將此作為承諾，所以當承諾結算時，響應將被髮回。所以現在，我們可以在我們signUp之前編寫的代碼下面的函數中執行此操作：

實際上，你可以保存此文件，並使用我們編寫的代碼測試你的註冊表單。但它要做的就是返回一個身份地址，這個地址本身並不是很有用。請記住，我們還需要調用第二個SimpleID API端點。但是，只有當我們收到的密鑰鏈值不是錯誤時，我們才應該這樣做。在console.log（keychain）下面添加以下內容：

好吧，看來這裡發生了很多事，但也沒那麼糟。我們是說，如果第一個api調用沒有錯誤，我們就開始第二個api調用。根據SimpleID文檔，我們需要提供devID用戶的用戶名，用戶密碼，應用程序url和配置文件對象。讓我們快速討論一下profile對象。

SimpleID支持多種Web 3.0協議，其中一種協議是Blockstack。Blockstack具有此配置文件概念，允許用戶相互交互並共享數據。我們希望確保始終有一個配置文件對象，確保你作為開發人員決定構建使用Blockstack存儲的應用程序，或者如果用戶決定使用另一個也實現了SimpleID的應用程序。請參閱，用戶可以在多個應用中使用相同的帳戶憑據。因此，只需知道配置文件格式（如SimpleID 文檔中所述）採用上述形式。當然，我們必須對其進行uriencode，以支持表單數據post到API。 url變量和你提供給profile對象的url必須是格式正確的url，因此如果你在沒有Web服務器的情況下進行開發，則不能只使用window.location.origin。如果是這種情況，你應該提供一個源代碼，比如http://localhost:3000或你計劃將應用程序部署到的最終url。

你可能還注意到，在我們發送給API的數據中，有一個用於開發的標誌。在生產中，要確保始終如此。

在else語句中，如果第一個API調用失敗，我們希望將應用程序狀態轉回登錄屏幕，並在控制檯日誌中記錄某種消息。如果一切都成功了，並且我們調用了第二個API端點，我們需要在該端點上嵌套一些額外的邏輯來支持成功和失敗。在console.log（userdata）下面添加以下內容：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

用戶登錄時，我們不需要電子郵件字段。我們還需要將元素ID更改為特定登錄，而不是註冊。我們還更新了要在表單提交和按鈕標籤上調用的函數。很簡單。

現在，我們可以讓我們創建的變量為我們做一些工作。我們希望這個新函數能夠在每次加載頁面時以及每次執行某些操作時調用更新。所以，我們這樣做。在所有變量聲明之後，在JavaScript代碼的頂部，讓我們調用一個名為pageLoad 的函數，並在其下面創建實際函數：pageLoad;

如果保存文件並在瀏覽器中重新加載index.html文件，則應在控制檯中看到“頁面已加載”。但這不是我們想的。讓我們讓這段代碼真正為我們工作。條件邏輯時間：

如果我們保存並重新加載頁面，我們現在應該看到註冊頁面。但是如果用戶想要登錄怎麼辦？我們如何處理這個問題。很簡單。我們可以設置幾個按鈕，讓用戶在登錄和註冊表單之間切換。在HTML正文部分的註冊和登錄表單上方，添加這些按鈕，用div包裝，我們可以根據需要隱藏和顯示：

然後我們可以在pageload函數下面創建另一個名為changeform的函數。

有很多不同的方法可以解決這個問題，這是一個非常簡單的解決方案，我將繼續下去。如果你願意，歡迎你使用不同的方法。

我們應該在html的主體中添加更多的有條件呈現的部分。我們需要一個用於加載屏幕，一個用於存放登錄用戶的應用程序屏幕。我們可以簡單地模擬一下：

接下來我們需要做的是更新我們的pageLoad函數，並在我們更新應用程序狀態時隨時調用它。該功能現在應該如下所示：

現在，我們已準備好註冊並登錄，開始吧。你之前已經創建了配置對象。所以現在我們只需要捕獲用戶的註冊憑據。

有幾種方法可以做到這一點，為了使它儘可能簡單，我們將只獲取輸入值。在你的signUp功能中，添加：

這只是我們最終向SimpleID API提出發佈請求的開始。我們將加載變量轉變為true，並捕獲註冊表單的輸入字段。在將輸入元素捕獲為變量後，你會注意到我們調用了pageload函數。這只是一個安全措施，因為我們正在更新頁面狀態以顯示加載屏幕，而不是表單。我們希望確保已存儲用戶名、密碼和電子郵件並準備好使用。

我要花點時間指出，我沒有對這些輸入元素進行任何驗證。這超出了本教程的範圍，但你可以這樣做。

我們還存儲了兩個SimpleID API端點作為變量。實際上需要這兩個用於創建帳戶。第一個創建用戶的密鑰鏈（用戶信息，私鑰等）。第二個返回用於構建用戶會話的必要的特定於應用程序的信息。

現在，在繼續執行signUp函數代碼之前，我們應該設置HTTP請求代碼。我們將在需要向SimpleID API發出請求時調用此函數，並承諾結果。所以繼續創建一個名為postToApi的新函數：

根據SimpleID API文檔，我們知道正在發送表單數據，以便設置內容類型。你可能已經注意到，在前面的註冊函數中，我們捕獲了一個名為data的變量，該變量具有urlencoded格式，我們需要將此表單數據傳遞給API。

確保用在SimpleID中創建項目時收到的API密鑰替換API Key。

因為我們已經將此作為承諾，所以當承諾結算時，響應將被髮回。所以現在，我們可以在我們signUp之前編寫的代碼下面的函數中執行此操作：

實際上，你可以保存此文件，並使用我們編寫的代碼測試你的註冊表單。但它要做的就是返回一個身份地址，這個地址本身並不是很有用。請記住，我們還需要調用第二個SimpleID API端點。但是，只有當我們收到的密鑰鏈值不是錯誤時，我們才應該這樣做。在console.log（keychain）下面添加以下內容：

好吧，看來這裡發生了很多事，但也沒那麼糟。我們是說，如果第一個api調用沒有錯誤，我們就開始第二個api調用。根據SimpleID文檔，我們需要提供devID用戶的用戶名，用戶密碼，應用程序url和配置文件對象。讓我們快速討論一下profile對象。

SimpleID支持多種Web 3.0協議，其中一種協議是Blockstack。Blockstack具有此配置文件概念，允許用戶相互交互並共享數據。我們希望確保始終有一個配置文件對象，確保你作為開發人員決定構建使用Blockstack存儲的應用程序，或者如果用戶決定使用另一個也實現了SimpleID的應用程序。請參閱，用戶可以在多個應用中使用相同的帳戶憑據。因此，只需知道配置文件格式（如SimpleID 文檔中所述）採用上述形式。當然，我們必須對其進行uriencode，以支持表單數據post到API。 url變量和你提供給profile對象的url必須是格式正確的url，因此如果你在沒有Web服務器的情況下進行開發，則不能只使用window.location.origin。如果是這種情況，你應該提供一個源代碼，比如http://localhost:3000或你計劃將應用程序部署到的最終url。

你可能還注意到，在我們發送給API的數據中，有一個用於開發的標誌。在生產中，要確保始終如此。

在else語句中，如果第一個API調用失敗，我們希望將應用程序狀態轉回登錄屏幕，並在控制檯日誌中記錄某種消息。如果一切都成功了，並且我們調用了第二個API端點，我們需要在該端點上嵌套一些額外的邏輯來支持成功和失敗。在console.log（userdata）下面添加以下內容：

這裡我們要說的是，如果第二個api調用成功，讓我們解析響應（這是API返回的字符串）。然後我們想要將用戶的用戶名添加到我們現在創建的對象中（因為API不返回用戶名）。完成後，我們需要一種方法來持久化用戶的登錄會話。有不同的方法來處理這個問題，對於應該在本地存儲中存儲哪種類型的數據存在爭議。學習這些主題，但是為了本教程的目的，我將把會話信息放到本地存儲中。

我們還需要翻轉狀態變量，並通過調用pageload更新應用程序狀態。當然，如果第二個api調用失敗，用戶將不會登錄，我們需要將它們返回到註冊屏幕。

如果你保存此項，你可以繼續註冊帳戶。這裡要注意的一點是，如果你只是在瀏覽器中打開index.html文件，而不是運行本地Web服務器，那麼你將需要像這樣的CORS擴展。原因是API端點希望基於瀏覽器的請求具有格式良好的源。不接受以file://開頭的源。但是如果你使用cors擴展，你就可以進行開發了。

如果一切順利，你就可以註冊，你會看到你的註冊表單消失，一個加載指示彈出，然後，我們之前用作佔位符的“This is the app”會出現。

ok，但還有兩件事我們需要做。其一，如果用戶刷新頁面會發生什麼？試試吧。用戶似乎會自動註銷？此外，用戶如何登錄？我們還沒有接通登錄功能。

我們迅速處理會話的持續性。在main.js的pageLoad函數下的文件中，我們只需要快速檢查本地存儲以獲取用戶的會話信息。如果你按照我上面的代碼操作，你可以將它添加到pageLoad函數的頂部：

就這麼簡單！

最後，我們要支持登錄和註銷。這將比設置登錄代碼容易得多。為了登錄，我們要複製一半的註冊碼。我們現在就開始吧。在signup函數下，添加以下內容：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

用戶登錄時，我們不需要電子郵件字段。我們還需要將元素ID更改為特定登錄，而不是註冊。我們還更新了要在表單提交和按鈕標籤上調用的函數。很簡單。

現在，我們可以讓我們創建的變量為我們做一些工作。我們希望這個新函數能夠在每次加載頁面時以及每次執行某些操作時調用更新。所以，我們這樣做。在所有變量聲明之後，在JavaScript代碼的頂部，讓我們調用一個名為pageLoad 的函數，並在其下面創建實際函數：pageLoad;

如果保存文件並在瀏覽器中重新加載index.html文件，則應在控制檯中看到“頁面已加載”。但這不是我們想的。讓我們讓這段代碼真正為我們工作。條件邏輯時間：

如果我們保存並重新加載頁面，我們現在應該看到註冊頁面。但是如果用戶想要登錄怎麼辦？我們如何處理這個問題。很簡單。我們可以設置幾個按鈕，讓用戶在登錄和註冊表單之間切換。在HTML正文部分的註冊和登錄表單上方，添加這些按鈕，用div包裝，我們可以根據需要隱藏和顯示：

然後我們可以在pageload函數下面創建另一個名為changeform的函數。

有很多不同的方法可以解決這個問題，這是一個非常簡單的解決方案，我將繼續下去。如果你願意，歡迎你使用不同的方法。

我們應該在html的主體中添加更多的有條件呈現的部分。我們需要一個用於加載屏幕，一個用於存放登錄用戶的應用程序屏幕。我們可以簡單地模擬一下：

接下來我們需要做的是更新我們的pageLoad函數，並在我們更新應用程序狀態時隨時調用它。該功能現在應該如下所示：

現在，我們已準備好註冊並登錄，開始吧。你之前已經創建了配置對象。所以現在我們只需要捕獲用戶的註冊憑據。

有幾種方法可以做到這一點，為了使它儘可能簡單，我們將只獲取輸入值。在你的signUp功能中，添加：

這只是我們最終向SimpleID API提出發佈請求的開始。我們將加載變量轉變為true，並捕獲註冊表單的輸入字段。在將輸入元素捕獲為變量後，你會注意到我們調用了pageload函數。這只是一個安全措施，因為我們正在更新頁面狀態以顯示加載屏幕，而不是表單。我們希望確保已存儲用戶名、密碼和電子郵件並準備好使用。

我要花點時間指出，我沒有對這些輸入元素進行任何驗證。這超出了本教程的範圍，但你可以這樣做。

我們還存儲了兩個SimpleID API端點作為變量。實際上需要這兩個用於創建帳戶。第一個創建用戶的密鑰鏈（用戶信息，私鑰等）。第二個返回用於構建用戶會話的必要的特定於應用程序的信息。

現在，在繼續執行signUp函數代碼之前，我們應該設置HTTP請求代碼。我們將在需要向SimpleID API發出請求時調用此函數，並承諾結果。所以繼續創建一個名為postToApi的新函數：

根據SimpleID API文檔，我們知道正在發送表單數據，以便設置內容類型。你可能已經注意到，在前面的註冊函數中，我們捕獲了一個名為data的變量，該變量具有urlencoded格式，我們需要將此表單數據傳遞給API。

確保用在SimpleID中創建項目時收到的API密鑰替換API Key。

因為我們已經將此作為承諾，所以當承諾結算時，響應將被髮回。所以現在，我們可以在我們signUp之前編寫的代碼下面的函數中執行此操作：

實際上，你可以保存此文件，並使用我們編寫的代碼測試你的註冊表單。但它要做的就是返回一個身份地址，這個地址本身並不是很有用。請記住，我們還需要調用第二個SimpleID API端點。但是，只有當我們收到的密鑰鏈值不是錯誤時，我們才應該這樣做。在console.log（keychain）下面添加以下內容：

好吧，看來這裡發生了很多事，但也沒那麼糟。我們是說，如果第一個api調用沒有錯誤，我們就開始第二個api調用。根據SimpleID文檔，我們需要提供devID用戶的用戶名，用戶密碼，應用程序url和配置文件對象。讓我們快速討論一下profile對象。

SimpleID支持多種Web 3.0協議，其中一種協議是Blockstack。Blockstack具有此配置文件概念，允許用戶相互交互並共享數據。我們希望確保始終有一個配置文件對象，確保你作為開發人員決定構建使用Blockstack存儲的應用程序，或者如果用戶決定使用另一個也實現了SimpleID的應用程序。請參閱，用戶可以在多個應用中使用相同的帳戶憑據。因此，只需知道配置文件格式（如SimpleID 文檔中所述）採用上述形式。當然，我們必須對其進行uriencode，以支持表單數據post到API。 url變量和你提供給profile對象的url必須是格式正確的url，因此如果你在沒有Web服務器的情況下進行開發，則不能只使用window.location.origin。如果是這種情況，你應該提供一個源代碼，比如http://localhost:3000或你計劃將應用程序部署到的最終url。

你可能還注意到，在我們發送給API的數據中，有一個用於開發的標誌。在生產中，要確保始終如此。

在else語句中，如果第一個API調用失敗，我們希望將應用程序狀態轉回登錄屏幕，並在控制檯日誌中記錄某種消息。如果一切都成功了，並且我們調用了第二個API端點，我們需要在該端點上嵌套一些額外的邏輯來支持成功和失敗。在console.log（userdata）下面添加以下內容：

這裡我們要說的是，如果第二個api調用成功，讓我們解析響應（這是API返回的字符串）。然後我們想要將用戶的用戶名添加到我們現在創建的對象中（因為API不返回用戶名）。完成後，我們需要一種方法來持久化用戶的登錄會話。有不同的方法來處理這個問題，對於應該在本地存儲中存儲哪種類型的數據存在爭議。學習這些主題，但是為了本教程的目的，我將把會話信息放到本地存儲中。

我們還需要翻轉狀態變量，並通過調用pageload更新應用程序狀態。當然，如果第二個api調用失敗，用戶將不會登錄，我們需要將它們返回到註冊屏幕。

如果你保存此項，你可以繼續註冊帳戶。這裡要注意的一點是，如果你只是在瀏覽器中打開index.html文件，而不是運行本地Web服務器，那麼你將需要像這樣的CORS擴展。原因是API端點希望基於瀏覽器的請求具有格式良好的源。不接受以file://開頭的源。但是如果你使用cors擴展，你就可以進行開發了。

如果一切順利，你就可以註冊，你會看到你的註冊表單消失，一個加載指示彈出，然後，我們之前用作佔位符的“This is the app”會出現。

ok，但還有兩件事我們需要做。其一，如果用戶刷新頁面會發生什麼？試試吧。用戶似乎會自動註銷？此外，用戶如何登錄？我們還沒有接通登錄功能。

我們迅速處理會話的持續性。在main.js的pageLoad函數下的文件中，我們只需要快速檢查本地存儲以獲取用戶的會話信息。如果你按照我上面的代碼操作，你可以將它添加到pageLoad函數的頂部：

就這麼簡單！

最後，我們要支持登錄和註銷。這將比設置登錄代碼容易得多。為了登錄，我們要複製一半的註冊碼。我們現在就開始吧。在signup函數下，添加以下內容：

這段代碼與註冊代碼做了同樣的事情，只是它跳過了第一個API調用。因此，如果你仍在註冊頁面上，請單擊屏幕頂部的登錄按鈕，輸入之前用於註冊的憑據，你將看到要加載的頁面更新，然後看到“This is the app”。

現在，因為我們已經持久化了用戶會話，所以你應該能夠刷新頁面，用戶仍然會保持登錄狀態。如果這是應該的，我們只有最後一件事要做。我們需要讓用戶註銷。

回到你的html文件，找到我們寫的應用程序代碼的“This is the app”。讓我們在文本上方添加一個表示“註銷”的按鈕。

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

用戶登錄時，我們不需要電子郵件字段。我們還需要將元素ID更改為特定登錄，而不是註冊。我們還更新了要在表單提交和按鈕標籤上調用的函數。很簡單。

現在，我們可以讓我們創建的變量為我們做一些工作。我們希望這個新函數能夠在每次加載頁面時以及每次執行某些操作時調用更新。所以，我們這樣做。在所有變量聲明之後，在JavaScript代碼的頂部，讓我們調用一個名為pageLoad 的函數，並在其下面創建實際函數：pageLoad;

如果保存文件並在瀏覽器中重新加載index.html文件，則應在控制檯中看到“頁面已加載”。但這不是我們想的。讓我們讓這段代碼真正為我們工作。條件邏輯時間：

如果我們保存並重新加載頁面，我們現在應該看到註冊頁面。但是如果用戶想要登錄怎麼辦？我們如何處理這個問題。很簡單。我們可以設置幾個按鈕，讓用戶在登錄和註冊表單之間切換。在HTML正文部分的註冊和登錄表單上方，添加這些按鈕，用div包裝，我們可以根據需要隱藏和顯示：

然後我們可以在pageload函數下面創建另一個名為changeform的函數。

有很多不同的方法可以解決這個問題，這是一個非常簡單的解決方案，我將繼續下去。如果你願意，歡迎你使用不同的方法。

我們應該在html的主體中添加更多的有條件呈現的部分。我們需要一個用於加載屏幕，一個用於存放登錄用戶的應用程序屏幕。我們可以簡單地模擬一下：

接下來我們需要做的是更新我們的pageLoad函數，並在我們更新應用程序狀態時隨時調用它。該功能現在應該如下所示：

現在，我們已準備好註冊並登錄，開始吧。你之前已經創建了配置對象。所以現在我們只需要捕獲用戶的註冊憑據。

有幾種方法可以做到這一點，為了使它儘可能簡單，我們將只獲取輸入值。在你的signUp功能中，添加：

這只是我們最終向SimpleID API提出發佈請求的開始。我們將加載變量轉變為true，並捕獲註冊表單的輸入字段。在將輸入元素捕獲為變量後，你會注意到我們調用了pageload函數。這只是一個安全措施，因為我們正在更新頁面狀態以顯示加載屏幕，而不是表單。我們希望確保已存儲用戶名、密碼和電子郵件並準備好使用。

我要花點時間指出，我沒有對這些輸入元素進行任何驗證。這超出了本教程的範圍，但你可以這樣做。

我們還存儲了兩個SimpleID API端點作為變量。實際上需要這兩個用於創建帳戶。第一個創建用戶的密鑰鏈（用戶信息，私鑰等）。第二個返回用於構建用戶會話的必要的特定於應用程序的信息。

現在，在繼續執行signUp函數代碼之前，我們應該設置HTTP請求代碼。我們將在需要向SimpleID API發出請求時調用此函數，並承諾結果。所以繼續創建一個名為postToApi的新函數：

根據SimpleID API文檔，我們知道正在發送表單數據，以便設置內容類型。你可能已經注意到，在前面的註冊函數中，我們捕獲了一個名為data的變量，該變量具有urlencoded格式，我們需要將此表單數據傳遞給API。

確保用在SimpleID中創建項目時收到的API密鑰替換API Key。

因為我們已經將此作為承諾，所以當承諾結算時，響應將被髮回。所以現在，我們可以在我們signUp之前編寫的代碼下面的函數中執行此操作：

實際上，你可以保存此文件，並使用我們編寫的代碼測試你的註冊表單。但它要做的就是返回一個身份地址，這個地址本身並不是很有用。請記住，我們還需要調用第二個SimpleID API端點。但是，只有當我們收到的密鑰鏈值不是錯誤時，我們才應該這樣做。在console.log（keychain）下面添加以下內容：

好吧，看來這裡發生了很多事，但也沒那麼糟。我們是說，如果第一個api調用沒有錯誤，我們就開始第二個api調用。根據SimpleID文檔，我們需要提供devID用戶的用戶名，用戶密碼，應用程序url和配置文件對象。讓我們快速討論一下profile對象。

SimpleID支持多種Web 3.0協議，其中一種協議是Blockstack。Blockstack具有此配置文件概念，允許用戶相互交互並共享數據。我們希望確保始終有一個配置文件對象，確保你作為開發人員決定構建使用Blockstack存儲的應用程序，或者如果用戶決定使用另一個也實現了SimpleID的應用程序。請參閱，用戶可以在多個應用中使用相同的帳戶憑據。因此，只需知道配置文件格式（如SimpleID 文檔中所述）採用上述形式。當然，我們必須對其進行uriencode，以支持表單數據post到API。 url變量和你提供給profile對象的url必須是格式正確的url，因此如果你在沒有Web服務器的情況下進行開發，則不能只使用window.location.origin。如果是這種情況，你應該提供一個源代碼，比如http://localhost:3000或你計劃將應用程序部署到的最終url。

你可能還注意到，在我們發送給API的數據中，有一個用於開發的標誌。在生產中，要確保始終如此。

在else語句中，如果第一個API調用失敗，我們希望將應用程序狀態轉回登錄屏幕，並在控制檯日誌中記錄某種消息。如果一切都成功了，並且我們調用了第二個API端點，我們需要在該端點上嵌套一些額外的邏輯來支持成功和失敗。在console.log（userdata）下面添加以下內容：

這裡我們要說的是，如果第二個api調用成功，讓我們解析響應（這是API返回的字符串）。然後我們想要將用戶的用戶名添加到我們現在創建的對象中（因為API不返回用戶名）。完成後，我們需要一種方法來持久化用戶的登錄會話。有不同的方法來處理這個問題，對於應該在本地存儲中存儲哪種類型的數據存在爭議。學習這些主題，但是為了本教程的目的，我將把會話信息放到本地存儲中。

我們還需要翻轉狀態變量，並通過調用pageload更新應用程序狀態。當然，如果第二個api調用失敗，用戶將不會登錄，我們需要將它們返回到註冊屏幕。

如果你保存此項，你可以繼續註冊帳戶。這裡要注意的一點是，如果你只是在瀏覽器中打開index.html文件，而不是運行本地Web服務器，那麼你將需要像這樣的CORS擴展。原因是API端點希望基於瀏覽器的請求具有格式良好的源。不接受以file://開頭的源。但是如果你使用cors擴展，你就可以進行開發了。

如果一切順利，你就可以註冊，你會看到你的註冊表單消失，一個加載指示彈出，然後，我們之前用作佔位符的“This is the app”會出現。

ok，但還有兩件事我們需要做。其一，如果用戶刷新頁面會發生什麼？試試吧。用戶似乎會自動註銷？此外，用戶如何登錄？我們還沒有接通登錄功能。

我們迅速處理會話的持續性。在main.js的pageLoad函數下的文件中，我們只需要快速檢查本地存儲以獲取用戶的會話信息。如果你按照我上面的代碼操作，你可以將它添加到pageLoad函數的頂部：

就這麼簡單！

最後，我們要支持登錄和註銷。這將比設置登錄代碼容易得多。為了登錄，我們要複製一半的註冊碼。我們現在就開始吧。在signup函數下，添加以下內容：

這段代碼與註冊代碼做了同樣的事情，只是它跳過了第一個API調用。因此，如果你仍在註冊頁面上，請單擊屏幕頂部的登錄按鈕，輸入之前用於註冊的憑據，你將看到要加載的頁面更新，然後看到“This is the app”。

現在，因為我們已經持久化了用戶會話，所以你應該能夠刷新頁面，用戶仍然會保持登錄狀態。如果這是應該的，我們只有最後一件事要做。我們需要讓用戶註銷。

回到你的html文件，找到我們寫的應用程序代碼的“This is the app”。讓我們在文本上方添加一個表示“註銷”的按鈕。

現在，回到main.js文件中，我們可以添加如下的signOut函數（非常簡單）：

注：本文由兩部分組成。第一部分側重於身份驗證，第二部分側重於從IPFS發佈和獲取內容。

新興的Web 3.0技術保證了用戶控制權的迴歸 - 不僅僅是數據，還包括互聯網。曾經有一段時間，我們使用的網絡並不是由寡頭壟斷的。這是在我們脫離了AOL這種walled-garden模式之後，我們變得自由的、可以任意連接訪問、可以參與任何事情。但隨後，這種情況又結束了。亞馬遜、谷歌成了權力中心。Facebook決定將其命名為AOL2.0。

現在，通過分佈式存儲的Web技術，我們有機會收回曾經擁有的網絡控制權。IPFS只是Web 3.0領域中的一個解決方案，但它讓我們看到了可能出現的情況。今天，我們將構建一個簡單的notes應用程序，但首先，讓我們瞭解IPFS是什麼。

IPFS（星際文件系統）希望取代HTTP協議，成為世界獲取內容的方式。HTTP和IPFS的最大區別在於，Http是基於位置的，而IPFS是基於內容的。但這究竟意味著什麼呢？這意味著在今天的網絡中，你必須從單一來源獲取內容（基於 AWS S3 bucke越來越多的公司迅速成長起來）。

IPFS是基於內容的，這意味著你可以根據其內容獲取文件。你告訴IPFS網絡節點，你正在查找具有確切內容的文件，並且具有該內容的網絡中的第一個節點將返回該文件。許多同行可能擁有的內容比現在的網絡提供更多的審查阻力，但它也提供了比今天的網絡更多的容錯能力。如果前面提到的s3 bucket由於任何原因變得不可訪問，則無法獲取內容。但是，如果保留你在IPFS上查找的內容的節點變得無法訪問，則網絡將繼續搜索，直到可以訪問保存該內容的節點。

我們可以用一整篇文章來討論IPFS的功能以及它如何幫助web，但是已經有很多關於這方面的文章了。既然你已經對IPFS有了基本的瞭解，那麼在開始本教程之前，還需要掌握一件事：

內容固定

將內容添加到IPFS網絡時，它並不是永久性的。與90年代的舊音樂傳輸服務非常相似，只要對該內容有需求，IPFS網絡將繼續託管內容。但是，當需求下降時，這些內容可能會被垃圾收集。但是如果你需要這個文件保持可訪問性，即使你是唯一一個訪問它的人，即使你每年只訪問一次，那又會怎樣呢？

這就是內容固定發揮作用的地方。你可以自己運行IPFS節點並固定內容，但存在一些缺點。

A）新手很難做到；

B）如果你在本地計算機上運行該節點，除非該計算機始終連接到Internet，否則你將無法訪問該內容；

這就是內容固定服務隨著IPFS的興起而增長的原因。Pinata就是這樣一種服務。Pinata運行多個IPFS節點，併為開發人員提供一個簡單的API，用於在IPFS上存儲和獲取內容。他們還將鎖定內容以確保其可用性。

今天，我們將使用SimpleID和Pinata的組合，在IPFS上構建一個沒有依賴關係的notes應用程序，開始吧。

設置

我們將使用SimpleID API在vanilla JavaScript中構建此應用程序，以使盡可能多的JavaScript框架的開發人員可以訪問它。所以，你需要以下內容：

讓我們通過創建你的項目來設置。從終端創建一個目錄，創建位置隨意。我這創建在/documents/development文件夾中。

首先，創建一個目錄來保存應用程序：mkdir ipfs-notes。如果你願意，你可以給這個應用程序起個別的名字。

然後，切換到該目錄：cd ipfs-notes。一旦完成，我們就準備開始了。由於我們使用可以從瀏覽器調用的API端點，因此無需安裝任何其他內容。

現在，你需要獲取SimpleID API密鑰。你可以在此處註冊。註冊時，系統會要求你驗證電子郵件地址。操作完，你就可以創建一個項目，並選擇你想要包含在項目中的模塊。單擊“Create Project”按鈕，創建名稱，並提供項目URL（注意：出於安全原因，URL必須是唯一的，如果你沒有，可以創建一個或提供你計劃的URL最終部署）。單擊“Edit Modules”按鈕，然後為你的身份驗證模塊選擇Blockstack。切換到存儲模塊，然後選擇Pinata。點擊右下方的Save，然後單擊左上角的菜單並選擇Account返回Account頁面。

你需要做的最後一件事是獲取你的開發者ID和API密鑰。單擊“ View Project”，你將在那裡看到這兩個。將它們保存在某處，我們可以準備好編碼了。

啟動項目

touch index.html

在本教程中，我們將把所有JavaScript編寫在一個JavaScript文件中，並index.html使用腳本標記並導入到我們的文件中。這將是一個單頁應用程序，所以我們只需要一個html文件。

現在，你可以在自己喜歡的代碼編輯器中打開項目，然後就可以開始編碼。在index.html文件中，添加一些標準的HTML模板：

在項目目錄的根目錄中創建一個名為main.js的文件。在這個項目的整個過程中，你只有兩個文件：

讓我們確保一切正常。在main.js文件中，添加以下內容：

現在，打開你的index.html文件，它應該在你的瀏覽器中加載。打開控制檯，你應該看到“testing”這個詞。

現在讓我們添加一些真正的代碼。在我們編輯任何HTML之前，讓我們處理JavaScript。從SimpleID Docs中，我們可以看到需要設置函數和初始配置。接下來，刪除main.js文件中的測試代碼並添加以下內容：

我們聲明瞭一個全局變量，它是一個包含我們的配置選項的對象。在該配置對象中，包含了開發者ID和API密鑰。但我們還需要告訴SimpleID我們正在使用哪些身份驗證模塊和存儲模塊（請記住：我們使用Blockstack進行身份驗證，使用Pinata進行存儲）。appOrigin應該與你在創建項目時生成的任何內容相匹配，並生成API密鑰。scopes數組只允許你訪問某些功能。

你會注意到在我們兩個函數前面都有async關鍵字。我們提出promise的http請求，我們需要在執行其他代碼之前等待promise的解析，因此我們需要使這些函數成為非同步/等待函數。你會很快明白我的意思。

現在，我們需要創建一個註冊表單，並將該表單的結果傳遞給signUp函數。對我來說，我認為註冊表單頁面應該首先顯示用戶是否未登錄，因此我將創建一個指定該頁面的變量。在腳本標記之間的JavaScript代碼頂部我添加了這個：

let startPage = "signup";

這裡，我們還可以創建另外兩個變量。

let loggedIn = false; let loading = false;

現在，讓我們在html的body部分創建我們的註冊表單：

非常基本的形式。我們稍後設置它，但是你會注意到在開頭的div中有一個樣式屬性。為什麼不顯示這個表單？我們需要根據一些變量條件來顯示它：

• 用戶是否已登錄？不要展示它
• 用戶是否決定登錄而不註冊？不要展示它
• 頁面加載了嗎？不要展示它

如何利用我們之前創建的變量條件來呈現這個表單？在這之前，讓我們創建我們的登錄表單。我們可以複製註冊表單並進行一些調整。你會得到這樣的結果:

用戶登錄時，我們不需要電子郵件字段。我們還需要將元素ID更改為特定登錄，而不是註冊。我們還更新了要在表單提交和按鈕標籤上調用的函數。很簡單。

現在，我們可以讓我們創建的變量為我們做一些工作。我們希望這個新函數能夠在每次加載頁面時以及每次執行某些操作時調用更新。所以，我們這樣做。在所有變量聲明之後，在JavaScript代碼的頂部，讓我們調用一個名為pageLoad 的函數，並在其下面創建實際函數：pageLoad;

如果保存文件並在瀏覽器中重新加載index.html文件，則應在控制檯中看到“頁面已加載”。但這不是我們想的。讓我們讓這段代碼真正為我們工作。條件邏輯時間：

如果我們保存並重新加載頁面，我們現在應該看到註冊頁面。但是如果用戶想要登錄怎麼辦？我們如何處理這個問題。很簡單。我們可以設置幾個按鈕，讓用戶在登錄和註冊表單之間切換。在HTML正文部分的註冊和登錄表單上方，添加這些按鈕，用div包裝，我們可以根據需要隱藏和顯示：

然後我們可以在pageload函數下面創建另一個名為changeform的函數。

有很多不同的方法可以解決這個問題，這是一個非常簡單的解決方案，我將繼續下去。如果你願意，歡迎你使用不同的方法。

我們應該在html的主體中添加更多的有條件呈現的部分。我們需要一個用於加載屏幕，一個用於存放登錄用戶的應用程序屏幕。我們可以簡單地模擬一下：

接下來我們需要做的是更新我們的pageLoad函數，並在我們更新應用程序狀態時隨時調用它。該功能現在應該如下所示：

現在，我們已準備好註冊並登錄，開始吧。你之前已經創建了配置對象。所以現在我們只需要捕獲用戶的註冊憑據。

有幾種方法可以做到這一點，為了使它儘可能簡單，我們將只獲取輸入值。在你的signUp功能中，添加：

這只是我們最終向SimpleID API提出發佈請求的開始。我們將加載變量轉變為true，並捕獲註冊表單的輸入字段。在將輸入元素捕獲為變量後，你會注意到我們調用了pageload函數。這只是一個安全措施，因為我們正在更新頁面狀態以顯示加載屏幕，而不是表單。我們希望確保已存儲用戶名、密碼和電子郵件並準備好使用。

我要花點時間指出，我沒有對這些輸入元素進行任何驗證。這超出了本教程的範圍，但你可以這樣做。

我們還存儲了兩個SimpleID API端點作為變量。實際上需要這兩個用於創建帳戶。第一個創建用戶的密鑰鏈（用戶信息，私鑰等）。第二個返回用於構建用戶會話的必要的特定於應用程序的信息。

現在，在繼續執行signUp函數代碼之前，我們應該設置HTTP請求代碼。我們將在需要向SimpleID API發出請求時調用此函數，並承諾結果。所以繼續創建一個名為postToApi的新函數：

根據SimpleID API文檔，我們知道正在發送表單數據，以便設置內容類型。你可能已經注意到，在前面的註冊函數中，我們捕獲了一個名為data的變量，該變量具有urlencoded格式，我們需要將此表單數據傳遞給API。

確保用在SimpleID中創建項目時收到的API密鑰替換API Key。

因為我們已經將此作為承諾，所以當承諾結算時，響應將被髮回。所以現在，我們可以在我們signUp之前編寫的代碼下面的函數中執行此操作：

實際上，你可以保存此文件，並使用我們編寫的代碼測試你的註冊表單。但它要做的就是返回一個身份地址，這個地址本身並不是很有用。請記住，我們還需要調用第二個SimpleID API端點。但是，只有當我們收到的密鑰鏈值不是錯誤時，我們才應該這樣做。在console.log（keychain）下面添加以下內容：

好吧，看來這裡發生了很多事，但也沒那麼糟。我們是說，如果第一個api調用沒有錯誤，我們就開始第二個api調用。根據SimpleID文檔，我們需要提供devID用戶的用戶名，用戶密碼，應用程序url和配置文件對象。讓我們快速討論一下profile對象。

SimpleID支持多種Web 3.0協議，其中一種協議是Blockstack。Blockstack具有此配置文件概念，允許用戶相互交互並共享數據。我們希望確保始終有一個配置文件對象，確保你作為開發人員決定構建使用Blockstack存儲的應用程序，或者如果用戶決定使用另一個也實現了SimpleID的應用程序。請參閱，用戶可以在多個應用中使用相同的帳戶憑據。因此，只需知道配置文件格式（如SimpleID 文檔中所述）採用上述形式。當然，我們必須對其進行uriencode，以支持表單數據post到API。 url變量和你提供給profile對象的url必須是格式正確的url，因此如果你在沒有Web服務器的情況下進行開發，則不能只使用window.location.origin。如果是這種情況，你應該提供一個源代碼，比如http://localhost:3000或你計劃將應用程序部署到的最終url。

你可能還注意到，在我們發送給API的數據中，有一個用於開發的標誌。在生產中，要確保始終如此。

在else語句中，如果第一個API調用失敗，我們希望將應用程序狀態轉回登錄屏幕，並在控制檯日誌中記錄某種消息。如果一切都成功了，並且我們調用了第二個API端點，我們需要在該端點上嵌套一些額外的邏輯來支持成功和失敗。在console.log（userdata）下面添加以下內容：

這裡我們要說的是，如果第二個api調用成功，讓我們解析響應（這是API返回的字符串）。然後我們想要將用戶的用戶名添加到我們現在創建的對象中（因為API不返回用戶名）。完成後，我們需要一種方法來持久化用戶的登錄會話。有不同的方法來處理這個問題，對於應該在本地存儲中存儲哪種類型的數據存在爭議。學習這些主題，但是為了本教程的目的，我將把會話信息放到本地存儲中。

我們還需要翻轉狀態變量，並通過調用pageload更新應用程序狀態。當然，如果第二個api調用失敗，用戶將不會登錄，我們需要將它們返回到註冊屏幕。

如果你保存此項，你可以繼續註冊帳戶。這裡要注意的一點是，如果你只是在瀏覽器中打開index.html文件，而不是運行本地Web服務器，那麼你將需要像這樣的CORS擴展。原因是API端點希望基於瀏覽器的請求具有格式良好的源。不接受以file://開頭的源。但是如果你使用cors擴展，你就可以進行開發了。

如果一切順利，你就可以註冊，你會看到你的註冊表單消失，一個加載指示彈出，然後，我們之前用作佔位符的“This is the app”會出現。

ok，但還有兩件事我們需要做。其一，如果用戶刷新頁面會發生什麼？試試吧。用戶似乎會自動註銷？此外，用戶如何登錄？我們還沒有接通登錄功能。

我們迅速處理會話的持續性。在main.js的pageLoad函數下的文件中，我們只需要快速檢查本地存儲以獲取用戶的會話信息。如果你按照我上面的代碼操作，你可以將它添加到pageLoad函數的頂部：

就這麼簡單！

最後，我們要支持登錄和註銷。這將比設置登錄代碼容易得多。為了登錄，我們要複製一半的註冊碼。我們現在就開始吧。在signup函數下，添加以下內容：

這段代碼與註冊代碼做了同樣的事情，只是它跳過了第一個API調用。因此，如果你仍在註冊頁面上，請單擊屏幕頂部的登錄按鈕，輸入之前用於註冊的憑據，你將看到要加載的頁面更新，然後看到“This is the app”。

現在，因為我們已經持久化了用戶會話，所以你應該能夠刷新頁面，用戶仍然會保持登錄狀態。如果這是應該的，我們只有最後一件事要做。我們需要讓用戶註銷。

回到你的html文件，找到我們寫的應用程序代碼的“This is the app”。讓我們在文本上方添加一個表示“註銷”的按鈕。

現在，回到main.js文件中，我們可以添加如下的signOut函數（非常簡單）：

保存，刷新頁面，然後單擊“註銷”，OK。

你剛剛構建了一個無依賴關係（去中心）的頁面應用程序，允許用戶註冊，登錄和註銷。在第二部分中，你將添加IPFS功能，添加一些樣式，並將其變成真正的應用程序。

—未完待續—