我要投稿

网站跟小程序的关联授权-聊聊陌陌小程序的静默授权登录

bendan520 网站程序

2023-08-26 0 7,472 百度已收录

进不了网站？换个网络试试！

众所周知，陌陌新版API已经明确表示，当用户第一次进入小程序时网站跟小程序的关联授权，如果用户尚未进入小程序，将直接触发陌陌的授权网站跟小程序的关联授权，或者自定义一个登录入口页面供用户先授权登录后浏览小程序的内容。那么毫无疑问，你开发的小程序直接违反了沫沫的建议，所以初审的结果其实是Fail……

小程序主入口页面的授权配置

当小程序处于挂载并退出后台的状态时，如果间隔时间过长，当小程序再次被唤醒时，令牌就会失效。其实所有的socket都不会正常显示，所以在app.vue主入口（mpVue框架）的生命周期onShow()中，需要添加获取Momo的授权信息以及所需要的token的背景。

1、首先定义一个promise方法，用于获取Momo授权返回的code值

const getWxCode = () => {
  return new Promise((resolve, reject) => {
    wx.login({
      timeout: 3000,
      success: res => {
        resolve(res.code);
      },
      fail: err => {
        reject(err);
      }
    });
  })
}
export default getWxCode;

2.判断用户是否授权操作

wx.getSetting({ // 判断是否已经授权
	success: res => {
		if (res.authSetting["scope.userInfo"]) { //用户未授权
			... 
		}
	}
});

2.调用原生按钮发起授权


onGetUserInfo(e) {
	if (e.target.errMsg === "getUserInfo:fail auth deny") {
		return; //授权弹框时点击取消
	}
	let {
		target: { encryptedData, iv }
	} = e;
	getWxCode().then(code => {
		const params = {
			code: code,
			encryptedData: encryptedData,
			iv: iv
		};
		this.onLogin(params);
	});
}
onLogin(params) {
	API.login(params).then(//后台获取token的API
		res => {
			console.log(`登陆成功，token为${res}`);
			wx.setStorageSync("AUTH_TOKEN", res.token);
		},
		fail => {
		}
	);
}

3、乍一看应该没有问题，虽然这样做是错误的，但是错误在第二步的onGetUserInfo方法中。如果后台API套接字需要Momo返回的encryptedData和iv参数，则证明用户必须授权才能进入小程序内部页面。所以联调的时候一定要通知前端清除这两个参数，只传一个代码。这样我们就可以实现新用户第一次进入小程序时，无需授权就可以进入小程序浏览信息，但是有交互操作（比如分享……）来唤醒授权操作。

这里，为了防止每个静默授权的交互位置都判断用户是否被授权，提取了一个基于系统按钮的授权组件userInfoBtn。 2.判断用户是否授权操作


    
        
    


  import API from "@/servers/API";
  import getWxCode from "@/utils/getWxCode";
  export default {
    name: 'userInfoBtn',
    data() {
      return {
        userInfo: {}
      }
    },
    methods: {
      mpGetUserInfo(result) {
        const self = this;
        if (result.mp.detail.errMsg !== 'getUserInfo:ok') {
          wx.showToast({
            title: '取消授权',
            icon: 'none',
            duration: 2000
          })
          wx.setStorageSync('hasUserInfo', false)
          return;
        }
        wx.checkSession({//校验当前用户的session_key是否有效
          success() {//处于登录状态
            self.getLoginData()
          },
          fail() {//需要重新登录
            self.getLoginData()
          }
        })
      },
      getLoginData() {
        getWxCode().then(code => {
          API.login({ code })
            .then(res =>
            {
              wx.setStorageSync('hasUserInfo', true)
              this.$emit('onClickGetUserInfoBtn')
            })
            .catch(err =>
            {
              console.log(err)
            })
        });
      }
    }
  }


    .user-info-btn::after {//去除系统按钮默认样式
        border: 0;
    }
    .user-info-btn {
        background-color: transparent;
        padding: 0;
        font-size: 0;
    }

/** 调用 **/

收藏 (0) 打赏

感谢您的支持，我会继续努力的!