admin管理员组文章数量:1532656
❤️最细微信小程序版本上传、提交审核、发布【建议收藏】❤️
❤️2021直击大厂前端开发岗位面试题❤️
❤️效果图如下,如有需要请自取修改【建议收藏】!❤️
❤️微信小程序的灰度发布❤️
web网页端的登录方式一般有账号密码登录、手机验证码登录,还有就是第三方账号登录(微信、QQ、微博、百度账号等等),那么这时候问题就来了,前端一般需要做啥操作呢,才能实现登录呢?
首先会确定要用哪种第三方账号登录,因为每家可能SDK都不一样,有区别的。下面我们以 iconfont 的第三方授权登录举例。
🌟如图1:我选择微博是因为微博的扫码授权登录的做法是最多的,github账号密码授权登录的比较少(有机会再说)。
🌟 图2 进入扫码窗口,咱们检查前端是如何工作的
扫码前,前端需要依次调取两个接口,先调取后端给的二维码图片生成接口,其次是需要前端轮询获取信息的接口:
🏆1.二维码图片接口:
地址:https://api.weibo/oauth2/qrcode_authorize/generate?client_id=1283124999&redirect_uri=https%3A%2F%2Fwww.iconfont%2Fapi%2Flogin%2Fweibo%2Fcallback&scope=users_show&response_type=code&state=plus-login&__r
参数:
client_id: 1283124999
redirect_uri: https://www.iconfont/api/login/weibo/callback
scope: users_show
response_type: code
state: plus-login
__rnd: 1631155391084
返回:
{
url: "https://api.weibo/oauth2/qrcode_authorize/show?vcode=78ca9ea56bea67a5a72cab5bcf0c9360&qr_url=https%3A%2F%2Fopen.weibo%2Foauth2%2Fqrcode_authorize%3Fclient_id%3D1283124999%26redirect_uri%3Dhttps%253A%252F%252Fwww.iconfont%252Fapi%252Flogin%252Fweibo%252Fcallback%26scope%3Dusers_show%26response_type%3Dcode%26state%3Dplus-login%26vcode%3D78ca9ea56bea67a5a72cab5bcf0c9360", vcode: "78ca9ea56bea67a5a72cab5bcf0c9360"
}
url就是二维码图片的地址,vcode可能就是类似于code那种,你需要拿vcode去调取轮询接口获取最新的扫码状态。
🏆2.轮询接口:
地址:https://api.weibo/oauth2/qrcode_authorize/query?vcode=78ca9ea56bea67a5a72cab5bcf0c9360&__rnd=1631155394210
参数:
vcode:78ca9ea56bea67a5a72cab5bcf0c9360
__rnd:1631155601209
返回:
(1)一直不扫码:返回一个状态值告诉你未扫码
{"status":"1"}
🌟图3
可以看到基本上两三秒轮询一次,但是这样会带来一个问题就是前端需要释放内存,到了一定的时间清除定时器二维码失效,重定向页面路径,这里是直接跳转到微博的PC登录页面。
🌟图4
(2)客户扫码了,也成功了
返回了用户信息,然后重定向到登录后的首页就行
🌟图5
授权登录的流程大致一样,略微区别,我这里只是举例讲一个示例流程,具体的你需要去看对应的SDK文档,而且基本都是后端要忙,只需要给前端是接口和参数就行了。
版权声明:本文标题:web网页第三方账号授权登录 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1725630061a1033651.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论