微信APP扫码登录目标WEB系统

一、网站应用微信登录:
1、准备工作:申请账号,创建网站应用,最后拿到appId和appSecret。
网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。 
2、授权流程说明
微信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进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。
官方接入文档链接:
https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

二、注意事项
扫码方式:
两种提供给用户扫码的方式:一种是跳转二维码扫描页面,另一种是内嵌式二维码。
说明:
什么是授权临时票据(code)?
答:第三方通过code进行获取access_token的时候需要用到,code的超时时间为10分钟,一个code只能成功换取一次access_token即失效。code的临时性和一次保障了微信授权登录的安全性。
第三方可通过使用https和state参数,进一步加强自身授权登录的安全性。
什么是授权作用域(scope)?
答:授权作用域(scope)代表用户授权给第三方的接口权限,第三方应用需要向微信开放平台申请使用相应scope的权限后,使用文档所述方式让用户进行授权,经过用户授权,获取到相应access_token后方可对接口进行调用。

三、前后端交互流程概述
1、打开登录页面,点击“微信登录”后,请求初始化数据,前端拼接参数请求微信授权登录二维码并展示;
2、用户使用微信扫码,点击“同意”后,微信重定向到redirect_uri的网址对应的页面上,并且带上code和state参数;
3、页面获取code并请求接口获取微信access_token、openid等信息;(此时接口端可以直接拿着access_token和openid去获取微信用户个人信息,如:昵称、头像)
4、页面拿着获取到的openid请求登录接口,接口校验并完成业务处理后返回用户登录令牌token,页面拿着token进行后续处理;

四、接口设计
1、查询微信APP扫码登录指定目标WEB系统的初始化数据(主要是获取appId)
POST /api/xxx/wxAccess/getInitData

2、(引导用户授权后)根据授权临时票据code获取微信用户信息(access_token、openid等)
POST /api/xxx/wxAccess/getWxUserData

--接口2调用微信接口:根据appId、appSecret和code换取用户的接口调用凭证access_token
{
	"access_token": "53_L8Np7_kunQJn7fnDdWnfgSJDXuIJDhAd5Ia26-qv1Db2Drkj7Ly6100Dt-dNm9kyajVH5NlTDNxiv6aV1WSYptmKpr7cyI6BJNdtNNWJUVk",
	"refresh_token": "53_bX-jbN_o1kpmMUR-tqC6zlF0EHOvqUS8XhsbQ76gNTCr4aw79cHUbjUd7tXqVjp1NhFZ7guHcblwsr3ZmSKtc79GErnsUVEfz_6w37EKTxc",
	"unionid": "oAxxx...TWZkHKkSlxxx",
	"openid": "ooWaJ...6xxxCCqENw",
	"scope": "snsapi_login",
	"expires_in": 7200
}
--接口2调用微信接口:根据access_token和openid获取微信用户基础信息
{
	"country": "",
	"unionid": "oAjQ9xxx,,,HKkxxx",
	"province": "",
	"city": "",
	"openid": "ooWxxx...sdTRbPCCxxx",
	"sex": 0,
	"nickname": "九xxx",
	"headimgurl": "https://thirdwx.qloxxx...xxxuDE1h0Ox2YHiaFg/132",
	"language": "",
	"privilege": []
}
3、微信用户登录(客户端带上openid请求,服务端校验通过后,在完成自定义业务处理后,返回用户登录令牌)
POST /api/xxx/wxAccess/userLogin

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值