响应API演示应用

您是否打算在此基础上开发自己的应用程序Bazaarvoice Response API?我们有东西要给你。的响应API演示应用是一个简单的Node-React应用程序,演示了如何将响应API与我们的3-leg OAuth2 API结合使用。建议您浏览开发人员门户网站并阅读相关内容OAuth2 API响应API在深入下面的应用程序架构之前。

这个应用程序是用创建React应用它由两个独立的组件组成前端客户端在React中后端服务器端在NodeJS。

让我们首先讨论一下后端体系结构。几乎所有的服务器端逻辑都包含在server.js.使用表达NodeJS框架,这个文件定义了以下端点:

  • / api /重定向-这个端点应该处理来自OAuth2的任何传入重定向,使用授权码(如果是第一次登录)或刷新令牌(如果现有的访问令牌已经过期或即将到期)获取访问令牌。如果您正在构建与OAuth2集成的应用程序,则必须定义一个端点以类似的方式处理重定向。
  • / api / check-login-这是一个特定于应用程序的端点,它的定义是为了客户端可以很容易地使用服务器验证用户是否登录,然后将他们带到登录页面。
  • 对响应API的GET、POST、PATCH、DELETE调用的抽象——这些端点基本上是响应API提供的端点的克隆在这里在开发者门户网站。这样一来,客户端就可以直接调用这些受保护的端点,而不必通过用户的浏览器公开任何OAuth2凭据。与获取和刷新OAuth令牌有关的所有逻辑都安全地保存在服务器端。

此应用程序使用express-session使用浏览器cookie存储和维护用户会话,这对于能够在不存储后端状态的情况下维护多个用户非常重要。但是,用户会话的这种实现不适合生产应用程序,您可能应该使用cookie和会话存储的组合来维护用户会话。

服务器端凭据和配置应该存储在服务器/ server-config.json然后由Node服务器接收。注意,这些凭证是机密的,不应该以任何方式暴露给客户端。

说到前端架构,我们使用反应图书馆和语义UI用户界面组件。客户端做了很多事情,从查询评论API的对话然后使用评审ID来获取/添加/修改/删除对该评审的相应响应响应API.前端的核心由以下组件组成:

  • 登录页面—如果用户没有登录(我们使用/ api / check-login我们将他们重定向到这个页面,这个页面有一个小部件,允许他们转到Bazaarvoice登录页面,输入他们的Bazaarvoice门户登录凭据,一旦他们被正确验证,OAuth2 API将他们重定向到/ api /重定向端点,然后处理所有令牌交换逻辑。在应用程序配置过程中,您可以将这个重定向URI配置为您想要的任何东西,但为了使演示应用程序按预期工作,它应该是http://localhost:5000/api/redirect正如您在配置文件中看到的那样。所有OAuth2登录和令牌交换过程都发生在这一步中。
  • 搜索页面-这个页面实际上是这个应用程序的登陆页面,用户可以在这里输入一个Review ID(可以使用Workbench或对话API获得),然后他们就会被带到Review页面。

  • 评论页面-一旦用户被验证,他们搜索一个有效的评论ID,他们被带到这个页面,通过调用获取指定的评论API的对话然后通过调用应用程序的后端来获取该审查的所有响应,而后端又调用响应API.因此,在这个页面上,用户可以看到评论的内容以及所有的回复。这还允许他们添加新的响应、编辑现有响应或删除响应。

您可能已经注意到响应上的department字段显示为下拉菜单。这些菜单选项已在演示应用程序中硬编码,可以在departmentFormOptions.js文件。此外,client.js是一个实用程序文件,它将所有常用的API调用作为客户端所有组件都可以访问的简单函数。

客户端配置存储在response-demo /客户/ src / config.js跑龙套文件。当前端客户端在运行前打包时,这是内置于项目中的。浏览器可以访问这些配置,因此不应该在这里存储任何机密信息。

除此之外,该应用程序遵循相当标准的体系结构,您可以阅读更多有关它的内容在这里.在部署方面,有一个Dockerfile它构建客户端构件,设置服务器并在本地环境中启动和运行应用程序。遵循这些指令让它在本地运行。该应用程序还可以部署到弗林通过更改配置中的重定向URI,并确保您的Flynn重定向URI被添加到应用程序凭据的允许重定向URI列表中。