微信小程序授权获取用户详细信息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 相关文章推荐
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
jQuery选择器基础入门教程
May 10 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
ES6新增的数组知识实例小结
May 23 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语言流程控制中的主动与被动
2012/11/05 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
获取Django项目的全部url方法详解
2017/10/26 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python安装scipy的方法步骤
2019/06/26 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
python用700行代码实现http客户端
2021/01/14 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
大学生未来职业生涯规划书
2014/02/15 职场文书
幼儿园老师寄语
2014/04/03 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
2014年政教处工作总结
2014/12/20 职场文书
python神经网络Xception模型
2022/05/06 Python