jamstack ecommerce example

由於網站訪問者訪問者訪問的頁面在要求時不會動態生成，但預先生成並用作靜態HTML文件，因此推出新功能和內容的過程看起來與“傳統” Web應用程序中有點不同。

1. 本地開發：可以在本地完成新功能的發展。

   NUXT.JS配備了非常有效的工具，可以支持具有熱模塊更換和實時重新加載的Dev Server之類的出色開發人員體驗。

   產品的內容與源代碼一起存儲在GIT存儲庫中，因此開發人員可以在實施和測試過程中使用實際產品數據。

   API端點應使用一些模擬服務器（例如WireMock或Mockserver）固定，以便獨立於實際外部系統工作。對於OpenID連接身份驗證，請考慮在本地設置KeyCloak。

   注意：此示例項目不包括任何模擬服務器。

2. 預取決於內容：每次都必須在網站上發布新的或更新的產品數據，必須在GIT存儲庫中更新預取的內容JSON文件，然後才能生成新版本的static HTML文件。

   特殊Node.js內容腳本將連接到Salesforce，並通過Salesforce REST API獲取最新數據。內容JSON文件將相應地更新，並且可以將其投入到GIT存儲庫中。

   這完全取決於您在執行此腳本的何時何地。例如，它可以作為github動作或在Travis CI上的CI過程中運行。

   注意：Salesforce只是從中獲取內容的潛在數據源的一個示例。內容文件也可以從任何其他數據源創建。

3. 發布靜態HTML文件： GIT存儲庫中的每個提交代表網站的某個實現和內容狀態，可能會發布。

   構建過程將源代碼轉換為優化的塊，並通過計算實現的頁面組件和預取的內容文件的所有可訪問路由來生成靜態HTML文件。

   最後，所有生成的網站文件都可以發佈到任何Web服務器或內容交付網絡，例如NetLify。

   注意：構建過程還可以利用API請求來加載git存儲庫中內容文件中未存儲的內容。

4. 通過API的動態增強：將網站加載到瀏覽器中時，訪問者是靜態HTML文件。這是非常快的，因為服務器上沒有什麼需要動態生成的。

   一旦網頁加載了動態JavaScript啟動並使用動態功能增強頁面。這可以是購物車或顯示個性化用戶內容之類的功能。

   可以通過從瀏覽器發送API請求來獲取動態數據。訪問者可以使用OAUTH 2.0和OpenID Connect（OpenID Connect）等標準協議進行身份驗證，以允許網站介紹個人內容。

運行展示櫃

先決條件

• Node.js 12.x或更高
• 紗線軟件包經理
• Salesforce組織，例如免費開發人員版

設置Salesforce

設置測試用戶和配置文件

為什麼？它可以在閃電社區中使用真正的客戶用戶登錄。

1. 打開Salesforce設置並導航到“社區”。確保啟用社區。
2. 在Salesforce設置中，導航到“配置文件”。
3. 克隆個人資料“客戶社區用戶”，以創建專門為新社區用戶的自定義配置文件。例如，稱其為“示例客戶用戶”。
4. 打開銷售雲以創建一個帳戶和聯繫以進行測試。在聯繫人視圖上，選擇快速操作“啟用客戶用戶”。
   • 將“用戶許可證”設置為“客戶社區”。
   • 分配上一步中創建的配置文件。
   • 輸入您自己的電子郵件地址以接收歡迎電子郵件，一旦用戶添加為社區成員。

安裝Salesforce元數據

如果您打算使用內容更新腳本，並且如果您想在用戶在網站上註銷時，則需要此步驟。

為什麼？它將自定義對象的“產品類別”添加到您的Salesforce org，並在product2對像上安裝自定義字段，以使您定義產品所屬的類別。它還安裝了閃電網絡組件，該組件將在特殊的註銷社區頁面上使用，該頁面將自動登錄用戶。

1. 下載並安裝Salesforce CLI。

2. 在目錄salesforce中打開終端。

3. 將Salesforce CLI連接到您的Salesforce組織。

   sfdx force:auth:web:login -a MyOrg -s

4. 將SFDX項目部署到您的Salesforce組織。

   sfdx force:source:deploy -p force-app

設置集成用戶

為什麼？它允許API服務器和內容腳本與特定的技術用戶連接到Salesforce，該技術允許個人訪問控制。

1. 打開Salesforce設置並導航到“用戶”。
2. 創建一個新用戶。
   • 將“用戶許可證”設置為“ Salesforce”
   • 分配配置文件“系統管理員”。
   • 給用戶一些名稱，例如“集成”。
   • 輸入您自己的電子郵件地址，以接收註冊電子郵件。
