微信小程序授权获取用户详细信息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 类与静态类的实现(续)
Apr 02 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
详解微信小程序动画Animation执行过程
Sep 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 一个比较完善的简单文件上传
2010/03/25 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
让您的菜单不离网站
2006/10/03 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
Python实现的简单排列组合算法示例
2018/07/04 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
应届生程序员求职信
2013/11/05 职场文书
工业自动化专业毕业生推荐信
2013/11/18 职场文书
会计电算化专业求职信
2014/06/10 职场文书
起诉意见书范文
2015/05/19 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
java基础——多线程
2021/07/03 Java/Android