微信小程序开发用户授权登录

水深无声 2021-09-16 22:32 738阅读 0赞

用wx.login获取登录凭证code

<view hidden='{
       {boolean}}'>
    	<view wx:if="{
       {isLogin == 1}}">
    		
    		<view class='infomation'>
    			
    			<view class="gameTitle">
    				<navigator hover-class="none" href=""><image src="{
       {dataList.head_photo}}"></image></navigator>
    				<view>
    					<view class="gameName"><navigator hover-class="none" href="">{
       {dataList.username}}</navigator></view>
    					<view class="gameSummary" wx:if="{
       {dataList.title == ''}}"><navigator hover-class="none" href="">这个玩家很懒，什么也没留下</navigator></view>
    					<view class="gameSummary" wx:if="{
       {dataList.title != ''}}"><navigator hover-class="none" href="">{
       {dataList.title}}</navigator></view>
    				</view>
    			</view>
    			
    		</view>
    		
    		<view class='myList'>
    			<view class='list'>
    			</view>
    		</view> 
    	</view>
    	<view wx:if="{
       {isLogin == 2}}">
    		<view class='bgBox'>
    			
    		</view>
    		<view class="unLogin">
    
    		</view>
    	</view>
    </view>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]

## wx.checkSession ##

*  小程序 wx.checkSession 校验登陆态
    
     *  success ：接口调用成功，session\_key未过期；
     *  fail ：接口调用失败，session\_key已过期；

1.  小程序端 wx.login 获取code 并 wx.request 提交 code 给己方服务器
2.  服务器 提交Appid + appSecret + code 到微信方服务器 获取 session\_key & openid
3.  服务器 根据 session\_key & openid 生成 3rd\_session（微信方提出的基于安全性的考虑，建议开发者不要将openid等关键性信息进行数据传输） 并返回 3rd\_session 到小程序端
4.  小程序端 wx.setStorage 存储 3rd\_session 在后续用户操作需要凭证时 附带该参数
5.  小程序端 wx.getUserInfo 获取用户信息 + wx.getStorage 获取 3rd\_session 数据后，一并 wx.request 提交给己方服务器
6.  服务器 SQL 用户数据信息更新

//用户登陆
    function userLogin() {
      wx.checkSession({
        success: function () {
          //存在登陆态
        },
        fail: function () {
          //不存在登陆态
          onLogin()
        }
      })
    }
     
    function onLogin() {
      wx.login({
        success: function (res) {
          if (res.code) {
            //发起网络请求
            wx.request({
              url: 'Our Server ApiUrl',
              data: {
                code: res.code
              },
              success: function (res) {
                const self = this
                if (逻辑成功) {
                  //获取到用户凭证 存儲 3rd_session 
                  var json = JSON.parse(res.data.Data)
                  wx.setStorage({
                    key: "third_Session", 
                    data: json.third_Session
                  })
                  getUserInfo()
                }
                else {
     
                }
              },
              fail: function (res) {
     
              }
            })
          }
        },
        fail: function (res) {
      
        }
      })
     
    }
     
    function getUserInfo() {
      wx.getUserInfo({
        success: function (res) {
          var userInfo = res.userInfo
          userInfoSetInSQL(userInfo)
        },
        fail: function () {
          userAccess()
        }
      })
    }
     
    function userInfoSetInSQL(userInfo) {
      wx.getStorage({
        key: 'third_Session',
        success: function (res) {
          wx.request({
            url: 'Our Server ApiUrl',
            data: {
              third_Session: res.data,
              nickName: userInfo.nickName,
              avatarUrl: userInfo.avatarUrl,
              gender: userInfo.gender,
              province: userInfo.province,
              city: userInfo.city,
              country: userInfo.country
            },
            success: function (res) {
              if (逻辑成功) {
                //SQL更新用户数据成功
              }
              else {
                //SQL更新用户数据失败
              }
            }
          })
        }
      })
    }

第三方服务器和微信服务器:  
注意:session\_key是微信服务器生成的针对用户数据进行加密签名的密钥,不应该进行传输到客户端.

生成3rd\_session  
用于第三方服务器和小程序之间做登录态校验.为了保证安全性,3rd\_session应该长度够长,一定有效时间, session\_key + openid, key, 为 value, 写入到session存储.

3rd\_session写入storage:  
后续用户进入小程序,先从storage读取3rd\_session  
根据请求,在session存储中查找合法的session\_key和openid

App({
      onLaunch: function() {
        wx.login({
          success: function(res) {
            var code = res.code;
            if (code) {
              console.log('获取用户登录凭证：' + code);
            } else {
              console.log('获取用户登录态失败：' + res.errMsg);
            }
          }
        });
      }
    })

唯一标识(openid)和会话密钥(session\_key)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 1]

## wx.checkSession ##

检测当前用户登录态是否有效

wx.checkSession({
      success: function(){
        //session 未过期，并且在本生命周期一直有效
      },
      fail: function(){
        //登录态过期
        wx.login() //重新登录
        ....
      }
    })

