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


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 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
微信小程序实现的一键拨号功能示例
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结合Mysql数据库实现留言板功能
2016/03/04 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
js闭包学习心得总结
2018/04/17 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
Django中Forms的使用代码解析
2018/02/10 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
python下载库的步骤方法
2019/10/12 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
应聘护士求职信
2014/07/21 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
大学生村官个人总结
2015/02/15 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
goland 设置project gopath的操作
2021/05/06 Golang
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL