微信小程序授权获取用户详细信息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操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 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中的类-什么叫类
2006/11/20 PHP
PHP读取目录下所有文件的代码
2008/01/07 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
使用php清除bom示例
2014/03/03 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
留学推荐信范文
2014/05/10 职场文书
铅球加油稿100字
2014/09/26 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
2014年工商所工作总结
2014/12/09 职场文书
工作试用期自我评价
2015/03/10 职场文书
博士生专家推荐信
2015/03/25 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang