微信小程序(二十一)小程序登录获取openid和unionid

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第16天,点击查看活动详情

在微信小程序中,因为各种各样的原因我们会需要获取到用户的openid或者unionid下面就简单来讲一下在小程序中如何获取openid和unionid。

步骤一:微信登录获取登录凭证

  1. wx.login({
  2. success: res => {
  3. // 微信临时登录凭证
  4. let _code = res.code;
  5. // 进行网络访问,将 _code 提交给服务端,服务端返回 openid 和 unionid,
  6. // 服务端对 _code 的处理机制参照 步骤二
  7. ......
  8. },
  9. fail: res => {
  10. toast.show({ content: 微信登录失败 });
  11. }
  12. });

调用微信小程序的 wx.login()可以获取到微信登录的临时凭证,此凭证将用于下面获取 openid 以及 unionid

步骤二:将获取的登录凭证提交后台,获取 openid 与 unionid(在服务端获取)

如何使用登录凭证(注意:下方代码仅用于讲解凭证使用方法以及在调试中快捷获取 openid 以及unionid,不可在正式开发中使用)

  1. wx.request({
  2. // 通过此 url ,获取 openid 与 unionid
  3. url: https://api.weixin.qq.com/sns/jscode2session,
  4. data: {
  5. // 小程序的appid
  6. appid: appId,
  7. // 小程序的secret
  8. secret: appSecret,
  9. // wx.login()返回的登录凭证
  10. js_code: jscode,
  11. // 固定值,不需要改变
  12. grant_type: authorization_code
  13. },
  14. success: res => {
  15. // 返回的 openid
  16. console.log(res.data.openid);
  17. // 返回的会话密钥
  18. console.log(res.data.session_key);
  19. // 注意:上面两个字段值必定会返回,unionid 则只会在满足一定条件下返回,不是必定会返回的值
  20. console.log(res.data.unionid);
  21. }
  22. });

注意!注意!注意!===>
1、上方代码,仅仅用于讲述如何通过登录凭证获取 openid 和 unionid 以及在调试中如何快速获取 openid 和unionid,
并不能在正式开发中在客户端使用,微信不支持正式的线上产品访问 ‘https://api.weixin.qq.com/sns/jscode2session‘ !!!
2、在正式开发中,必须将获取的登录凭证(js_code)提交给服务端,由服务端访问
https://api.weixin.qq.com/sns/jscode2session
获取 openid 和 unionid,在返回给客户端
上边大概说的是原理的情况,下边是我使用的前端代码及服务器端(PHP)代码:

前端:

  1. wx.login({
  2. success: function (res) {
  3. // console.log(res)
  4. if (res.code) {
  5. //调用函数获取微信用户信息
  6. _this.getUserInfo(function(info){
  7. console.log(info)
  8. _this._user.wx = info.userInfo;
  9. //发送code与微信用户信息,获取学生数据
  10. wx.request({
  11. method: POST,
  12. url: “请求的URL”,
  13. data: {
  14. code: res.code,
  15. encryptedData: info.encryptedData,
  16. iv: info.iv
  17. },
  18. success: function (res) {
  19. console.log(res);
  20. },
  21. fail: function (res) {}
  22. });
  23. });
  24. }
  25. }
  26. });

PHP端代码:

  1. /**
  2. * @name: 微信小程序登录/注册
  3. * @desc: 描述
  4. * @author: camellia
  5. * @date: 20200822
  6. * @param: data type description
  7. * @return: data type description
  8. */
  9. public function stuAppLogin(Request $request)
  10. {
  11. $code = $request->input(code);
  12. $encryptedData = $request->input(encryptedData);
  13. $iv = $request->input(iv);
  14. $ch = curl_init("https://api.weixin.qq.com/sns/jscode2session?appid=$this->appid&secret=$this->appsecret&js_code=$code&grant_type=authorization_code");
  15. curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  16. $res = curl_exec($ch);
  17. curl_close($ch);
  18. // 将微信注册返回值变成数组
  19. $resarr = json_decode($res, true);
  20. $token = ;
  21. // 如果返回值数组中有session_key
  22. if (isset($resarr[session_key]))
  23. {
  24. // 如果返回值数组中没有unionid
  25. if (!isset($resarr[unionid]))
  26. {
  27. $pc = new WXBizDataCrypt($this->appid, $resarr[session_key]);
  28. $errCode = $pc->decryptData($encryptedData, $iv, $data);
  29. if ($errCode == 0)
  30. {
  31. $dataArr = json_decode($data, true);
  32. $resarr[unionid] = $dataArr[unionId];
  33. }
  34. else
  35. {
  36. $datas[code] = -2;
  37. $datas[msg] = $this->getMsgByCode(-2);
  38. return $datas;
  39. }
  40. }
  41. //你的逻辑代码
  42. }
  43. return $datas;
  44. }

unionid的获取条件以及其他几种获取方式

上述已经说明,openid是必定能得到的值,unionid则需要满足一定条件才会返回,下面就讲述一下unionid的获取条件以及其他的获取方式!

在这里插入图片描述

获取unionID的其他几种方法(主要是在客户端获取)

调用接口wx.getUserInfo,从解密数据中获取UnionID。

如果你绑定的微信开放平台下存在同主体的公众号,并且该用户已经关注了该公众号。可以直接通过wx.login获取到用户UnionID,无须用户再次授权。

如果你绑定的微信开放平台下存在同主体的公众号或移动应用,并且该用户已经授权登录过该公众号或移动应用。也可以直接通过wx.login获取到该用户UnionID,无须用户再次授权。

以上基本上就是小程序获取openid及unionID的方法。

重点还是在微信开放平台那个位置,那个位置不绑定应用,打死你也取不到unionID。剩下的代码部分,请参照微信官方文档。

有好的建议,请在下方输入你的评论。

欢迎访问个人博客:https://guanchao.site

欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”


原文连接:https://juejin.cn/post/7107031354621034509

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

我在淘宝做弹窗,2022 年初的回顾与展望

看完这篇,你也可以搞定有趣的动态曲线绘制

低代码平台的属性面板该如何设计?

34个图片压缩工具集合,包含在线压缩和CLI工具

冴羽答读者问:过程比结果重要吗?如果是,怎么理解?如果不是,又怎么解?

中杯超大杯中间的新选择——vue2.7+vite+ts实践

LiveData源码分析

亚马逊Prime:流媒大战杀手锏

Vue详解知识概括

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

完美解决自定义字体垂直方向上下偏移的问题

使用vuepress从零开始搭建我的技术文档|已部署到线上

【Vue.js 3.0源码】AST 转换之节点内部转换

小程序+电商,该如何寻找营销增长点

前端如何开始深度学习,那不妨试试JAX

你可能不知道的 前端浏览器(window) 对本地文件操作(File System Access API)

爱奇艺向抖音开启授权,打开内容价值的新大门

使用ComposeDesktop开发一款桌面端多功能APK工具

一个简洁、强大、可扩展的前端项目架构是什么样的?