PC端微信扫码授权(前端)指南：解决redirect_uri错误

前端

2023-09-20 16:02:01

PC端微信扫码授权：解决redirect_uri参数错误

在当今数字化的时代，微信已成为我们生活中不可或缺的一部分。无论是在社交联系、信息获取还是商业交易方面，微信都发挥着至关重要的作用。如果你想要将微信授权集成到你的PC端应用程序中，这篇文章将为你提供一份详细的指南。

两种授权方式

在进行PC端微信授权时，你有两种选择：

网页授权： 适用于需要在网页上进行授权的场景。用户点击带有微信授权按钮的链接，即可完成授权。网页授权的redirect_uri应设置为当前页面的URL。
静默授权： 适用于需要在应用程序内部进行授权的场景。无需用户手动点击任何按钮，即可完成授权。静默授权的redirect_uri应设置为应用程序内部的某个页面URL。

redirect_uri参数详解

redirect_uri是一个至关重要的参数，微信扫码授权成功后，微信服务器会将用户重定向到此URL。因此，redirect_uri必须与你在微信开发者平台上设置的授权回调地址一致。如果不一致，就会导致授权失败。

示例代码

以下是两个示例代码，分别演示了网页授权和静默授权的实现方式：

// 网页授权
function webAuth() {
  const redirectUri = window.location.href;
  const url = `https://open.weixin.qq.com/connect/qrconnect?appid=${appId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`;
  window.location.href = url;
}

// 静默授权
function silentAuth() {
  const redirectUri = `${window.location.origin}/callback.html`;
  const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
  window.location.replace(url);
}