微信网页授权流程(前端篇)

Julie在进化      2022-02-11     203

关键词:

功能描述

公司最近有个项目要做基于微信的H5校服定制wepApp的开发,之前完全没有接触过微信开发,很是兴奋,有种磨刀霍霍向猪羊的感觉。由于本人经验有项,描述不准确的地方请大家及时指出。

功能描述:当用户点击如下所示的图片获取用户的信息,包括openid,头像等。

技术分享图片

准备工作

(1)在公众号后台“设置—公众号设置—功能设置—网页授权域名”设置回调的域名。

技术分享图片

技术分享图片

(2)在对应位置按照公众号开发文档给出的规则设置回调地址。

如果是通过子菜单触发跳转,记得在“功能—自定义菜单—子菜单内容”设置为跳转网页",并填写回调地址。

主要流程及说明

参考文档:技术分享图片

说明:

  • 微信网页授权有2种scope,非别是snsapi_base为scope发起的网页授权和以snsapi_userinfo为scope发起的网页授权。第一种授权只能获取到进入页用户面的openId,此方式无需用户关注公众号。而第二种授权方式才能获取到用户的基本信息,但这种授权需要用户手动同意。对于已关注公众号的用户,如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页,即使是scope为snsapi_userinfo,也是静默授权,用户无感知。

  • 用户进入回调页面,跳转后的url上会拼接拼接一个key为code的字段,此code的值是变化的,每次用户授权带上的code将不一样,code的有效时间为5分钟。

前端截取url上code的方法如下:


function getUrlParam(name){

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象

    var r = window.location.search.substr(1).match(reg); //匹配目标参数

    if (r != null) return unescape(r[2]);

    return null; //返回参数值

  };
  • 根据code获取openid的方法需要公众号的appsecret和access_token2个字段的值,由于这2个字段的值安全级别都非常高,必须只保存在服务器,所以该方法需由后台实现,前端传入code即可。

  • 根据openid获取用户基本信息也涉及到access_token,因此需要后台实现此方法,前端传入openid即可。

参考文档:微信公众平台技术文档

前端对接微信公众号网页开发流程,前期配置(代码片段)

微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传、图片预... 查看详情

php微信接口开发之高级篇之网页授权获取用户基本信息

PHP微信接口开发之高级篇之网页授权获取用户基本信息  二、WEB开发工具  查看详情

php微信公众平台开发高级篇—网页授权接口

【1】带微信帐号的手机 【2】打开浏览器,这里以IE为例。     输入:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login【3】用手机登录你的微信,使用微信中的“扫一扫”功能,扫描上面网页中的二维... 查看详情

前端对接微信公众号网页开发流程,jssdk使用(代码片段)

前面两篇文章讲解了前端对接微信公众号网页开发流程,前期配置和前端对接微信公众号网页开发流程,授权对接,本篇文章讲解关于微信JSSDK的使用,官方文档地址一、通过config接口注入权限验证配置所有需要... 查看详情

微信公众号开发之网页授权(获取用户信息)

  这次暑假留在学校参与工作室的项目,对微信公众号比较感兴趣,所以参与这方面的学习研究。昨天完成了关于网页授权,获取用户信息方面的功能,所以乘热打铁,写上一篇。实现本篇涉及的功能,还需要完成一些基础。... 查看详情

如何获取微信网页授权

...penid获取用户基本信息(支持UnionID机制) 参考技术B1、在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的开发者中心页配置授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请... 查看详情

微信网页授权-公众号支付(获取openid用户信息等)

...公众号唯一的OpenID 业务功能描述:实现H5页面可以在微信浏览器里面进行微信支付,所以需要使用微信公号支付功能才能实现,微信公众号支付功能需要用户的openid,所以进入页面时需要通过网页授权首先获取到openid。 ... 查看详情

解决微信网页授权一个回调域名多个业务使用

前言我们都知道微信的网页授权回调域名只能设置一个,但是多个业务使用同一个微信公众号授权信息的话,就需要使用者内部进行处理了,下面给出我使用的一种简陋的解决方案。方法正常流程1:第一步:用户同意授权,获取c... 查看详情

angular2写的前端网站,需要集成进微信,前后端分离开发怎么做

参考技术A请参考微信公众号开发文档如何接入。其次,需要将微信账号和网页账号进行关联。用户点击使用微信登录会跳到扫码微信扫码的界面,扫码其实是一个授权过程,然后会回调在微信开发者后台配置的回调地址(OAuth2... 查看详情

微信小程序获取用户信息流程(代码片段)

获取用户信息与其他授权不太一样,其他授权会自动弹出对话框,请求获取用户授权,但获取用户信息不回,需要引导用户点击授权按钮同意授权获取用户基本信息1、前端页面要有授权登录按钮<buttonwx:if="canIUse"open-type="getUserI... 查看详情

vue项目登录接入企业微信的两种方式(网页授权登录,扫码授权登录)

参考技术A1.参数3.登录页面1.参数2.后台配置好,redirect_uri用urlencode(网页搜)编码(见企业微信后台配置)。前端获取到code值后,走的逻辑跟扫码登录的逻辑类似了,不再赘述。 查看详情

h5html实现微信授权登陆(代码片段)

html实现微信授权登陆前言网页授权的两种scope的区别开发指南第一步:用户同意授权,获取code第二步:通过code换取网页授权access_token第三步:拉取用户信息(需scope为snsapi_userinfo)代码实现:效果图总结前言在... 查看详情

微信网页授权获取用户基本信息

微信公众号可以通过微信网页授权机制,来获取用户基本信息,可以用于微信登录功能关于网页授权的两种scope的区别说明1、静默授权:以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权... 查看详情

微信网页授权

有关微信网页授权letwechat={getCode:function(appids){/***获取微信code*/letappid=appids;lethref=window.location.href;letredirect_uri=encodeURI(href.split("#")[0]);redirect_uri=redirect_uri.replace(/&/g,‘%26‘);w 查看详情

微信公众平台,微信网页授权,redirect_uri参数错误,解决方法!

刚才在做微信网页授权的时候,发生一个错误!!!微信网页授权redirect_uri参数错误!遇到问题,第一时间应该做的就是查看官网微信公众平台的技术文档。微信网页授权如果用户在微信客户端中访问第三方网页,公众号可以通... 查看详情

微信公众号获取openid流程(代码片段)

说明微信公众号获取openid,在官方文档中称为网页授权,授权有两种scope,snsapi_base和snsapi_userinfo,snsapi_base是静默授权,不需要用户同意,以下要说的就是静默授权。关于网页授权的两种scope的区别说明以s... 查看详情

微信公众号获取openid流程(代码片段)

说明微信公众号获取openid,在官方文档中称为网页授权,授权有两种scope,snsapi_base和snsapi_userinfo,snsapi_base是静默授权,不需要用户同意,以下要说的就是静默授权。关于网页授权的两种scope的区别说明以s... 查看详情

微信网页开发

微信网站一般是先要微信网页授权后获取到access_token,才有资格获取用户信息的,所以如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。第一步是先获取用... 查看详情