uniapp之微信公众号网页静默授权/非静默授权

简介: 首先我们进行网页授权的需求是,获取用户信息、最主要是获取openid唯一值,可以用于用户登录、支付等功能,这时候就需要进行网页授权获取用户的信息以及openid

静态授权


●snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid)

●用来获取进入页面的用户的openid的,并且自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)。


非静默授权


●snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )

●用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。


1. 准备


●appid:公众号的唯一标识

●redirect_uri :授权后重定向的回调链接地址

●scope:授权方式


2.授权


在onLaunch生命周期操作 | 某页面的 onLoad 中


1. 不存在openid进行获取code


onLaunch(e){
  const openid = uni.getStorageSync(OPENID);
  //不存在code
  if(!openid){
    //获取code (为了方便展示参数 此处缩紧了,真实情况最好不要缩紧)
    document.location.replace(
    `https://open.weixin.qq.com/connect/oauth2/authorize?
      appid=${appid}
      &redirect_uri=${encodeURIComponent(redirect_uri)}
      &response_type=code
      &scope=${scope}
      &state=STATE#wechat_redirect`);
  }
}


注意:由于# hash后面的字符串不会被检测到,此处必须编码一下 redirect_uri


2. 通过code换取用户信息


执行了第一步的获取code后就会跳转至 redirect_uri/?code=CODE&state=STATE,此时url地址会带有code参数,拿到code后调用就后端的接口获取openid


async onLaunch(e){
  const openid = uni.getStorageSync('OPENID');
  if((e && e.query && e.query.code) && !openid){
    // 请求后端接口获取用户的信息
    let result = await getOpenId({ code:e.query.code });
    // 保存用户的openid
    uni.setStorageSync('OPENID',result.data.openid);
  }
}
目录
相关文章
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
15 7
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的“鼻护灵”微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的“鼻护灵”微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的“财来财往”微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的“财来财往”微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的校篮球联赛微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的校篮球联赛微信小程序附带文章源码部署视频讲解等
10 2
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp二手交易微信小程序的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp二手交易微信小程序的附带文章源码部署视频讲解等
7 1
|
8天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
16 1
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的传统戏曲推广微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的传统戏曲推广微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的童装购买平台微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的童装购买平台微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的游戏账号交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的游戏账号交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信小程序医院挂号系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信小程序医院挂号系统的详细设计和实现(源码+lw+部署文档+讲解等)