微信小程序授权获取用户详细信息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实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
Python continue继续循环用法总结
2018/06/10 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
python正则-re的用法详解
2019/07/28 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
简单了解python数组的基本操作
2019/11/26 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
Shell编程面试题
2016/05/29 面试题
Java程序员面试90题
2013/10/19 面试题
五年级语文教学反思
2014/01/30 职场文书
家长会欢迎标语
2014/06/24 职场文书
民间借贷协议书范本
2014/10/01 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python