• 微信小程序登录(包括获取不到unionid的情况)


    我们一般都是先获取到微信的 unionid,然后再通过 unionid 去登录自己的网站,就可以关联到用户在自己网站上的 user_id,但是在小程序登录中,有时候可以获取到 unionid,有时候获取不到,在获取不到 unionid 的情况下,用户无法正常登录网站。
     
    UnionID机制说明: 
      如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过 unionid 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的 unionid 是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid 是相同的。
      同一个微信开放平台下的相同主体的 App、公众号、小程序,如果用户已经关注公众号,或者曾经登录过App或公众号,则用户打开小程序时,开发者可以直接通过 wx.login 获取到该用户UnionID,无须用户再次授权。(解读:用户如果没有登录过app,也没有登录过公众号,也没有关注过公众号的情况下,小程序中通过 wx.login 是获取不到 unionid的)
     
      简而言之,微信针对不同的用户在不同的应用下都有唯一的一个 openId, 但是要想确定用户是不是同一个用户,就需要靠 unionid 来区分。
      通常自己的后台都会有自己的一个用户表,每个用户有不同的 userid。也就是说同一个用户在同一个微信开放平台下的相同主体的应用对应着相同的 userid, unionid 以及不同的 openid。所以在用户登录进来的时候,我们只能靠微信返回给我们的 unionid 去判断是不是同一个用户,再去关联我们的用户表,拿到对应的 user_id。
     
    一般情况下(即在登录小程序之前,已经关注过公众号或已经登录过公众号或已经使用微信登录的方式登录过app),用户通过以下两步就正常成功登录网站。
    复制代码
     1 1. 获取code(登录凭证,用来换取openid及session_key等)
     2     wx.login({
     3       success: function(res){
     4          if(res.code){
     5              that.getNeededUserInfo(res.code);
     6           }else{
     7           console.log('获取用户登录态失败!'+res.errMsg);
     8       }
     9     }
    10   })
    11 
    12 2. 获取用户信息(利用wx.login返回的code获取用户的信息)
    13   getNeededUserInfo: function(code){
    14     wx.request({
    15       url: 'https://my.com/login',
    16       method: 'POST',
    17       data: {
    18         code: code // 后端通过这个code去调用微信的接口(https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code),传入参数code、appid、appsecret后获取到微信返回的unionid、openid及session_key等。(然后后端可以直接利用微信返回的信息去关联用户在自己网站的user_id)
    19       },
    20       success: function(res){
    21         // 可以返回前端需要的用户信息(包括unionid、openid、user_id等)
    22       }
    23     })
    24   }
    复制代码
     
    二般情况下(即在登录小程序之前,既没有关注过公众号,也没有登录过公众号,更没有使用微信登录的方式登录过app),通过 wx.login 的到的 code 换不回 unionid 及 openid 等信息。
    解决思路:通过带登录态的 wx.getUserInfo 获取到用户的加密数据 encryptedData 和加密算法的初始向量iv,然后将 encryptdata、iv 以及 code传给后端,后端再去通过接收到的encryptedData、iv以、code 以及之前的 session_key 解密出用户的 openid、unionid 等。加密数据解密算法
    以下是具体实现步骤:
    复制代码
    1. 获取code(登录凭证,用来换取openid及session_key等)
      wx.login({
        success:  function(res){
          if(res.code){
            that.getNeededUserInfo(res.code);
          }else{
            console.log('获取用户登录态失败!'+res.errMsg);
          }
        }
      })
    
    2. 获取加密数据和加密算法初始向量
    旧版本基础库调取wx.getUserInfo()可以直接获取到微信返回的encryptdata等完整数据,基础库更新之后,需要增加withCredentials属性,并将属性值设置为true时才可以获取到除用户基本信息之外的encryptedData以及iv等数据。
    需要注意的是:当withCredentials值为true时,要求此前有调用过wx.login且登录态尚未过期。
      getEncData:  function(){
        wx.getUserInfo({
          withCredentials: true,
          success: function(res){
            that.getNeededUserInfo( code,  res.encryptedData,  res.encryptedData );
          }
        })
      }
    
    3. 获取用户信息(利用wx.login返回的code获取用户的信息)
      getNeededUserInfo:  function(code, enc, iv){
        wx.request({
          url: 'https://my.com/login',
          method: 'POST',
          data: {
            code: code,
            encryptedData: enc,
            iv: iv
          },
          success: function(res){
            // 可以返回前端需要的用户信息(包括unionid、openid、user_id等)
          }
        })
      }
    复制代码
    实际项目中需要将以上两种情况整合以后使用。
     
    思路有两种:
     
      第一种:( 前端判断是否有 unionid )在向后端上传 code 并且后端返回数据以后,前端判断返回值中是否有 unionid 或者 unionid 是否为 null,null 的情况下去调用带有用户登录态的wx.getUserInfo(),然后再将微信返回的  encryptedData 和 iv 返回给后端,后端解密出相应的信息后再返回给前端;
     
      第二种:( 后端判断是否有 unionid )前端在调用 wx.getUserInfo() 时候带着登录态,然后不管后台能不能拿到 unionid,都把 encryptedData 和 iv 返回给后端,后端在拿到前端 code 之后去请求微信的接口拿 unionid,如果返回的 unionid 为空,再拿前端传的 encryptedData、iv以及之前的 session_key 解密出 unionid。
  • 相关阅读:
    angular4升级angular5问题记录之this.location.back()
    angular4升级angular5问题记录之No NgModule metadata found for 'AppModule'
    Angular4图片上传预览路径不安全问题
    Angular4.0引入laydate.js日期插件方法
    Angular4.0用命令行创建组件服务出错
    IE10以下的img标签问题
    关于for循环删除数组内容出现的问题
    关于onmouseover和onmouseout的bug
    纯lua实现Base64加密与解密
    SciTE如何修改背景色
  • 原文地址:https://www.cnblogs.com/ifindu-san/p/9227633.html
Copyright © 2020-2023  润新知