「前端」微信获取openId，静默授权与非静默授权

首先了解一下静默与非静默授权的区别

静默授权「snsapi_base」

以 snsapi_base 为 scope 发起的网页授权，不用用户手动授权，跳转授权回到回调页面，只能获取用户openId

非静默授权「snsapi_userinfo」

以 snsapi_userinfo 为 scope 发起的网页授权，弹出授权页，用户手动点击授权，授权后可以获取用户的基本信息。

了解完成我们来看一下具体步骤

流程就是配置跳转授权页路径参数项 / 回调路径中取 code 码 / 根据 code 码调用后台接口获取 openId

getCode() {const { AppId } = config; // 公众号配置的 AppIdconst { code } = getSearchParams(); // 获取请求路径 code 参数 （ getSearchParams 路径取参数方法 ）// 拼接重定向的路径，授权成功回调的地址「此处因为业务需要，正常只需window.location.href获取当前路径即可」const local = `${config.baseURL + api.redirectToWxPay}?url=${encodeURIComponent(window.location.href)}`; // 验证 codeif (code == null || code == "") {// 路径 code 不存在，调起静默授权window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;} else {// code 存在 根据 code 码调用后台获取openIdthis.getOpenId(code); }},

「redirect_uri」授权结束后回到的页面路径，一般是重新回到当前页面（静默授权了话用户感知就是刷新了一下页面）路径需要编码，前端直接 encodeURIComponent 处理

官网示例
直通车：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
授权完成我们可以在路径上查看到回调回来的页面路径上已经带有 code 码以及 state 了

getSearchParams是自定义的方法，用来获取路由参数项，参数项包含 code 就证明授权获取完成，再根据 code 码调后台接口获取openId 就可以了

getSearchParams获取路由参数对象

export function getSearchParams () {const params = {}window.location.search &&// eslint-disable-next-line no-useless-escapewindow.location.search.match(/\??&?([^\?&]+)=([^\?&]+)/g).forEach((str) => {str = str.slice(1)var arrs = str.split('=')params[arrs[0]] = arrs[1]})return params
}

为什么不能 code 跟 openId 一起获取？官网说明

完整js代码

import { getSearchParams } from './utils'new Vue({el: "#app",mounted() {this.getCode();},methods: {//调用openId 先获取code码getCode() {const { AppId } = config;const { code } = getSearchParams();const local = `${config.baseURL + api.redirectToWxPay}?url=${encodeURIComponent(window.location.href)}`;if (code == null || code == "") {window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;} else {this.getOpenId(code);}},//获取 openIdgetOpenId(code) {this.$refs["loading"].show("加载中");axios.get(config.baseURL + api.getOpenId, {params: {code: code,},}).then((res) => {if (res.data.code == 0) {this.openId = res.data.data.openId;this.$refs["loading"].hide();}});},},
});

「前端」微信获取openId，静默授权与非静默授权相关推荐

「实用」微信扫码 - 关注公众号后网站自动登录
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:用好Java中的枚举,真的没有那么简单!个人原创+1博客:点击前往,查看更多作者:destiny 链接:htt ...
Php静默授权,【公众号】微信第三方登录（静默授权和非静默授权）（具体代码：U盘新浪云SAE）...
一.微信联合登录是怎么登录的,有几种登录方式:微信联合登录和微信授权登录[授权登录(非静默授权)与静默授权] [主动授权]:需要用户确认登录,这样可以通过用户的个人确认,获取用户全面的信息,无论是否关 ...
【公众号】微信第三方登录（静默授权和非静默授权）（具体代码：U盘新浪云SAE）...
一.微信联合登录是怎么登录的,有几种登录方式:微信联合登录和微信授权登录[授权登录(非静默授权)与静默授权] [主动授权]:需要用户确认登录,这样可以通过用户的个人确认,获取用户全面的信息,无论是否关 ...
微信第三方登录（静默授权和非静默授权）
用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 微信的授权登录在日常应用中应用的非常广泛,越来越多的平台支持用户使用微信进行授权第三方登录使 ...
vue 微信(企业微信)获取openId
项目背景: 一个H5活动页,获取企业微信的用户openId,然后通过openId调用接口判断用户是否是第一次登陆,第一登陆跳转index,不是第一次调转about. 开发: 参考很多博客,用了中转页面 ...
简单的实现微信获取openid
微信公众平台获取openid在公众号的开发中有很多用途,前段时间为实现用户使用公众号在登录一次以后可以免密登陆而使用了openid.开发过程中遇到了一些问题,在这里向需要且还没有获取到openid的米 ...
微信获取openID以及token
微信的openID和token是唯一的身份标识.非常重要,其中token的有效期只有两个小时(官方可能修改). 获取openID事例: 官方文档 1 第一步:用户同意授权,获取code https:/ ...
微信获取openid方法
绑定appId 配置API key 生成证书设置支付授权目录设置授权域名(获取openid的域名) openid:openid是微信用户在appid下的唯一用户标识(appid不同,则获取到的op ...
音视频骚操作，FFmpeg 如何播放带「图片」的 M3U8 视频，IJKPlyaer 适配非标 TS 文件
如果看到一个需要播放的视频链接显示是一张图片,你会不会感觉有点懵?如果这张图片写着 png,然后实际格式是 bmp ,你会不会更懵了?如果这个 bmp 还做了加密篡改呢?今天我们要聊的就是这样一个充满 ...

「前端」微信获取openId，静默授权与非静默授权

首先了解一下静默与非静默授权的区别

了解完成我们来看一下具体步骤

「前端」微信获取openId，静默授权与非静默授权相关推荐

最新文章

热门文章