3. 如果您打算使用內容更新腳本，請為Integration用戶分配權限集“產品類別編輯器”。
4. 確認驗證電子郵件，並通過輸入新密碼來完成用戶註冊。
5. 使用該集成用戶登錄Salesforce。
6. 在設置圖標旁邊的用戶菜單中，選擇“設置”。
7. 導航到“重置我的安全令牌”，然後單擊按鈕“重置安全令牌”。您應該通過電子郵件收到新的令牌。

建立閃電社區

為什麼？需要在OpenID連接身份驗證流期間顯示登錄頁面。

1. 打開Salesforce設置並導航到“所有社區”。
2. 單擊按鈕“新社區”，然後選擇模板“構建自己的”。給它一些任意的名稱，最好讓URL空白。
3. 打開新社區的“工作區”，然後進入“行政”。
4. 在“設置”部分中激活社區。
5. 暫時切換回到“所有社區”的Salesforce設置，並打開新社區的“建築商”。單擊“發布”按鈕。
6. 回到社區的“工作區”中，轉到“電子郵件”部分，然後在“發送者”配置中輸入您自己的電子郵件地址。確保確認發送給您的電子郵件。
7. 激活複選框“發送歡迎電子郵件”。
8. 在“成員”部分中，分配了先前為客戶社區用戶創建的配置文件（例如“示例客戶用戶”）。您應該收到以前創建的測試用戶的歡迎電子郵件。通過輸入新密碼來完成用戶註冊。

如果您想在網站上註銷時為社區用戶設置自動註銷，請執行以下其他步驟：

1. 打開社區的“工作空間”，然後進入“行政”。
2. 在“登錄和註冊”部分中，輸入網站的註銷URL在“登錄頁面URL”字段中（例如，如果在http：// localhost上運行網站：3000輸入url url http：// localhost：3000/logout）
3. 切換回到“所有社區”的Salesforce設置，並打開社區的“建築商”。
4. 創建一個具有任意內容佈局的空白標準頁面（例如“ 1個全寬列”）。將頁面的名稱“註銷”和URL“註銷”。
5. 在頁面設置中，將“頁面訪問”設置為“需要登錄”。
6. 將自定義組件“ JSEC自動註銷”從“組件”面板拖到頁面的內容區域。不要混淆：這會立即將您重定向到經驗構建器中的錯誤頁面，因為該組件在渲染時嘗試將用戶登錄。這只是一個指標表明該組件按預期工作。
7. 向社區發布更改。

設置連接的應用程序

為什麼？這是針對網站訪問者的OpenID Connect Authentication所必需的，並允許API服務器和內容腳本以安全的方式連接到Salesforce。

1. 打開Salesforce設置並導航到“應用程序管理器”。
2. 單擊“新連接應用程序”按鈕，然後輸入以下數據。
   • 連接的應用程序名稱：（選擇您喜歡的任何內容，例如“本地OIDC”）
   • API名稱：（選擇您喜歡的任何東西，例如“ local_oidc”）
   • 聯繫電子郵件：（您的電子郵件地址）
   • 啟用Oauth設置：激活
   • 回調URL：http：// localhost：3000/login/callback
   • 選定的Oauth範圍：
     • 訪問您的基本信息（ID，個人資料，電子郵件，地址，電話）
     • 允許訪問您的唯一標識符（OpenID）
     • 隨時代表您執行請求（refresh_token，offline_access）
   • 需要Web服務器流的秘密：停用
   • 配置ID令牌：激活
   • 令牌有效：（某些合理的會話壽命，例如240分鐘）
   • ID令牌受眾：（留空，表示使用消費者密鑰）
   • 包括標準索賠：激活
3. 從連接的應用程序視圖複製“消費者密鑰”和“消費者秘密”，以便以後在配置參數中使用。
4. 單擊按鈕“管理”，然後單擊“編輯策略”。
5. 將“允許用戶”字段設置為“管理批准的用戶已預先授權”。
6. 在“配置文件”面板中，單擊按鈕“管理配置文件”，並分配了先前為客戶社區用戶（例如“示例客戶用戶”）創建的配置文件和集成用戶（例如“系統管理員”）的配置文件。

運行內容更新腳本

此步驟是可選的，因為GIT存儲庫已經包含一些示例產品和類別進行演示。

您應該在Salesforce org中有一些product2對象的記錄，這些記錄是活動的，並且在某些用於內容更新的價格簿中具有價格簿條目。

您還可以創建一些產品類別並將其分配給您的產品。

注意：腳本要求Salesforce元數據部署在您的組織中。

1. 在目錄content-scripts中打開終端。

