大雅的完结客商授权和登陆超级重大,也正是应用wx.getUserInfo接口

图片 4
      申请获取以下权限 获得你的公开信息   授权登录   请升级微信版本  我的首页内容

.header { margin: 90rpx 0 90rpx 50rpx; border-bottom: 1px solid #ccc; text-align: center; width: 650rpx; height: 300rpx; line-height: 450rpx;}.header image { width: 200rpx; height: 200rpx;}.content { margin-left: 50rpx; margin-bottom: 90rpx;}.content text { display: block; color: #9d9d9d; margin-top: 40rpx;}.bottom { border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx;}

// pages/test1/test1.jsvar app = getApp();Page({ /** * 页面的初始数据 */ data: { //判断小程序的API,回调,参数,组件等是否在当前版本可用。 canIUse: wx.canIUse('button.open-type.getUserInfo'), isHide: false }, /** * 生命周期函数--监听页面加载 */ onLoad: function  { var that = this; // 查看是否授权 wx.getSetting({ success: function  { if (!res.authSetting['scope.userInfo']) { // 还未授权,显示授权按钮 that.setData; } else { // 已授权,隐藏授权按钮,显示正文 that.setData; } } }) }, //授权登陆按钮 bindGetUserInfo: function  { var that = this; console.log if  { //用户授权登陆,并跳转首页 // that.getOpenid() wx.login({ success: function  { // 请求自己后台获取用户openid wx.request({ url: app.domain + 'teacherapi/Wx_Decode/WxDecode', method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { encryptedData: e.detail.encryptedData, signature: e.detail.signature, rawData: e.detail.rawData, iv: e.detail.iv, code: res.code }, success: function  { if (res_user.data.status == 0) { var data = JSON.parse //json转对象 //授权成功返回的数据,根据自己需求操作 console.log //授权成功后,隐藏授权按钮,显示正文 that.setData; } }, fail: function () { that.showModal } else { //用户按了拒绝授权按钮,提示引导授权 that.showModal } }, //未授权弹窗 showModal: function  { wx.showModal({ title: '提示', content: e, showCancel: false, confirmText: '返回授权', success: function  { if  { console.log },})

decryptData($encryptedData, $iv, $data ); if  { return return_succ; } else { return return_error; } }}

1、APIwx.getUserInfo只会弹一次框,用户拒绝授权之后,再次调用将不会弹框

什么是openid?

在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密后的微信号,每个用户对每个公众号的OpenID是唯一的。对于不同公众号,同一用户的openid不同)。——微信公众平台开发者文档

  • 普通用户的标识,对当前公众号唯一
  • 不同的公众号,同一个用户,openid不同

你可以简单的理解为

openid = hash(uid + app_id)

7、如果用户点击拒绝授权,提示引导用户再次授权。

✦✦06✦✦

说明:

注意,要考虑到授权失败的情况

图片 1

封装ajax()

在真实的业务场景中,我们希望,用户进入小程序时,未登录情况下可以正常浏览商品,对小程序有个基本的认知,不要直接弹出框要求用户授权,否则会干扰用户,导致新用户的流失,当用户需要使用一些高级功能和场景,这个时候再去要求用户授权,这样用户授权的几率会大大提高。将登录的逻辑封装ajax流程:

图片 2image

封装的意义不再关注当前接口是否需要登录,用户是否已授权,所有请求直接调用ajax(),在必要的时候完成一切登录以及授权流程。小程序入口页面增加,业务拓展的时候,你只需要专注于业务实现。

参考资料

  • 小程序•小故事——获取用户信息
  • 获取用户基本信息(UnionID机制)
  • UnionID机制说明

4、使用wx.login接口获取登陆凭证code,使用code去后解密换取openid,传输code的时候带上第3步获取的用户信息一块发送给后台解密(也可以不携带,携带的目的是为了验证签名,这样安全一些,不验证也可以)

2、新增事件bindgetuserinfo:当open-type为getUserInfo时,用户点击会触发。可以从事件返回参数的detail字段中获取到和wx.getUserInfo返回参数相同的数据。

什么是unionid?

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

如果开发者在多个移动应用、网站应用和公众帐号之间有统一用户账号的需求,需要前往微信开放平台(open.weixin.qq.com)绑定公众号后,便可利用UnionID机制来满足上述需求。

  • 一个微信开放平台帐号下可以有多个移动应用,网站应用,公众账号和小程序
  • 只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号,用户的unionid是唯一的。

用户在开放平台的唯一标识符

你可以简单的理解为:

unionid = hash(uid + 开放平台id)

