微信网页授权（前端）
前言
前段时间，项目对旧版的微信公众号进行改版，需要对部分页面进行微信授权，我们的网页授权通过前后端进行，前端负责发起请求和调用后台接口，后台负责获取微信端的回调以及提供前端所需的接口。整个微信授权完成了，期间磕磕碰碰，踩了不少的坑，因此总结和梳理一下整个微信授权流程的前端工作。
1. 微信授权的整体流程
2. 微信授权开发过程
2.1 获取微信公众号的AppID和AppSecret
每个公众号都有对应的AppID和AppSecret，可以登录微信公众平台 -> 基本配置中的开发者ID可以查看到。当然，这对应的是生产环境，对于那些关注的人数较多的公众号来说，是不会用这个ID来进行测试的。因此，微信公众平台还提供了相应的测试账号。可以通过开发者工具 -> 公众平台测试账号进入（根据不同微信号可以在同一个公众号中建立不同的测试账号）。
如上图所示，在个人测试号中同样具有appID和appSecret，因此可以使用这个测试号信息进行开发和测试。以下的过程都是针对测试号，生产号的配置基本相同。
2.2 配置授权回调的页面
在JS接口安全域名中，点击修改来设置网页的域名。安全域名只需要填写域名或IP地址即可，不需要添加http，如www.xxxx.com或127.0.0.1，则在该域名下的页面都能够得到授权，而相关的二级或三级域名（aaa.xxxx.com）则无法获得授权。
注 若填写时增加了协议，如 http://www.xxxx.com 或 http://127.0.0.1，页面同样可以获得授权，但是会带来一些未知的状况，如用户请求微信二次分享时，分享出来的描述和图片无法正确显示。
当填写的网址通过了微信公众平台的安全监测时，即说明该域名已经配置成功了。
2.3 用户授权并获取code
想要对用户进行授权，其实就是让用户进入下面的授权链接：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect微信的授权链接有几部分组成，appid、rediect_uri、response_type、scope、state和wechat_redirect，这几个参数的传值，在微信的开发文档上都有，现在附上，并添加一些需要注意的地方：
通过以上参数可以拼接出需要授权访问的页面链接，如下测试链接：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx1234567890&redirect_uri=http://www.xxxx.com&response_type=code&scope=snsapi_userinfo
&state=abcd#wechat_redirect当用户点击该链接的时候，微信会弹出授权页面，当用户确认授权后，微信会回调一个http://www.xxxx.com?code=12334566778&state=abcd的页面，在该页面中code是微信返回的一串字符串，且使用一次后即失效。
2.4 使用code换取access_token
access_token是调用微信用户信息的凭证，微信回调的URL地址中带有code参数，通过code可以换取access_token。处于安全的考虑，前端使用code请求access_token容易被窃取，因此前端可以通过截取URL中的code参数值转发给后台，从后台发起请求来获取需要的信息，此处不再赘述请求access_token的过程，相关的步骤可以查看微信的开发文档。
此处附上微信测试号获取access_token的过程：
微信公众平台开发者文档 -> 接口在线调试，如图所示：
接口调试页面如图所示：
填写自己的测试号appid和secret就可以获取access_token，通过access_token可以配置公众号的菜单等，当然，这个是用于测试号的调试和配置，与正式环境的公众号菜单的配置方式不同，正式环境的图形化界面更加简洁方便。
至此，前端获取微信授权后的用户信息的过程就基本完成，当后台获取到了用户的基本信息后，传值返回前端，用来作信息的展示；也可以通过获取的用户openid与自己公众号的粉丝ID进行绑定，来实现更多的功能。
微信网页授权（前端）相关推荐
- .NET WebAPI 微信网页授权的实现（一）前端篇
写在前面 微信网页授权登陆是微信网页开发的第一步,由于框架限制需要使用.NET WebAPI的前后端分离模式进行开发,所以经过几天的摸索,写了这个简单的微信网页授权的实现Demo,本篇文章为微信公众号 ...
- Java微信公众号开发微信网页授权之前端传递code方式获取用户信息
本片博客讲解的网页授权分为两步,前端先传递backUrl(回调地址)到后台网页授权接口,该接口拿到回调地址后组装授权连接,重定向到前端页面,前端页面截取Code,传入后端获取用户信息方法,获取用户信息 ...
- 微信授权Java重定向前端地址_微信网页授权+分享踩过的坑
页面用浏览器自带返回和安卓物理返回死循环的话,直接看高潮部分 背景 折磨我两个工作日加周末一天的问题,我觉得还是有必要记录一下,为什么程序员总是加班,就是遇到这些意想不到的问题 需求 领导:我想做两个 ...
- 网页授权前端 java_H5微信网页授权java后端SpringBoot实现
本文使用weixin4j工具包,实现SpringBoot中微信网页授权功能,并获取用户信息. 使用weixin4j工具包1.0.0版本,官网 https://developers.weixin.qq. ...
- 微信网页授权，获取微信code，获取access_tocken,获取用户信息
微信开发中,经常有这样的需求:获得用户头像.绑定微信号给用户发信息.. 那么实现这些的前提就是授权! 1.配置安全回调域名: 在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的" ...
- ajax 微信code获取_ajax 实现微信网页授权登录的方法
项目背景 因为项目采用前后端完全分离方案,所以,无法使用常规的微信授权登录作法,需要采用 ajax 实现微信授权登录. 需求分析 因为本人是一个phper ,所以,微信开发采用的是 EasyWeCha ...
- java : 实现微信网页授权，超详细！
背景 使用微信公众号实现网页授权. 开始 1.微信网页授权的官方文档 微信网页授权 2.申请微信测试公众号 从红框进入申请页面. 填写必要的信息,注意上图红框部分的域名需要可以外网能够访问,微信需要发 ...
- 微信公众号开发（一） 微信网页授权登录
微信网页授权登录 前期准备 授权登录 获取微信数据 处理授权拒绝 前期准备 1.微信公众号开发,首先要搞一个公众号,开发阶段可以申请一个公众平台测试账号. (进入到微信公众公众平台,找到开发者工具,点 ...
- php微信授权ajax,ajax 实现微信网页授权登录
项目背景 因为项目采用前后端完全分离方案,所以,无法使用常规的微信授权登录作法,需要采用 ajax 实现微信授权登录. 需求分析 因为本人是一个PHPer ,所以,微信开发采用的是 EasyWeCha ...
- 微信网页授权并获取用户信息
介绍 在很多微信H5应用里,当用户访问第三方应用时就需要进行微信网页授权,并且很多涉及安全的操作我们必须要先获取用户信息才能继续,本文章简单介绍了微信授权流程,并通过申请微信测试账号来模拟网页授权,用 ...
最新文章
- [算法] [常微分方程] [欧拉法 改进欧拉法 经典R-K算法]
- 全面访问JavaScript的最佳资源
- 深度优先搜索算法（有向图和无向图）
- 常用Intent调用（摘自网络）
- 简易OA漫谈之工作流设计（DB）
- 二十四、数据挖掘时序模式
- redis的增加元素操作
- python flagin flagout_Python 进阶之路 (十) 再立Flag, 社区最全的itertools深度解析（中）...
- 高中计算机课程打字网址,信息课
- Pandownload作者被抓后，我决定用docker搭建一款私有网盘
- 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第1节 基本概念_01maven概述
- IE7pro v0.9.8已经发布(已经有中文包)
- N9(Meego系统)删除自带软件方法------笔者亲测，可行，无副作用
- HTML 制作一个通讯录
- 上海计算机一级excel试题及答案,2016年计算机一级excel试题及答案
- 微信小程序view居中问题
- 生产者 消费者模式
- kali linux 磁盘,在硬盘上安装Kali Linux
- 一文看懂膨胀（空洞）卷积（含代码）
- 2.5 矩阵因式分解（第2章矩阵代数）