微信公众号授权H5页面

曾经终败给现在 2021-09-03 03:00 861阅读 0赞

## 一、为何通过微信公众号授权 ##

官方:

如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，
    来获取用户基本信息，进而实现业务逻辑。

项目：

使用 uniapp 开发的 H5 项目，需要通过公众号授权后，才能获取用户信息。
    PS： 如果用 uniapp 开发小程序，可以走小程序的授权，这次用的 H5

## 二、授权大致步骤 ##

1、[网页授权回调域名][Link 1]

在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的
    “开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，
    修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，
    因此请勿加 http:// 等协议头；

2、授权回调页面域名  
详细可看 [微信公众平台授权流程分析][Link 2]

1 和 2 都是在微信公众号需要做的配置

3、具体项目怎么使用，废话不多话，直接上代码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]

wechatAppId： 公众号的 appid，即唯一标识
    state：重定向后会带上 state 参数，可以不带 state 参数
    redictPath: 授权后重定向的回调链接地址

const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${ wechatAppId}&redirect_uri=${ redictPath}&response_type=code&scope=snsapi_userinfo&state=${ state}#wechat_redirect`

最后 把 authUrl 赋值给 window.location.href，就可以自动跳转到重定向的链接地址
    地址里面就有 code 这个参数，获取 code 值后，把 code 传给后台
    后台返回 openId 作为前后台联调的重要参数

## 三、遇见的问题 ##

**后台配置不一致**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]

1、需要在微信公众号上配置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70_pic_center]  
2、如果这个也配置了，还是有异常，有可能是前端路径带有 \# 造成的。  
redirect\_uri里面带有\#也会造成这个原因  
需要encodeURI:

const messageBoardUrl = isDev ? testFrontUrl + '/#/pages/messageBoard/Index' : prodFrontUrl + '/#/pages/messageBoard/Index'
    const redictPath = encodeURIComponent(messageBoardUrl)

3、最后一次出现这种情况

刚开始用的是公司的公众号，后来换成客户的公众号了，appId 没有变更，导致又出现这种情况

[Link 1]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
[Link 2]: https://blog.csdn.net/u012345683/article/details/108367400
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]: /images/20210804/1755026753fb435ba83a979f10513646.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]: /images/20210804/eac0775571f74a848f7b9ff8b91a9aa9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210804/d7b3af6270a3413380609026fd367a34.png