齐论拼多多学院

 

浅谈小程序如何授权登录，获取信息和手机号

 

 

 总结，新增获取用户手机号功能，里面用到了关于获取用户信息和用户手机号的功能，一开始写的时候发现我把两个按钮写在一个登录页面上，获取手机号逻辑是当用户点击授权之后跳转到首页，当点击拒绝弹窗提示，最后发现可能是微信上的限制，模拟器调试拒绝有提示，真机点击拒绝也是能跳的，没办法又写了一套关于用户进入某个详情页判断手机号授权问题，这里记录一下，希望能帮到有需要的朋友，先看下效果！！！

 

 

1.全局判断

  1 App({
  2 
  3   onLaunch: function () {
  4 
  5     //调用API从本地缓存中获取数据
  6 
  7     // 展示本地存储能力
  8 
  9     var logs = wx.getStorageSync('logs') || []
 10 
 11     logs.unshift(Date.now())
 12 
 13     wx.setStorageSync('logs', logs)
 14 
 15     var that = this;
 16 
 17     //获取用户本地是否是第一次进入新版本
 18 
 19     var versions = wx.getStorageSync('versions');
 20 
 21     console.log('versions:' + versions);
 22 
 23     //判断是不是需要授权
 24 
 25     if (versions == '1'){
 26 
 27       // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
 28 
 29       wx.getUserInfo({
 30 
 31         success: function (res) {
 32 
 33           that.globalData.userInfo = res.userInfo
 34 
 35           console.log(that.globalData.userInfo)
 36 
 37         },
 38 
 39         fail: function () {
 40 
 41           wx.redirectTo({
 42 
 43             url: '../wurui_house/pages/login/index',
 44 
 45           })
 46 
 47         }
 48 
 49       })
 50 
 51     }else{
 52 
 53       //未授权, 跳转登录页面
 54 
 55       wx.redirectTo({
 56 
 57         url: '../wurui_house/pages/login/index',
 58 
 59       })
 60 
 61     }
 62 
 63   },
 64 
 65   onShow: function () {
 66 
 67     //      console.log(getCurrentPages())
 68 
 69   },
 70 
 71   onHide: function () {
 72 
 73     //  console.log(getCurrentPages())
 74 
 75   },
 76 
 77   onError: function (msg) {
 78 
 79     //console.log(msg)
 80 
 81   },
 82 
 83  
 84 
 85   util: require('we7/resource/js/util.js'),
 86 
 87   tabBar: {
 88 
 89     "color": "#123",
 90 
 91     "selectedColor": "#1ba9ba",
 92 
 93     "borderStyle": "#1ba9ba",
 94 
 95     "backgroundColor": "#fff",
 96 
 97     "list": [
 98 
 99  
100 
101     ]
102 
103   },
104 
105   getLocationInfo: function (cb) {
106 
107     var that = this;
108 
109     if (this.globalData.locationInfo) {
110 
111       cb(this.globalData.locationInfo)
112 
113     } else {
114 
115       wx.getLocation({
116 
117         type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
118 
119         success: function (res) {
120 
121           that.globalData.locationInfo = res;
122 
123           cb(that.globalData.locationInfo)
124 
125         },
126 
127         fail: function () {
128 
129           // fail
130 
131         },
132 
133         complete: function () {
134 
135           // complete
136 
137         }
138 
139       })
140 
141     }
142 
143   },
144 
145   globalData: {
146 
147     userInfo: null,
148 
149     appid: "",
150 
151     appsecret: "",
152 
153   },
154 
155   siteInfo: require('siteinfo.js')
156 
157  
158 
159 });

2.login登录页判断

（一）index.wxml

 1     
 2 
 3         
 4 
 5             
 6 
 7         
 8 
 9         
10 
11             请依次允许获得你的公开信息及手机号码
12 
13         
14 
15         
16 
17             {{AuthorizedLogin}}
18 
19         {{UserPhone}}
20 
21         
22 
23     
24 
25     请升级微信版本

