如何在vue 中实现网页授权，获取用户的openid？

最新推荐文章于 2024-05-13 00:11:17 发布
最新推荐文章于 2024-05-13 00:11:17 发布
阅读量4.3k 收藏 9
点赞数 3
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Missbelover/article/details/117260272
版权

如何在vue 中实现网页授权，获取用户的openid？

思路：

授权分为两种：静默授权、用户手动点击同意进行授权
    1. 以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）
    1. 以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

我用的是静默授权，两种使用方法一致。

步骤

一、获取code
首先页面打开进行获取（crea
最低0.47元/天 解锁文章
今天星期八
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue移动端微信授权登录插件封装的实例
01-19
//应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其...
vue实现微信获取用户信息的方法
01-19
本次项目做到一个点赞功能，即分享出去一个页面给微信好友，微信好友点开并点赞，需要将点赞用户的微信昵称，微信头像以及微信openid，微信unionid（这个需要关注公众号才会有该字段）传给后端，记录点赞人的相关信息 微信网页授权 1、微信公众号网页授权配置，详见官网 2、关于网页授权的两种scope的区别说明 （详细见官网） －scope=snsapi_base 获取微信用户openid,获取后直接跳转业务页面，不需要用户操作 －scope=snsapi_userinfo 获取微信用户详细信息（昵称，头像等），需要用户手动点击授权，当点击允许时，会跳转业务页面（类似于关闭弹窗），点击拒绝时
微信公众号网站使用vue获取用户openid等信息
05-11
开发微信公众号时通过vue页面获取用户静默授权/非静默授权后的信息，整个一套代码全部嵌套在vue界面中。
微信网页内获取用户openid
最新发布
代元培
05-13 197
微信网页内获取用户openid
微信h5获取用户openid：基于vue3+springBoot
weixin_44431073的博客
08-16 2673
基于springboot+vue的微信h5版本，获取openid
微信H5端网页授权流程（在H5中的openid获取，网页绑定微信）
F2691898750的博客
04-15 1万+
这里说的是scope为snsapi_base这种方式，用于获取每一个微信用户都只有一个的openid，作用是让用户使用微信绑定当前网页，获取微信的H5支付的必要参数之一。1、先准备一个结果页面，即为，告知用户当前是否获取到openid结果的页面（就是一个白页面，上面一行字，‘您已成功绑定微信’或‘微信绑定失败，请重新绑定’）；判断是否为微信浏览器，如果为微信浏览器，弹出提示框，用户确认一下绑定防止误触（这一步为用户体验优化），确认绑定直接请求链接，然后到结果页面进行上述流程；①、客户拥有自己的公众号。
微信公众号获取openid（vue）
lyh_0202的博客
06-08 1587
export default { created () { this.page= (this.getUrlParam(“page”)=null)?this.getUrlParam(“state”):this.getUrlParam(“page”); this.getCode(); }, data(){ return { //由于是通过微信公众号不同菜单点击进入页面，需要判断 page:’’, }; }, methods: { getCode () { // 非静默授权，第一次有弹框 const code =
公众号微信网页授权
洛塔博士的博客
11-05 2220
打开网页后，获取到用户的openid、头像、昵称等信息。 scope为snsapi_base时无需授权即可获取到openid。 scope为snsapi_userinfo需要授权，才能获取到头像、昵称等（如果已经关注公众号了，则不需要授权也能获取到） 如果直接进入获取用户信息的页面，一般会显示快照，也就是微信用虚拟的数据先把你网页对应内容填充了，然后点击底部获取信息后再替换为真实的，方便用户提前知道页面的样子，以确认是否还要继续授权。 # 前置条件 - 前置条件1：设置与开发-->接口权限-->全局搜索
微信h5静默和非静默授权获取用户openId的方法和步骤
11-20
openId是用户在当前公众号下的唯一标识（‘身份证’），就是说通过这个openId，就能区分在这个公众号下具体是哪个用户。 二、openId有什么用？ 假如用户A在当前公众号下购买了一件商品，用户的下单信息肯定要存储到...
网页通过SDK获取企业微信用户信息(姓名、工号等)
11-29
4. 数据处理：获取到用户信息后，可以通过Vue.js的数据绑定机制，将这些信息存储在Vue实例的data对象中，以便后续使用。 三、后端C#处理 1. 生成签名：在后端，我们需要使用C#实现生成signature的逻辑。signature是...
微信公众平台开发（四）——微信网页授权：获取用户openid&用户基本信息
不愿意做鱼的小鲸鱼の博客
03-24 9129
在开发中，如果web产品需要使用到微信的功能,比如微信授权登录、微信支付、微信投票等，我是开发的东东是一个web项目，然而如果需要接入微信的话，就需要使用道微信的微信网页开发相关的功能。
微信公众号网页授权--前端获取code及用户信息（vue）【简单详细版】
Leijiang0504的博客
03-08 1万+
嗨喽大家好，前段时间开发微信公众号网页授权，虽然网上已经有很多关于这方面的博客或者教程，但是第一次开发还是遇到挺多坑的，以下分享一下我的遇到的一些问题的见解，希望对你们有帮助。 一、测试号相关配置 首先在你公司申请的测试号上配置好相关信息，将你的域名配置好 URL与Token都是要后台配置好的，直接叫后台给过来就好啦，域名一定要和URL的域名保持一致。 然后，在体验接口权限表里面找到网页帐号--网页授权获取用户基本信息，点击修改： 二、获取code 配置好以上回调域名等后，就可以
网页授权与APP授权，H5开发使用微信Jssdk拉起网页授权详细步骤（vue2）
yx13186308025的博客
12-11 2807
6.获取到openid和access_token就可以走到最后一步获取用户信息（公众号获取用户信息，只有微信头像，openid和昵称）这一步同样要放到后端进行，前端调用接口形式请求。登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。我这边权限签名，时间戳和随机串是后端更具微信的权限签名算法生成的，微信算法链接如下。注意点：这一步操作需要将请求微信的接口放到后端，前端进行调用，否则会出现跨域现象。根据code做判断，如果url里截取到code就代表登录过，不在拉起弹框授权。
vue获取openid并完成微信支付功能
springdk2009的博客
04-30 238
接下来就可以放开干支付，分享等其他功能了。
微信公众号开发：获取openId和用户信息（完整版）
热门推荐
平凡之路无尽路的博客
04-15 3万+
注：之前总结怎么进行本地公众号开发调试，时间一长忘记配置了，所以这里记录一下公众号开发配置，方便快速上手。 要进行微信公众号开发，那么要申请一个微信公众号就必不可少了。现在微信公众号类型有这几种：订阅号，企业号，服务号。关于三者的差别和介绍可以参考微信公众号官网微信公众平台。申请通过之后，就能登陆微信公众平台管理平台进行开发设置了。 每个公众号申请成功后，微信服务那边就会给每个...
vue 授权获取微信openId
qq_41786458的博客
10-11 1万+
1、获取code 根据code 获取openId getUrlKey:function(name){//获取url 参数 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,...
vue axios封装 获取微信公众号用户的openid
weixin_49739911的博客
02-25 2182
vue axios封装 获取微信公众号用户的openid
微信公众号开发：网页授权
snowball的博客
11-18 5774
微信公众号网页授权，目的就是获取用户相关信息，实现自己的业务逻辑，最终于会得到的信息如下表格，本文对应的任务获取到openid即可满足业务需求，本文内容包括环境、操作步骤及相关内容比较详细，要获取其他的内容也很容易了。4.1、理解：通过微信公众号网页授权获取微信可提供的相关的用户信息，包括openid、昵称、unionid等，供实现业务逻辑。4.22、非静默授权：出现弹窗的，需要用户点击确认的授权。4.2.1、静默授权：用户无感的，有程序执行的授权。4.2、网页授权分类：静默授权、非静默授权。
vue静默授权获取openid
09-06
Vue静默授权获取openid是指在使用Vue框架进行开发时，通过授权的方式获取用户的openid，同时不需要用户进行手动确认授权的过程。 在实现这个功能的过程中，可以通过以下步骤进行操作： 1. 在Vue项目中引入微信开放平台的JS-SDK，使用该SDK可以进行微信登录授权的操作。 2. 在Vue项目的配置文件中，添加需要使用的微信JS-SDK的权限。包括获取用户基本信息、使用微信支付等权限。 3. 开发一个登录页面，在该页面中显示微信登录按钮，当用户点击登录按钮时，触发微信登录授权的操作。 4. 当用户点击登录按钮后，系统会向微信服务器发送授权请求，微信服务器会返回给应用一个临时的code。 5. 在接收到临时code后，应用通过发送请求到微信服务器换取openid。可以使用后端的接口，将临时code传递给后端，后端再向微信服务器发送请求获取openid。 6. 后端将获取到的openid返回给前端，前端将其保存在本地。 通过以上步骤，Vue可以实现静默授权获取openid的功能。用户在登录时只需要点击一次登录按钮，无需手动确认授权。这样可以方便用户快速登录，并能获取到用户的openid，以便进行后续的个性化操作，提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值