web端接入第三方微信登录

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

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

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

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

注意:

  • 基本信息-应用官网:填写公司官网即可;

  • 开发信息-授权回调域:只能填写一个回调域,无需带上http或者https,这个配置十分重要,用户扫码成功后,会跳转到这个回调域;

3a7cad431842ac837c3766975d905e9d.jpeg


549e78cda6fb84f2cf8604a0447ab4c6.jpeg


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

注意:

  • AppSecret信息不是明文的,点击重置进行获取,需妥善保存,一般不要放在前端项目中。

  • 微信登录的接口是已获得的状态,说明开发者可以使用登录相关接口了;

  • 开发信息-授权回调域可以直接进行修改,无需审核;234433b8124e3ea59756ea6a9b204684.jpeg

二、微信登录对接

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

整体流程:

  1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;

  2. 通过code参数加上AppID和AppSecret等,通过API换取access_token;

  3. 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。

获取access_token时序图:

e2763794ded5f27605d5eb620183f045.jpeg


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

16bca86cc67e30d1656f48f7d24cae41.jpeg

5.png

参数说明:

appid:必填,应用唯一标识;

redirect_uri:必填,请使用urlEncode[3]对链接进行处理,建议对回调域进行编码处理;

response_type:必填,值为code;

scope:必填,网页应用目前仅填写snsapi_login;

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

lang:选填,界面语言,支持cn(中文简体)与en(英文),默认为cn;

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

redirect_uri 参数错误:

3046123a735059b54a78159d1b286749.jpeg

6.png

原因分析:

  1. 回调地址不能填入端口号+名称,eg: open.weixin.qq.com:8080/index;[4]

  2. 回调地址只能写该域名下的地址;

  3. 回调地址必须是全路径,最好进行转码操作;

2、获取code

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

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

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

92fbe19876ff8ff101480d2464e34bb4.jpeg

7.png

授权成功后,微信会提示登录通知;

1f2a70ee97974100e33ffea3a7e3d28c.jpeg

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"
}

4、通过access_token调用接口

获取access_token后,进行接口调用,有以下前提:

  1. access_token有效且未超时;

  2. 微信用户已授权给第三方应用账号相应接口作用域(scope)。

可通过对应的接口获取登录信息、用户个人信息等。

f36404470cf7d129609497c660e7d665.jpeg


5、前后端对接

完成上面的流程后,后端会获取到用户相关的登录信息、个人信息等,前端可以在上面填入的回调页面中,调用后端的接口获取相关数据,进行相关逻辑处理。

以上就是web端接入第三方微信的流程。

作者:Pikachu_qq

https://juejin.cn/post/7408800639223169078

9d3562950c1792f73bcf8fe448f73103.png

往期推荐

页面跳转如何优雅携带大数据Array或Object

df02fc9ddbdaac3e5c42d08ef9d5a228.png

js如何实现当文本内容过长时,中间显示省略号...,两端正常展示

63de0a9e7892508a5eccb509e8702530.png

为什么我推荐使用智能化 async ?

aacfbb84a1998b0156d891cd612c206a.png


最后

  • 欢迎加我微信,拉你进技术群,长期交流学习...

  • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

272f779b80e01db6e989293aff0b4858.jpeg

b8d587ed1d2e1e7a48e701bd8adb6a85.png

点个在看支持我吧

2f2ba03c33ab621b3ee5031a8028852c.gif

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值