详解微信小程序开发用户授权登陆


Posted in Javascript onApril 24, 2019

本篇将帮助读者实现基于 微信开发者工具 & C#环境 下的用户在小程序上的授权登陆。

准备:

微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/index.html

开发:

在开发之初,我们需要先明确微信方已经制定好的授权登陆流程,参看 官方API - 登陆接口。

你会看到微信方为开发者制定好的登陆授权流程:

详解微信小程序开发用户授权登陆

如图,即为一个顺向的用户登陆授权的流程。

为什么说它是一个顺向的流程呢?因为在真正的小程序开发中,我们并不确定用户何时需要起调如上的登陆流程(如:用户在某些特定场景下的凭证丢失,但Ta并没有退出小程序而是在小程序内部做跳转等相关操作,即有可能导致一些预期之外的异常),所以,我们需要在这个顺向的流程之外,加一层检测机制,来解决这些异常场景,而官方API中,wx.checkSession 刚好可以一定程度上解决这个问题。

那么,我们的认证流程其实应该是:

小程序 wx.checkSession 校验登陆态为失效

success :接口调用成功的回调函数,session_key未过期,流程结束;    

fail :接口调用失败的回调函数,session_key已过期

小程序端 wx.login 获取code 并 wx.request 提交code给己方服务器

己方服务器 提交Appid + appSecret + code 到微信方服务器 获取 session_key & openid

己方服务器 根据 session_key & openid  生成 3rd_session(微信方提出的基于安全性的考虑,建议开发者不要将openid等关键性信息进行数据传输) 并返回 3rd_session 到小程序端

小程序端 wx.setStorage 存储 3rd_session ( 在后续用户操作需要凭证时 附带该参数 )

小程序端 wx.getUserInfo 获取用户信息 + wx.getStorage 获取 3rd_session 数据后,一并 wx.request 提交给己方服务器

己方服务器 SQL用户数据信息更新,流程结束;

思路整理完毕,接下来实现流程

小程序端:

在小程序中,新建一个通用的JS做基础支持

 详解微信小程序开发用户授权登陆

并在一些需要引用的页面进行引用

var common = require("../Common/Common.js")

接着,在Common.js 中实现逻辑

//用户登陆
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更新用户数据失败
     }
    }
   })
  }
 })
}

至此,小程序端的流程基本实现完毕,接着实现己方服务API

Login 接口逻辑范例

if (dicRequestData.ContainsKey("CODE"))
    {
      string apiUrl = string.Format("https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code", ProUtil.SmartAppID, ProUtil.SmartSecret, dicRequestData["CODE"]);
    
      HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(apiUrl);
      myRequest.Method = "GET";
      HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();
      StreamReader reader = new StreamReader(myResponse.GetResponseStream(), Encoding.UTF8);
      string content = reader.ReadToEnd();
      myResponse.Close();
      reader.Close();
      reader.Dispose();
 
      //解析
      userModel ReMsg = JSONUtil.JsonDeserialize<userModel>(content); //解析
      if ((!string.IsNullOrWhiteSpace(ReMsg.openid)) && (!string.IsNullOrWhiteSpace(ReMsg.session_key)))
      {
        // 成功 自定义生成3rd_session与openid&session_key绑定并返回3rd_session
 
      }
      else
      {
        // 错误 未获取到用户openid 或 session
      }
    }
    else
    {
      // 错误 未获取到用户凭证code
    }

UserInfoUpdate 接口在此不加赘述,用户根据自身情况对数据进行操作即可,微信方调用成功时返回的相关参数信息如下

详解微信小程序开发用户授权登陆

至此,完成了小程序基本的授权登陆及用户信息的获取。

认真看完以上所有后

有啥不懂的 欢迎留言提问~

注:以上内容有所删减,仅保留通用内容。在具体项目中必定存在部分逻辑需要调整,引鉴的同学请注意

以上所述是小编给大家介绍的微信小程序开发用户授权登陆详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js操作checkbox遇到的问题解决
Jun 29 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 #Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 #Javascript
微信小程序实现的图片保存功能示例
Apr 24 #Javascript
vue中的inject学习教程
Apr 24 #Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 #Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 #Javascript
vue模仿网易云音乐的单页面应用
Apr 24 #Javascript
You might like
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
php记录日志的实现代码
2011/08/08 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
Python中的元类编程入门指引
2015/04/15 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
电子商务专业求职信
2014/07/10 职场文书
关于读书的活动方案
2014/08/14 职场文书
综合管理员岗位职责
2015/02/11 职场文书
离婚代理词范文
2015/05/23 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android