此文章是指类网站手级微信扫描二维码微信授权登录,非手机端app微信跳转授权,流程bcd部分不需要前后端开发
流程概览:
1.在登录界面前端页面内设置: 一个按钮(微信登录),并对应一个跳转链接
2.用户点击微信登录按钮,浏览器访问此跳转链接A并返回QR二维码
3.用户扫描二维码(无论是同意或者拒绝授权)
4.微信会控制浏览器重定向访问 跳转链接A内部重定向的uri(adwetec.com/oauth/api),并且附加参数code和state
5.重定向的uri(致维服务器接口)接收到get请求后拿到code就证明授权成功,
并可以用code和Appid,Appsecret调用接口得到access_token和open_id
6.拿到access_token和open_id后可以访问接口获得微信用户信息
前端: 设置微信登录按钮和跳转链接
后端: 设置重定向后的uri路由接口,并且分析注册登录逻辑实现用户信息入库
仔细流程:
1.在登录界面前端页面内设置: 一个按钮(微信登录),
并对应一个跳转链接A(链接内部参数: 重定向uri: adwetec.com/oauth/api, Appid等等)
跳转链接A解码后:https://open.weixin.qq.com/connect/qrconnect?appid=wxe9199d568fe57fdd&client_id=wxe9199d568fe57fdd&redirect_uri=http://www.jianshu.com/users/auth/wechat/callback&response_type=code&scope=snsapi_login&state=%7B%7D
其中对应参数是:
Appid是创建微信第三方开发平台后给予的,还有AppSecret
微信开发平台:https://open.weixin.qq.com/
redirect_uri: 是用户扫描完二维码登陆之后微信控制浏览器重定向的url地址(接口)
response_type是code固定的
scope参数snsapi_login是登录选项,同时还有微信公众号开发对应其它域名
2.用户点击微信登录按钮,浏览器访问此跳转链接A并返回QR二维码
3.用户扫描二维码(无论是同意或者拒绝授权)
4.微信会控制浏览器重定向访问 跳转链接A内部重定向的uri(adwetec.com/oauth/api),
并且附加参数code和state(拒绝授权的话会没有code参数)
5.致维服务器接口接收到get请求后拿到code就证明授权成功,并可以用code和Appid,Appsecret调用接口得到access_token和open_id
此接口是:https://api.weixin.qq.com/sns/oauth2/access_tokenappid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
6.拿到access_token和open_id后可以访问接口获得微信用户信息
此接口是:https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID