小程序（授权登录）

最新推荐文章于 2024-05-27 09:14:21 发布
最新推荐文章于 2024-05-27 09:14:21 发布
阅读量504 收藏 1
点赞数
文章标签： 小程序 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43133668/article/details/123910072
版权

前提：微信官方修改了 getUserInfo 接口，所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 去触发。

实现思路：

自定义封装一个页面底部的 tabBar切换组件，切换tab 时就实现了通过 button 组件去触发 getUserInof 接口。

判断openId存不存在，不存在，弹出授权弹窗，点击授权按钮，

1，通过wx.login获取code，

2，然后wx.request发送给后台，获取openid 以及用户信息

3，客户端使用wx.setstoragesync进行缓存

4，用wx.getstoragesync获取openid 如果存在，就已经登陆，不存在就未登陆(检验登陆态)

1,index.wxml

<!--index.wxml-->
<view class="container">
  <view style="height:10rpx"></view>
  <view class="banner">
    <image src='../image/Banner.png' style="width:{{imgWidth}};height:{{imgHeight}}" bindload="imageLoad"></image>
  </view>
  <view class="content-box" bindtap="onGotoPage">
    <image src='../image/order.png'></image>
    快速下单
    <text class="text">扫码/选择</text>
  </view>
  <view class="bottom-tab">
    <bottom-tabs id="tabs"></bottom-tabs> //tab 组件
  </view>

 
</view>

2,index.js

// component/bottom-tabs/bottom-tabs.js

const app = getApp();

Component({
  properties: {
    active: {
      type: Number,
      value: 0
    }
  },
  data: {
    urls: {
      0: '/pages/index/index',
      1: '/pages/search/search',
      2: '/pages/my/my'
    },
    authorText: '',
    authorBtn: '',
    showAuthor: false,
    showPhone: false,
    storeNo: '',
    storeName: ''
  },
  methods: {
    onTabChange(e) {
      const me = this,
        idx = e.detail;
      wx.redirectTo({
        url: me.data.urls[idx]
      });
      me.triggerEvent("change", idx);
      me.setData({
        active: idx
      })
    },

    showAuthorWin() {
      this.setData({
        showAuthor: true
      })
    },

    closeAuthorWin() {
      this.setData({
        showAuthor: false
      })
    },

    showPhoneWin() {
      this.setData({
        showPhone: true
      });
    },

    getWeixiUser(e) {
      const me = this;
      if (me.data.storeNo) {
        me.login();
      } else {
        app.scanStore().then(({
          storeNo,
          storeName
        }) => {
          if (!storeNo) {
            wx.showModal({
              content: '请扫描正确的二维码',
              showCancel: false
            });
          } else {
            me.setData({
              storeNo: storeNo,
              storeName: storeName || storeNo
            });
            me.login();
          }
        });
      }
    },



    login() {
      const me = this;

      wx.showLoading({
        title: '授权中...',
        mask: true
      });

      wx.login({
        success: re => {
          //获取用户授权信息
          wx.getUserInfo({
            success: user => {
              wx.request({
                url: app.globalData.url + '/common/login',
                method: 'POST',
                header: {
                  'content-type': 'application/json' // 默认值
                },
                data: {
                  code: re.code,
                  rawData: JSON.parse(user.rawData),
                  encrypteData: user.encryptedData,
                  signature: user.signature,
                  iv: user.iv,
                  storeNo: me.data.storeNo,
                  flag: 1
                },

                complete: function (result) {
                  console.log(result)
                  wx.hideLoading();
                  try {
                    if (result.data.flag.retCode != '0') {
                      wx.showToast({
                        title: '授权失败,请重试',
                        icon: 'none'
                      })
                      return;
                    }
                    const data = result.data.data;
                    wx.setStorageSync('wxOpenId', data.wxOpenid || '');
                    wx.setStorageSync('ownerNo', data.ownerNo || '');
                    wx.setStorageSync('storeNo', data.defaultStore || me.data.storeNo);
                    wx.setStorageSync('storeName', data.defaultStoreName || me.data.storeName);
                    wx.setStorageSync('telephone', data.telephone || '');
                    wx.setStorageSync('nickName', data.nickname || user.userInfo.nickName);
                    wx.setStorageSync('userPic', data.avatarUrl || user.userInfo.avatarUrl);
                    app.initData();
                    me.setData({
                      showPhone: data.telephone ? false : true,
                      showAuthor: false
                    });

                  } catch (err) {
                    console.log(err);
                    wx.showToast({
                      title: '授权失败,请重试',
                      icon: 'none'
                    })
                  }
                }
              })
            },
            fail: error => {
              console.log(error);
              wx.hideLoading();
              wx.showModal({
                content: '请同意授权微信用户信息，否则无法使用部分功能',
                showCancel: false
              })
              me.setData({
                showAuthor: false
              })
            }
          })
        },
        fail: error => {
          console.log(error);
          wx.hideLoading();
        }
      })
    },


    getPhone(e) {
      const data = e.detail.encryptedData,
        iv = e.detail.iv;
      if (!data) return;

      const param = {
        encrypteData: data,
        iv: iv
      }
      app.post('/common/updatePhone', param).then(({
        data
      }) => {
        if (data.flag.retCode !== '0') {
          wx.showToast({
            title: data.flag.retMsg,
            icon: 'none'
          });
        } else {
          wx.setStorageSync('telephone', data.data.telephone);
          app.globalData.userInfo.phone = data.data.telephone;
          this.setData({
            showPhone: false,
            showAuthor: false
          })
        }
      }).catch(error => {
        wx.showModal({
          content: error.message,
          showCancel: false
        })
      })
    }

  },

  lifetimes: {
    attached() {

    },
    ready() {
      const openId = app.globalData.openId,
        storeNo = app.globalData.storeNo,
        storeName = app.globalData.storeName,
        text = storeNo ? '获取您公开信息(昵称、头像等)' : '请扫描配送点二维码进行绑定',
        btn = storeNo ? '授权微信用户信息' : '确定并扫描';
      this.setData({
        authorText: text,
        authorBtn: btn,
        storeNo: storeNo,
        storeName: storeName
      });
      if (!openId) {
        this.setData({
          showAuthor: true
        })
      }else if(!app.globalData.userInfo.phone){
        this.showPhoneWin();
      }
    }
  }
})

3，tab组件的封装

<!--component/bottom-tabs/bottom-tabs.wxml-->

<van-tabbar active="{{ active }}" bind:change="onTabChange">
  <van-tabbar-item>
    <image slot="icon" src="/pages/image/mail.png" mode="aspectFit" style="width: 30px; height: 18px;" />
    <image slot="icon-active" src="/pages/image/mail-o.png" mode="aspectFit" style="width: 30px; height: 18px;" />
    下单
  </van-tabbar-item>
  <van-tabbar-item>
    <image slot="icon" src="/pages/image/search.png" mode="aspectFit" style="width: 30px; height: 18px;" />
    <image slot="icon-active" src="/pages/image/search-o.png" mode="aspectFit" style="width: 30px; height: 18px;" />
    查询</van-tabbar-item>
  <van-tabbar-item>
    <image slot="icon" src="/pages/image/person.png" mode="aspectFit" style="width: 30px; height: 18px;" />
    <image slot="icon-active" src="/pages/image/person-o.png" mode="aspectFit" style="width: 30px; height: 18px;" />
    我的</van-tabbar-item>
</van-tabbar>

<van-popup show="{{ showAuthor }}" closeable bind:close="closeAuthorWin">
    <view class="author-wrapper">
      <view>
        {{authorText}}
      </view>
      <button  open-type="getUserInfo" bindgetuserinfo="getWeixiUser">{{authorBtn}}</button>
    </view>
  </van-popup>

  <van-popup show="{{ showPhone }}">
    <view class="author-wrapper">
      <view>
        请授权获取微信电话号码
      </view>
      <button  open-type="getPhoneNumber" bindgetphonenumber="getPhone">确定</button>
    </view>
  </van-popup>
// component/bottom-tabs/bottom-tabs.js

const app = getApp();

Component({
  properties: {
    active: {
      type: Number,
      value: 0
    }
  },
  data: {
    urls: {
      0: '/pages/index/index',
      1: '/pages/search/search',
      2: '/pages/my/my'
    },
    authorText: '',
    authorBtn: '',
    showAuthor: false,
    showPhone: false,
    storeNo: '',
    storeName: ''
  },
  methods: {
    onTabChange(e) {
      const me = this,
        idx = e.detail;
      wx.redirectTo({
        url: me.data.urls[idx]
      });
      me.triggerEvent("change", idx);
      me.setData({
        active: idx
      })
    },

    showAuthorWin() {
      this.setData({
        showAuthor: true
      })
    },

    closeAuthorWin() {
      this.setData({
        showAuthor: false
      })
    },

    showPhoneWin() {
      this.setData({
        showPhone: true
      });
    },

    getWeixiUser(e) {
      const me = this;
      if (me.data.storeNo) {
        me.login();
      } else {
        app.scanStore().then(({
          storeNo,
          storeName
        }) => {
          if (!storeNo) {
            wx.showModal({
              content: '请扫描正确的二维码',
              showCancel: false
            });
          } else {
            me.setData({
              storeNo: storeNo,
              storeName: storeName || storeNo
            });
            me.login();
          }
        });
      }
    },



    login() {
      const me = this;

      wx.showLoading({
        title: '授权中...',
        mask: true
      });

      wx.login({
        success: re => {
          //获取用户授权信息
          wx.getUserInfo({
            success: user => {
              wx.request({
                url: app.globalData.url + '/common/login',
                method: 'POST',
                header: {
                  'content-type': 'application/json' // 默认值
                },
                data: {
                  code: re.code,
                  rawData: JSON.parse(user.rawData),
                  encrypteData: user.encryptedData,
                  signature: user.signature,
                  iv: user.iv,
                  storeNo: me.data.storeNo,
                  flag: 1
                },

                complete: function (result) {
                  console.log(result)
                  wx.hideLoading();
                  try {
                    if (result.data.flag.retCode != '0') {
                      wx.showToast({
                        title: '授权失败,请重试',
                        icon: 'none'
                      })
                      return;
                    }
                    const data = result.data.data;
                    wx.setStorageSync('wxOpenId', data.wxOpenid || '');
                    wx.setStorageSync('ownerNo', data.ownerNo || '');
                    wx.setStorageSync('storeNo', data.defaultStore || me.data.storeNo);
                    wx.setStorageSync('storeName', data.defaultStoreName || me.data.storeName);
                    wx.setStorageSync('telephone', data.telephone || '');
                    wx.setStorageSync('nickName', data.nickname || user.userInfo.nickName);
                    wx.setStorageSync('userPic', data.avatarUrl || user.userInfo.avatarUrl);
                    app.initData();
                    me.setData({
                      showPhone: data.telephone ? false : true,
                      showAuthor: false
                    });

                  } catch (err) {
                    console.log(err);
                    wx.showToast({
                      title: '授权失败,请重试',
                      icon: 'none'
                    })
                  }
                }
              })
            },
            fail: error => {
              console.log(error);
              wx.hideLoading();
              wx.showModal({
                content: '请同意授权微信用户信息，否则无法使用部分功能',
                showCancel: false
              })
              me.setData({
                showAuthor: false
              })
            }
          })
        },
        fail: error => {
          console.log(error);
          wx.hideLoading();
        }
      })
    },


    getPhone(e) {
      const data = e.detail.encryptedData,
        iv = e.detail.iv;
      if (!data) return;

      const param = {
        encrypteData: data,
        iv: iv
      }
      app.post('/common/updatePhone', param).then(({
        data
      }) => {
        if (data.flag.retCode !== '0') {
          wx.showToast({
            title: data.flag.retMsg,
            icon: 'none'
          });
        } else {
          wx.setStorageSync('telephone', data.data.telephone);
          app.globalData.userInfo.phone = data.data.telephone;
          this.setData({
            showPhone: false,
            showAuthor: false
          })
        }
      }).catch(error => {
        wx.showModal({
          content: error.message,
          showCancel: false
        })
      })
    }

  },

  lifetimes: {
    attached() {

    },
    ready() {
      const openId = app.globalData.openId,
        storeNo = app.globalData.storeNo,
        storeName = app.globalData.storeName,
        text = storeNo ? '获取您公开信息(昵称、头像等)' : '请扫描配送点二维码进行绑定',
        btn = storeNo ? '授权微信用户信息' : '确定并扫描';
      this.setData({
        authorText: text,
        authorBtn: btn,
        storeNo: storeNo,
        storeName: storeName
      });
      if (!openId) {
        this.setData({
          showAuthor: true
        })
      }else if(!app.globalData.userInfo.phone){
        this.showPhoneWin();
      }
    }
  }
})

