银行卡识别

1. 简介

1.1 场景简介

我们以银行卡 OCR 识别为例，为大家实例讲解如何使用简道云前端事件 + 银行卡 OCR 接口，实现银行卡的 OCR 识别。

1.2 预期效果

上传银行卡照片，自动识别并回填相应的银行卡信息，点击体验效果：银行卡识别demo。

2. 接口准备

2.1 购买接口

首先我们先找到一个银行卡 OCR 接口，我们以阿里云官方提供的 OCR 接口为例，讲解如何在简道云的前端事件中配置，点击进入阿里云市场 找到银行卡识别接口：

我们先购买一个免费试用版本，然后可以在「控制台 >> 云市场 >> 我的服务」中看到我们刚刚购买的接口信息。

2.2 接口分析

接下来，点击接口，往下翻到 API 接口的详情介绍，对「银行卡 OCR 识别」的接口进行分析。

【调用地址】：https://bankid.market.alicloudapi.com/ai-market/ocr/ai-bank-card

【请求方式】：POST

【返回类型】：JSON

【请求的Headers】：Authorization: APPCODE +英文空格+ 你自己的 APPCODE（服从阿里云云市场的标准鉴权方式）

Authorization:APPCODE AppCode值

【请求body】

可以是图片的 URL 或者 base64 编码：

正常返回示例：

{
    "BANK_CARD_STATUS":"艾科瑞特，让企业业绩长青",         #银行卡识别状态
    "BANK_CARD_ID":"6227003028940029516",                  #银行卡号
    "BANK_NAME":"建设银行",                                #银行卡发卡银行
    "BANK_CARD_TYPE":"1",                                  #银行卡类型，其中0为未知卡；1为储蓄卡（借记卡）；2为信用卡
    "BANK_CARD_TYPE_NAME":"储蓄卡（借记卡）",              #银行卡类型名称
    "BANK_CARD_VALID_DATE":"NO VALID"                      #银行卡有效期，若为不存在有效期，则为NO VALID
}

3. 表单设计

新建「银行卡识别」表单，字段设置如下：

4. 前端事件设置

4.1 配置入口

设置完表单后，即可在表单属性中配置前端事件：

4.2 设置事件名称&说明

添加好前端事件后，首先设置前端事件的基础信息，即事件名称和事件说明，用于区分前端事件：

4.3 设置触发动作

设置触发动作：触发字段选择「上传银行卡照片」字段。

4.4 设置执行动作

根据【2.2 接口分析】章节，设置执行动作如下：

https://bankid.market.alicloudapi.com/ai-market/ocr/ai-bank-card

Hearder：
	name:Authorization
    value:APPCODE AppCode值
    *使用英文空格*
Body:x-www-form-urlencoded
	name1:AI_BANKCARD_IMAGE_TYPE
    value1:1
	name2:AI_BANKCARD_IMAGE
    value2:点击「插入字段」，选择「上传银行卡照片」字段

4.5 设置返回值

1）返回值格式选择 JSON，点击返回值设置下方的「点击设置」：

2）进入返回值设置页面，添加「银行卡名称」、「银行卡号」、「有效期」等字段为其设置返回值：

3）根据 Json Path 规则及返回示例中的参数，按照格式，完成字段的配置如下：

5. 保存与调试

1）按照上述步骤，已完成前端事件的全部设置，接下来点击「保存并调试」，可进入调试，检查配置有无问题。

2）上传银行卡照片，然后点击底部「发送请求」，即可看到返回的发票信息，即配置成功。