微信针对不同的用户在不同的应用下都有唯一的一个openId,
但是要想确定用户是不是同一个用户,就需要靠unionid来区分。一般自己的后台都会有自己的一个用户表,每个用户有不同的userid。也就是说同一个用户在同一个微信开放平台下的相同主体的应用对应着相同的userid,unionid以及不同的openid。所以在用户登录进来的时候,我们只能靠微信返回给我们的unionid去判断是不是同一个用户,在去关联我们的用户表,拿到对应的userid。

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

  1. 调用接口wx.getUserInfo,从解密数据中获取UnionID。注意本接口需要用户授权,请开发者妥善处理用户拒绝授权后的情况。
  2. 如果开发者帐号下存在同主体的公众号,并且该用户已经关注了该公众号。开发者可以直接通过wx.login获取到该用户UnionID,无须用户再次授权。
  3. 如果开发者帐号下存在同主体的公众号或移动应用,并且该用户已经授权登录过该公众号或移动应用。开发者也可以直接通过wx.login获取到该用户UnionID,无须用户再次授权。[图片上传失败…(image-14f83b-1532243372679)]

当用户满足条件2和3时,开发者可以直接通过wx.login获取到该用户的unionid,
否则必须调用接口wx.getUserInfo,额外需要注意的事就是妥善处理用户拒绝授权的情况。

  1. 调用 wx.login 获取 code。
  2. 使用 wx.getSetting 获取用户的授权情况
    • 如果用户已经授权,直接调用 API wx.getUserInfo
      获取用户最新的信息;
    • 用户未授权,在界面中显示一个按钮提示用户登入,当用户点击并授权后就获取到用户的最新信息。
  3. 将获取到的用户数据连同wx.login返回的code一同传给后端

图片 3image

1、在微信开放平台下存在同主体的App、公众号、小程序。

  1. 小程序调用wx.login() 获取 临时登录凭证code ,并回传到开发者服务器
  2. 开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。
  3. 临时登录凭证code只能使用一次

6、获取授权成功之后,再隐藏授权登陆按钮,显示正文信息。

— END —

公司业务开展,最近完成了一个微信小程序的开发。场景是这样,同一微信开放平台下拥有相同主体的APP和微信小程序来完成同样的业务,用户进入app或者微信小程序时必须获取用户的unionid来确认当前的用户身份,完成登录。小程序“获取用户信息”api(getUserInfo)的调用方式和之前相比有了较大更新,优雅的实现用户授权和登录非常重要,以下是我在微信小程序授权登录相关流程在开发时候的实现思路和总结,分享如下。

5、后台解密使用的是“auth.code2Session”接口,解密用到的SDK下载地址

考虑很多场景下,业务方申请userinfo授权主要为了获取unionid。我们鼓励开发者在不骚扰用户的情况下合理获得unionid,而仅在必要时才向用户弹窗申请使用昵称头像。为此,凡使用“获取用户信息组件”获取用户昵称头像的小程序,在满足以下全部条件时,将可以静默获得unionid。

图片 4api-login.jpg

1、授权登陆按钮和正文信息放到了同一个页面,未授权的时候显示登陆按钮,已授权的时候隐藏登陆按钮,显示正文信息,当然也可以授权和正文分开成两个页面,在授权页面的onload里判断是否已授权,若已授权就直接跳转正文的页面。这里只说授权按钮和正文在同一页面的情况。

a、开发者在首页直接调用wx.getUserInfo进行授权,弹框有会使得一部分用户放弃小程序的使用。

2、在onload里先判断是否已授权,如果已授权,就隐藏授权登陆按钮,显示正文信息,如果没有授权,显示授权登陆按钮。

1、open-type属性增加getUserInfo:用户点击时候会触发bindgetuserinfo事件。

3、前端使用button的open-type="getUserInfo"来操作,点击授权按钮之后,“e”中会携带userInfo,用户的基本信息(和使用wx.getUserInfo接口获取的数据一样,所以我是在”e”里面直接取的,没有调用wx.getUserInfo接口)

欢迎关注我:知晓程序员

5、后台解密之后,会返回openid等敏感信息,就还可以把这些信息存起来了。

d、开发者希望进到首页就获取到用户的unionId,以便和之前已经关注了公众号的用户画像关联起来。

2、使用wx.getSetting获取用户的授权情况

3、获取到用户数据后可以进行展示或者发送给自己的后端。

b、开发者没有处理用户拒绝弹框的情况,有部分小程序强制要求用户授权头像昵称等信息才能继续使用小程序。

已经上线的小程序不会受到影响。

相关文章

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图