wx-微信公众号-静默登陆授权

介绍

功能: 支持微信/支付宝网页静默授权
为什么需要线上html
因为在开发环境的时候,是本地服务http://localhost:8080,但是微信需要JS接口安全域名.

配置信息

  1. 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“网页授权域名”
  2. 然后把 html 文件放到服务器上, 安全域名指向这个html
  3. 在 vue 环境配置文件(.env.development、.env.production),中配置以下参数
    1. VUE_APP_WX_GET_CODE_DOMAIN = ‘第二步的html文件的线上地址’
    2. VUE_APP_APP_ID = ‘微信/支付宝的appid’
  4. 使用方法:
    1. 直接调取 util 文件中的 getAuthorCode 方法
    2. 调取完后,就可以在地址栏中,看到那个 code 了 (获取code的时候,可以使用这个方法 onGetRequest().code )

代码信息

授权文件


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>授权code</title>
</head>
<body>
  
</body>
</html>
<script>
(function () {
     
     
  var tools = {
     
     
    getParamer: function (key) {
     
     
      var map = this.getSearch();
      return map[key];
    },
    getSearch: function () {
     
     
      var search = window.location.search;
      return this.getSearchByStr(search);
    },
    getSearchByStr: function 
### 实现微信公众号前端页面获取用户手机号 为了实现微信公众号的前端页面中获取用户的手机号功能,通常采用以下方法: #### 1. 获取 `code` 参数 当用户点击同意授权按钮后,会跳转至指定 URL 并携带上 `code` 参数。此过程依赖于微信公众平台提供的 OAuth2 授权机制[^2]。 ```html <a 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">点击登录</a> ``` 其中: - `APPID`: 微信公众账号或小程序的唯一标识符; - `REDIRECT_URI`: 用户授权完成后重定向地址; - `SCOPE`: 应用授权作用域,此处为 `snsapi_userinfo` 表示静默授权并获取基本信息; - `STATE`: 开发者可以填写 a-zA-Z0-9 的参数值,最多 128 字节; #### 2. 使用 `code` 请求 `access_token` 在服务器端接收到带有 `code` 参数的回调请求之后,需向微信 API 发送 POST 请求以换取 `access_token` 和 `openid`[^3]。 ```python import requests def get_access_token(appid, secret, code): url = f"https://api.weixin.qq.com/sns/oauth2/access_token?appid={appid}&secret={secret}&code={code}&grant_type=authorization_code" response = requests.get(url).json() access_token = response[&#39;access_token&#39;] openid = response[&#39;openid&#39;] return access_token, openid ``` #### 3. 调用微信 JSAPI 验证签名 完成上述两步操作后,在前端页面加载时调用 wx.config() 方法配置当前网页的安全域名及其他必要信息,并验证成功后再执行后续逻辑[^1]。 ```javascript wx.config({ debug: false, appId: &#39;your-app-id&#39;, timestamp: &#39;{timestamp}&#39;, // 时间戳 nonceStr: &#39;{noncestr}&#39;, // 随机字符串 signature: &#39;{signature}&#39;, // 签名 jsApiList: [&#39;getPhoneNumber&#39;] // 所有要调用的 API 列表 }); ``` #### 4. 提交加密数据给服务端解密 最后一步是在获得用户同意的情况下触发 `button.open-type=getPhoneNumber` 组件事件处理函数,收集返回的数据包并通过 HTTPS 协议提交给自己的服务器进行 AES 解密得到明文电话号码。 ```xml <view class="container"> <button open-type="getPhoneNumber" bindgetphonenumber="handleGetPhoneNumber">获取手机号码</button> </view> ``` ```javascript Page({ handleGetPhoneNumber(e) { const encryptedData = e.detail.encryptedData; const iv = e.detail.iv; // 将 encryptedData 和 iv 发送到服务器端进行解密... } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值