使用OAuth 2.0构建一个Sell应用程序-第5部分:从Mailchimp API获取数据
在本教程系列的这个阶段,您应该已经在Mailchimp上注册了您的应用程序,并在您的应用程序中设置了OAuth。在Mailchimp中,您至少创建了一个具有订阅者的受众。订阅者的电子邮件地址应与您在Zendesk sale中的个人联系人的电子邮件相匹配。亚博
在本教程中,您将为应用程序添加额外的功能。应用程序将向Mailchimp API发出授权请求,以获得受众,然后将其显示在列表中。
本教程涵盖以下步骤:
本教程是构建Zendesk应用程序系列的一部分:亚博
- 第1部分:奠定基础
- 第2部分:在Zendesk sale中安装应用程序亚博
- 第3部分:OAuth 2.0设置)
- 第4部分:在Mailchimp中创建受众
- 第5部分:从Mailchimp API获取数据-您已经完成了
从Sell获取个人电子邮件地址
您将检索联系人使用Mailchimp订阅的受众列表端点。
得到https://服务器.api.mailchimp的.com/3.0/列表?电子邮件=<电子邮件>
首先,您将从Sell获取一个人的电子邮件地址,并将其作为查询参数传递。你可以使用useSellContactEmail钩子,但由于应用程序支持一个位置(person_card
),则可以创建简化版本。
的useClientGet挂钩,由出售ZAF应用程序工具箱包将被使用。它使用了Apps框架client.get ()方法以异步获取给定路径的数据。
的useClientGet
钩子返回一个对象数据
,错误
,反馈
根据请求的状态具有不同值的属性。结构与< ResponseHandler / >
中提到的组件查看模板文件在本教程系列的第2部分中。
如果请求尚未完成,钩子返回:
{数据:零,错误:零,反馈:{状态:“加载”}}
如果请求成功完成,它返回响应数据并更新反馈状态:
{
数据:{
firstName:“埃文”,
姓:“马林”,
电子邮件:”(电子邮件保护)”,
名字:“伊文·马林”,
….
}
错误:零
反馈:{状态:“成功”}
}
从Sell处获取电子邮件地址
重新启动应用程序和ZCLI服务器,以便能够在本地测试它。有关更多信息,请参见本地开发应用程序在第2部分:在Zendesk sale中安装应用程序亚博.
注意:在第3部分:OAuth 2.0设置,将访问令牌作为OAuth参数添加到manifest.json文件。如果要求您在运行ZCLI服务器时输入它,请忽略它并单击输入.它不会影响你的应用。
在Apps出售person_card location的API,您可以访问联系对象.其中一个联系人对象属性是用来检索的电子邮件地址
client.get(“contact.email”)
.用钩子试试这个。在EntryView.tsx文件(src/EntryView.tsx),替换
< EntryView / >
组件,包含以下内容:出口常量EntryView=()=>{
useClientHeight(230)
常量contactEmailResponse=useClientGet(“contact.email”)
返回(
<网格排水沟={假}类名称={css.应用程序}>
<行>
<ResponseHandler
响应={contactEmailResponse}
loadingView={<加载程序/>}
errorView={<div>某物哪里出了错!div>}
emptyView={<div>在那里还没有什么可看的.div>}
>
{((电子邮件]:(字符串])=>(
<上校textAlign=”中心”>
<头contactEmail={电子邮件}/>
<ContentView/>
上校>
)}
ResponseHandler>
行>
网格>
)
}
保存文件并在web浏览器中刷新应用程序。邮件应该还在那里。
处理授权请求
由于您将调用Mailchimp API几次,因此该逻辑将被提取到一个新的helper方法中。我们可以利用现有的助手useClientRequest并传递额外的选项来提出授权的请求。
useClientRequest
使用Apps框架发出HTTP请求。它使用client.request ()方法,该方法是推荐的方法发出请求,这些请求被代理来插入OAuth访问令牌。它将资源的URL作为请求中的第一个参数。如果您需要随请求发送其他参数,您可以将它们定义为第二个参数。
响应的结构与useClientGet你正在使用的钩子从Sell获取个人电子邮件地址.
创建授权请求
创建一个钩子文件夹中的src目录中。
创建一个useClientAuthorizedRequest.tsx文件在里面。将以下代码添加到文件中并保存:
进口{useClientRequest,响应}从“@亚博zendesk / sell-zaf-app-toolbox”
/*类型为'oauth'的参数应该存在于清单中。json文件
{
name: access_token;
“类型”:“oauth”
}
* /
出口默认的函数useClientAuthorizedRequest<T扩展{}>(
url:字符串,
选项:对象={},
依赖关系?:任何(],
):响应<T>{
常量响应=useClientRequest<T>(
url,
{
安全:真正的,
头:{授权:“OAuth {{setting.access_token}}”},
数据类型:json的,
contentType:“application / json”,
…选项,
},
依赖关系,
)
返回响应
}
如在第3部分:OAuth 2.0设置在“在清单中配置应用程序”节中,您必须将以下属性包含到对第三方服务的调用请求中安全:真
授权报头设置为OAuth {{setting.access_token}}
.
有了这个设置,您就可以向Mailchimp API发出第一个请求了。
从Mailchimp检索服务器前缀
创建的useClientAuthorizedRequest
钩子将用于获取授予OAuth访问权限的用户的信息。具体来说,您将获得用户的服务器前缀,这是代表用户调用Mailchimp API所需要的。这个前缀会因用户而异。为了检索服务器前缀,一个GET请求被发送到Mailchimp的元数据端点:
https://登录.mailchimp的.com/oauth2/元数据
从Mailchimp检索服务器前缀
类中创建另一个钩子useMailchimpMetadata.tsx文件/ src /钩子目录,内容如下:
进口{响应}从“@亚博zendesk / sell-zaf-app-toolbox”
进口useClientAuthorizedRequest从”。/ useClientAuthorizedRequest '
进口{LoginMetadata}从“. . /类型”
出口默认的函数useMailchimpMetadata():响应<LoginMetadata>{
返回useClientAuthorizedRequest<LoginMetadata>(
“https://login.mailchimp.com/oauth2/metadata”,
{},
(],
)
}
既然你在使用打印稿在项目中,创建一个types.ts在src /目录并添加以下类型,以便该钩子是静态类型的。
出口接口登录{
电子邮件:字符串
《阿凡达》?:任何
login_id:数量
login_name:字符串
login_email:字符串
}
出口接口MailchimpMeta{
直流:字符串
角色:字符串
帐号名称:字符串
user_id:数量
登录:登录
login_url:字符串
api_endpoint:字符串
}
出口接口LoginMetadata{
数据?:MailchimpMeta
}
调用
useMailchimpMetadata
钩住< EntryView / >
组件。//其他导入
进口useMailchimpMetadata从”。/钩/ useMailchimpMetadata”
出口常量EntryView=()=>{
…//其他钩子
常量mailchimpMetadataResponse=useMailchimpMetadata()//服务器前缀请求
返回…
}
保存文件。
点击“出售”并打开开发人员工具根据您的浏览器使用其中一个快捷方式。
- 谷歌Chrome:选项+⌘+J(在macOS上),或转变+CTRL+J(在Windows / Linux)
- Firefox:选项+⌘+我(在macOS上),或转变+CTRL+我或F12(在Windows / Linux)
单击网络选项卡观察请求。
刷新应用程序。加载应用程序时,查找Mailchimp元数据请求网络选项卡。请求应该成功并返回状态200响应。
切换到预览选项卡检查响应。寻找
api_endpoint
.
服务器前缀将在下一节中用于获取受众。
从Mailchimp获取观众
我们有所有需要的信息来获取观众为一个给定的人。
从Mailchimp获取受众
创建useAudiences.tsx在/ src /钩子目录并添加以下代码:
进口{响应}从“@亚博zendesk / sell-zaf-app-toolbox”
进口useClientAuthorizedRequest从”。/ useClientAuthorizedRequest '
进口{MailchimpLists}从“. . /类型”
常量useAudiences=({
电子邮件,
apiEndpoint,
}:{
电子邮件:字符串
apiEndpoint:字符串
}):响应<MailchimpLists>=>{
常量url=`$ {apiEndpoint}/ 3.0 /列表吗?电子邮件=$ {电子邮件}&sort_field = date_created`
返回useClientAuthorizedRequest<MailchimpLists>(url,{},(])
}
出口默认的useAudiences
的
useAudiences
钩花电子邮件
和apiEndpoint
(服务器前缀),这是需要组成正确的列出的url.将以下类型添加到types.ts文件:
出口接口约束{
may_create:布尔
max_instances:数量
current_total_instances:数量
}
出口接口ListStats{
member_count:数量
unsubscribe_count:数量
cleaned_count:数量
member_count_since_send:数量
unsubscribe_count_since_send:数量
cleaned_count_since_send:数量
campaign_count:数量
campaign_last_sent:字符串
merge_field_count:数量
avg_sub_rate:数量
avg_unsub_rate:数量
target_sub_rate:数量
open_rate:数量
click_rate:数量
last_sub_date:任何
last_unsub_date:字符串
}
出口接口联系{
公司:字符串
address1:字符串
address2:字符串
城市:字符串
状态:字符串
邮政编码:字符串
国家:字符串
电话:字符串
}
出口接口CampaignDefaults{
from_name:字符串
from_email:字符串
主题:字符串
语言:字符串
}
出口接口链接{
rel:字符串
href:字符串
方法:字符串
targetSchema?:字符串
模式?:字符串
}
出口接口列表{
id:字符串
web_id:数量
名字:字符串
联系:联系
permission_reminder:字符串
use_archive_bar:布尔
campaign_defaults:CampaignDefaults
notify_on_subscribe:字符串
notify_on_unsubscribe:字符串
date_created:日期
list_rating:数量
email_type_option:布尔
subscribe_url_short:字符串
subscribe_url_long:字符串
beamer_address:字符串
可见性:字符串
double_optin:布尔
has_welcome:布尔
marketing_permissions:布尔
模块:任何(]
统计数据:ListStats
_links:链接(]
}
出口接口MailchimpLists{
列表:列表(]
total_items:数量
约束:约束
_links:链接(]
}
接下来,您将调用
useAudiences
钩住一个新的< AudiencesList / >
组件,该组件负责显示来自列表请求的受众。看一看JSON成功示例响应熟悉数据结构。我们将迭代观众,显示观众的名字(
audience.name
)及订户数目(audience.stats.member_count
)。创建
AudiencesList.tsx
文件中src /组件/载有以下内容的资料夹:进口*作为反应从“反应”
进口{行}从“@亚博zendeskgarden / react-grid”
进口{ResponseHandler}从“@亚博zendesk / sell-zaf-app-toolbox”
进口ListStroke从“@亚博zendeskgarden / svg-icons / src / 16 / clipboard-list-stroke.svg”
进口useAudiences从“. . /钩/ useAudiences”
进口{列表}从“. . /类型”
进口css从“. . / App.css”
接口AudiencesListProps{
电子邮件:字符串
apiEndpoint:字符串
}
常量观众=({观众}:任何)=>{
返回(
<div类名称={css.观众}>
<div类名称={css.标题}>{观众.名字}div>
<p>成员数:{观众.统计数据.member_count}p>
div>
)
}
常量AudiencesList=({电子邮件,apiEndpoint}:AudiencesListProps)=>{
常量audiencesResponse=useAudiences({电子邮件,apiEndpoint})
返回(
<>
<行justifyContent=”中心”类名称={css.头}>
<div类名称={css.图标}>
<ListStroke/>
div>
<div类名称={css.标题}>观众div>
行>
<行>
<ResponseHandler
响应={audiencesResponse}
errorView={<div>某物哪里出了错!div>}
emptyView={<div>在那里还没有什么可看的.div>}
>
{(({列表}])=>{
返回列表.地图((列表:列表,指数:数量)=>(
<观众关键={指数}观众={列表}/>
))
}}
ResponseHandler>
行>
>
)
}
出口默认的AudiencesList
将以下规则添加到App.css设置观众列表样式的文件:
.观众{
边境-底:固体1pxvar(--zd-颜色-灰色-300);
溢出:隐藏的;
显示:块;
宽度:One hundred.%;
填充:var(--zd-间距-sm);
}
.图标{
保证金-正确的:var(--zd-间距-xs);
}
更新
< EntryView / >
组件src / EntryView.tsx显示受众列表以及发送订阅者电子邮件和服务器前缀://其他导入
进口{MailchimpMeta}从”。/类型
进口AudiencesList从“。/组件/ AudiencesList”
出口常量EntryView=()=>{
…//其他钩子
常量mailchimpMetadataResponse=useMailchimpMetadata()
返回(
<网格排水沟={假}类名称={css.应用程序}>
<行>
<ResponseHandler
反应={(contactEmailResponse,mailchimpMetadataResponse]}
loadingView={<加载程序/>}
errorView={<div>某物哪里出了错!div>}
emptyView={<div>在那里还没有什么可看的.div>}
>
{((电子邮件,mailchimpMetadata]:(字符串,MailchimpMeta])=>(
<上校>
<AudiencesList
电子邮件={电子邮件}
apiEndpoint={mailchimpMetadata.api_endpoint}
/>
上校>
)}
ResponseHandler>
行>
网格>
)
}
的
< ResponseHandler / >
组件接受一个响应数组,并在所有请求完成时显示其子元素。打开web浏览器,在Sell实例中刷新应用程序。您应该看到您的联系人在Sell中订阅的受众列表。
恭喜你!您已经创建了具有工作OAuth流的应用程序。
下一个步骤
最好的学习方法是计划、设计和构建自己的应用程序。您可以使用以下任何资源:亚博电脑端
- 开始- app框架的快速概述
- 设置新应用如何为你的应用程序创建启动文件ZCLI或者使用用于销售应用的ZAF React骨架
- 使用Apps框架-简明的开发人员指南
- 部署应用程序-关于品牌、上传和本地化应用的信息
- ZAF客户端API- ZAF JavaScript客户端的参考
- ZAF核心API-在支持Zendesk Apps框架的所有产品的所有位置中可用的核心事件、动作和属性的参考亚博
- ZAF销售API-应用程序的位置,属性和事件的参考,你可以在应用程序中使用Zendesk销售亚博
- ZAF应用程序工具箱这个包提供了一堆有用的方法、钩子和组件,可以帮助你更快、更少地构建与Zendesk Sell集成的React应用程序。亚博它使用Zendesk A亚博pps框架(ZAF)客户端。
您也可以在网站中寻找答案或提出问题亚博Zendesk Apps框架(ZAF)社区.