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

微信小程序授权登录流程

E企盈小程序直播系统

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html     微信小程序官方API说明:调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。调用 code2Session 接口,换取 用户唯一标识 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() {    let utoken = wx.getStorageSync(“userInfo”).utoken;    if (typeof utoken == “undefined”) {      return false;    }    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() {    const selector = ‘#login’    const pages = getCurrentPages();    const ctx = pages[pages.length – 1];    const componentCtx = ctx.selectComponent(selector);    if (!componentCtx) {      console.error(‘无法找到对应的组件,请按文档说明使用组件’);      return null;    }    componentCtx.handleShow();  }}app.jsvar server = require(‘./utils/server’);App({  onLaunch: function() {    server.checkLogs();//全局调用checkLogs(),检查登录是否失效  },  globalData: {}})login.wxml<!–component/login/login.wxml–><view class=’fixBox’ catchtouchmove=’touchMove’ catchtap=’handleHide’ wx:if=”{{visible}}”>  <form report-submit=”true”>    <button type=’primary’ form-type=’submit’ open-type=”getUserInfo” catchtap=’cantchTap’ bindgetuserinfo=”getUserInfo”>一键授权</button>  </form></view> <i-message id=”message”/>注意:wx.authorize({scope: “scope.userInfo”}),无法弹出授权窗口,请使用 <button open-type=”getUserInfo”/>login.js// component/login/login.jsconst server = require(‘../../utils/server.js’);Component({  properties: {  },  data: {    formid: null,    visible: false  },  methods: {    handleShow() {      this.setData({        visible: true      })    },    handleHide() {      this.setData({        visible: false      })    },    touchMove() {      return false;    },    cantchTap() {      return false;    },    getUserInfo(res) {      if (res.detail.errMsg == ‘getUserInfo:ok’) {        let userInfo = {          …res.detail.userInfo        }        wx.login({          success: e => {                   let code = e.code;  //调用wx.login,获取登录凭证(code),并调用接口,将code发送到第三方客户端            server.sendRequest({              url: ”,       //小程序端将code传给第三方服务器端,第三方服务器端调用接口,用code换取session_key和openid              data: {                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框架里的方法抽取出来      const componentCtx = this.selectComponent(“#message”);      componentCtx.handleShow(options);    }  }})login.json​{  “component”: true,  “usingComponents”: {    “i-message”: “/component/iview/message/index”  //引用iview框架里全局提示框  }}​login.wxssindex.wxml<view class=’head’>  <block wx:if=”{{userInfo}}”>    <image class=”avatarImg” src=”{{userInfo.avatarUrl}}”></image>    <view class=”nickname”>{{userInfo.nickName}}</view>  </block>  <block wx:else>    <image class=”avatarImg” bindtap=”login” src=”/images/avatar.png”></image>    <view class=”nickname” bindtap=”login”>未登录</view>  </block></view><view class=”order”>  <view class=”list orderTitle”>    <view class=”listTitle”>我的订单</view>    <view class=”readMore” bindtap=’seeMore’>      <text>查看更多</text>      <image class=”toRight” src=”/images/toRight.png”></image>    </view>  </view></view><login id=”login” bind:login=”onLogin”></login>index.jsconst server = require(‘../../utils/server.js’);Page({  data: {    useInfo: null  },  onLoad: function(options) {},  onShow: function() {  },  onLogin(res) {  // 授权成功的回调,根据子组件传过来的status    if (res.detail.status == 1) {      let userInfo = 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: 0 20rpx;  border-top: 1rpx solid #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: 2rpx solid #eee;  height: 100rpx;  box-sizing: border-box;  padding: 0 20rpx;}.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企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