Jiahonzheng's Blog

微信小程序:用户授权

字数统计: 802阅读时长: 4 min
2018/09/14 Share

由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入小程序就弹出授权窗口,只能设置 button 引导用户授权。

思路

通过在正常业务层之外添加一层授权引导层,在该层的 onLoad 判断用户是否已授权,若已授权,则通过 getStorage 方法载入数据,进而跳转到正常业务层;若无授权,则显示授权按钮,引导用户授权。

预览

实现

app.js

应用全局逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
App({
// 维护全局信息
globalData: {
userInfo: {},
token: ""
},
getUserInfo: function() {
return this.globalData.userInfo;
},
getToken: function() {
return this.globalData.token;
},
setUserInfo: function(data) {
this.globalData.userInfo = data;
},
setToken: function(token) {
this.globalData.token = token;
}
});

authentication.js

引导页面逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
const app = getApp();

function string2object(queryString) {
return JSON.parse(decodeURI(queryString));
}

function object2string(obj) {
return encodeURI(JSON.stringify(obj));
}

Page({
data: {
// 判断小程序的API、回调、参数、组件等是否在当前版本可用
canIUse: wx.canIUse("button.open-type.getUserInfo")
},
onLoad: function(options) {
wx.getSetting({
success: function(res) {
// 若用户已授权
if (res.authSetting["scope.userInfo"] === true) {
wx.getStorage({
key: "storage",
success: function(res) {
const {userInfo, token} = string2object(res.data);

// 更新全局数据
app.setToken(token);
app.setUserInfo(userInfo);

// 由于首页使用的是 TabBar 页面,这里调用了 wx.switchTab 接口
wx.switchTab({url: "/pages/index/index"});
},
fail: function(err) {
// 当没有名为 storage 的存储时,也会抛出错误信息,此处做了相应的判断
if (err.errMsg !== "getStorage:fail data not found") {
// 此处为其他存储问题的处理逻辑
}
}
});
return;
}
},
fail: function(err) {}
});
},
login: function(e) {
const {
detail: {errMsg, userInfo, iv, encryptedData}
} = e;

// 当用户未点击授权
if (errMsg !== "getUserInfo:ok") {
return;
}

// 设置iv与encryptedData
userInfo.iv = iv;
userInfo.encryptedData = encryptedData;

wx.showLoading({
title: "正在登录...",
mask: true
});

wx.login({
success: function(res) {
// 当未获取 code
if (res.code === undefined) {
return;
}

wx.request({
url: config.WXINFO_URL, // 后台用户授权API接口地址
method: "POST",
data: {...userInfo, code: res.code},
success: function(res) {
// 当后台返回失败响应
if (res.data.code !== 200) {
return;
}

// 更新全局数据
app.setToken(res.data.token);
app.setUserInfo(userInfo);

// 存储用户信息与token
wx.setStorage({
key: "storage",
data: object2string({userInfo, token: res.data.token}),
success: function(res) {
wx.hideLoading();
// 由于首页使用的是 TabBar 页面,这里调用了 wx.switchTab 接口
wx.switchTab({url: "/pages/index/index"});
},
fail: function(err) {
wx.hideLoading();
}
});
},
fail: function(err) {
wx.hideLoading();
}
});
},
fail: function(err) {
wx.hideLoading();
}
});
}
});

authentication.wxml

引导页面视图

1
2
3
4
5
6
7
8
9
10
11
12
13
<view wx:if="{{canIUse}}">
<view class='header'>
<image src='/images/wx_login.png'></image>
</view>
<view class='content'>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称,头像等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="login">
授权登录
</button>
</view>
<view wx:else>请升级微信版本</view>

authentication.wxss

引导页面样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.header {
margin: 90rpx 0 90rpx 50rpx;
border-bottom: 1px solid #ccc;
text-align: center;
width: 650rpx;
height: 300rpx;
line-height: 450rpx;
}

.header image {
width: 200rpx;
height: 200rpx;
}

.content {
margin-left: 50rpx;
margin-bottom: 90rpx;
}

.content text {
display: block;
color: #9d9d9d;
margin-top: 40rpx;
}

.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}
CATALOG
  1. 1. 思路
  2. 2. 预览
  3. 3. 实现
    1. 3.1. app.js
    2. 3.2. authentication.js
    3. 3.3. authentication.wxml
    4. 3.4. authentication.wxss