E企盈营销工具技术服务商 热线:4006-838-530

微信小程序授权登录,微信小程序授权登录流程

E企盈直播平台营销卖货系统

微信小程序官方API说明:调用获取临时登录凭证code,并回传到开发者服务器。调用接口,换取用户唯一标识OpenID和会话密钥session_key。之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。注意:会话密钥session_key是对用户数据进行的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。临时登录凭证code只能使用一次这里仅按照官方推荐的规范来0.前置条件一共有三端:-微信小程序客户端-第三方服务器端-微信服务器端1.检测登录是否有效,如果无效则清楚登录信息(wx.checkSession);2.调用接口获取登录凭证(code)(wx.login);通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成。3.客户端获得code,并将code传给第三方服务端微信小程序端调用wx.login,获取登录凭证(code),并调用接口,将code发送到第三方客户端4.第三方服务端用code换session_key和openid小程序端将code传给第三方服务器端,第三方服务器端调用接口,用code换取session_key和openid5.第三方服务端生成新的session(3rd_session)第三方服务器端拿到请求回来的session_key和openid,先留着,不能给客户端;然后用操作系统提供的真正随机数算法生成一个新的session,叫3rd_session6.第三方服务端建立对应关系,并存储将3rd_session作为key,微信服务端返回的session_key和openid作为值,保存起来7.第三方服务端将3rd_session发送到客户端客户端只拿到3rd_session就够了,大人说话小孩别插嘴,小程序不需要知道session_key和openid8.正常请求小程序每次请求都将3rd_session放在请求头里,第三方服务端解析判断合法性,并进行正常的逻辑处理。下面就封装一个小程序授权登录的组件目录结构1.server.js//检测登录是否有效,如果无效则清除登录信息module.exports={checkLogs(){letutoken=wx.getStorageSync(“userInfo”).utoken;if(typeofutoken==”undefined”){returnfalse;}this.sendRequest({url:”,////检测登录是否有效的接口data:{utoken},method:’POST’,success:res={if(res.data.code!=200){wx.removeStorageSync(‘userInfo’);}},fail:()={wx.removeStorageSync(‘userInfo’);}})},//这里使用了iview框架,全局控制handleShow方法,授权登录的显示login:function(){constselector=’#login’constpages=getCurrentPages();constctx=pages[pages.length-1];constcomponentCtx=ctx.selectComponent(selector);if(!componentCtx){console.error(‘无法找到对应的组件,请按文档说明使用组件’);returnnull;}componentCtx.handleShow();}}app.jsvarserver=require(‘./utils/server’);App({onLaunch:function(){server.checkLogs();//全局调用checkLogs(),检查登录是否失效},globalData:{}})login.wxml!–component/login/login.wxml–viewclass=’fixBox’catchtouchmove=’touchMove’catchtap=’handleHide’wx:if=”{{visible}}”formreport-submit=”true”buttontype=’primary’form-type=’submit’open-type=”getUserInfo”catchtap=’cantchTap’bindgetuserinfo=”getUserInfo”一键授权/button/form/viewi-messageid=”message”/注意:wx.authorize({scope:”scope.userInfo”}),无法弹出授权窗口,请使用buttonopen-type=”getUserInfo”/login.js//component/login/login.jsconstserver=require(‘../../utils/server.js’);Component({properties:{},data:{formid:null,visible:false},methods:{handleShow(){this.setData({visible:true})},handleHide(){this.setData({visible:false})},touchMove(){returnfalse;},cantchTap(){returnfalse;},getUserInfo(res){if(res.detail.errMsg==’getUserInfo:ok’){letuserInfo={…res.detail.userInfo}wx.login({success:e={letcode=e.code;//调用wx.login,获取登录凭证(code),并调用接口,将code发送到第三方客户端server.sendRequest({url:”,//小程序端将code传给第三方服务器端,第三方服务器端调用接口,用code换取session_key和openiddata:{encryptedData:res.detail.encryptedData,iv:res.detail.iv,code:code},method:’POST’,success:res={if(res.data.code==200){userInfo={…userInfo,…res.data.result}console.log(userInfo);console.log(res.data.result)wx.setStorageSync(‘userInfo’,userInfo);//授权成功this.triggerEvent(‘login’,{status:1})this.$Message({content:’登录成功’,type:”success”})this.handleHide();}else{this.triggerEvent(‘login’,{status:0})this.$Message({content:’登录失败’,type:’error’});this.handleHide();}}})}})}else{this.triggerEvent(‘login’,{status:0})this.$Message({content:’登录失败’,type:’error’});this.handleHide();}},$Message(options){//把iview框架里的方法抽取出来constcomponentCtx=this.selectComponent(“#message”);componentCtx.handleShow(options);}}})login.json​{“component”:true,”usingComponents”:{“i-message”:”/component/iview/message/index”//引用iview框架里全局提示框}}​login.wxssindex.wxmlviewclass=’head’blockwx:if=”{{userInfo}}”imagesrc=”{{userInfo.avatarUrl}}”/imageview{{userInfo.nickName}}/view/blockblockwx:elseimagebindtap=”login”src=”/images/avatar.png”/imageviewbindtap=”login”未登录/view/block/viewviewviewview我的订单/viewviewbindtap=’seeMore’text查看更多/textimagesrc=”/images/toRight.png”/image/view/view/viewloginid=”login”bind:login=”onLogin”/loginindex.jsconstserver=require(‘../../utils/server.js’);Page({data:{useInfo:null},onLoad:function(options){},onShow:function(){},onLogin(res){//授权成功的回调,根据子组件传过来的statusif(res.detail.status==1){letuserInfo=wx.getStorageSync(‘userInfo’);this.setData({userInfo})}},navigateTo(option){//封装一个具有判断是否授权登录的跳转方法if(wx.getStorageSync(“userInfo”)){wx.navigateTo(option);}else{server.login();}},seeMore(){this.navigateTo({url:’/pages/order/orderList/orderList’})},})index.wxsspage{background-color:#eee;}.head{width:100%;height:250rpx;background-color:#fff;box-sizing:border-box;padding:020rpx;border-top:1rpxsolid#eee;display:flex;align-items:center;justify-content:flex-start;}.avatarImg{width:150rpx;height:150rpx;border-radius:50%;}.nickname{display:inline-block;font-size:40rpx;font-weight:600;color:#212121;margin-left:20rpx;}.order,.tool{margin-top:20rpx;background-color:#fff;}.list{border-bottom:2rpxsolid#eee;height:100rpx;box-sizing:border-box;padding:020rpx;}.orderTitle{display:flex;align-items:center;justify-content:space-between;}.listTitle{color:#232323;font-size:35rpx;}.readMore{line-height:100rpx;font-size:30rpx;color:#989898;display:flex;align-items:center;}.toRight{width:28rpx;height:28rpx;margin-left:20rpx;}index.json{“usingComponents”:{“login”:”/component/login/login”,”i-message”:”/component/iview/message/index”}}解释都在代码里面

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序授权登录,微信小程序授权登录流程
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