微信扫码授权登录的介绍

简介

为了简化用户登录流程，在微信 3.9.11 for Windows及以上版本 与 微信 4.0.0 for Mac及以上版本，用户可使用网站应用快速登录功能。

当网站应用发起微信登录请求时，如果用户此时在 Windows / Mac 设备已经登录了符合要求的微信客户端，且处于非锁定状态，会优先提示用户使用当前微信客户端已登录的账号进行快速登录。

快速登录无需扫码，可直接在 Windows / Mac 设备上进行确认。用户仍可切换其他微信账号或二维码登录。

准备工作

网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。 在进行微信OAuth2.0授权登录接入之前，在微信开放平台注册开发者账号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。

授权流程说明

微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站，在微信用户授权登录已接入微信OAuth2.0的第三方应用后，第三方可以获取到用户的接口调用凭证（access_token），通过access_token可以进行微信开放平台授权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。 微信OAuth2.0授权登录目前支持authorization_code模式，适用于拥有server端的应用授权。该模式整体流程为：

1. 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；
2. 通过code参数加上AppID和AppSecret等，通过API换取access_token；
3. 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

实现步骤：

一、准备账号

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

2.创建应用

进入下面的界面后填写自己网站的信息

 

在填写网站信息时，会填一个网站的授权回调域，也就是网站的地址。

申请成功后就可以在管理中心/应用详情中看到填写的网站信息，创建成功后，微信登录权限默认是没有获取的。

3、获取AppID和AppSecret 

在应用信息的上面拿的，后面需要

二、实现项目

实现登录

请求CODE

第三方使用网站应用授权登录前请注意已获取相应网页授权作用域（scope=snsapi_login），则可以通过在PC端打开以下链接： https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”，请检查参数是否填写错误，如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。

返回说明

用户允许授权后，将会重定向到redirect_uri的网址上，并且带上code和state参数

redirect_uri?code=CODE&state=STATE

若用户禁止授权，则不会发生重定向。

登录一号店网站应用 https://test.yhd.com/wechat/login.do 打开后，一号店会生成state参数，跳转到 https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect 微信用户使用微信扫描二维码并且确认登录后，PC端会跳转到 https://test.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a40sssssxxxxx6624a415e

将微信登录二维码内嵌到自己页面

为了满足网站更定制化的需求，我们还提供了第二种获取code的方式，支持网站将微信登录二维码内嵌到自己页面中，用户使用微信扫码授权后通过JS将code返回给网站。 JS微信登录主要用途：网站希望用户在网站内就能完成登录，无需跳转到微信域下登录后再返回，提升微信登录的流畅性与成功率。 网站内嵌二维码微信登录JS实现办法：

步骤1：在页面中先引入如下JS文件（支持https）

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

 步骤2：在需要使用微信登录的地方实例以下JS对象：

 

主要参数介绍 

其中的id就是页面中显示二维码的容器id 

 其中的score，如果只是网页应用仅填snsapi_login即可

redirect_uri，就是扫码成功后要跳转页面的地址

这样就可以完成微信的扫码登录了。

获取用户信息

头部导航栏的请求参数中的code， 我们根据code后面的值再加上AppSecret，就可以获取到当前用户的微信信息。

通过code获取access_token，请求方式GET

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

返回说明

正确的返回：

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

错误返回样例：

{"errcode":40029,"errmsg":"invalid code"}

获取用户个人信息（UnionID机制）

 请求说明

http请求方式: GET
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

 

• OpenID：
  • OpenID 是微信用户在某个特定公众号或小程序下的唯一标识。它用于区分不同用户在同一个公众号或小程序中的身份。例如，当用户使用微信登录某个小程序 A 时，小程序 A 获取到的 OpenID 就可以用来识别这个用户在小程序 A 中的身份，用于后续的用户相关操作，如记录用户的行为、偏好等。每个公众号或小程序都有自己独立的 OpenID 体系，这意味着同一个用户在不同的公众号或小程序中会有不同的 OpenID。
• UnionID：
  • UnionID 是在微信开放平台账号体系下，同一用户在同主体的多个公众号、小程序、移动应用之间的统一标识。如果一个企业有多个公众号、小程序或者移动应用，并且这些应用都绑定在同一个微信开放平台账号下，那么用户在这些应用中的 UnionID 是相同的。UnionID 主要用于实现跨应用的用户身份统一，方便企业对用户进行统一管理，比如实现用户在不同应用间的无缝切换，或者进行跨应用的联合营销等操作。

