微信公众号开发-（微信授权登录）

Mannix...

已于 2024-09-30 14:12:53 修改

阅读量1.2k

点赞数 8

分类专栏：微信公众号H5 文章标签：前端微信

于 2024-09-30 10:01:30 首次发布

本文链接：https://blog.csdn.net/weixin_44827945/article/details/141716586

版权

微信公众号H5 专栏收录该内容

1 篇文章

订阅专栏

一、微信授权登录

1.公众平台配置

1.1 公众号域名与安全接口配置

1.1.1登录公众号号开发平台（官网地址：https://mp.weixin.qq.com/）
1.1.2设置与开发 – 公众号设置 – 功能设置 – 设置JS接口安全域名与网页授权域名
JS接口安全域名就是服务器接口地址的域名
网页授权域名就是线上登录网页的域名地址
在这里插入图片描述
1.1.3 将文件下载放置到配置域名根目录下，例如：
https://XXX.XXXXX.com/MP_verify_SpsPsy93iWScIge8.txt

1.2公众号设置IP白名单

1.2.1设置与开发 – 公众号设置 – 基本配置 – IP白名单
在这里插入图片描述

2 项目文件配置

2.1. 配置appId

2.1.1 查看公众号appId
设置与开发 – 公众号设置 – 基本配置 – 开发者ID(AppID)
在这里插入图片描述
2.1.2 项目文件配置AppID
2.1.3 在src/config/index.js 文件将生产环境接口地址配置到对应的baseUrl、fileUrl、signalRUrl

2.1.4 登录
在进入H5页面时唤起授权，我这里的业务需求是登录成功后唤起用户授权，获取用户定位；我的appid和重定向路由都写在配置文件中，然后导入，授权成功后会跳转到重定向的地址

redirect_uri：重定向的地址需要转成urlEncode编码，可以通过在线转码工具转码http://www.jsons.cn/urlencode/

onLoad(async (options) => {
   window.location.href =
      "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
      appId +
      "&redirect_uri=" +
     redirect_uri +
      "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
});