web网页第三方账号授权登录

Posted 2021-09-30 尔嵘

❤️最细微信小程序版本上传、提交审核、发布【建议收藏】❤️

❤️2021直击大厂前端开发岗位面试题❤️

❤️效果图如下，如有需要请自取修改【建议收藏】！❤️

❤️微信小程序的灰度发布❤️

web网页端的登录方式一般有账号密码登录、手机验证码登录，还有就是第三方账号登录（微信、QQ、微博、百度账号等等），那么这时候问题就来了，前端一般需要做啥操作呢，才能实现登录呢？

首先会确定要用哪种第三方账号登录，因为每家可能SDK都不一样，有区别的。下面我们以 iconfont 的第三方授权登录举例。

🌟如图1：我选择微博是因为微博的扫码授权登录的做法是最多的，github账号密码授权登录的比较少（有机会再说）。

 

🌟 图2 进入扫码窗口，咱们检查前端是如何工作的

 

 扫码前，前端需要依次调取两个接口，先调取后端给的二维码图片生成接口，其次是需要前端轮询获取信息的接口：

🏆1.二维码图片接口：

地址：https://api.weibo.com/oauth2/qrcode_authorize/generate?client_id=1283124999&redirect_uri=https%3A%2F%2Fwww.iconfont.cn%2Fapi%2Flogin%2Fweibo%2Fcallback&scope=users_show&response_type=code&state=plus-login&__r

参数：

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.轮询接口：

地址：https://api.weibo.com/oauth2/qrcode_authorize/query?vcode=78ca9ea56bea67a5a72cab5bcf0c9360&__rnd=1631155394210

参数：

vcode:78ca9ea56bea67a5a72cab5bcf0c9360

__rnd:1631155601209

返回：

        (1)一直不扫码：返回一个状态值告诉你未扫码

{"status":"1"}

🌟图3

 可以看到基本上两三秒轮询一次，但是这样会带来一个问题就是前端需要释放内存，到了一定的时间清除定时器二维码失效，重定向页面路径，这里是直接跳转到微博的PC登录页面。

🌟图4

 

        (2)客户扫码了，也成功了

返回了用户信息，然后重定向到登录后的首页就行

🌟图5

 

 

授权登录的流程大致一样，略微区别，我这里只是举例讲一个示例流程，具体的你需要去看对应的SDK文档，而且基本都是后端要忙，只需要给前端是接口和参数就行了。