接口说明

• OpenID 应用场景：
  • 个性化服务：在单个小程序内部，根据 OpenID 来为用户提供个性化的服务。比如，一个电商小程序可以根据用户的 OpenID 记录用户的浏览历史、购物车信息等，当用户再次打开小程序时，通过 OpenID 识别用户身份，为用户展示个性化的商品推荐。
  • 用户权限管理：在一个企业内部的员工培训小程序中，通过 OpenID 来区分不同的员工，为不同的员工设置不同的权限，比如管理员可以查看所有培训资料和员工学习进度，普通员工只能查看自己的学习资料和进度。
• UnionID 应用场景：
  • 跨应用用户识别：一个企业有一个品牌公众号用于品牌推广，还有一个电商小程序用于产品销售。当用户在公众号中浏览了产品信息，然后通过 UnionID 可以在小程序中识别出是同一个用户，从而可以在小程序中为用户展示之前在公众号中浏览过的产品详情，实现跨应用的用户体验连贯性。
  • 用户数据整合与分析：企业可以利用 UnionID 将用户在不同应用（如多个小程序、公众号）中的数据进行整合。例如，通过分析用户在不同应用中的行为数据（浏览、购买、分享等），可以更全面地了解用户画像，为精准营销提供数据支持，比如针对在公众号中经常阅读技术文章并且在电商小程序中有购买电子产品行为的用户，推送相关的电子产品技术升级资讯和促销活动。

此接口用于获取用户个人信息。开发者可通过OpenID来获取用户基本信息。特别需要注意的是，如果开发者拥有多个移动应用、网站应用和公众账号，可通过获取用户基本信息中的unionid来区分用户的唯一性，因为只要是同一个微信开放平台账号下的移动应用、网站应用和公众账号，用户的unionid是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。请注意，在用户修改微信头像后，旧的微信头像URL将会失效，因此开发者应该自己在获取用户信息后，将头像图片保存下来，避免微信头像URL失效后的异常情况。

根据相关法律法规，为进一步规范开发者调用用户信息相关接口或功能，保障用户合法权益，Open平台授权接口将不再返回用户性别及地区信息，能力调整已于 2021 年 10 月 20 日 24 时生效。详情点击查看原公告《微信公众平台用户信息相关接口调整公告》。

存入数据库

用户信息实体类

session储存用户信息 

存储自己数据库对应的用户id和用户名称 

扩展

刷新或续期access_token使用

接口说明

access_token是调用授权关系接口的调用凭证，由于access_token有效期（目前为2个小时）较短，当access_token超时后，可以使用refresh_token进行刷新，access_token刷新结果有两种：

1. 若access_token已超时，那么进行refresh_token会获取一个新的access_token，新的超时时间；

2. 若access_token未超时，那么进行refresh_token不会改变access_token，但超时时间会刷新，相当于续期access_token。

refresh_token 拥有较长的有效期（30 天）且无法续期，当 refresh_token 失效的后，需要用户重新授权后才可以继续获取用户头像昵称。

请求方法

使用/sns/oauth2/access_token接口获取到的refresh_token进行以下接口调用：

http请求方式: GET
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

参数说明

参数	是否必须	说明
appid	是	应用唯一标识
grant_type	是	填refresh_token
refresh_token	是	填写通过access_token获取到的refresh_token参数

返回说明

正确的返回：

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

参数	说明
access_token	接口调用凭证
expires_in	access_token接口调用凭证超时时间，单位（秒）
refresh_token	用户刷新access_token
openid	授权用户唯一标识
scope	用户授权的作用域，使用逗号（,）分隔

错误返回样例：

{
"errcode":40030,"errmsg":"invalid refresh_token"
}

接口说明

检验授权凭证（access_token）是否有效

请求说明

http请求方式: GET
https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID

参数说明

参数	是否必须	说明
access_token	是	调用接口凭证
openid	是	普通用户标识，对该公众账号唯一

返回说明

正确的Json返回结果：

{
"errcode":0,"errmsg":"ok"
}

错误的Json返回示例:

{
"errcode":40003,"errmsg":"invalid openid"
}