（二）index.wxss

 1 .header {
 2 
 3   margin: 90rpx 0 90rpx 50rpx;
 4 
 5   border-bottom: 1px solid #ccc;
 6 
 7   text-align: center;
 8 
 9   width: 650rpx;
10 
11   height: 300rpx;
12 
13   line-height: 450rpx;
14 
15 }
16 
17  
18 
19 .header image {
20 
21   width: 200rpx;
22 
23   height: 200rpx;
24 
25 }
26 
27  
28 
29 .content {
30 
31   margin-left: 50rpx;
32 
33   margin-bottom: 90rpx;
34 
35 }
36 
37  
38 
39 .content text {
40 
41   display: block;
42 
43   color: #9d9d9d;
44 
45   margin-top: 40rpx;
46 
47 }
48 
49 /* .operBtn{
50 
51   border-radius: 80rpx;
52 
53   margin: 70rpx 50rpx;
54 
55   font-size: 35rpx;
56 
57 }
58 
59 .operBtns{
60 
61   background: #eef0ed !important;
62 
63   border-radius: 80rpx;
64 
65   margin: 70rpx 50rpx;
66 
67   font-size: 35rpx;
68 
69   color: #000300 !important;
70 
71 } */
72 
73 .hide{
74 
75   border-radius: 80rpx;
76 
77   margin: 70rpx 50rpx;
78 
79   font-size: 35rpx;
80 
81   display: none;
82 
83 }
84 
85 .show{
86 
87   display: block;
88 
89   /* background: #eef0ed !important; */
90 
91   border-radius: 80rpx;
92 
93   margin: 70rpx 50rpx;
94 
95   font-size: 35rpx;
96 
97   /* color: #000300 !important; */
98 
99 }

