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);
  }
}
目录
相关文章
|
28天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
186 3
|
1月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
37 2
|
1月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
55 0
|
3月前
|
前端开发 JavaScript 应用服务中间件
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
本文介绍如何在uniapp项目中实现谷歌授权登录,无需后端参与。文章分为三部分:1)谷歌授权登录流程,详细说明从用户点击登录到获取用户信息的整个过程;2)谷歌开发者控制台配置,包括创建项目、配置同意屏幕及OAuth客户端ID等步骤;3)uniapp前端实操,提供具体代码示例,展示如何获取授权码并用其交换访问令牌,最终获取用户信息
138 2
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
|
1月前
|
小程序
uniapp实现微信小程序隐私协议组件封装
uniapp实现微信小程序隐私协议组件封装
42 0
|
3月前
|
移动开发 小程序 前端开发
|
3月前
|
小程序 前端开发
|
3月前
|
存储 前端开发 安全
|
3月前
|
存储 小程序 JavaScript
|
3月前
|
开发工具 Android开发

热门文章

最新文章