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

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

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

用户未登录

WooCommerce的Rest API并不直接对外开放,用户在未登录账户的情况下,是无法直接访问API的,这一点和WordPress原本的API直接对外开放情况是不同的。于是我需要到网站后台先创建一个“匿名用户”的密钥对,提供给非登录用户访问权限。创建路径是WordPress后台 – WooCommerce – Settings – Advanced – REST API
WooCommerce Rest API开发微信小程序鉴权方式
一定要把其中的Consumer Key和Consumer Secret保存备用,如果关闭了就只能重新再生成新的。

此密钥对既可用于Post请求,也可以用于Get请求。在微信小程序开发上,此密钥对我用于Get请求,原因后面会提到。
请求发送方式:

var ck = "ck_7d0bdc3da7ad6388a8d9fbd..." // 填写自己的密钥对
var cs = "cs_a22cbae232a951594d6893..." // 填写自己的密钥对
var authString = "&consumer_key=" + ck + "&consumer_secret=" + cs
var requestUrl = "https://www.mysite.com/wp-json/wc/v3/products" + authString;
wx.request({
  url: requestUrl,
  data: null,
  method: 'GET',
  success: function (res) {
    console.log(res.data)
    ...
  },
  complete: function(res){
    ...
  }
})

这样就能在小程序里拉取WooCommerce的产品数据了

用户已登录

对于已登录用户,我们需要识别它的身份,就不能通过后台手动生成的密钥对了。这时候就要借助于老朋友,JWT认证了。关于JWT认证授权的实现,我曾写过另一篇 博客文章,欢迎移步查询。在小程序中用户登录后,网站给小程序发送token,小程序之后所有的请求都需要在请求header上带上这个token,网站就能识别token对应用户的身份,履行电商功能。

举个例子,请求当前用户的订单order数据:

var requestUrl = "https://www.mysite.com/wp-json/wc/v3/orders",
var wp_token = "eyJ0eXAiOiJKV1QiLCJhbGciO...." //此处为JWT登录获得的Token
var requestHeader = {
    "Authorization": "Bearer " + wp_token
}
 
wx.request({
  url: requestUrl,
  data: null,
  method: 'GET',
  header: requestHeader,
  success: function (res) {
    console.log(res.data)
    ...
  },
  complete:function(){
    ...
  }
})

WooCommerce原生的密钥对,理论上也能放在请求的header里使用,但对于登录用户而言,它只能识别出后台分配给这个密钥对的用户,而不是当前实际使用小程序的用户。要识别使用者,JWT才是最方便的实现,然而JWT不能和原生密钥对混用,两者都放在header里会直接报错。所以我才把原生密钥对只用在请求连接里作为Query String使用,把JWT的Token只放在请求header里使用,分别满足非登录用户和登录用户两种情况的使用。

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/2843.html。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

发表评论

您的电子邮箱地址不会被公开。