当前位置:   article > 正文

uniapp获取微信授权登录和手机号一键登录(保姆教程)_uniapp wxbizdatacrypt

uniapp wxbizdatacrypt

uniapp获取微信授权登录(保姆教程)

第一步

下载官方给的解密文件‘mWXBizDataCrypt’

没有文件就复制该文件的代码创建一个

  1. var crypto = require('crypto')
  2. function WXBizDataCrypt(appId, sessionKey) {
  3. this.appId = appId
  4. this.sessionKey = sessionKey
  5. }
  6. WXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {
  7. // base64 decode
  8. var sessionKey = new Buffer(this.sessionKey, 'base64')
  9. encryptedData = new Buffer(encryptedData, 'base64')
  10. iv = new Buffer(iv, 'base64')
  11. try {
  12. // 解密
  13. var decipher = crypto.createDecipheriv('aes-128-cbc', sessionKey, iv)
  14. // 设置自动 padding 为 true,删除填充补位
  15. decipher.setAutoPadding(true)
  16. var decoded = decipher.update(encryptedData, 'binary', 'utf8')
  17. decoded += decipher.final('utf8')
  18. decoded = JSON.parse(decoded)
  19. } catch (err) {
  20. throw new Error('Illegal Buffer')
  21. }
  22. if (decoded.watermark.appid !== this.appId) {
  23. throw new Error('Illegal Buffer')
  24. }
  25. return decoded
  26. }
  27. module.exports = WXBizDataCrypt

第二步

在date里面放入这几个数据待会要用到

  1. sessionKey :'',
  2. appID:' 你的appid',
  3. secret:'你的secret 在公众平台里获取',
  4. openId:'',
  5. session_key:'',
  6. phoneNumber:''

 微信公众平台

登录获取授权信息 可放在mounted里面

  1. uni.getProvider({
  2. service: 'oauth',
  3. success: function(res) {
  4. if (~res.provider.indexOf('weixin')) {
  5. uni.login({
  6. provider: 'weixin',
  7. success: (res2) => {
  8. const code = res2.code
  9. uni.getUserInfo({
  10. provider: 'weixin',
  11. success: (info) => { //这里请求接口
  12. console.log('res2');
  13. console.log(res2);
  14. console.log('info');
  15. console.log(info);
  16. uni.request({
  17. url:'https://api.weixin.qq.com/sns/jscode2session?appid='+that.appID+'&secret='+that.secret+ '&js_code=' + res2.code + '&grant_type=authorization_code',
  18. data: {},
  19. method: 'GET',
  20. success(r) {
  21. console.log(r.data)
  22. that.openId = r.data.openid
  23. that.session_key = r.data.session_key
  24. }
  25. })
  26. },
  27. fail: () => {
  28. uni.showToast({
  29. title: "微信登录授权失败",
  30. icon: "none"
  31. });
  32. }
  33. })
  34. },
  35. fail: () => {
  36. uni.showToast({
  37. title: "微信登录授权失败",
  38. icon: "none"
  39. });
  40. }
  41. })
  42. } else {
  43. uni.showToast({
  44. title: '请先安装微信或升级版本',
  45. icon: "none"
  46. });
  47. }
  48. }
  49. });

第三步

 

使用手机号一键登录

按钮

<u-button type="primary" open-type="getPhoneNumber" @getphonenumber="submitlogin" shape="circle" text="微信授权登录" ></u-button>

方法体:submitlogin

 然后解密信息

  1. if(e.detail.errMsg=="getPhoneNumber:ok"){
  2. // console.log(e);
  3. // console.log(e.detail.errMsg);
  4. // console.log(e.detail.iv);
  5. // console.log(e.detail.encryptedData);
  6. // console.log('用户点击了接受');
  7. this.showModal = false
  8. // this.api.phone({
  9. // session_key:this.sessionKey,
  10. // encryptedData:e.detail.encryptedData,
  11. // iv:e.detail.iv
  12. // })
  13. let mWXBizDataCrypt = new WXBizDataCrypt('wxf679991a6d85beb2',that.session_key)
  14. let crDate = mWXBizDataCrypt.decryptData(e.detail.encryptedData,e.detail.iv)
  15. if(crDate.countryCode != '86'){
  16. uni.$u.toast('仅限于中国大陆手机号用户使用')
  17. return
  18. }
  19. that.phoneNumber = crDate.phoneNumber
  20. console.log()
  21. }else{
  22. console.log('用户点击了拒绝') ;
  23. }

登录成功!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/740343
推荐阅读