🦄 2024 独立开发者训练营,一起创业!查看介绍 / 立即报名(剩余10个优惠名额) →

博客

微信小程序:基于 JWT(JSON Web Token) 的身份验证

在微信小程序里,用户的相关信息是在后端服务那里保存的。我们可以给用户在小程序上准备一个登录页面,用户输入他的用户名还有密码,可以申请登录。后端服务收到登录请求,验证用户输入的登录信息是否有效,如果有效就给用户签发一个 JSON Web Token,小程序收到签发的 Token 会把它存储在自己的 Storage 里,下回用户再请求需要权限的资源的时候,可以带着签发的这个 Token,服务端那里会验证 Token 的有效性,然后决定是否要执行用户请求的动作。

上面说的就是在小程序上实施基于 JSON Web Token 的身份验证的主要流程。在新发布的《微信小程序:应用后台__身份验证》这个课程里介绍了如何开发实现这种身份验证的功能。后端服务我用了 WordPress,你也可以选择其它框架作为小程序的后端服务,比如 Drupal,Laravel,Rails,Node.js 等等。流程基本都是一样的。

微信小程序:回调,Promise,async,await 的使用例子

下面用个例子演示在微信小程序里使用 Promise,async,await 这些东西。小程序里有个 wx.authorize 接口可以向用户要些权限,访问用户对应的资源,比如得到用户的位置,获取用户的相关信息等等。wx.getSetting 这个接口可以得到用户的授权配置信息,比如用户是否已经授权我们使用他的用户信息。

微信小程序:微信登录流程讨论

小程序里用微信的开放接口微信登录,跟大家讨论一下在应用里面实施这个微信登录功能的设计流程。

获取用户的微信登录状态

在应用里我们先要得到用户的微信登录状态,这个状态要在我们的应用的后端服务那里对微信接口发出请求并获取。

小程序请求登录码

得到登录状态首先得有个登录码,小程序提供了一个 wx.login 接口,它可以得到登录码。

wx.login({
  success: (login) => {
    console.log(login.code)
  }
})

这个登录码会在 wx.login 接口的成功回调得到的响应的 code 属性里面。有了这个登录码,我们要去请求自己的后端服务接口,让接口去请求微信的登录接口。这个请求可以在小程序里面用 wx.request 来发出,请求的类型是 POST,请求的数据里面要包含获取到的登录码。

微信小程序:用户授权 wx.authorize

微信小程序里,使用一些接口的时候需要得到用户的授权,用户同意以后我们就可以得到相应的权限,去做一些事情。比如获取用户微信帐号相关信息,得到用户的位置,保存到相册等等。

比如我想知道用户微信帐号相关的信息。先用 wx.getSetting 检查一下用户当前对我们的小程序的授权状态,如果发现用户还没有授权小程序查看他的用户信息,就去调用 wx.authorize 弹出对话窗提醒用户是否要授权小程序得到他的用户信息。用户如果按了同意,接下来我们就可以使用 wx.getUserInfo 这个接口去得到用户相关的信息了,比如他的头像,名字等等。

WordPress:注册新的 REST 接口

WordPress 核心自带了一些 REST 接口,可以处理文章,用户,评论等等这些资源。有时候我们需要自己加工一些接口功能,WordPress 支持我们添加这样的自定义 REST 接口。注册的接口相关的信息可以挂载到 rest_api_init 这个钩子函数上。注意接口用的是 register_rest_route 函数。

Endpoints

一个例子:

<?php

function ninghao_rest_hello_callback() {
  return 'hello ~';
}

function ninghao_rest_register_route() {
  register_rest_route( 'ninghao/v1', 'hello', [
    'methods'   => 'GET',
    'callback'  => 'ninghao_rest_hello_callback'
  ] );
}

add_action( 'rest_api_init', 'ninghao_rest_register_route');

微信小程序:分页显示内容,实现无限页面加载功能

