网站授权微信登录01--PC端

小麦先森

已于 2024-05-13 13:22:53 修改

阅读量536

点赞数 7

分类专栏：微信平台开发文章标签：微信

于 2024-05-11 13:46:50 首次发布

本文链接：https://blog.csdn.net/weixin_39039342/article/details/138711193

版权

微信平台开发专栏收录该内容

1 篇文章 1 订阅

订阅专栏

## 前言

最近整了个AI助手网站，手机号注册登录时需要填手机号验证码什么的有点麻烦，于是考虑加个微信授权登录。PC端这里实现的效果是点击“微信登录”按钮，然后跳转扫码授权页面，打开手机微信扫码后自动登录网站。开发过程中踩了一些坑这里简单记录下：

1.准备工作

1.1 网站域名

需要有个外网可访问的已备案域名，在微信开放平台申请创建网站应用时使用。

1.2 微信开放平台

需要在微信开放平台注册账号，然后在管理中心-网站应用页面创建网站应用，这里需要填写自己网站的相关信息发起申请，一般1天左右会出结果是否通过。通过之后拿到AppID --前端跳转微信授权时用。

开放平台地址：微信开放平台

2.授权授权登录开发

2.1 前端开发

2.1.1 发起授权登录跳转至扫码页面

微信登录按钮点击事件：

//微信登录
const wxLogin = function () {
  let protocol = window.location.protocol;
  let host = window.location.host;
  let redirect_uri = protocol + '//' + host + '/login'; //扫码后的回调地址
      let appId = 'xxxxx'; //开放平台AppID
    let wxUrlStart = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appId + '&redirect_uri=';
    let wxUrlEnd = '&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect';
    let allUrl = wxUrlStart + encodeURIComponent(redirect_uri) + wxUrlEnd;
    window.location.replace(allUrl);
}

2.1.2 扫码成功后回调处理

扫码成功后会自动跳转至自定义的回调地址redirect_uri，并带上开放平台返回的code，拿到这个code去后台查询用户信息进行后续自动注册登录操作。

//获取微信授权重定向后的code
  let code = getUrlParam('code');
  if (code) {
    //微信授权自动注册登录
       httpPost('/api/user/wxLogin', {code: code}).then((res) => {
      setUserToken(res.data)
      router.push('/chat')
   }).catch((e) => {
      ElMessage.error('登录失败，' + e.message)
    })
  } 

//页面重定向获取URL中参数值
const getUrlParam = function(queryName) {
    const queryString = window.location.search;
    const params = new URLSearchParams(queryString);
    const value = params.get(queryName);
    return value ? decodeURIComponent(value) : null;
}