web端接入第三方微信登录

最新推荐文章于 2025-04-22 21:22:10 发布

winty~~

最新推荐文章于 2025-04-22 21:22:10 发布

阅读量1.7k

点赞数 1

文章标签：前端微信

原文链接：https://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng==&mid=2649864402&idx=2&sn=58c2dee7eb51be796dcfe6f43206d849&chksm=f0366e2f3daca17e3253bcf34a4998be09e5b2af866adbcdf680f91846138ecf7871db79a6ea&scene=126&sessionid=0

版权

点击上方前端Q，关注公众号

回复加群，加入前端Q技术交流群

一、微信开放平台申请网站应用

1、微信开放平台^[1]中注册开发者账号，在管理中心选择网站应用，创建相关应用。按照要求准备好资料，提交审核即可，一般2天左右就会有审核结果。

注意：

基本信息-应用官网：填写公司官网即可；
开发信息-授权回调域：只能填写一个回调域，无需带上http或者https，这个配置十分重要，用户扫码成功后，会跳转到这个回调域；

2、应用审核通过后，会显示相关详情信息，在后面的接入流程中会使用；

注意：

AppSecret信息不是明文的，点击重置进行获取，需妥善保存，一般不要放在前端项目中。
微信登录的接口是已获得的状态，说明开发者可以使用登录相关接口了；
开发信息-授权回调域可以直接进行修改，无需审核；

二、微信登录对接

开放平台-微信登录功能^[2]有相关的文档说明，详细地介绍了如何接入微信登录，以下为相关拆解步骤。

整体流程：

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

获取access_token时序图：

1、微信二维码链接

配置链接参数，生成完整的微信二维码链接；

https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect](https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

5.png

参数说明：

appid：必填，应用唯一标识；

redirect_uri：必填，请使用urlEncode^[3]对链接进行处理，建议对回调域进行编码处理；

response_type：必填，值为code；

scope：必填，网页应用目前仅填写snsapi_login；

state：选填，用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验；

lang：选填，界面语言，支持cn（中文简体）与en（英文），默认为cn；

若提示“该链接无法访问”，请检查参数是否填写错误；

redirect_uri 参数错误：

6.png

原因分析：

回调地址不能填入端口号+名称，eg: open.weixin.qq.com:8080/index；^[4]
回调地址只能写该域名下的地址；
回调地址必须是全路径，最好进行转码操作；

2、获取code

用户扫码、授权后，会将页面重定向到回调域（redirect_uri），并且带上code和state参数:redirect_uri?code=CODE&state=STATE，比如：

https://open.weixin.qq.com?code=CODE&state=STATE

移动端微信扫码成功后，会显示授权页面；

7.png

授权成功后，微信会提示登录通知；

8.png

注意：若用户禁止授权，则不会发生重定向，可在当前页面重新获取微信二维码；

3、通过code获取access_token、openid、unionid

该接口通过code等相关参数可获取access_token，为了安全考虑，开发者请勿将access_token返回给前端，需要开发者保存在后台，访问微信api的请求由后台发起；所以该接口是提供给后端调用的，前端调用无效。

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

参数说明：

appid：必填，应用唯一标识；

secret：必填，在微信开放平台提交应用审核通过后获得；

code：必填，上面获取的code参数；

grant_type：必填，值为authorization_code；

返回说明：

access_token：接口调用凭证

expires_in：access_token接口调用凭证超时时间，单位（秒）

refresh_token：用户刷新access_token

openid：授权用户唯一标识

scope：用户授权的作用域，使用逗号（,）分隔

unionid：当且仅当该网站应用已获得该用户的userinfo授权时，才会出现该字段。

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