简介

为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。

  • 小程序使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。

  • 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key)。

看效果

微信小程序:最新微信登录授权并获取openid等信息_java


微信小程序:最新微信登录授权并获取openid等信息_java_02


第一步:调用微信wx.login获取登录凭证code

wx.login(Object object)

调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成。

请求参数
Object object
属性  类型  默认值 是否必填    说明  支持版本
timeout number      否   超时时间,单位ms   >= 1.9.90
success function        否   接口调用成功的回调函数 
fail    function        否   接口调用失败的回调函数 
complete    function        否   接口调用结束的回调函数(调用成功、失败都会执行)    

返回结果
Object res

属性  类型  说明  支持版本
code    string  用户登录凭证(有效期五分钟)。开发者需要在开发者服务器后台调用 code2Session,使用 code 换取 openid 和 session_key 等信息
代码示例
wx.login({
  success (res) {    
   if (res.code) {      //发起网络请求      wx.request({        
       url: 'https://test.com/onLogin',        
       data: {          
           code: res.code        }      })    } else {      
       console.log('登录失败!' + res.errMsg)    }  } })

第二步:通过code 获取 openid 和 session_key

开发者服务器使用登录凭证 code 获取 session_key 和 openid。其中 session_key 是对用户数据进行加密签名的密钥。为了自身应用安全,session_key 不应该在网络上传输。
接口地址:
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

请求参数
参数  必填  说明
appid   是   小程序唯一标识
secret  是   小程序的 app secret
js_code 是   登录时获取的 code
grant_type  是   填写为 authorization_code

返回参数
参数  说明
openid  用户唯一标识
session_key 会话密钥
expires_in  过期时长(默认7200)

第三步:实现源码

getOpenId.wxml

<view class="userinfo">
  <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userinfo-btn"> 点击微信授权 </button>
  <block wx:else>
    <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </block></view>

getOpenId.js

var app = getApp()
var userInfo = null; Page({  
globalData: {    
   appid: 'wx416xxxx16a0a1',//appid需自己提供,此处的appid我随机编写    secret: '5498fcab2xxxx5df26bf854ba89',//secret需自己提供,此处的secret我随机编写  },  
data: {    
   userInfo: {},    
   hasUserInfo: false,    
   canIUse: wx.canIUse('button.open-type.getUserInfo')  },  
onLoad: function () {    
   var that = this;    
   if (app.globalData.userInfo) {      
       this.setData({        
       userInfo: app.globalData.userInfo,        
       hasUserInfo: true      })    } else if (this.data.canIUse) {      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回      // 所以此处加入 callback 以防止这种情况      app.userInfoReadyCallback = res => {        
   this.setData({          
       userInfo: res.userInfo,          
       hasUserInfo: true        })      }    } else {      // 在没有 open-type=getUserInfo 版本的兼容处理      wx.getUserInfo({        
       success: res => {          app.globalData.userInfo = res.userInfo          
           this.setData({            
               userInfo: res.userInfo,            
               hasUserInfo: true          })        }      })    }    
//登录凭证校验。通过 wx.login() 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。    wx.login({      
       success: function (res) {        
       if (res.code) {          
       console.log("res.code:" + res.code);          
       var d = that.globalData;//这里存储了appid、secret、token串            var l = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + d.appid + '&secret=' + d.secret + '&js_code=' + res.code + '&grant_type=authorization_code';          wx.request({            
           url: l,            
           data: {},            
           method: 'GET',            
           success: function (res) {              
               var obj = {};                  obj.openid = res.data.openid;              
               console.log("openid:" + obj.openid);              
               console.log("session_key:" + res.data.session_key);                obj.expires_in = Date.now() + res.data.expires_in;                wx.setStorageSync('user', obj);//存储openid            }          });        } else {          
           console.log('获取用户登录态失败!' + res.errMsg)        }      }    });  }  ,  
getUserInfo: function (e) {    
   console.log(e)    app.globalData.userInfo = e.detail.userInfo    
   this.setData({      
       userInfo: e.detail.userInfo,      
       hasUserInfo: true    })  } })

getOpenId.wxml

{  "navigationBarTitleText": "微信授权并获取OpenId"}

getOpenId.wxml

.userinfo {  
   display: flex;  
   flex-direction: column;  
   align-items: center;  
   background: #f0145a;  
   width: 100%;   height: 300rpx; }
.userinfo-btn{  
   margin-top: 50rpx;  
   background: none !important;  
   color: #fff !important;  
   font-size: 40rpx; }
.userinfo-avatar {  
   width: 108rpx;  
   height: 108rpx;  
   margin: 40rpx;  
   border-radius: 50%; }
.userinfo-nickname {  
   color: #fff; }