（三）index.js

  1 const app = getApp();
  2 
  3 Page({
  4 
  5   data: {
  6 
  7     //判断小程序的API，回调，参数，组件等是否在当前版本可用。
  8 
  9     canIUse: wx.canIUse('button.open-type.getUserInfo'),
 10 
 11     isHide: false,
 12 
 13     AuthorizedLogin: '授权登录',
 14 
 15     UserPhone: '手机号授权',
 16 
 17     lee: "",
 18 
 19     flag: true
 20 
 21   },
 22 
 23   onLoad: function() {
 24 
 25     var that = this;
 26 
 27     // 查看是否授权
 28 
 29     //获取用户本地是否是第一次进入新版本
 30 
 31     var versions = wx.getStorageSync('versions');
 32 
 33     if (versions == '1') {
 34 
 35       wx.getSetting({
 36 
 37         success: function(res) {
 38 
 39           if (res.authSetting['scope.userInfo']) {
 40 
 41             //调用共通的登录方法
 42 
 43             app.util.getUserInfo(
 44 
 45               function(userinfo) {
 46 
 47                 that.setData({
 48 
 49                   userinfo: userinfo
 50 
 51                 })
 52 
 53               });
 54 
 55           } else {
 56 
 57             // 用户没有授权
 58 
 59             // 改变 isHide 的值，显示授权页面
 60 
 61             that.setData({
 62 
 63               isHide: true
 64 
 65             });
 66 
 67           }
 68 
 69         }
 70 
 71       });
 72 
 73     } else {
 74 
 75       // 用户没有授权
 76 
 77       // 改变 isHide 的值，显示授权页面
 78 
 79       that.setData({
 80 
 81         isHide: true
 82 
 83       });
 84 
 85     }
 86 
 87  
 88 
 89   },
 90 
 91   bindGetUserInfo: function(e) {
 92 
 93     if (e.detail.userInfo) {
 94 
 95       //用户按了允许授权按钮
 96 
 97       var that = this;
 98 
 99       let user = e.detail.userInfo;
100 
101       // 获取到用户的信息了，打印到控制台上看下
102 
103       console.log("用户的信息如下：");
104 
105       console.log(user);
106 
107       //授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来
108 
109       that.data.lee
110 
111       if (that.data.lee == '') {
112 
113         wx.showToast({
114 
115             icon: "none",
116 
117             title: '请继续点击获取手机号',
118 
119           }),
120 
121           that.setData({
122 
123             isHide: true,
124 
125             flag: (!that.data.flag),
126 
127             lee: true
128 
129           })
130 
131         that.wxlogin();
132 
133       } else if (!that.data.lee) {
134 
135         wx.switchTab({
136 
137           url: "/wurui_house/pages/index/index"
138 
139         })
140 
141  
142 
143       }
144 
145     } else {
146 
147       //用户按了拒绝按钮
148 
149       wx.showModal({
150 
151         title: '警告',
152 
153         content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
154 
155         showCancel: false,
156 
157         confirmText: '返回授权',
158 
159         success: function(res) {
160 
161           // 用户没有授权成功，不需要改变 isHide 的值
162 
163           if (res.confirm) {
164 
165             console.log('用户点击了“返回授权”');
166 
167           }
168 
169         }
170 
171       });
172 
173     }
174 
175   },
176 
177  
178 
179   wxlogin: function() { //获取用户的openID
180 
181  
182 
183     var that = this;
184 
185     //调用共通的登录方法
186 
187     app.util.getUserInfo(
188 
189       function(userinfo) {
190 
191         that.setData({
192 
193           userinfo: userinfo
194 
195         })
196 
197       });
198 
199  
200 
201   },
202 
203  
204 
205   getPhoneNumber: function(e) { //点击获取手机号码按钮
206 
207     var that = this;
208 
209     that.data.lee
210 
211     if (that.data.lee == '') {
212 
213       wx.showToast({
214 
215         icon: "none",
216 
217         title: '请先点击获取用户信息',
218 
219       })
220 
221       return
222 
223     } else {
224 
225       wx.checkSession({
226 
227         success: function(res) {
228 
229           console.log(e.detail.errMsg)
230 
231           console.log(e.detail.iv)
232 
233           console.log(e.detail.encryptedData)
234 
235           var ency = e.detail.encryptedData;
236 
237           var iv = e.detail.iv;
238 
239  
240 
241           var sessionk = that.data.sessionKey;
242 
243  
244 
245  
246 
247           if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
248 
249             wx.showModal({
250 
251                 title: '警告',
252 
253                 content: '您点击了拒绝授权，部分功能无法使用!!!',
254 
255                 showCancel: false,
256 
257                 confirmText: '返回授权',
258 
259                 success: function(res) {
260 
261                   // 用户没有授权成功，不需要改变 isHide 的值
262 
263                   if (res.confirm) {
264 
265                     wx.setStorageSync('enws', '1');
266 
267                     wx.switchTab({
268 
269                       url: "/wurui_house/pages/index/index"
270 
271                     })
272 
273                     console.log('用户点击了“返回授权”');
274 
275                   };
276 
277                 }
278 
279               }),
280 
281  
282 
283               that.setData({
284 
285  
286 
287                 modalstatus: true,
288 
289  
290 
291               });
292 
293           } else {
294 
295             that.setData({
296 
297  
298 
299               lee: false,
300 
301  
302 
303             });
304 
305             wx.switchTab({
306 
307               url: "/wurui_house/pages/index/index"
308 
309             })
310 
311             //同意授权
312 
313             var userinfo = wx.getStorageSync('userInfo');
314 
315             app.util.request({
316 
317               'url': 'entry/wxapp/saveusermobile',
318 
319               data: {
320 
321                 sessionid: userinfo.sessionid,
322 
323                 uid: userinfo.memberInfo.uid,
324 
325                 iv: iv,
326 
327                 encryptedData: ency
328 
329               },
330 
331               success: function(res) {
332 
333                 if (res.data.data.error == 0) {
334 
335                   console.log('success' + res.data.data);
336 
337                   //用户已经进入新的版本，可以更新本地数据
338 
339                   wx.setStorageSync('versions', '1');
340 
341                   wx.setStorageSync('enws', '2');
342 
343                 } else {
344 
345                   //用户保存手机号失败，下次进入继续授权手机号
346 
347                   wx.setStorageSync('enws', '1');
348 
349                   console.log('fail' + res.data.data);
350 
351                 }
352 
353               },
354 
355               fail: function(res) {
356 
357                 console.log('fail' + res);
358 
359               }
360 
361             });
362 
363           }
364 
365         },
366 
367  
368 
369         fail: function() {
370 
371  
372 
373           console.log("session_key 已经失效，需要重新执行登录流程");
374 
375  
376 
377  
378 
379           that.wxlogin(); //重新登录
380 
381         }
382 
383  
384 
385       });
386 
387     }
388 
389  
390 
391   }
392 
393 })

2.某个详情页手机号授权判断

使用的遮罩层写法

（一）index.html

 1 <code>
 2      <!-- 授权弹框提醒-->
 3     <view class="container">
 4          <view class="float" hidden='{{viewShowed}}'>
 5               <view class='floatContent'>
 6               <text>允许授权获取手机号</text>
 7                    <view class='floatText'>
 8                          <button  bindtap='cancle' class='btn-cancle'>取消</button>
 9                          <button  class='btn-cancle' open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber">确认</button>
10                    </view>
11               </view>
12          </view>
13     </view>
14 </code>

