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


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 08 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
vue+element实现表单校验功能
May 20 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学习 字符串课件
2008/06/15 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
js getElementsByTagName的简写方式
2010/06/27 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
python实现自动登录后台管理系统
2018/10/18 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
甜品店的创业计划书范文
2014/01/02 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
《桥》教学反思
2014/04/09 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL