前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序开发用户授权登录

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

作者头像
达达前端
发布2022-04-29 09:41:23
2.3K0
发布2022-04-29 09:41:23
举报
文章被收录于专栏:达达前端达达前端

用wx.login获取登录凭证code

代码语言:javascript
复制
<!--pages/user/index.wxml-->
<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>
在这里插入图片描述
在这里插入图片描述

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 用户数据信息更新
代码语言:javascript
复制
//用户登陆
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

代码语言:javascript
复制
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)

在这里插入图片描述
在这里插入图片描述

wx.checkSession

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

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

服务端处理逻辑

代码语言:javascript
复制
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:'获取到的用户信息'
                })
              })
            }
          })
        }
      });
    })
  })
代码语言:javascript
复制
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) => {
              }
            })
          })
        })
      }
    }
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

signature = sha1( rawData + session_key )

代码语言:javascript
复制
//最终供外面调用的方法
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();
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-11-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • wx.checkSession
  • wx.checkSession
  • 服务端处理逻辑
相关产品与服务
访问管理
访问管理(Cloud Access Management,CAM)可以帮助您安全、便捷地管理对腾讯云服务和资源的访问。您可以使用CAM创建子用户、用户组和角色,并通过策略控制其访问范围。CAM支持用户和角色SSO能力,您可以根据具体管理场景针对性设置企业内用户和腾讯云的互通能力。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档