微信小程序授权获取用户详细信息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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 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函数scandir排除特定目录
2014/06/12 PHP
php生成随机颜色的方法
2014/11/13 PHP
Laravel 队列使用的实现
2019/01/08 PHP
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
python操作excel让工作自动化
2019/08/09 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
python 画函数曲线示例
2019/12/04 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
控制工程专业个人求职信
2013/09/25 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
产品销售计划书
2014/05/04 职场文书
兵马俑的导游词
2015/02/02 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js