小程序微信登陆及账号绑定功能开发笔记

一、用什么来识别用户？
二、实现方法
- （一）UnionID
- - 1、UnionID 机制说明
  - 2、UnionID获取途径
  - 3、微信开放平台绑定小程序流程
  - 4、小结
- （二）OpenID
- - 1、流程
  - 2、注意事项
  - 3、session_key有什么用
三、版本进化
- 现有bug：
- 问题分析
2022-04-26更新：完整实现

目标功能：

进入小程序后请求获取用户信息用于登录
将获取到的用户信息与数据库中的信息进行比对
数据合格（能在数据库中找到用户的信息）则进入主页
数据不合格（找不到）则提示绑定教职工号，并跳转到绑定界面
绑定界面将用户输入的账号和密码与数据库中的记录进行比对，账号和密码确认无误后，将当前的用户信息存入数据库，下次用户登录时直接在数据库中找用户的信息

一、用什么来识别用户？

有两个选择，一个是OpenID，另一个是UnionID。

它们的区别在于：

OpenID与公众号挂钩，一个用户在一个公众号里只有一个OpenID，但是该用户在不同的公众号里的OpenID不一样，不适用于跨公众号、跨平台等场景的使用，有OpenID不一样的风险。
UnionID是用户唯一的，跨公众号、跨平台也不会变，可以在用户管理-获取用户基本信息（UnionID机制）文档了解详情。

二、实现方法

（一）UnionID

UnionID机制说明-官方文档

1、UnionID 机制说明

如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。

2、UnionID获取途径

绑定了开发者帐号的小程序，可以通过以下途径获取 UnionID。

开发者可以直接通过 wx.login + code2Session 获取到该用户 UnionID，无须用户授权。
小程序端调用云函数时，可在云函数中通过 Cloud.getWXContext 获取 UnionID。

3、微信开放平台绑定小程序流程

登录微信开放平台 — 管理中心 — 小程序 — 绑定小程序

4、小结

我们当前的小程序无法通过微信认证，因为是个人号。

即使我自己在开放平台注册了一个主体，也无法将其与我们的小程序绑定。

但是我可以绑定我自己的小程序。

也就是说，我们 可以用UnionID ，但是要郑在 开放平台 去注册一个账号，然后才能与我们的小程序绑定。

（二）OpenID

小程序登录-官方文档

1、流程

wx.login() 获取 code
wx.request() 发送 code
appid + appsecret + code 登录凭证校验接口
接口返回 session_key + openid 等

2、注意事项

调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
临时登录凭证 code 只能使用一次
调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号）和 会话密钥 session_key。

3、session_key有什么用

A. session_key 有两个作用：

校验用户信息(wx.getUserInfo(OBJECT)返回的signature)
解密(wx.getUserInfo(OBJECT)返回的encryptedData)

B. 按照官方的说法，wx.checksession是用来检查 wx.login(OBJECT) 的时效性，判断登录是否过期;

疑惑的是（openid，unionid ）都是用户唯一标识，不会因为wx.login(OBJECT)的过期而改变，所以要是没有使用x.getUserInfo(OBJECT)获得的用户信息，确实没必要使用wx.checksession()来检查wx.login(OBJECT) 是否过期；

如果使用了wx.getUserInfo(OBJECT)获得的用户信息，还是有必要使用wx.checksession()来检查wx.login(OBJECT) 是否过期的，因为用户有可能修改了头像、昵称、城市，省份等信息，可以通过检查wx.login(OBJECT) 是否过期来更新着些信息。

三、版本进化

现有bug：

开发模拟时可以正常显示，但是，真机调试时以及小程序发布出来正式使用时，无法显示头像和昵称，显示的是默认头像和“微信用户”
多次进入小程序则可以直接进入主页，而跳过判断绑定这一步

问题分析

下图是示例小程序的示例代码以及我的代码

可以发现，获取方式是一样的，但是传参方式不一样，那么会不会是这里的问题呢？

2022-04-26更新：完整实现

（功能早就实现了，一直没更新博客）

创建云函数login，通过云函数操作才有权限获取到openid

// 云函数模板
// 每次修改代码之后都要保存并部署：在 cloud-functions/login 文件夹右键选择 “上传并部署：安装云端依赖（不上传node_modules）”const cloud = require('wx-server-sdk')// 初始化 cloud
cloud.init({// API 调用都保持和云函数当前所在环境一致env: cloud.DYNAMIC_CURRENT_ENV
})/*** 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端* * event 参数包含小程序端调用传入的 data* */
exports.main = async (event, context) => {console.log(event)console.log(context)// 可执行其他自定义逻辑// console.log 的内容可以在云开发云函数调用日志查看// 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）等信息const wxContext = cloud.getWXContext()return {event,openid: wxContext.OPENID,appid: wxContext.APPID,unionid: wxContext.UNIONID,env: wxContext.ENV,}
}

