微信小程序授权获取用户详细信息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 添加和移除函数的通用方法
Oct 20 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 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 图像尺寸调整代码
2010/05/26 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
twig里使用js变量的方法
2016/02/05 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
python破解同事的压缩包密码
2020/10/14 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
英国电气世界:Electrical World
2019/09/08 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
2014年社区国庆节活动方案
2014/09/16 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
Python绘画好看的星空图
2022/03/17 Python
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript