【得捷电子Follow me第4期】终极任务一：DigiKey电子元器件价格及库存监视器（上）

HonestQiao

【得捷电子Follow me第4期】终极任务一：DigiKey电子元器件价格及库存监视器（上） [复制链接]

<i class="pstatus"> 本帖最后由 HonestQiao 于 2024-1-23 08:59 编辑 </i>

>■  终极任务一：访问 https://www.digikey.cn/zh/resources/api-solutions，以了解得捷(DigiKey)数字化解决方案及其API操作，设计一款DigiKey电子元器件价格及库存监视器，能实时同步并显示指定，电子元器件的价格、库存等信息。

## 一、了解得捷(DigiKey)数字化解决方案及其API操作

通过该终极任务一提供的网址 [https://www.digikey.cn/zh/resources/api-solutions](https://www.digikey.cn/zh/resources/api-solutions)，可以详细了解得捷(DigiKey)数字化解决方案及其API操作。

得捷(DigiKey)数字化解决方案提供的API，就是把得捷网站上的各项产品信息，通过API包装，让我们可以在自己的程序、系统或者应用中进行调用，从而完成一些不需要在得捷网站上就能完成的工作：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778769_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-21_10.51.01.png</strong> <em class="xg1">(57.25 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778769" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778769&handlekey=savephoto_778769">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

目前得捷(DigiKey)数字化解决方案API提供了下面这些功能方面的API接口：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778770_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-21_10.51.48.png</strong> <em class="xg1">(212.2 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778770" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778770&handlekey=savephoto_778770">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

要完成本次的终极任务一，可以使用如下的API接口：
* **V3版本产品详情API接口**：[https://developer.digikey.com/products/product-information/partsearch/productdetails](https://developer.digikey.com/products/product-information/partsearch/productdetails "https://developer.digikey.com/products/product-information/partsearch/productdetails")

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778772_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-21_10.53.33.png</strong> <em class="xg1">(116.32 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778772" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778772&handlekey=savephoto_778772">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

* **V4版本的产品详情API接口**：[https://developer.digikey.com/products/product-information-v4/productsearch/productdetails](https://developer.digikey.com/products/product-information-v4/productsearch/productdetails "https://developer.digikey.com/products/product-information-v4/productsearch/productdetails")

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778773_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-21_10.53.57.png</strong> <em class="xg1">(107.85 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778773" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778773&handlekey=savephoto_778773">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

如何应用这些API，DigiKey 数字化解决方案特提供了入门指引：
[https://developer.digikey.com/zh-hans/homepage](https://developer.digikey.com/zh-hans/homepage "https://developer.digikey.com/zh-hans/homepage")

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778775_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-21_10.55.24.png</strong> <em class="xg1">(91.89 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778775" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778775&handlekey=savephoto_778775">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

把得捷(DigiKey)数字化解决方案的这些API给应用好，你就能成为一名合格的二道贩子，用自己的系统、用自己的网站、用自己的应用，帮得捷带货了。

## 二、oAuth验证与授权了解
得捷(DigiKey)数字化解决方案的API，不是随随便便就能调用的，你首先需要有得捷(DigiKey)数字化解决方案的开发者账户和对应的授权，然后还要在你的程序中，通过oAuth从得捷(DigiKey)数字化解决方案平台获取访问钥匙(动态变化的)，然后通过这个钥匙，才能进行API接口的调用。

得捷(DigiKey)数字化解决方案平台文档如是说道：
[https://developer.digikey.com/zh-hans/documentations#tab_link_4](https://developer.digikey.com/zh-hans/documentations#tab_link_4 "https://developer.digikey.com/zh-hans/documentations#tab_link_4")

> 验证与授权
> OAuth 和 Digi-Key API 概述
> 当客户端应用程序将浏览器重定向到 Digi-Key URL 时，授权序列开始。
> 
> 该 URL 包含指明所请求访问类型的查询参数。
> 
> Digi-Key 的授权服务器负责处理用户验证和用户准许。 在验证过程中，使用的是最终用户的“我的 Digi-Key”用户名和密码（而不是开发者的用户名和密码）。
> 
> 结果返回一个授权码，是由 Digi-Key 的授权服务器以查询字符串的形式返回到您的应用程序的。
客户端应用程序在收到授权码后，可以将该代码（用应用程序的客户端 ID 和客户端密钥进行请求）交换成访问令牌和刷新令牌。

> 然后，客户端应用程序可以使用访问令牌访问它已订阅的 Digi-Key API。

基本的逻辑流程如下：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778776_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>OAuthSequence.png</strong> <em class="xg1">(74.58 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778776" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778776&handlekey=savephoto_778776">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

在这里，所谓的oAuth，就是通过第三方平台，为我们自己的程序(系统/网站/应用)，提供用户对应的访问权限的一种验证授权手段。
例如有很多国内外的App或者网站，可以使用Google账户、Facebook账户、Github账户、微信账户等进行登录，使用的就是oAuth。

在网上找了一张图，很详细的讲了oAuth涉及到的概念和工作流程：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778777_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>oAuth.jpeg</strong> <em class="xg1">(975.21 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778777" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778777&handlekey=savephoto_778777">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

也可以从下面的网址学习了解 Github oAuth认证流程：
[https://lotabout.me/2020/OAuth-2-workflow/](https://lotabout.me/2020/OAuth-2-workflow/ "https://lotabout.me/2020/OAuth-2-workflow/")

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778780_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>oauth-authorization-code2.jpg</strong> <em class="xg1">(291.98 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778780" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778780&handlekey=savephoto_778780">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

通俗的了解，也可以看：[https://zhuanlan.zhihu.com/p/338815329](https://zhuanlan.zhihu.com/p/338815329 "https://zhuanlan.zhihu.com/p/338815329")

简单来说，就是用户在你的程序(系统/网站/应用)中，通过他/她自己的身份登录授权(由Google账户、Facebook账户、Github账户、微信账户等提供)，然后获取可以用该用户身份访问授权的信息。

但该终极任务一就是需要获取产品的信息，难道也需要用用户的身份登录授权吗？
答案是肯定的！
例如售价，很多电商平台就可能杀熟，新老的用户售价不同，VIP、SVIP、SSVIP、SSVIP用户售价也不同。
再者，也不大可能为了产品信息API，单独提供一个授权方式。

落实到得捷(DigiKey)数字化解决方案上，就是用户在你的程序(系统/网站/应用)中，通过他/她自己的身份登录授权(由得捷(DigiKey)数字化解决方案平台提供)，然后通过授权信息，再调用得捷(DigiKey)数字化解决方案的API，从而获取可以用该用户身份访问授权的信息。

## 三、得捷(DigiKey)数字化解决方案应用创建
得捷(DigiKey)数字化解决方案提供的API，需要先在平台上注册应用，然后在自己的程序中，通过应用对应的授权资料，进行oAuth认证和API接口的调用。

### 1. 沙盒应用程序
根据入门指导，在得捷(DigiKey)数字化解决方案网站上，注册登陆以后，可以先创建沙盒应用程序，进行开发工作。在沙盒应用程序环境中，所有的数据都不会最终保留，对用户的真实数据不会产生影响。
待开发工作完成后，能够在沙盒应用程序环境中，都跑通了，就可以创建或者使用正式应用的授权资料了。

登录自己的账户后，按照如下的途径创建沙盒程序应用：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778781_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-21_11.16.55.png</strong> <em class="xg1">(121.65 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778781" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778781&handlekey=savephoto_778781">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

沙盒程序应用的信息填写参考如下：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778782_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-21_11.18.31.png</strong> <em class="xg1">(116.14 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778782" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778782&handlekey=savephoto_778782">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

基本信息部分，回调网址，需要是https开头的，以保证数据网络传输的安全。

功能选项部分，把能勾上的，全部都勾上：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778783_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-21_11.18.48.png</strong> <em class="xg1">(149.63 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778783" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778783&handlekey=savephoto_778783">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

创建完成后，沙盒应用程序界面中，下面红框圈起来的提供的授权资料，就是我们程序中需要的：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778785_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-21_11.22.01.png</strong> <em class="xg1">(161.3 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778785" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778785&handlekey=savephoto_778785">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

### 2. 正式应用程序
沙盒应用程序调好以后，就可以创建正式应用了，具体步骤如下：
先进入组织管理，创建组织：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778803_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-21_11.44.15.png</strong> <em class="xg1">(83.27 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778803" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778803&handlekey=savephoto_778803">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

再到组织中，创建应用：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778804_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-21_11.44.37.png</strong> <em class="xg1">(68.35 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778804" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778804&handlekey=savephoto_778804">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

后续的步骤，就和沙盒应用程序一样了：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778782_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-21_11.18.31.png</strong> <em class="xg1">(116.14 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778782" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778782&handlekey=savephoto_778782">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

**特别注意：**
> 需要特别注意的是，上面的OAuth回调网址，不管是在沙盒应用程序环境中，还是在正式应用环境中，都需要提供https地址。虽然OAuth规范中，允许应用端自己决定使用不安全的http网站还是安全的https网址，但得捷(DigiKey)数字化解决方案平台要求必须使用https网址。
> 
<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778786_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-21_11.35.29.png</strong> <em class="xg1">(58.67 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778786" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778786&handlekey=savephoto_778786">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

### 四、程序逻辑规划
了解了得捷(DigiKey)数字化解决方案的oAuth逻辑，以及所提供的API接口，就可以规划自己的程序逻辑了。

前面有一个特别注意，OAuth回调网址需要使用https网址。在W5500_Evb_Pico的Pico硬件上，固然是可以建立一个支持ssl的webserver，但是运行的效果并不理想，速度比http要慢得多。

所以，最终我使用Python来建立ssl webserver，用于完成oAuth认证回调、产品信息获取和刷新等功能，并给W5500_Evb_Pico提供API接口调用，来获取产品信息。

经过详细的了解和反复的推导，具体的程序逻辑规划如下：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_778900_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>DigiKey电子元器件价格及库存监视器.drawio.png</strong> <em class="xg1">(396.16 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_778900" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=778900&handlekey=savephoto_778900">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

在上述程序逻辑规划中，主要有三个部分：
1. Python主服务：提供SSL WebServer，用于浏览器访问和oAuth认证回调，请求产品中信息和定期刷新产品信息，以及对外提供API用户获取产品信息数据。
2. Python从服务：提供普通WebServer服务，并转发到SSL WebServer，供W5500_Evb_Pico调用。
3. W5500_Evb_Pico：实现通过有线网络联网，通过上述普通WebServer提供的API接口，来获取产品信息数据，并根据返回数据的情况，确定是显示二维码，还是显示产品信息监视器。

Python主服务和Python从服务在电脑上运行，完成和得捷(DigiKey)数字化解决方案平台的交互。

W5500_Evb_Pico上运行的程序，完成联网、API接口调用、墨水屏驱动、显示二维码、示产品信息监视器等功能。

Python主服务提供SSL WebServer，主要页面和网址如下：
* 首页 /：登录情况下，显示产品信息；未登录情况下，提示要登录
* 登录页 /login ：提供跳转到 得捷(DigiKey)数字化解决方案平台 的认证链接
* 回调页 /customer/digikey/redirect：认证完成后，从 得捷(DigiKey)数字化解决方案平台 跳转回来的处理
* API接口 /api/v1.0/product/info：提供产品信息

## 五、服务端程序
前面了解了得捷(DigiKey)数字化解决方案的相关概念，调用流程，规划好了程序的逻辑，就可以开始代码的编写工作了。
### 1. 服务端代码编写
首先完成了在电脑上Python环境中服务端代码的编写，具体结构如下：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779389_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-22_14.06.23.png</strong> <em class="xg1">(101.65 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779389" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779389&handlekey=savephoto_779389">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

详细的代码，可以从以下网址获取：[https://gitee.com/honestqiao/digikey_api_solutions](https://gitee.com/honestqiao/digikey_api_solutions "https://gitee.com/honestqiao/digikey_api_solutions")

代码文件说明如下：
* **digikey_api_solutions**
* ├── LICENSE：协议文件
* ├── README.md：README
* ├── app.py：Python主服务
* ├── http_to_https_proxy.py：Python从服务
* ├── requirements.txt：依赖库
* └── templates：模版文件库
* 　　├── home.html：首页模版
* 　　├── login.html：登录页模版
* 　　├── product.tpl.json：产品信息JSON模版
* 　　└── qrcode.tpl.json：二维码信息JSON模版

以上的代码中，都做了详细的注释，在前面的 **程序逻辑规划** 也做了详细的流程规划，这里就不再对代码进行一一讲解了。

### 2. 服务端运行：
在Python主服务中，需要安装Flask扩展库，并启动支持SSL的webserver服务。
要启用SSL的支持，可以参考：[https://blog.miguelgrinberg.com/post/running-your-flask-application-over-https](https://blog.miguelgrinberg.com/post/running-your-flask-application-over-https "https://blog.miguelgrinberg.com/post/running-your-flask-application-over-https")
免费的SSL证书，可以在 Let's Encrypt 申请，国内各大云服务平台，也都提供了申请免费HTTPS证书的服务。

启动主服务：`python app.py`

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779394_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-22_14.22.46.png</strong> <em class="xg1">(90.16 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779394" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779394&handlekey=savephoto_779394">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

因为我是测试环境运行，所以配置的端口为8888，如果在正式环境，则应该配置为443

启动从服务：`python http_to_https_proxy.py`

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779395_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-22_14.24.11.png</strong> <em class="xg1">(78.04 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779395" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779395&handlekey=savephoto_779395">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

因为我是测试环境运行，所以配置的端口为8889，如果在正式环境，则应该配置为80

### 3. 浏览器访问：
#### 3.1 访问首页
启动完成以后，就可以通过浏览器访问首页：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779400_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-22_14.31.27.png</strong> <em class="xg1">(63.19 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779400" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779400&handlekey=savephoto_779400">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

未登录的情况下访问，会提示登录后查看信息。

#### 3.2 访问API(未登录)
在未登录的情况下，访问api接口，会返回生成二维码的数据：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779419_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-22_14.50.05.png</strong> <em class="xg1">(58.67 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779419" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779419&handlekey=savephoto_779419">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

#### 3.3 访问登录页
在首页上点击登录，跳转到登录页：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779399_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-22_14.31.42.png</strong> <em class="xg1">(68.45 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779399" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779399&handlekey=savephoto_779399">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

#### 3.4 跳转到得捷(DigiKey)数字化解决方案平台进行认证
在登录页面，点击链接“使用DigiKey API 解决方案账号登录”，则跳转到得捷(DigiKey)数字化解决方案平台，用你自己的得捷账户进行登录认证：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779398_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-22_14.32.07.png</strong> <em class="xg1">(287.62 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779398" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779398&handlekey=savephoto_779398">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

#### 3.5 认证完成自动跳转到回调页面
因为认证成功了，所以回调页面会活动认证后的授权码，然后使用授权码调用得捷API，从而获取产品信息，并进行显示。

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779397_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-22_14.32.36.png</strong> <em class="xg1">(137.5 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779397" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779397&handlekey=savephoto_779397">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

在此页面上，如果点击首页，则跳转到首页，会显示同样的产品信息。
如果点击重新登录，则在此进入登录页面，完成认路验证流程。

#### 3.6 访问API(已登录)
登陆成功后，再次访问API，就会返回包含产品信息的JSON数据了：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779421_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-22_14.55.38.png</strong> <em class="xg1">(111.46 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779421" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779421&handlekey=savephoto_779421">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

### 4. 服务端自动刷新：
主服务代码在登录验证成功后，会定期自动刷新产品信息：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_779416_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>iShot_2024-01-22_14.41.06.png</strong> <em class="xg1">(36.43 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_779416" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=779416&handlekey=savephoto_779416">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

一旦产品信息发生了变化，那么刷新时就能够获取到最新的数据缓存起来，供W5500_Evb_Pico通过API接口获取。

#### 4. 服务端API接口使用
现在，服务端能够正常提供服务了，我们也可以通过浏览器访问API接口获取JSON数据了。
那么，后面，我们只需要在W5500_Evb_Pico上，定期调用API接口，获取返回的JSON数据。

------------

在本（上）篇中，完成了服务端程序的开发，实现了和DigiKey API 解决方案账号平台的交互和oAUth认账，并通过API接口提供了JSON数据的返回。
在（下）篇中，将会分享W5500_Evb_Pico的开发工作，让其与服务端对接起来，从而根据返回的JSON数据，确定是要显示二维码（服务端未登录），还是要显示产品信息（服务端已登录）。

爱吃鱼的加菲猫

不亏是乔帮主

Maker_kun

楼主玩的很高级

xusiwei1236

帮主牛逼，前端后端设备端一把梭

ly87802541

这开发过程看似很简单，其实就是一点也不容易哈哈！

HonestQiao

ly87802541 发表于 2024-1-24 18:32 这开发过程看似很简单，其实就是一点也不容易哈哈！

主要就是把头绪给整理清楚，整理清楚了，后面就比较简单了。

我爱下载

这流程看着相当的复杂，楼主果然是大师阿

bitter

太厉害了，膜拜大佬

QuaX_Chow

tql

通途科技

#在这里快速回复#图文并茂，受益匪浅，收藏学习中。加油加油！！！

【得捷电子Follow me第4期】终极任务一：DigiKey电子元器件价格及库存监视器（上） [复制链接]

最新回复

点评