微信小程序授权获取用户详细信息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 &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
js和jquery中获取非行间样式
May 05 jQuery
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
小程序表单认证布局及验证详解
Jun 19 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
PHPEXCEL 使用小记
2013/01/06 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
jQuery实现日历效果
2020/09/11 jQuery
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python3爬取数据至mysql的方法
2018/06/26 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
用Python制作音乐海报
2021/01/26 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
中专生职业生涯规划书范文
2013/12/29 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
2014年村官工作总结
2014/11/24 职场文书
初中教师个人工作总结
2015/02/10 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers