我爱模板网 > 建站教程 > 小程序、公众号 >  微信授权登录及获取微信手机号进行绑定正文

微信授权登录及获取微信手机号进行绑定

本文是我爱模板网的一个总结,即点击授权登录按钮,进行登录,然后根据后台微信登录接口返回来判断是否绑定过手机号(因为除了微信小程序,还有手机APP,手机APP是用手机号登录的),如果没有,则通过授权获取手机号的方式进行绑定:
一、登录界面:
1、授权按钮
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">点击授权</button>
2、bindGetUserInfo
bindGetUserInfo(res) {
    if (res.detail.userInfo) {
        //这里表示同意授权,通常在这里面执行wx.login,如果直接调用wx.login,就是静默登录
    } else {
        console.log("点击了拒绝授权");
    }
}
3、点击按钮弹出授权弹窗



4、点击允许会返回用户除了openid以外的基本信息(即上面的bindGetUserInfo方法得到的res):



5、接着是用wx.login获取一个临时登录凭证code,这个code是和后台程序获取 unionid或者openid以及sessionKey。下面只是个例子。注意:这一步通常放在第二部同意授权里面。如果直接调用wx.login,则不会弹出上面的弹窗,就是静默登录
wx.login({
  success(res) {
    if (res.code) {
      //根据code获取openId
      $.ajax(api.xcxlogin, {
        code: res.code
      }, function (r) {
        if (!r.openid) {
          $.msg('获取openId失败!');
        } else {
          let sessionKey = r.sessionKey;
          let openid = r.openid;
          let unionid = r.unionid;
          $.ajax(api.WxQQLogin, {
            providerId: 'weixin',
            openId: unionid    //这里的openId传unionid
          }, function (r) {
            wx.hideLoading()
            if (!r.access_token) {
              ///跳转到绑定界面
              wx.showModal({
                title: '提示',
                content: '您还没有绑定手机号,现在去绑定!',
                success(res) {
                  if (res.confirm) {
                    wx.navigateTo({
                      url: '../bind/bind?openId=' + openid + '&unionid=' + unionid,
                    })
                  }
                }
              })
            } else {
              ///登录成功,保存用户信息,跳转到首页
              $.msg('登录成功!');
              wx.setStorageSync('userInfo', JSON.stringify({
                tokenType: r.token_type,
                token: r.access_token,
                userId: r.userId,
                userName: r.userName
              }))
            }
          }, '', true, true)
        }
      })
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})
二、绑定界面:
1、依然用授权按钮,只不过这次是获取此微信号绑定的手机号,当然,和上面一样,直接获取不到,只能得到微信服务器返回的加密数据, 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。
<button open-type="getPhoneNumber" class="btn-radio" bindgetphonenumber="bindGetPhoneNumber">获取手机号</button>
2、bindGetPhoneNumber
bindGetPhoneNumber(res) {
    if (e.detail.errMsg == 'getPhoneNumber:ok')
        //这里表示同意用户获取手机号,在这里,将得到的加密数据encryptedData,传给后台,后台返回真实的手机号回来,然后再进行绑定操作。
    } else {
        console.log("点击了拒绝授权");
    }
}
3、点击上面的按钮返回的数据示例



4、通过上面返回的encryptedData,调用后台接口,得到手机号进行绑定逻辑,这里就不写了。大致流程就是这样。


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:微信小程序一键复制 下一篇:微信小程序之嵌套循环修改index与item
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