微信小程序授权获取用户详细信息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 相关文章推荐
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 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显示指定目录下子目录的方法
2015/03/20 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
python类和继承用法实例
2015/07/07 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
老师推荐信
2013/10/28 职场文书
总经理助理职责
2014/02/04 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
银行自荐信怎么写
2015/03/05 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
oracle重置序列从0开始递增1
2022/02/28 Oracle