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

简介

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

• 小程序使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。
• 调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session_key）。

看效果

第一步：调用微信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

   点击微信授权 
  
    
    {{userInfo.nickName}}
  

####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.json

{
  "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;
}

贡献者

• IT实战联盟-Line
• IT实战联盟-咖啡

更多精彩内容可以关注“IT实战联盟”公众号哦~~~