微信小程序：最新微信登录授权并获取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

<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.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 <https://www.jianshu.com/u/283f93ada597>
* IT实战联盟-咖啡 <https://www.jianshu.com/u/29d607600e98>
<>更多精彩内容可以关注“IT实战联盟”公众号哦~~~

热门工具换一换