微信小程序上显示的内容列表,需要分页显示,向下滚动页面,页面到底了以后如果列表里面还有要显示的项目,就把下一页上的内容项目加载进来放到当前的页面上显示出来。这个就是无限页面加载功能。

思路

小程序的页面滚动到底部的时候,会触发一个 onReachBottom 方法,在这个方法里我们可以去实现加载下一页内容项目的功能。页面加载(onLoad)以后,向服务端请求得到第一页要显示的内容项目,通常在得到的响应里面,服务端会包含一些额外的信息,比如请求的列表一共有多少个项目,当前给我们的是哪些,当前的页码是什么,列表分成了多少页等等。利用这些信息,结合 onReachBottom 就可以实现无限加载功能了。

微信小程序:后端服务接口(WordPress)

微信的小程序相当于是一套前端(Frontend)应用的框架,让它变成一个真正能用的 App,我们还得给它提供一个后端服务,或者叫应用后台(Backend)。几乎所有的后端应用框架都支持为小程序提供后端服务。WordPressDrupalRailsNode.js ...   了解一下 RESTful 风格的后端服务接口。

后端服务通过 RESTful 风格的接口为小程序提供数据,或者处理从小程序那里发送过来的数据。比如可以给小程序提供一个内容列表让它在页面上显示,可以接收小程序发送(POST,DELETE,PATCH)过来的数据,比如把内容保存到后端的数据库里。

预告:微信小程序应用后台(WordPress)

小程序应用后台(WordPress)预览

用 WordPress 为微信小程序提供后端服务接口,提供可以显示的内容列表,验证用户身份,创建新的内容,上传媒体文件,还有删除内容。

课程组合使用了宁皓网提供的知识框架里的几个部分。小程序是应用的前端,需要用 JavaScript 语言编写,除了语言,还得了解小程序框架本身。后端用到了 WordPress,搭建后端开发环境还得了解点服务器相关的知识。

NGINX 对我说:“The plain HTTP request was sent to HTTPS port”

NGINX 对我说 “The plain HTTP request was sent to HTTPS port”,折腾了 8 小时我才明白他的意思。记录一段折腾经历,证明小恶魔都藏在细节里。最近在做给小程序添加应用后台的课程。小程序访问后端服务接口的时候,要保证接口可以通过互联网访问。我用 SSH 在本地跟我的一台服务器之间打了一个通道,访问接口主机名的时候,让服务器把请求转发给我的在本地开发环境上运行的应用。在《互联网访问本地开发环境》里面介绍了这个方法。

WordPress:基于 JWT 的身份验证

如果你想基于 WordPress 去创建前端 App 或者移动端 App,解决用户的身份验证可以使用 JWT 这种方法,它是一种基于 Token 的验证身份的方法。《WordPress 开发:身份验证(JWT)》这个课程演示了在 WordPress 网站上实施使用 JWT 验证用户身份。先看一下《JWT:JSON Web Token》,了解一下 JWT 是怎么回事。另外还有个在 Node.js 上实施使用 JWT 的课程,有兴趣也可以参考一下。

处理客户端(前端,移动端,桌面端)的请求,返回请求的数据,比如返回一个文章列表。或者处理请求发送过来的数据,比如把请求里带的文章内容保存在网站的数据库里。这些我们都要用到 WordPress 的 REST 接口

流程

下面是在 WordPress 网站上使用 JWT 验证用户身份的主要流程。

  1. 申请  Token:用户使用自己在网站上注册的用户名与密码向网站申请 Token。
  2. 签发 Token:网站收到请求验证用户名与密码是否匹配,如果匹配,网站就给用户签发一个 JWT 的 Token。
  3. 使用 Token:用户收到网站签发的 Token,以后每次向网站发送请求的时候都可以带着这个 Token,网站接收请求,验证 Token 的有效性,并执行用户请求的行为。
微信好友

用微信扫描二维码,
加我好友。

微信公众号

用微信扫描二维码,
订阅宁皓网公众号。

240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点