微信小程序授权获取用户详细信息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 01 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
vue生命周期实例小结
Aug 15 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
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设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
jQuery each函数源码分析
2016/05/25 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
python 实现矩阵按对角线打印
2019/11/29 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
给女朋友的道歉信
2014/01/10 职场文书
元宵晚会主持词
2014/03/25 职场文书
平安工地建设方案
2014/05/06 职场文书
企业诚信承诺书
2014/05/23 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
婚宴祝酒词大全
2015/08/10 职场文书