欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序新能力講解:授權(quán)登錄詳解(附完整demo) - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價值,我們在追求其視覺表現(xiàn)的同時,更側(cè)重于功能的便捷,營銷的便利,運營的高效,讓網(wǎng)站成為營銷工具,讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持!

您當前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

微信小程序新能力講解:授權(quán)登錄詳解(附完整demo)

發(fā)表時間:2021-1-5

發(fā)布人:葵宇科技

瀏覽次數(shù):133

小程序可以通過微信官方提供的登錄能力方便地獲取微信提供的用戶身份標識,快速建立小程序內(nèi)的用戶體系。

登錄流程時序

說明:

  1. 調(diào)用 wx.login() 獲取 臨時登錄憑證code ,并回傳到開發(fā)者服務(wù)器。
  2. 調(diào)用 auth.code2Session 接口,換取 用戶唯一標識 OpenID會話密鑰 session_key。

之后開發(fā)者服務(wù)器可以根據(jù)用戶標識來生成自定義登錄態(tài),用于后續(xù)業(yè)務(wù)邏輯中前后端交互時識別用戶身份。

注意:

  1. 會話密鑰 session_key 是對用戶數(shù)據(jù)進行 加密簽名 的密鑰。為了應(yīng)用自身的數(shù)據(jù)安全,開發(fā)者服務(wù)器不應(yīng)該把會話密鑰下發(fā)到小程序,也不應(yīng)該對外提供這個密鑰。
  2. 臨時登錄憑證 code 只能使用一次。

實現(xiàn)思路 

自己寫一個微信授權(quán)登錄頁面讓用戶實現(xiàn)點擊的功能,也就是實現(xiàn)了通過 button 組件去觸發(fā) getUserInof 接口。在用戶進入微信小程序的時候,判斷用戶是否授權(quán)了,如果沒有授權(quán)的話就顯示授權(quán)頁面,讓用戶去執(zhí)行授權(quán)的操作。如果已經(jīng)授權(quán)了,則直接跳過這個頁面,進入首頁。

界面簡介 

1、index.wxml
  1. <view wx:if="{{isHide}}">
  2. <view wx:if="{{canIUse}}" >
  3. <view class='header'>
  4. <image src='/images/wx_login.png'>image>
  5. view>
  6. <view class='content'>
  7. <view>申請獲取以下權(quán)限view>
  8. <text>獲得你的公開信息(昵稱,頭像等)text>
  9. view>
  10. <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
  11. 授權(quán)登錄
  12. button>
  13. view>
  14. <view wx:else>請升級微信版本view>
  15. view>
  16. <view wx:else>
  17. <view>我的首頁內(nèi)容view>
  18. view>
2、效果展示

不帶 tabBar效果

帶 tabBar效果

3、index.wcss
  1. .header {
  2. margin: 90rpx 0 90rpx 50rpx;
  3. border-bottom: 1px solid #ccc;
  4. text-align: center;
  5. width: 650rpx;
  6. height: 300rpx;
  7. line-height: 450rpx;
  8. }
  9. .header image {
  10. width: 200rpx;
  11. height: 200rpx;
  12. }
  13. .content {
  14. margin-left: 50rpx;
  15. margin-bottom: 90rpx;
  16. }
  17. .content text {
  18. display: block;
  19. color: #9d9d9d;
  20. margin-top: 40rpx;
  21. }
  22. .bottom {
  23. border-radius: 80rpx;
  24. margin: 70rpx 50rpx;
  25. font-size: 35rpx;
  26. }
4、index.js
  1. Page({
  2. data: {
  3. //判斷小程序的API,回調(diào),參數(shù),組件等是否在當前版本可用。
  4. canIUse: wx.canIUse('button.open-type.getUserInfo'),
  5. isHide: false
  6. },
  7. onLoad: function() {
  8. var that = this;
  9. // 查看是否授權(quán)
  10. wx.getSetting({
  11. success: function(res) {
  12. if (res.authSetting['scope.userInfo']) {
  13. wx.getUserInfo({
  14. success: function(res) {
  15. // 用戶已經(jīng)授權(quán)過,不需要顯示授權(quán)頁面,所以不需要改變 isHide 的值
  16. // 根據(jù)自己的需求有其他操作再補充
  17. // 我這里實現(xiàn)的是在用戶授權(quán)成功后,調(diào)用微信的 wx.login 接口,從而獲取code
  18. wx.login({
  19. success: res => {
  20. // 獲取到用戶的 code 之后:res.code
  21. console.log("用戶的code:" + res.code);
  22. // 可以傳給后臺,再經(jīng)過解析獲取用戶的 openid
  23. // 或者可以直接使用微信的提供的接口直接獲取 openid ,方法如下:
  24. // wx.request({
  25. // // 自行補上自己的 APPID 和 SECRET
  26. // url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code',
  27. // success: res => {
  28. // // 獲取到用戶的 openid
  29. // console.log("用戶的openid:" + res.data.openid);
  30. // }
  31. // });
  32. }
  33. });
  34. }
  35. });
  36. } else {
  37. // 用戶沒有授權(quán)
  38. // 改變 isHide 的值,顯示授權(quán)頁面
  39. that.setData({
  40. isHide: true
  41. });
  42. }
  43. }
  44. });
  45. },
  46. bindGetUserInfo: function(e) {
  47. if (e.detail.userInfo) {
  48. //用戶按了允許授權(quán)按鈕
  49. var that = this;
  50. // 獲取到用戶的信息了,打印到控制臺上看下
  51. console.log("用戶的信息如下:");
  52. console.log(e.detail.userInfo);
  53. //授權(quán)成功后,通過改變 isHide 的值,讓實現(xiàn)頁面顯示出來,把授權(quán)頁面隱藏起來
  54. that.setData({
  55. isHide: false
  56. });
  57. } else {
  58. //用戶按了拒絕按鈕
  59. wx.showModal({
  60. title: '警告',
  61. content: '您點擊了拒絕授權(quán),將無法進入小程序,請授權(quán)之后再進入!!!',
  62. showCancel: false,
  63. confirmText: '返回授權(quán)',
  64. success: function(res) {
  65. // 用戶沒有授權(quán)成功,不需要改變 isHide 的值
  66. if (res.confirm) {
  67. console.log('用戶點擊了“返回授權(quán)”');
  68. }
  69. }
  70. });
  71. }
  72. }
  73. })
關(guān)于 TabBar 的處理,只需要把上面寫好的頁面設(shè)置到 app.json 里面即可。

完整示例Demo:

loginDemo-master.zip


相關(guān)案例查看更多