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

简介

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

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

看效果

微信小程序:最新微信登录授权并获取openid等信息_第1张图片

微信小程序:最新微信登录授权并获取openid等信息_第2张图片

第一步:调用微信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实战联盟”公号哦~~~

你可能感兴趣的:(互联网技术,小程序实战,移动开发)