uniapp微信小程序授权登录

本是古典 何须时尚 2021-07-24 23:16 1176阅读 0赞 
  1. <template>
  2.     <view>
  3.         <LotusLoading :lotusLoadingData="lotusLoadingData" style="width: 100%;height: 100vh;position: absolute;z-index: 99;"></LotusLoading>
  4.         <view class="login" v-if="show">
  5.             <image src='../../static/login-bg(1).png'></image>
  6.             <view class='content'>
  7.                 <view class="text">尊贵的会员，请您先登录</view>
  8.                 <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo" class="button font-36 font-blod">微信授权登录</button>
  9.                 <view class="bottom">
  10.                     <view class="agree">登录即表示同意</view>
  11.                     <view class="deal">《服务协议及隐私条款》</view>
  12.                 </view>
  13.             </view>
  14.         </view>
  15.         <view class="login" v-if="callshow">
  16.             <image src='../../static/login-bg(1).png'></image>
  17.             <view class="content">
  18.                 <view class="info">
  19.                     <view class="top">
  20.                         <image style="width: 64rpx;height: 64rpx;" src="../../static/iconsuccess.png"></image>
  21.                         <text class="logo">微信授权成功！</text>
  22.                     </view>
  23.                     <view class="middle">为了更好的为您提供服务，请绑定手机</view>
  24.                     <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" lang="zh_CN" class="button" withCredentials="true">
  25.                         授权绑定手机
  26.                     </button>
  27.                 </view>
  28.             </view>
  29.         </view>
  30.     </view>
  31. </template>
  33. <script>
  34.     export default { 
  35.         data() { 
  36.             return { 
  37.                 show: false,
  38.                 callshow:false,
  39.                 lotusLoadingData: { 
  40.                     isShow: false //设置显示加载中组件true显示false隐藏
  41.                 },
  42.                 userInfo: { }
  43.             };
  44.         },
  45.         onLoad(options) { 
  46.             // Loading
  47.             // wx.login
  48.             // >> code -> 服务器 /auth/wx-codes
  49.             // >> >> 判断是否需要授权 > 不需要授权的话直接登录成功 > 跳转回登录成功页面
  50.             // >> >> 判断是否需要授权 > 需要授权 > 取消Loading
  52.             if (uni.getStorageSync('token') && uni.getStorageSync('authtoken')) { 
  53.                 uni.switchTab({ 
  54.                     url: '../index/index'
  55.                 })    //如果存在token 和authtoken 就是出于登录状态，直接进入首页
  56.             }else{ 
  57.                 this.lotusLoadingData.isShow = true
  58.                 this.submit()
  59.             }
  60.         },
  61.         methods: { 
  62.             submit() { 
  63.                 const that = this
  64.                 uni.getProvider({ 
  65.                     // 授权 
  66.                     service: 'oauth', //服务商 微信qq等默认的是oauth
  67.                     success: function(res) { 
  68.                         if (~res.provider.indexOf('weixin')) {  // 判断是否微信授权 
  69.                             uni.login({ 
  70.                                 provider: 'weixin',
  71.                                 success: res => { 
  72.                                     const code = res.code;
  73.                                     const data = { 
  74.                                         code: code
  75.                                     }
  76.                                     that.$myRequest({ 
  77.                                         method: 'POST',
  78.                                         url: '/auth/wx-codes',
  79.                                         data: data
  80.                                     }).then(res => { 
  81.                                         if(res.statusCode == 200){ 
  82.                                             uni.setStorageSync('openid', res.data.open_id);
  83.                                             uni.setStorageSync('token', res.data.token)
  84.                                             that.show = false
  85.                                             if (!res.data.is_authorized) {   //通过is_authorized来判断是否需要获取authtoken
  86.                                                 that.lotusLoadingData.isShow = false
  87.                                                 that.show = true
  88.                                             } else { 
  89.                                                 uni.setStorageSync('authtoken', res.data.auth_token)
  90.                                                 that.show = false
  91.                                                 that.callshow = false
  92.                                                 that.lotusLoadingData.isShow = false
  93.                                                 setTimeout(function(){ 
  94.                                                     // uni.switchTab({ 
  95.                                                     //     url: '../index/index'
  96.                                                     // })
  97.                                                     uni.navigateBack({ 
  98.                                                         delta:1
  99.                                                     })
  100.                                                 },500)
  102.                                             }
  103.                                         }
  104.                                     });
  105.                                 },
  106.                                 fail: () => { 
  107.                                     uni.showToast({ 
  108.                                         title: '微信登录授权失败',
  109.                                         icon: 'none'
  110.                                     });
  111.                                 }
  112.                             });
  113.                         } else { 
  114.                             uni.showToast({ 
  115.                                 title: '请先安装微信或升级版本1',
  116.                                 icon: 'none'
  117.                             });
  118.                         }
  119.                     }
  120.                 });
  121.             },
  123.             // 获取手机号 把encryptedData 和iv 存入storage  之后判断用户登录状态要用
  124.             getUserInfo(e) { 
  125.                 uni.getUserInfo({ 
  126.                     provider: 'weixin',
  127.                     success: info => { 
  128.                         this.userInfo = info;
  129.                         uni.setStorageSync('this.userInfo', info)
  130.                         this.show = false;
  131.                         this.lotusLoadingData.isShow = false  //这个是自己做的自定义组件的loading 加载中你不做也没关系
  132.                         this.callshow = true
  133.                     },
  134.                     fail: () => { 
  135.                         uni.showToast({ 
  136.                             title: '微信登录授权失败',
  137.                             icon: 'none'
  138.                         });
  139.                     }
  140.                 });
  141.             },
  142.             getPhoneNumber(e) { 
  143.                 uni.getStorageSync('this.userInfo')
  144.                 if (e.detail.errMsg == 'getPhoneNumber:ok') { 
  145.                     var data = { 
  146.                         token: uni.getStorageSync('token'),
  147.                         user_info: {    //需要传给后台的值
  148.                             encrypted_data: this.userInfo.encryptedData,
  149.                             iv: this.userInfo.iv,
  150.                             cloud_id: "",
  151.                         },
  152.                         "phone_number": {  //需要传给后台的值
  153.                             "encrypted_data": e.detail.encryptedData,
  154.                             "iv": e.detail.iv,
  155.                             "cloud_id": ""
  156.                         }
  157.                     };
  158.                     this.$myRequest({ 
  159.                         method: 'POST',
  160.                         url: '/auth/wx-authentications',
  161.                         data: data
  162.                     }).then(res => { 
  163.                         uni.setStorageSync('authtoken', res.data.auth_token)
  164.                         if(res.statusCode == 200){ 
  165.                             // uni.switchTab({ 
  166.                             //     url: '../index/index'
  167.                             // })
  168.                             uni.navigateBack({ 
  169.                                 delta:1
  170.                             })
  171.                         }else{ 
  172.                             this.$api.msg(res.data.message);   //这个是自己自己封装的提示，你可以用uni.showtoast
  173.                         }
  174.                     });
  175.                 } else { }
  176.             },
  177.         }
  178.     }
  179. </script>
  181. <style lang="scss">
  182.     .login { 
  183.         height: 100vh;
  185.         image { 
  186.             width: 100%;
  187.             height: 100%;
  188.         }
  190.         .content { 
  191.             position: absolute;
  192.             bottom: 0;
  193.             z-index: 999;
  194.             background: #ECECEC;
  195.             height: 490rpx;
  196.             border-top-left-radius: 20rpx;
  197.             border-top-right-radius: 20rpx;
  198.             display: flex;
  199.             flex-direction: column;
  200.             align-items: center;
  201.             .bottom{ 
  202.                 display: flex;
  203.                 flex-direction: column;
  204.                 align-items: center;
  205.                 margin-top: 30rpx;
  206.                 .agree{ 
  207.                     font-size: 28rpx;
  208.                     font-family: PingFang SC;
  209.                     font-weight: 400;
  210.                     line-height: 20px;
  211.                     color: #000000;
  212.                 }
  213.                 .deal{ 
  214.                     margin-top: 10rpx;
  215.                     font-size: 28rpx;
  216.                     font-family: PingFang SC;
  217.                     font-weight: 400;
  218.                     line-height: 20px;
  219.                     color: #0655EA;
  220.                 }
  221.             }
  222.             .info{ 
  223.                 background-color: #FFFFFF;
  224.                 margin: 20rpx;
  225.                 width: 90%;
  226.                 height: 100%;
  227.                 border-radius: 20rpx;
  228.                 padding: 20rpx;
  229.                 display: flex;
  230.                 flex-direction: column;
  231.                 align-items: center;
  232.                 .top{ 
  233.                     display: flex;
  234.                     margin-top: 20rpx;
  235.                     align-items: center;
  236.                     .logo{ 
  237.                         font-size: 50rpx;
  238.                         font-family: PingFang SC;
  239.                         font-weight: bold;
  240.                         color: #000000;
  241.                         margin-left: 20rpx;
  242.                     }
  243.                 }
  244.                 .middle{ 
  245.                     font-size: 36rpx;
  246.                     font-family: PingFang SC;
  247.                     font-weight: 400;
  248.                     margin-top: 50rpx;
  249.                     color: #000000;
  250.                 }
  251.             }
  252.         }
  254.     }
  256.     .text { 
  257.         margin-top: 50rpx;
  258.         font-size: 36rpx;
  259.         font-family: PingFang SC;
  260.         font-weight: 400;
  261.         color: #000000;
  262.     }
  264.     button { 
  265.         width: 380rpx;
  266.         height: 88rpx;
  267.         background: linear-gradient(180deg, #EACDA3 0%, #E6B980 100%);
  268.         border-radius: 66rpx;
  269.         margin-top: 80rpx;
  270.     }
  272.     button::after { 
  273.         border: none;
  274.     }
  275. </style>

发表评论

表情：
评论列表 （有 0 条评论，1176人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序授权登录

    现在微信小程序非常火爆，很多常规的APP都推出了自己的微信小程序。说到微信小程序，不可避免会触及到微信账号的授权登录，现在来说说一下哈！ 首先需要自己的一个小程序，可以到微

    古城微笑少年丶古城微笑少年丶/ 0 赞/ 730 阅读

    相关 微信小程序授权登录

    现在微信小程序非常火爆，很多常规的APP都推出了自己的微信小程序。说到微信小程序，不可避免会触及到微信账号的授权登录，现在来说说一下哈！ 首先需要自己的一个小程序，可以到微

    左手的ㄟ右手左手的ㄟ右手/ 0 赞/ 734 阅读