web网页第三方账号授权登录
Posted 尔嵘
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web网页第三方账号授权登录相关的知识,希望对你有一定的参考价值。
❤️最细微信小程序版本上传、提交审核、发布【建议收藏】❤️
❤️2021直击大厂前端开发岗位面试题❤️
❤️效果图如下,如有需要请自取修改【建议收藏】!❤️
❤️微信小程序的灰度发布❤️
web网页端的登录方式一般有账号密码登录、手机验证码登录,还有就是第三方账号登录(微信、QQ、微博、百度账号等等),那么这时候问题就来了,前端一般需要做啥操作呢,才能实现登录呢?
首先会确定要用哪种第三方账号登录,因为每家可能SDK都不一样,有区别的。下面我们以 iconfont 的第三方授权登录举例。
🌟如图1:我选择微博是因为微博的扫码授权登录的做法是最多的,github账号密码授权登录的比较少(有机会再说)。
🌟 图2 进入扫码窗口,咱们检查前端是如何工作的
扫码前,前端需要依次调取两个接口,先调取后端给的二维码图片生成接口,其次是需要前端轮询获取信息的接口:
🏆1.二维码图片接口:
参数:
client_id: 1283124999
redirect_uri: https://www.iconfont.cn/api/login/weibo/callback
scope: users_show
response_type: code
state: plus-login
__rnd: 1631155391084
返回:
{
url: "https://api.weibo.com/oauth2/qrcode_authorize/show?vcode=78ca9ea56bea67a5a72cab5bcf0c9360&qr_url=https%3A%2F%2Fopen.weibo.cn%2Foauth2%2Fqrcode_authorize%3Fclient_id%3D1283124999%26redirect_uri%3Dhttps%253A%252F%252Fwww.iconfont.cn%252Fapi%252Flogin%252Fweibo%252Fcallback%26scope%3Dusers_show%26response_type%3Dcode%26state%3Dplus-login%26vcode%3D78ca9ea56bea67a5a72cab5bcf0c9360", vcode: "78ca9ea56bea67a5a72cab5bcf0c9360"
}
url就是二维码图片的地址,vcode可能就是类似于code那种,你需要拿vcode去调取轮询接口获取最新的扫码状态。
🏆2.轮询接口:
参数:
vcode:78ca9ea56bea67a5a72cab5bcf0c9360
__rnd:1631155601209
返回:
(1)一直不扫码:返回一个状态值告诉你未扫码
{"status":"1"}
🌟图3
可以看到基本上两三秒轮询一次,但是这样会带来一个问题就是前端需要释放内存,到了一定的时间清除定时器二维码失效,重定向页面路径,这里是直接跳转到微博的PC登录页面。
🌟图4
(2)客户扫码了,也成功了
返回了用户信息,然后重定向到登录后的首页就行
🌟图5
授权登录的流程大致一样,略微区别,我这里只是举例讲一个示例流程,具体的你需要去看对应的SDK文档,而且基本都是后端要忙,只需要给前端是接口和参数就行了。
以上是关于web网页第三方账号授权登录的主要内容,如果未能解决你的问题,请参考以下文章