微信公众号授权给h5

首先放上官方文档

获取公众号授权可以获取到用户的openId，可以通过openId获取到用户的昵称、性别、所在地等信息

获取授权的流程：

首先需要用户打开或者跳转到授权页，用户点击统一后跳转到我们设置的回调页面（比如项目首页）
授权后跳转回来的页面，url上会有code，我们把code传到后端，换取openId
完成…
1、首先是配置网页授权域名
在微信公众平台中左侧菜单拉到底，选择公众号设置，然后下边有个网页授权域名，输入需要授权的域名后，不要忘了把设置页面中的文件扔给后端

2、跳转授权页
配置好域名后，通过https://open.weixin.qq.com/connect/oauth2/authorize…链接跳转到授权页面，获取授权后在url中拿到code传给后端就可以了

授权链接的详细配置：

var url = ‘https://open.weixin.qq.com/connect/oauth2/authorize?’ +
‘appid=你的公众号appId’ + // #1
‘&redirect_uri=获取授权成功后重定向的url’ + // #2
‘&response_type=code’ + // #3
‘&scope=snsapi_base或snsapi_userinfo’ + // #4
‘&state=跳转回redirect_uri后带的参数’ + // #5
‘#wechat_redirect’
1
2
3
4
5
6
7
解释：

#1 appid：直接传入你得公众号AppId就可以，AppId的保密等级不高，所以不用担心直接暴露在URL中
#2 redirect_uri：打开授权页面后，用户点击后，会回调到redirect_uri页面，需要使用encodeURIComponent方法对url进行处理
#3 response_type：固定填写字符’code’
#4 scope：scope有两个可选值 1、snsapi_base：不弹出授权页面，直接跳转，只能获取用户openId 2、snsapi_userinfo：出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息（如果用户关注了公众号，snsapi_userinfo也不会弹出授权页面）
#5 state：跳转回来以后url中所带的参数，只能填写a-zA-Z0-9的参数值，最多128字节例：redirect_url填写的是百度，回调后地址http://www.baidu.com/?state=aaaaaaaaa
#6 #wechat_redirect：必填
问题
1、传参问题
因为微信接口中只提供了state传参，所以导致我们跳转到redirect_uri对应的url后，需要的传参很多没办法传或者需要传的名字必须是某个值而不是state

解决办法其实我们可以直接把参数拼接在redirect_uri地址的后边，比如我需要统计网页的进入渠道，需要在url上传参utm_source=xxxx,我们可以直接拼到redirect_uri后

比如CSDN的网站后边要拼接utm_source=baidu、userName=xuanxing
那么网站地址就是https://www.csdn.net/?utm_source=baidu&userName=xuanxing
不要忘了对地址进行转码encodeURIComponent(‘https://www.csdn.net/?utm_source=baidu&userName=xuanxing’) // https%3A%2F%2Fwww.csdn.net%2F%3Futm_source%3Dbaidu%26userName%3Dxuanxing
redirect_uri=https%3A%2F%2Fwww.csdn.net%2F%3Futm_source%3Dbaidu%26userName%3Dxuanxing
2、跳转问题
因为微信的授权是跳转到他的授权页面然后再跳转回来，虽然微信授权页的跳转是用的replace，但是在整个跳转过程（我们的页面 -> 微信授权页面 -> 我们的页面）中，还是会产生一次路由，即使我们跳转用的都是replace。这个问题会导致用户在首页后退时体验不太友好

这个问题我目前还没有找到最优的解决办法，各位大佬们如果有好的办法麻烦帮帮小弟，不过暂时有两个不太完美的解决方法
以放在公众号底部自定义菜单作为例子

不经过我们的页面，直接把页面地址配置成微信授权页面的地址，这样会直接进入微信授权的页面，微信授权页面 -> 我们的页面这个过程中不会产生路由，可以解决跳转问题，缺点是需要配置的url过长，而且只适用与每次进入必须需要授权的页面
在这里插入图片描述

第一次获取到code并且和后端交互拿到token/openId后，存在localStorage中，在请求数据时，如果token过期，再跳转到微信授权页面，这样虽然还是会有两次跳转的问题，但是会极大的减少了用户不良体验的次数

------end------

微信公众号授权给h5相关推荐

uniapp中h5网页微信公众号授权
uniapp微信网页授权 uniapp中h5网页微信公众号授权主要代码获取code返回的code截取代码 uniapp中h5网页微信公众号授权微信官方文档–>网页授权 uniapp中h5网 ...
vue h5微信公众号授权获取用户信息
vue h5微信公众号授权获取用户信息 1.申请测试账号 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 2.修改网页授权 ...
H5 微信公众号授权登录前后端分离篇(资料准备+前端01)
实现微信公众号授权登录,很简单,但是注意的地方要细心,小伙伴们跟着我的思路一起实现吧! 文章目录一.帐号申请 1. 正式账号 2. 测试帐号二.微信文档 2.1. 文档主页 2.2. 授权流程 2 ...
H5微信公众号授权登录
目录一.封装获取code的函数.存储token函数.获取token函数二.点击请求微信公众号授权并跳转三.重定向跳转会当前链接获取code登录四.整体流程的描述: 一.封装获取code的函数. ...
通过微信公众号跳转H5页面领取现金红包
通过微信公众号跳转H5页面领取现金红包项目目的通过公司微信公众号领取现金奖励面向对象公司内部员工产品逻辑: 1.在微信公众号底部栏加一项"领取奖励",点击"领取 ...
微信公众号授权获取用户OpenID和UnionId然后发生消息通知
微信公众号授权获取用户OpenID和UnionId然后发生消息通知 1.获取微信公众号code 1.微信公众拿取公众号appid和appSecret 2.网页域名授权,这里的域名拼接上html所在位置 ...
微信公众号授权步骤详细步骤介绍和整合springboot开发（java版）
文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源. 一.微信公众号授权步骤首先到微信公众平台注册账号,可以看到有四种类型(服务号,订阅号,小程 ...
微信公众号授权登录（asp.net + angular）
微信是时下最火的,上面有数以亿计的用户,如果能接入微信将大大减低注册门槛,当然,接入微信登录是有门槛的.微信登录一般有两个,一个是微信开放平台授权登录,一个是微信公众号授权登录,两者都需要认证才可以继 ...
微信登录(微信公众号授权)的开发（详解）
1.UnionId和OpenId 微信登录最重要的两个返回信息,一个是UnionId,一个是OpenId.两者之间有着必然的联系. 首先,先来理一下微信开放平台的架构.开发微信登录,必须有一个开放平台 ...

微信公众号授权给h5

微信公众号授权给h5相关推荐

最新文章

热门文章