标签 Rest API 下的所有文章

WooCommerce微信小程序开发 – 自己写一个购物车查询接口

做基于WooCommerce的微信小程序,一个绕不开的技术点是需要自己写购物车的接口。WooCommerce至今都没有在自带的Rest API中提供购物车接口,我一直认为这是一个遗憾。

在查了一些资料后,我大致能明白WooCommerce不提供购物车接口的原因,因为大部分的第三方并不需要WooCommerce来提供购物车数据。如果你用WordPress+WooCommerce做后台,开发了一款独立APP,用户可以在APP上完成完整的购物流程,最轻便的做法是不让WooCommerce提供购物车数据,购物车只在APP本身提供即可,WP后台只负责提供商品和订单信息足矣。所以WooCommerce提供的Rest API是足够完成一款普通的第三方应用的需求的。但我们考虑另一种情况,如果你的WooCommerce同时以网站和APP两端提供服务,即同一个用户既能登录网站购物,也能从APP购物,那么你就要考虑购物车的数据同步问题了,要让网站的购物车和APP的购物车同步,我们就不得不需要WooCommerce端有购物车接口了。

这篇博客是对去年写过的一篇“WooCommerce购物车对象使用以及方法函数概括”,进行的一个扩展。在熟悉了购物车一些对象和方法使用后,我们是可以自己写一个购物车接口的。

首先定义一下接口:

1
2
3
4
5
6
7
8
9
10
11
12
add_action('rest_api_init', function(){
	//from: https://blog.brain1981.com
	register_rest_route('wx_app/v1', 'cart', array(
		'methods' => 'GET',
		'callback' => 'brain1981_rest_wc_cart_list',
		'show_in_index' => false,
		'permission_callback' => function ($request) {
			if (current_user_can('read'))
				return true;
		}
	));
});

访问这个接口的地址就是 https://你的域名/wp-json/wx_app/v1/cart, 主要业务代码放在brain1981_rest_wc_cart_list函数中。下面是这个函数的写法: 查看详细 »

WooCommerce微信小程序开发,为Rest API补充图片信息

WooCommerce微信小程序开发使用WooCommerce的原生Rest API,接口中是缺少一些必要的图片信息的,这里列举两个地方:

1. 产品接口中,所有的产品图片都只有原图URL,没有带上thumbnail和其他WordPress生成的尺寸

通常商店管理员并没有太多图片的优化意识,会直接把多达几M的产品图上传。WooCommerce的主题多半会生成一些必要的小尺寸图片分别给产品列表以及购物车等地方加载,但Rest API中并不会有这些信息。微信小程序的产品列表页也是需要这些小图的,于是我们需要在接口中把这些小尺寸产品图也加入进去: 查看详细 »

WooCommerce Rest API开发微信小程序和APP等第三方应用的鉴权方式

最近忙于自己开发基于WooCommerce的微信小程序。在决定自己研发之前,我也调查过国内已有的他人研发的WooCommerce微信小程序,对各家的产品Demo分别进行了试用后,还是决定自己从0开发一套小程序。从无到有的过程必然是一项浩大的工程,但经历一下这个过程还是很有必要的。首先,我们开发的项目100%自己掌握代码修改是最基本的要求。目前市面上已有两款第三方开源WooCommerce微信小程序,但都只是部分开源,且给出的源代码甚至不能直接跑通,使用这些开源代码做二次开发会很“受制于人”。考虑到自己也需要长期深耕定制小程序,需要随心所欲地扩展功能和设计,作为开发者就必须对项目的每一行代码都有本质理解。要达到对一个系统有本质理解的程度,最快的方法并不是去读别人的代码,而是自己写一套出来。恰好手头的一个项目给了我2个月时间,以我对WooCommerce的了解,是有信心独立完成小程序的开发的。目前项目开发已完成,点击这里可以查看案例,今后会不定期分享一些零碎的经验心得。

基于WooCommerce的Rest API开发第三方应用,首先要解决用户鉴权问题,这里要分两种情况:
1. 用户未登录
2. 用户已登录
查看详细 »

WordPress自定义上传文件最大容量(size)的几种方法

这篇文章仍然拿上传文件做话题,因为最近用WordPress做交互站比较多,对这块研究得算是比较深了。

WordPress有自带的上传文件最大值限制,这个限制,到后台的“工具”-“站点健康”-“信息”页面可以查到,受制于服务器环境影响,不同的网站限制的大小会有所不同,比如这个网站是40M:
WordPress上传文件最大容量size

如果要修改这个限制,首先要到服务器环境下的php.ini配置文件中查看相关设置,找到这一行,修改后面的数值。
upload_max_filesize = 80M
post_max_size = 80M
memory_limit = 256M
查看详细 »

WordPress开发者自定义附件上传目录的几种方式

WordPress默认的媒体库,即附件上传路径在站点目录的/wp-content/uploads/路径下。WordPress官方提供了两种文件组织方式,一种是按年分,一种是按月分。个人博客网站,内容不多的,考虑按年会比较好管理;如果是更新频繁的咨询站、电商站则推荐按月分文件夹。因为如果单个目录下文件太多,会发生ftp无法索引的问题,这个问题我曾写过一篇 文章 讨论。
WordPress自带的附件管理设置

大部分情况下我们不需要修改默认的文件上传路径,但在以下情况下就会产生这样的需求:
1. 前端不直接暴露附件路径的付费下载站;
2. 交互类网站允许访客上传附件的,不希望和站长自己上传的附件放在同一路径下;
3. 有意隐藏WordPress信息的,即不希望他人通过路径特征知道我们是用WordPress建的网站。 查看详细 »

WordPress JWT认证授权方式测试调研和开发心得

