微信小程序授权获取用户详细信息openid的实例详解


Posted in Javascript onSeptember 20, 2017

小程序获取用户的头像昵称openid之类

微信小程序授权获取用户详细信息openid的实例详解

第一种使用wx.getUserInfo直接获取微信头像,昵称

wx.getUserInfo({
   success: function (res) {
   that.setData({
     nickName: res.userInfo.nickName,
     avatarUrl: res.userInfo.avatarUrl,
   })
   },
})

第二种

我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如微信用户的openid。
官方提示,需要发送获取到的code进行请求到微信的后端API,进行用户解密之类的操作才可以获取,

根据文档,只需要进行一个get请求到如下地址即可:

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

appid和secret在微信小程序后台可以看到,js_code为使用wx.login登录时获取到的code参数数据,grant_type这个不用改动。

js文件

var openId = (wx.getStorageSync('openId'))
    if (openId) {
     wx.getUserInfo({
      success: function (res) {
       that.setData({
        nickName: res.userInfo.nickName,
        avatarUrl: res.userInfo.avatarUrl,
       })
      },
      fail: function () {
       // fail
       console.log("获取失败!")
      },
      complete: function () {
       // complete
       console.log("获取用户信息完成!")
      }
     })
    } else {
     wx.login({
      success: function (res) {
       console.log(res.code)
       if (res.code) {
        wx.getUserInfo({
         withCredentials: true,
         success: function (res_user) {
          wx.request({
           //后台接口地址
           url: 'https://....com/wx/login',
           data: {
            code: res.code,
            encryptedData: res_user.encryptedData,
            iv: res_user.iv
           },
           method: 'GET',
           header: {
            'content-type': 'application/json'
           },
           success: function (res) {
            // this.globalData.userInfo = JSON.parse(res.data);
            that.setData({
             nickName: res.data.nickName,
             avatarUrl: res.data.avatarUrl,
            })
            wx.setStorageSync('openId', res.data.openId);

           }
          })
         }, fail: function () {
          wx.showModal({
           title: '警告通知',
           content: '您点击了拒绝授权,将无法正常显示个人信息,点击确定重新获取授权。',
           success: function (res) {
            if (res.confirm) {
             wx.openSetting({
              success: (res) => {
               if (res.authSetting["scope.userInfo"]) {////如果用户重新同意了授权登录
                wx.login({
                 success: function (res_login) {
                  if (res_login.code) {
                   wx.getUserInfo({
                    withCredentials: true,
                    success: function (res_user) {
                     wx.request({
                      url: 'https://....com/wx/login',
                      data: {
                       code: res_login.code,
                       encryptedData: res_user.encryptedData,
                       iv: res_user.iv
                      },
                      method: 'GET',
                      header: {
                       'content-type': 'application/json'
                      },
                      success: function (res) {
                       that.setData({
                        nickName: res.data.nickName,
                        avatarUrl: res.data.avatarUrl,

                       })
                       wx.setStorageSync('openId', res.data.openId);
                      }
                     })
                    }
                   })
                  }
                 }
                });
               }
              }, fail: function (res) {

              }
             })

            }
           }
          })
         }, complete: function (res) {


         }
        })
       }
      }
     })

    }


 },
 globalData: {  
  userInfo: null
 }

后台是php 框架是laravel5.4版本

官方文档:

https://mp.weixin.qq.com/debug/wxadoc/dev/api/signature.html

微信官方提供了多种编程语言的示例代码(点击下载)。每种语言类型的接口名字均一致。调用方式可以参照示例。

下载之后在php文件中引入:

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\User;
use App\Models\Wechatuser;
include_once  app_path('/Http/Controllers/Admin/PHP/wxBizDataCrypt.php');


 // 获取微信用户信息
  public function getWxLogin(Request $request)
  {
   // require_once ROOTPATH . "./PHP/wxBizDataCrypt.php";

    $code  =  $request->get('code');
    $encryptedData  =  $request->get('encryptedData');
    $iv  =  $request->get('iv');
    $appid = "***" ;
    $secret =  "***";

    $URL = "https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$code&grant_type=authorization_code";

    $apiData=file_get_contents($URL);
    // var_dump($code,'wwwwwwww',$apiData['errscode']);
    //   $ch = curl_init();
    // curl_setopt($ch, CURLOPT_URL, $URL);
    // 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    // 
curl_setopt($ch, CURLOPT_HEADER, 0);
    // 
$output = curl_exec($ch);
    // 
curl_close($ch)

    if(!isset($apiData['errcode'])){
      $sessionKey = json_decode($apiData)->session_key;
      $userifo = new \WXBizDataCrypt($appid, $sessionKey);

      $errCode = $userifo->decryptData($encryptedData, $iv, $data );

      if ($errCode == 0) {
        return ($data . "\n");
      } else {
        return false;
      }
    }
  }

官方文档的登录流程图,整个登录流程基本如下图所示:

微信小程序授权获取用户详细信息openid的实例详解

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript 学习笔记(四)
Dec 31 Javascript
js 实现复制到粘贴板的功能代码
May 13 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
JavaScript File分段上传
Mar 10 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 #jQuery
Vue-cli创建项目从单页面到多页面的方法
Sep 20 #Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 #Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 #Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 #jQuery
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 #Javascript
PHP 实现一种多文件上传的方法
Sep 20 #Javascript
You might like
PHP脚本的10个技巧(7)
2006/10/09 PHP
学习php笔记 字符串处理
2010/10/19 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
Javascript的比较汇总
2016/07/25 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
python使用正则表达式替换匹配成功的组
2017/11/17 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
python中比较两个列表的实例方法
2019/07/04 Python
python如何运行js语句
2020/09/09 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
高三政治教学反思
2014/02/06 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
大学生助学金感谢信
2015/01/21 职场文书
新闻通讯稿模板
2015/07/22 职场文书
中学生运动会广播稿
2015/08/19 职场文书
JavaScript ES6的函数拓展
2022/01/18 Javascript