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

执照

麻省理工学院许可证