本文接上回WordPress OAuth 1.0认证方式测试调研,研究JWT认证方式。

JWT,全称JSON Web Token。在WordPress应用场景中,客户端通过JSON格式发送登录信息到WordPress网站,网站返回用户的基本信息,附带一串token给客户端;客户端在下次请求写入数据的时候,在请求头上带上这一串token作为用户标识就可以了。由于token是从网站发来的,客户端不需要做任何的数据处理,只要存储一下这一串token就可以了,很便捷。因为这种便捷性,国内用微信小程序或其他客户端连接WordPress的项目,大部分都是用JWT实现的,如果我说的不对请留言指正:)

使用JWT,先安装插件:JWT Authentication for WP REST API

然后在WP的根目录下修改wp-config.php,增加以下两行配置,开启JWT接口:
define('JWT_AUTH_SECRET_KEY', 'abcdefg...'); //填个复杂点随机字符串
define('JWT_AUTH_CORS_ENABLE', true);

以上准备工作完成,接下来回到Postman测试发送请求。

1. 发送用户名和密码的JSON格式到 https://www.mysite.com/wp-json/jwt-auth/v1/token

返回数据中,除了邮箱、用户名和全名外,注意第一行的token,需要在客户端存储一下,安全起见,推荐存在客户端的后端,尽量不放在前端。 查看详细 »

WordPress OAuth 1.0认证授权方式测试调研

这两天有新项目需要用到站外登录WP,操作WP网站的数据,之前在一些小项目中,通过Rest API操作网站数据,我都是通过Basic认证的。Basic认证有一个安全方面的缺点,就是每次发送请求,都需要把用户名和密码base64编码到请求的header里。这样就得在站外存储WP网站的用户名密码,如果在站外没有做好安全,不小心泄露这个登录信息,就会造成安全问题。为了规避这种漏洞,我的方式是在WP站内建一个秘密用户,只分配用得到的权限,用户在站外请求我的Rest API,如果要写数据,我用一个中转的节点,加上这个秘密用户的用户名密码组成的header去请求数据。当然,这当中还要加上识别用户的业务逻辑,比如用手机号码做用户字段,这就不另外展开了…

所以我重新考虑OAuth认证方式,谷歌了不少资料,网上大家比较公认的是这一篇:https://code.tutsplus.com/tutorials/wp-rest-api-setting-up-and-using-oauth-10a-authentication–cms-24797
如果你也研究过OAuth和Rest API,你应该也看过这篇文章或者它的翻译版本。

一开始我觉得跟着上面那篇tutsplus上的教程跑一遍就好了,也没必要特意写这篇文章去总结。然而实际操作过程还是踩坑了,所以需要自己记录一下,复盘一下跑通OAuth1.0的过程。本文无代码,都是测试截图。
查看详细 »

WordPress前端,自制拖放区域上传文件的轮子

上个月写过一篇WordPress通过Rest API自定义附件上传接口,那篇文章主要介绍了如何打通前后端,利用Rest API保存“抓取”已知URL的文件。不过在更多的情况下,我们还是需要通过自己的表单上传文件。正好这个月有个项目,有个表单需要拖放文件到指定区域里,提交表单的时候上传文件。如果我用Gravity Forms给的文件上传域,它只有原生的点击选取本地的文件组件,并没有拖放选取文件的组件,所以这里就需要造一个轮子了。

先说结果,最后实现出来是这样子的:
WordPress前端,自制拖放区域上传文件的轮子

文件拖到区域上方,区域会变色;拖入后区域内显示文件名,判断文件格式和尺寸是否合规;点击清除,会重置区域。


查看详细 »

WordPress通过Rest API自定义附件上传接口

有没有想过用WordPress来建立自己的文件存储空间,当作自己的网盘使用?这个业务实现的主要逻辑其实就是自己写一个Rest API接口上传文件到WP的媒体库中。

首先我们需要安装一个插件,这个插件很小,只是给网站后台登录提供Basic认证,并不是用来拓展业务接口的。开通了Basic认证方式,我们才有途径获得使用Rest API更新网站内容的权限,否则Rest API只提供读取权限。插件名称叫做JSON Basic Authentication,官方下载地址:https://github.com/WP-API/Basic-Auth

要做接口,就先创建endpoint。这次我创建两个,一个是用来转存网上的文件的,一个是用来自己上传文件的。

add_action( 'rest_api_init', function () {
	//如果你不打算把文件存到WP默认的位置,这是修改位置的钩子
	add_filter( 'upload_dir', 'brain1981_upload_dir');
 
	//转存
	register_rest_route( 'brain1981/v1', '/catch/', array(
		'methods' => 'POST',
		'callback' => 'brain1981_api_post_catch',
	) );
	//上传
	register_rest_route( 'brain1981/v1', '/stream/', array(
		'methods' => 'POST',
		'callback' => 'brain1981_api_post_stream',
	) );
});

查看详细 »

WordPress AJAX玩法,通过自带的AJAX钩子和通过Rest API两种方法对比

更新于2020年5月2日:本文第一版有一些概念错误,现已修正

基于WordPress项目的开发中,经常会需要用到AJAX请求。相较于原生的前后端实现,WordPress其实提供了两种方法可以更便捷的实现AJAX。

WordPress自带的AJAX钩子实现AJAX

这个方法是现在用的比较多的。原理是前端向“/wp-admin/admin-ajax.php”这个接口发送请求,这个接口会根据请求的action值来处理数据。而根据不同的action值,利用钩子“wp_ajax_nopriv_[action]”和“wp_ajax_[action]”去编写自己的程序处理和返回数据。
如果是要写数据,先在页面生成nonce:

1
$xprofile_nonce = wp_create_nonce ('xprofile_nonce');

查看详细 »