PC端微信登录完整流程

功能概述

PC端微信登录是一种快捷、安全的登录方式，通过微信开放平台提供的API接口，用户可以扫描二维码快速登录第三方应用。以下记录了从功能申请到实际开发的完整过程。

---

一、流程概览

完整流程图

以下为PC端微信登录的整体流程示意：
 

二、详细流程步骤

步骤 1：注册微信开放平台并获取基本信息

操作步骤

1. 注册微信开放平台账号

• • 登录 微信开放平台 进行注册。
  • 使用企业主体或个人身份完成认证。

1. 创建应用

• • 选择「网站应用」或「PC端应用」，填写应用基本信息。
  • 提交后等待审核通过。

1. 获取AppID与AppSecret

• • 审核通过后，系统将生成唯一的AppID和AppSecret，用于后续接口调用。

---

步骤 2：生成登录二维码

技术实现

在前端页面上生成微信登录二维码，用户扫码后进入授权流程。

• 接口地址

https://open.weixin.qq.com/connect/qrconnect

• 请求参数

参数名	必填	说明
appid	是	应用唯一标识
redirect_uri	是	授权后回调地址，需URL编码
response_type	是	固定值code
scope	是	应用授权作用域（snsapi_login）
state	否	用于保持请求和回调状态

• 生成二维码的代码示例

const appid = '你的AppID';
const redirect_uri = encodeURIComponent('https://你的回调地址');
const qrUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`;
document.getElementById('qrcode').src = qrUrl;

页面效果

用户扫码后，将进入微信授权页面：

---

步骤 3：用户扫码授权

说明

1. 用户使用微信扫描二维码，进入授权页面。
2. 授权后，微信将重定向到redirect_uri，并携带code和state参数。

• 微信返回的URL格式

https://你的回调地址?code=CODE&state=STATE

---

步骤 4：服务器校验code

操作步骤

服务器接收到code后，调用微信接口获取access_token。

• 接口地址

https://api.weixin.qq.com/sns/oauth2/access_token

• 请求参数

参数名	必填	说明
appid	是	应用唯一标识
secret	是	应用密钥
code	是	用户授权后微信返回的临时凭证
grant_type	是	固定值authorization_code

• 返回结果示例

{
    "access_token": "ACCESS_TOKEN",
    "expires_in": 7200,
    "refresh_token": "REFRESH_TOKEN",
    "openid": "OPENID",
    "scope": "SCOPE"
}

---

步骤 5：获取用户信息

技术实现

使用access_token和openid调用微信接口获取用户基本信息。

• 接口地址

https://api.weixin.qq.com/sns/userinfo

• 请求参数

参数名	必填	说明
access_token	是	接口调用凭证
openid	是	用户唯一标识
lang	否	返回语言，默认zh_CN

• 返回结果示例

{
    "openid": "OPENID",
    "nickname": "用户昵称",
    "sex": 1,
    "province": "用户省份",
    "city": "用户城市",
    "country": "用户国家",
    "headimgurl": "http://example.com/avatar.jpg"
}

---

三、注意事项

1. 二维码的有效期

• • 登录二维码有效期为10分钟，建议在页面显示时定时刷新二维码。

1. 安全性

• • 所有接口调用需使用HTTPS，保护数据传输安全。
  • AppSecret和access_token需妥善保存，防止泄露。

1. 异常处理

• • 处理用户取消授权、二维码超时等场景，提升用户体验。

---

四、总结

通过上述流程，PC端微信登录功能可快速上线。完整流程涵盖了从微信公众平台配置到用户登录成功的每一步，适用于绝大多数PC端应用场景。