微信公众号授权登录和微信网页授权登录

微信公众号授权登录和微信网页授权登录

这段时间，项目开发需要，研究和配置了下公众号平台的h5微信授权登录过程和pc网页端微信扫码登录过程，现归纳总结如下。

1、  先说说业务

H5微信授权登录：

即用户使用手机浏览h5信息列表时，点击某条信息进去时，会跳转到手机端的授权确认授权页，只有当用户点击确认授权按钮之后，才能够返回h5页面重新浏览页面或者操作（此处用户授权登录了，即用户处于登录状态了）。

pc网页微信扫码登录：

即用户访问某个网站时，登录页面下面通常会有三方登录：微信、QQ、微博、淘宝……，点击后出现二维码扫码页面，用户需要使用手机进行扫码后登录，这个只讲微信的扫码登录授权过程，其他三方登录授权过程类似。

2、  微信公众号授权原理

微信公众号采用的是oauth2的登录授权方式，简单的来讲，就是用户通过手机微信确认登录之后，微信方会返回一个授权码code给回第三方（接入方），这个授权码code一次有效期，且有效时间比较短；第三方通过此code去调用微信接口获取token，token的有效期也比较短，当然用户可以通过刷新token的方式来延长token的有效时长；第三步通过token再去调用微信开发平台接口，获取微信个人用户信息（昵称、头像地址、openid、unionid、地区……）。

Oauth2整个原理请移步参考：

理解oauth2.0----阮一峰

网站应用微信登录开发指南

3、 微信开发平台与微信公众平台的关系

用户可以在微信开发平台注册账号，在“应用管理”里面可以新建应用。

这个应用就是一个公众号，他是一个服务号，不是订阅号。

4、公众号h5微信授权过程

在第4步中通过在微信开发平台新建了一个公众号应用，然后登陆微信公众号平台。

这里先讲下H5页面的授权登录，测试账号的使用。

首先，确认公众号是服务号，并且是已经通过了微信认证的。

在左侧导航栏找到 “开发” 菜单，这个菜单就是给开发人员用的，“开发”菜单下面有 “基本配置”，“开发者工具”，“运维中心”，“接口权限”4个子菜单。

测试账号点击“开发者工具”菜单，如图所示：

找到其中的“公众平台测试账号”这个块，即右边栏第二个；点击进入：

使用自己的微信去登录，扫码登录之后，就能够看到“测试账号管理”页面，其中有测试账号的appID和appsecret，下面有个“测试账号二维码”，需要扫码关注下。

         在“体验接口权限表”，这一栏中，找到“网页账号”，如图：

点击“修改”，会弹出框，如图：

这个地方可以填本地URL，或者自己机器ip，都可以，我的因为项目访问时有端口号，所以把端口号也加上了，这个地方填的地址后面会用在授权页的回调地址参数填写的访问地址。

这样，测试账号就配置完了，如果不这么配置，就会提示“scope参数错误XXXXXX”，导致授权页进不去。

线上环境是在“接口权限”子菜单下面配置的，如图：

点击“修改”链接，器做修改，这个填写的是线上正式域名，需要把那个.txt 文件上传到服务器上的，否则保存不了。

说回测试账号，经过上面配置，测试账号应该就可以进去授权登录了，但是此时返回的微信用户信息是没有unionid的，如果业务接口需要用到unionid的，就需要回到微信开放平台来做一个配置。

登录微信开放平台，如图所示：

这个地方需要将你的测试账号的appid和秘钥配置进来，这样获取的微信信息才会有unionid。

5、  微信pc网页授权

进去pc网页授权时，也经常出现“scope参数错误或XXXX”，好烦人；有了h5的配置经验，以为pc端可以照搬，其实不是的，PC端微信扫码登录，又是另一种配置方法；这里就没有测试账号可以用了，本地host可以绑定真实域名（阿里云万网上买去），这里只说配置。

这个时候，也是需要进入到微信开放平台进去配置回调域名配置的，进入微信开放平台，

创建网站应用，在里面配置下回调的url。