一、开发前必读

1.在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名，如：www.qq.com

2.两种授权登录：

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

3. 对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是 scope 为snsapi_userinfo，也是静默授权，用户无感知

二、开发相关文档

微信网页开发文档

网页授权 | 微信开放文档

开发者测试账号平台

https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

微信JS接口签名校验工具

微信 JS 接口签名校验工具

三、正式开发

第一步：用户同意授权，获取code

引导关注者打开如下页面

redirect_uri需要进行urlEncode编码

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有 scope 参数对应的授权作用域权限。

尤其注意：由于授权操作安全等级较高，所以在发起授权请求时，微信会对授权链接做正则强匹配校验，如果链接的参数顺序不对，授权页面将无法正常访问

尤其注意：跳转回调redirect_uri，应当使用 https 链接来确保授权 code 的安全性。

参数说明

参数	是否必须	说明
appid	是	公众号的唯一标识
redirect_uri	是	授权后重定向的回调链接地址，请使用 urlEncode 对链接进行处理
response_type	是	返回类型，请填写code
scope	是	应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过 openid 拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）
state	否	重定向后会带上 state 参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
#wechat_redirect	是	无论直接打开还是做页面302重定向时候，必须带此参数
forcePopup	否	强制此次授权需要用户弹窗确认；默认为false；需要注意的是，若用户命中了特殊场景下的静默授权逻辑，则此参数不生效
forceSnapShot	否	强制此次授权进入快照页；默认为false；需要注意的是，若本次登录命中了近期登录过免授权逻辑逻辑或特殊场景下的静默授权逻辑，则此参数不生效

用户同意授权后

如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。

code说明：

code作为换取access_token的票据，每次用户授权带上的 code 将不一样，code只能使用一次，5分钟未被使用自动过期。

第二步：通过 code 换取网页授权access_token和openid

把code传给后端获取openid即可，snsapi_base式的网页授权流程即到此为止。

第四步：拉取用户信息(需 scope 为 snsapi_userinfo)

如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和 openid 拉取用户信息了。

请求方法

http：GET（请使用 https 协议）：

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

参数	描述
access_token	网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
openid	用户的唯一标识
lang	返回国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语

前端如何调用微信授权登录相关推荐

前端实现微信授权登录
PC网页微信授权登录一:网页外链跳转的方式 01.请求后台的接口,会返回一个微信扫码的界面地址,使用js跳转过去即可 wxlogin () {User.wxlogins().then(res =&g ...
ios微信登录不上服务器,iOS微信授权登录
首先需要确保你的App应用在微信开发平台上注册创建并获得对应的接口,对应登录.支付等功能还涉及付费,具体申请流程就不再这里说了.到开放平台->管理中心->移动应用->查看应用,确认你 ...
ThinkPHP3.2.3 实现微信小程序微信授权登录
网上找了很多教程都不好使,最后自己又研究了一番,终于成功了一.总体设计小程序登录流程:客户端通过调用wx.login(),获取登录凭证(code),将此code发往服务器,服务器通过调用 auth ...
springboot微信授权登录
水平有限!实现方法直接找的网上的以为大神所编写的api来实现,这里主要是记录一下自己实现的过程.具体方法请参考网址:https://github.com/liyiorg/weixin-popular, ...
硅谷课堂 12_公众号消息和微信授权登录
硅谷课堂第十二天-公众号消息和微信授权登录文章目录硅谷课堂第十二天-公众号消息和微信授权登录一.公众号普通消息 1.实现目标 2.消息接入 2.1.公众号服务器配置 2.2.验证来自微信服务器消 ...
H5 微信授权登录功能实现
背景最近几周面试复习以前知识库,刚好博客从国外迁移到国内CSND,同步坐下笔记,梳理之前开发H5 微信授权登录功能获取用户信息数据. H5页面微信授权登录,使用微信官方JSSDK,微信网页授权较为复 ...
微信授权登录问题【公众号登录、PC扫描登录】
微信授权登录问题微信的授权登录比较多,主要分两大类,一类是微信客户端的公众号网站授权登录微信公众号网页授权:第二种是网站或者android.ios的授权登录网站应用微信扫描授权; 具体的andr ...
微信授权登录-微信公众号和PC端网站
一.微信公众号授权登录--微信公众平台微信授权登录,并调用后台接口,获取用户信息 1.网页授权回调域名首先要在公众平台官网中的"开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授 ...
VUE 实现公众号网页微信授权登录
这里不做过多的解释,具体了解见官网文档. 网页授权官方文档需要准备工作: 1.微信开发者工具 2.公众号添加开发者权限以及本地IP白名单 3.公众号唯一标识:appID 4.公众号配置网页授权域名 ...

前端如何调用微信授权登录