微信小程序授权获取用户详细信息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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 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创建PDF中文文档
2006/10/09 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
javascript 必知必会之closure
2009/09/21 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
itchat接口使用示例
2017/10/23 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
python之pandas用法大全
2018/03/13 Python
python实现简单飞行棋
2020/02/06 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Python偏函数实现原理及应用
2020/11/20 Python
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
.net软件工程师面试题
2015/03/31 面试题
个人生活学习自我评价范文
2013/11/26 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
湘江北去观后感
2015/06/15 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
 python中的元类metaclass详情
2022/05/30 Python