2. 設置以下環境變量。

   姓名	描述
   salesforce_instance_url	Salesforce實例的基本URL（模式https://xx##.salesforce.com ）
   salesforce_api_version	使用Salesforce API版本
   salesforce_token_endpoint	OAuth 2.0 Salesforce實例的令牌端點
   salesforce_client_id	連接應用程序的消費者鑰匙（從應用程序視圖之前複製）
   salesforce_client_secret	連接應用程序的消費者秘密（從應用程序視圖中復制）
   salesforce_username	集成用戶的用戶名
   salesforce_password	集成用戶 +安全令牌的密碼（只需加入兩個）
   salesforce_price_book_name	選修的。價格簿要使用。默認值：“標準價格簿”

   例子：

   SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
   SALESFORCE_API_VERSION=49.0
   SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
   SALESFORCE_CLIENT_ID=3MVG9...ru7XA
   SALESFORCE_CLIENT_SECRET=17DAD...0110F
   [email protected]
   SALESFORCE_PASSWORD=abcde...KiQ9n

   提示：您可以將這些變量分配放在名為.env的文件中content-scripts以進行開發和測試。

3. 安裝node.js依賴項。

   yarn install

4. 運行腳本以更新目錄content中的類別和產品JSON文件。

   yarn start

運行API服務器

1. 在目錄api中打開終端。

2. 設置以下環境變量。

   姓名	描述
   港口	本地服務器端口要聆聽。默認值：3000
   salesforce_instance_url	Salesforce實例的基本URL（模式https://xx##.salesforce.com ）
   salesforce_api_version	使用Salesforce API版本
   salesforce_token_endpoint	OAuth 2.0 Salesforce實例的令牌端點（不是社區）
   salesforce_jwks_e​​ndpoint	OpenID Connect JSON Web密鑰設置Salesforce Lightning社區的終點
   salesforce_issuer_url	Salesforce發行的ID令牌中包含的發行人URL
   salesforce_client_id	連接應用程序的消費者鑰匙（從應用程序視圖之前複製）
   salesforce_client_secret	連接應用程序的消費者秘密（從應用程序視圖中復制）
   salesforce_username	集成用戶的用戶名
   salesforce_password	集成用戶 +安全令牌的密碼（只需con繞兩個）
   salesforce_price_book_name	選修的。價格簿要使用。默認值：“標準價格簿”
   Security_cors_origin	Web應用程序的基本URL允許訪問服務器。

   例子：

   PORT=4000
   SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
   SALESFORCE_API_VERSION=49.0
   SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
   SALESFORCE_JWKS_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/id/keys
   SALESFORCE_ISSUER_URL=https://georgwittberger-developer-edition.eu25.force.com
   SALESFORCE_CLIENT_ID=3MVG9...ru7XA
   SALESFORCE_CLIENT_SECRET=17DAD...0110F
   [email protected]
   SALESFORCE_PASSWORD=abcde...KiQ9n
   SECURITY_CORS_ORIGIN=http://localhost:3000

   提示：您可以將這些變量分配放在名為.env的文件中api以進行開發和測試。

3. 安裝node.js依賴項。

   yarn install

4. 運行服務器。

   yarn start

運行Web應用程序

1. 在項目根目錄中打開終端。

2. 設置以下環境變量。

   姓名	描述
   api_url	API服務器的基本URL
   logout_url	選修的。登錄頁面URL Salesforce Lightning社區
   oauth2_authorize_endpoint	OAuth 2.0 Salesforce Lightning社區的授權終點
   oauth2_userinfo_endpoint	API服務器的用戶信息端點
   oauth2_client_id	連接應用程序的消費者鑰匙（從應用程序視圖之前複製）
   oauth2_scopes	在身份驗證期間請求的OAuth 2.0範圍，逗號分隔

   例子：

   API_URL=http://localhost:4000
   LOGOUT_URL=https://georgwittberger-developer-edition.eu25.force.com/s/logout
   OAUTH2_AUTHORIZE_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/services/oauth2/authorize
   OAUTH2_USERINFO_ENDPOINT=http://localhost:4000/userinfo
   OAUTH2_CLIENT_ID=3MVG9...ru7XA
   OAUTH2_SCOPES=openid,id

   提示：您可以將這些變量分配放在項目根.env中的文件中，以進行開發和測試。

   注意：如果未提供變量LOGOUT_URL則可以將用戶立即重定向到網站的註銷頁面，而無需外部往返。

3. 安裝node.js依賴項。

   yarn install

4. 要么啟動提供實時重新加載的開發服務器...

   yarn dev

5. ...或首先生成靜態HTML文件，然後從dist目錄中提供這些文件。

   yarn generate
   yarn start

6. 在http：// localhost上打開瀏覽器：3000

執照

麻省理工學院許可證