（二）index.wxss

 1 /* 手机号授权 */
 2 
 3 .float { 
 4 
 5   height: 100%; 
 6 
 7   width: 100%; 
 8 
 9   position: fixed;
10 
11   background-color: rgba(0, 0, 0, 0.5); 
12 
13   z-index: 2; 
14 
15   top: 0; 
16 
17   left: 0;
18 
19 }
20 
21 .floatContent { 
22 
23   /* padding: 20rpx 0;   */
24 
25   width: 80%; 
26 
27   background: #fff; 
28 
29   margin: 40% auto; 
30 
31   border-radius: 20rpx; 
32 
33   display: flex; 
34 
35   flex-direction: column; 
36 
37   justify-content: space-around; 
38 
39   align-items: center; 
40 
41   position: relative; 
42 
43   height: 255rpx;
44 
45 }
46 
47 .floatContent text { 
48 
49   color: #000; 
50 
51   font-size: 40rpx; 
52 
53   display: block; 
54 
55   margin: 0 auto;
56 
57   position: absolute;
58 
59   top: 50rpx;
60 
61   /* text-align: center;   */
62 
63   /* line-height: 60rpx;   */
64 
65   border-radius: 30rpx; 
66 
67 }
68 
69 .floatText{
70 
71   width: 100%;
72 
73   height: 100rpx;
74 
75   display: flex;
76 
77   justify-content: flex-start;
78 
79   position: absolute;
80 
81   bottom: 0;
82 
83 }
84 
85 .btn-cancle{
86 
87   line-height: 100rpx;
88 
89   flex: 1;
90 
91   margin: 0;
92 
93   padding: 0;
94 
95   border-radius: none;
96 
97 }

（三）index.js

  1 data: {
  2 
  3     viewShowed: true, //控制授权能否显示
  4 
  5   },
  6 
  7   cancle: function () {
  8 
  9     wx.setStorageSync('enws', '2');
 10 
 11     this.setData({
 12 
 13       viewShowed: true
 14 
 15     })
 16 
 17   },
 18 
 19    /**
 20 
 21    * 生命周期函数--监听页面显示
 22 
 23    */
 24 
 25   onShow: function () {
 26 
 27     var enws = wx.getStorageSync('enws');
 28 
 29     console.log("enws:", +enws);
 30 
 31     var that = this;
 32 
 33     if (enws != '2') { //判断能否授权 
 34 
 35       that.setData({
 36 
 37         viewShowed: false,
 38 
 39       })
 40 
 41       console.log('判断能否授权');
 42 
 43     } else {
 44 
 45  
 46 
 47     }
 48 
 49   },
 50 
 51  
 52 
 53   getPhoneNumber: function (e) { //点击获取手机号码按钮
 54 
 55     var that = this;
 56 
 57     wx.checkSession({
 58 
 59       success: function (res) {
 60 
 61         console.log(e.detail.errMsg)
 62 
 63         console.log(e.detail.iv)
 64 
 65         console.log(e.detail.encryptedData)
 66 
 67         var ency = e.detail.encryptedData;
 68 
 69         var iv = e.detail.iv;
 70 
 71  
 72 
 73         var sessionk = that.data.sessionKey;
 74 
 75  
 76 
 77         that.setData({
 78 
 79           viewShowed: true,
 80 
 81         })
 82 
 83         wx.setStorageSync('enws', '2');
 84 
 85         if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
 86 
 87  
 88 
 89         } else {
 90 
 91           //同意授权
 92 
 93           var userinfo = wx.getStorageSync('userInfo');
 94 
 95           app.util.request({
 96 
 97             'url': 'entry/wxapp/saveusermobile',
 98 
 99             data: {
100 
101               sessionid: userinfo.sessionid,
102 
103               uid: userinfo.memberInfo.uid,
104 
105               iv: iv,
106 
107               encryptedData: ency
108 
109             },
110 
111             success: function (res) {
112 
113               console.log('success' + res);
114 
115               if (res.data.data.error == 0) {
116 
117                 console.log('success' + res.data.data);
118 
119                 //用户已经进入新的版本，可以更新本地数据
120 
121                 wx.setStorageSync('versions', '1');
122 
123               } else {
124 
125                 //用户保存手机号失败，下次进入继续授权手机号
126 
127               }
128 
129             },
130 
131             fail: function (res) {
132 
133               console.log('fail' + res);
134 
135             }
136 
137           });
138 
139         }
140 
141       }
142 
143     });
144 
145   },

以上就是浅谈小程序如何授权登录，获取信息和手机号的详细内容。(拼多多培训)

 

posted on 2021-07-23 14:32  齐论拼多多学院  阅读(499)  评论(0)    收藏  举报

导航