Jerry_JM
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序开发之授权弹框
JY185445的博客
04-08 6712
授权弹框 之前在开发小程序的时候遇到的问题，微信已经取消了自动弹框，所以需要开发者自己模拟弹框在用户点开小程序的时候提示授权，之前在网上搜了好多篇，有的能实现获取用户信息却不能让弹框及时弹出，因此学习总结了前人的经验，自己弄出了自己想要的效果。仅供同行们学习参考，若有不足，还望路过的高手不吝赐教。 本文仅获取的是用户昵称、头像、openid等信息，不包括微信号、手机号。 index.wxml &l...
小程序授权登录
weixin_48904399的博客
11-27 2221
小程序授权登录 一、用户打开小程序判断是否授权 二、是否是新用户 三、本地是否有token 登录 一、调用wx.login() 小程序端通过调用wx.login()API，调用成功的话会在成功的回调里获取一个有时效的登录凭证code。 然后调用自家的服务器接口，把获取到的code传递给服务端。 wx.login({ success (res) { if (res.code) { //发起网络请求 wx.request({ url: 'https://tes
微信小程序实战之自定义模态弹窗（8）
08-30
主要为大家详细介绍了微信小程序实战之自定义模态弹窗，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序授权逻辑如何更改为button形式
Dreawer微信小程序联盟
05-17 3080
这两天，各位小程序开发的同学，在群里讨论最多的问题，就是小程序的授权问题了，微信官方已经发公告了，后续将不再支持wx.getUserInfo 接口获取用户信息，只能使用button，让用户主动去授权。详细公告内容，请自己到社区中搜索。连胜老师今天也做了相应的代码改动，虽然很不情愿改，但是，没办法，微信是小程序的规则制定者，你不改的话，小程序就没办法上线。用户信息接口调整，这里我就不吐槽了，大家...
微信小程序js中succes和fail需要注意的一个小问题
最新发布
weixin_53483426的博客
05-27 231
这段程序运行时就先弹出了'云函数调用发送错误'后弹出了成功的结果信息，查阅资料发现，修改后执行成功或失败的信息就只显示一个了。被调用时就被执行了，而不是在调用失败时。属性接收的是一个函数，而不是直接执行。对于当前的问题，我们只需要修复。为了解决这个问题，需要确保。，而不是传递一个函数作为。
微信小程序写一个比较好看的授权登录弹框
行走天下
06-13 1326
这里提供一个比较常见的小程序授权登录样式，拿来就能用，也可以自己的修改一些
微信小程序授权登录时先判断是否勾选协议再弹出获取手机号的弹窗
yingw1的博客
01-12 5489
思路：设置两个一样的按钮，一个是点击事件的按钮，用来判断是否已勾选；另一个是授权登录的按钮，用来获取用户信息。
微信小程序 授权登录详解（附完整源码）
10-16
主要介绍了微信小程序 授权登录详解（附完整源码）,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
前端uniapp-demo《实现微信小程序授权登录》
05-20
前端uniapp-demo《实现微信小程序授权登录》
微信小程序实现授权登录
10-17
在微信小程序中实现授权登录是应用开发中必不可少的一环，特别是在需要获取用户个人信息的情况下。由于微信官方对用户体验的考虑，现在不能直接在小程序启动时强制弹出授权窗口，而是需要用户主动触发。本文将详细...
微信小程序授权登录弹框
08-10
微信小程序授权登录弹框是微信小程序中用于获取用户信息的重要功能。在开发微信小程序时，开发者经常需要调用此功能来实现用户的身份验证，以便提供个性化的服务或保护用户的数据安全。这一过程涉及到的主要知识点...
手机号授权登录小程序交互图.png
08-13
微信小程序手机号授权登录，前后端交互图
3.3【微信小程序全栈开发课程】登录功能（二）--自定义登录弹窗
腾讯云云开发布道师，慕课网合作讲师
10-16 1364
微信小程序有类似于wx.showToast,wx.showModal等的默认弹窗，但是样式较少，实现不了我们的需求，所以我们这节来自己写一个登录弹窗。还是继续编辑pages/index/index.vue文件 1、效果展示 这节我们先来看一下弹窗的效果是啥样的 2、添加自定义弹窗 （1）编辑pages/index/index.vue文件这部分的样式是自定义弹窗的样式，将这些样式代码添加到styl...
微信小程序 -- 微信授权登录
Dark_programmer的博客
08-08 713
微信授权登录
关于微信小程序--授权弹窗
追梦的女孩博客
05-14 6236
实现 1.进入微信文档官网，找到button组件 添加链接描述 2.阅读文档，发现只需设置一个opentype类型和bindgetuserinfo <button class="button" bindgetuserinfo="GetuserinfoHide" open-type="getUserInfo">获取用户信息</button> 3.在js页面编写GetuserinfoHide函数的实现 GetuserinfoHide(res){ console.log('用户信息
【微信小程序】使用weui组件库来实现弹出一个确认的弹窗popup，其中包含图片和名称
资深全栈开发工程师
07-18 3502
在微信小程序中，你可以使用weui组件库来实现弹出一个确认的popup，并在其中包含图片和名称。，并传递图片和名称数据。确认popup会显示图片、名称和确认按钮。当点击确认按钮或点击popup以外的区域时，在这个示例中，点击按钮会触发。
小程序基本命令
aiven1637的博客
10-30 3277
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序 | 结合vant-ui自定义弹出框
热门推荐
小天才程序员的博客乐园
01-01 1万+
基于vant-ui自定义子组件作为内部组件调用
C# 微信小程序授权登录
05-17
在C#中使用微信小程序授权登录可以通过微信提供的API接口实现。具体流程如下： 1. 在微信公众平台中创建小程序并获取小程序的AppID和AppSecret。 2. 在微信开放平台中创建开放平台账号并绑定小程序。 3. 在C#代码中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值