调用云函数login，并对获取到的结果进行操作，存入全局变量可以便于后续使用

wx.cloud.callFunction({name: 'login',complete: res => {// 将获取到的openid存入全局变量中app.globalData.openId = res.result.openidconsole.log(app.globalData.openId)app.globalData.haveOpenId = true// 判断数据库中是否已经有数据DB.collection('user').where({_openid: app.globalData.openId,}).get({success: res => {console.log(res)if (res.data.length == 0) {// 没找到数据wx.reLaunch({url: '/pages/register/register',})} else {// 找到了数据wx.reLaunch({url: '/pages/home/home?registered=' + true,})}}})}
})

上面的代码还用到了页面传参的功能，之所以增加这个功能是因为发布小程序时审核不通过，提示要我修改成未注册用户也能体验部分功能才可以，于是增加了游客模式的页面（实际上就是判断是否已注册，没有就不让用某些功能）
登陆绑定就是简单的form表单提交并比对数据库的数据了，值得注意的是，表单组件里面的标签必须要有name属性才能提交成功
数据对比完之后，如果账号密码都正确，就把openid记录到数据库当中去，以后再登录的时候就可以直接查询数据库当中是否有其openid，如果有就可以直接进入主页面（上面的代码已经给出了判断）

之前的问题可能是没有使用云函数的问题，云开发省去了好多密钥之类的操作，云开发yyds！（大型项目还是老老实实code+key+……那我就不知道了）

小程序微信登陆及账号绑定功能开发笔记相关推荐

微信小程序微信支付的商户绑定流程及开发必要条件
一基本流程商户申请接入微信支付(见链接1) 商户申请绑定微信小程序(见链接2) 微信小程序审核通过商户的绑定申请 (登录微信公众平台---选择对应小程序----功能----微信支付----待关联商 ...
从0到1：基于微信小程序的瑜伽馆预约平台的开发笔记
背景分析随着国民健身意识越来越强,各式各样的健身模式不断出现.瑜伽也受到了大众的喜爱,瑜伽行业发展越来越快,作为馆主,你还在微信群里让你的会员使用接龙的方式进行约课吗?你还在用传统的Excel进行排 ...
微信授权绑定手机号 java_微信小程序获取手机号授权用户登录功能
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无 ...
java实现微信、手机号登陆_微信小程序获取手机号授权用户登录功能
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPaDirIrkFhoneNumber这个组件通过button来 ...
借助小程序云开发实现小程序的登陆注册功能
小程序云开发讲解视频:https://edu.csdn.net/course/detail/9604 有了云开发我们不仅可以方便的获取到用户的openid,还可以通过云开发的数据库来存储用户信息,进而 ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
wifi 小程序透传_微信小程序实现的一键连接wifi功能示例
本文实例讲述了微信小程序实现的一键连接wifi功能.分享给大家供大家参考,具体如下: 在已知wifi账号和wifi密码的情况下,一般采用以下的流程来连接wifi Wi-Fi 接口调用: 1.Andro ...
【微信小程序/实现】实现留言墙功能页面
[微信小程序/实现]实现留言墙功能一.需求分析二.功能设计三.页面设计四.代码 (一)核心代码:向服务器发出请求 (二)完整代码 message.wxml message.wxss messa ...
微信小程序突然多了好多动态_让微信小程序的登陆页面有云朵悬浮的动态效果...
微信小程序目前的火热程度相信不用多言,尤其是近期微信团队开发小程序很多之前被诟病的功能:模糊搜索,附近小程序等.最近有网友利用空余时间用小程序实现了个动态的登录页效果,所以下面我们51小程序就吧这篇文 ...
php 微信小程序获取手机号_实例讲解微信小程序获取手机号授权用户登录功能...
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写.本文主要给大家分享微信小程序获取手机号授权用户登录功能,需要的朋友参考下吧, ...

小程序微信登陆及账号绑定功能开发笔记

小程序微信登陆及账号绑定功能开发笔记

一、用什么来识别用户？

二、实现方法

（一）UnionID

1、UnionID 机制说明

2、UnionID获取途径

3、微信开放平台绑定小程序流程

4、小结

（二）OpenID

1、流程

2、注意事项

3、session_key有什么用

三、版本进化

现有bug：

问题分析

2022-04-26更新：完整实现

小程序微信登陆及账号绑定功能开发笔记相关推荐

最新文章

热门文章