微信公众号开发（一）微信网页授权登录

最新推荐文章于 2024-03-15 10:56:49 发布

图图不君子

最新推荐文章于 2024-03-15 10:56:49 发布

阅读量1w

点赞数 3

文章标签：微信公众号授权登录 js-sdk

本文链接：https://blog.csdn.net/iccyuer/article/details/90058467

版权

微信网页授权登录

前期准备
授权登录
获取微信数据
处理授权拒绝

前期准备

1.微信公众号开发，首先要搞一个公众号，开发阶段可以申请一个公众平台测试账号。
(进入到微信公众公众平台，找到开发者工具，点开公众平台测试账号)
在这里插入图片描述

2.进入测试平台账号后台，找到体验接口权限表，配置授权回调页面域名。
(微信授权登录成功后会回调一个页面，此页面必须在此域名下)
3.记录下测试平台账号的appID和appsecret，后续食用。

授权登录

微信公众平台技术文档: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

引导用户进入授权页面同意授权

let appid = '你的测试平台账号的appid'
let redirect_uri = window.location.href  // 授权登录成功回调的地址，一般为当前页
// 授权操作是直接访问腾讯开放平台的一个授权地址，授权成功后会回调
window.location = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
          appid +
          '&redirect_uri=' +
          redirect_uri +
          '&response_type=code&scope=snsapi_userinfo&state=abcdefghigklmnopqrstuvwxyz#wechat_redirect' //引导用户授权

参数解析：
appid 为公众号的appId，
redirect_uri 为授权成功的回调页，
response_type 返回类型固定code,
scope 为授权作用域，可选值1.snsapi_base静默授权，无授权页面，只可以获取openid。
可选值2.snsapi_userinfo感知授权，弹出授权页面，需用户同意，可获取openid、昵称、性别、头像等微等用户数据(一般选择次作用域)

Tips:
1.两种授权方式，在测试平台环境下，是需要先关注测试公众号的，正式公众号环境不需要；
2.如果同一用户先进行过snsapi_userinfo授权，后又采取snsapi_base授权，会出现也可以拿到微信用户数据的情况；
3.如果用户关注了公众号，采取snsapi_base授权，也会出现拿到微信用户数据的情况。
(本人开发过程中遇到过2和3情况，为不确定性因素，开发者根据使用场景选择一个授权作用域，尽量不要混用)

获取code参数
在授权成功后，页面将跳转至 redirect_uri/?code=CODE&state=STATE
此时获取到了code参数，code参数就是之后获取微信信息的凭证。
获取微信用户数据
通过code获取到微信用户信息后，结合自身的业务逻辑，完成授权登录的功能。

通过code获取微信用户信息的逻辑需由服务器完成，不建议前端实现。
实现逻辑如下 ⬇️

获取微信数据

1.通过code获取openid及access_token
访问如下接口：
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
2.拉取用户信息(需scope为 snsapi_userinfo)
访问如下接口：
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

此外微信还提供了刷新access_token的接口。
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

处理授权拒绝

以上授权的流程：
业务系统–>微信oauth–>用户授权带上code跳转–>业务系统–>解析code–>通过code获取accesstoken–>通过accesstoken获取用户信息。
以上微信oauth排在了第二步，用户正常允许授权登录则可以跑通流程，如果用户拒绝了，我们的业务系统就会不能正常执行流程。
如果业务允许用户不同意授权直接退出(关闭微信浏览器)，则可以改变授权流程：
微信oauth–>用户授权带上code跳转–>业务系统–>解析code–>通过code获取accesstoken–>通过accesstoken获取用户信息。
第一步直接访问微信授权，这种情况下如果用户选择了拒绝，则微信机制则关闭浏览器(拒绝了的处理)，如果采取第一种流程，则用户拒绝瞬间的状态我们是无从而知的。