## 服务端处理逻辑 ##

wx.checkSession({
        success:function(res){
          //session_key未过期
        },
        fail:(res=>{
          // session_key已过期
          // 进行登录操作
          wx.login({
            success: function(res) {
              const url = '接口地址'   //本次项目中是从后台获取session_key的接口，可能流程不同，会有相应的变化
              const data = {
                //你要传的数据
              }
              wepy.request({
                url: url,
                method: 'POST',
                data: data,
              }).then(res=>{
                if(res.data.code == 0){
                  //拿到的openid和session_key存到缓存中
    
                  //调用换取用户id接口[需求不同，可能接口会有相应的变化]
                  const url = '获取用户id的接口'
                  const data = {'要传的数据'}
                  wepy.request({
                    url: url,
                    method: 'POST',
                    data: data,
                  }).then((res)=>{
                    //该接口设计返回的参数包括换取的用户ID和返回的用户的微信中信息，也就是通过button获取的那个userInfo[我们为了后续的处理，所以后台这块返回用户信息，如果用户还未登录，用户信息，返回是空，反之则有值]
                    //存储用户ID
                    wx.setStorage({
                      key:'userId',
                      data:'获取到的用户ID'
                    })
                    //存储用户信息[userInfo]
                    wx.setStorage({
                      key:'userInfo',
                      data:'获取到的用户信息'
                    })
                  })
                }
              })
            }
          });
        })
      })

onShow(){
        //从缓存中获取session_key
        let skey = wx.getStorageSync('session_key');
        if (!skey) {
          //如果session_key不存在，再次执行登录
          wx.login({
            //该处登录同app.wpy[流程一样]
          });
        }else{
          // session_key存在
        }
      }
      //我们假设这个页面需要获取用户的信息，首先给一个button[open-type设置为getUserInfo],使用这个拿到用户的信息，
      getUserInfo(e){
          this.userInfo = e.detail.userInfo;  //e.detail.userInfo携带的就是用户的个人信息[包括头像、昵称等]
          if(e.detail.userInfo){
            wx.showToast({
              title: '授权成功',
              icon: 'success',
              duration: 1500
            })
            //这里做这样的处理，是因为需求需要点击购物车按钮跳转订单待支付页，在没有获取到用户信息之前，跳转购物车的按钮隐藏，获取用户信息按钮显示，反之则返
            this.button = 'none';   //获取用户信息button
            this.myMenu = 'block';  //跳转待支付订单页
            //更新缓存中的用户信息
            wx.setStorage({
              key:'userInfo',
              data:this.userInfo
            })
          }else if(e.detail.errMsg == 'getUserInfo:fail auth deny'){
            wx.showModal({
              title: '提示',
              content: '若不授权微信登录，则无法使用小程序。点击"授权"按钮并允许使用"用户信息"方可正常使用。',
              showCancel:false,
              confirmText:'授权',
              success:(res=>{
                wx.openSetting({
                  success: (res) => {
                  }
                })
              })
            })
          }
        }

![在这里插入图片描述][20181106171450896.png]

![在这里插入图片描述][20181106171506123.png]

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 3]

对称解密的目标密文为 Base64\_Decode(encryptedData)。  
对称解密算法初始向量 为Base64\_Decode(iv)，其中iv由数据接口返回。

signature = sha1( rawData + session\_key )

//最终供外面调用的方法
    function login(){
        console.log('logining..........');
        //调用登录接口
        wx.login({
            success: function (e) {
                console.log('wxlogin successd........');
                var code = e.code;
                wx.getUserInfo({
                    success: function (res) {
                        console.log('wxgetUserInfo successd........');
                        var encryptedData = encodeURIComponent(res.encryptedData);
                        thirdLogin(code,encryptedData,res.iv);//调用服务器api
                    }
                })
            }
        });
    }
    
    function  thirdLogin(code,encryptedData,iv){
        var url = "eeee/xxx/login/ttttt";
        var params = new Object();
        params.code = code;
        params.encryptedData = encryptedData;
        params.iv =iv;
    
        buildRequest(new Object(),url,params,{
            onPre: function(page){},
            onSuccess:function (data){
                console.log('my  login successd........');
                console.log(data);
                getApp().globalData.session_id = data.session_id;
                getApp().globalData.uid = data.uid;
                getApp().globalData.isLogin = true;
            },
            onError : function(msgCanShow,code,hiddenMsg){
            }
        }).send();
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]: /images/20210724/2f1c1a1e1a68428ebabf95145610932e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 1]: /images/20210724/316d6299836f4f41b72c6ad55e906b0e.png
[20181106171450896.png]: /images/20210724/01d8ee56d74d46f8929227efdfe589f7.png
[20181106171506123.png]: /images/20210724/c8a46c7bb4684342b588832209fbd76e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 2]: /images/20210724/bec33ec18ab343bb89865d06c9483091.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 3]: /images/20210724/77e7546c8e39436a85539a2b97284885.png