当前位置:网站首页>nodejs实现微博第三方登录
nodejs实现微博第三方登录
2022-07-06 05:51:00 【Selenium.】
文章目录
接入微博第三方登录可以免注册,对用户的体验更好,今天我们就用nodejs实现微博第三方登录(用其它语言也可以)。
实现效果
在线实例: http://www.lolmbbs.com/login
- 点击微博登录按钮登录
- 直接扫码登录
具体实现
一、申请weibo网站接入
登录https://open.weibo.com/connect申请web网站接入
本地开发的时候应用地址写:127.0.0.1
二、点击按钮微博登录
采用OAuth2.0授权,详细可参考文档https://open.weibo.com/wiki/Connect/login
1. 生成微博登录授权验证码
const weiboUrl = `https://api.weibo.com/oauth2/authorize?client_id=${
weiboConfig.appKey}&response_type=code&redirect_uri=${
weiboConfig.redirectUrl}`
appKey: 创建应用成功后weibo给你的appKey
redirectUrl: 用户授权成功后跳转的你的前端页面,我这里写的是http://127.0.0.1:8080/login
2. 授权页面跳转,获取用户code
用户授权登录后,会跳转到你上一步写的redirectUrl,并带上用户code,url类似于http://127.0.0.1:8080/login?code=abcdef
vue监听路由url,如果url上有code就去请求后端的登录回调接口
created() {
const {
code } = this.$route.query;
if (code) {
loginCallback({
code }).then((res) => {
this.$message({
message: `${
res.nickname} 欢迎您`,
type: "success",
});
this.setUser(res);
this.$router.push("/tool/qr");
});
}
}
3. 后端登录回调接口,通过用户code获取accessToken,再通过accessToken获取用户信息,完成登录
async loginCallback(ctx) {
let {
code } = ctx.request.body
if (!code) {
return ctx.error(errCode.PARAMS_ERROR, '参数错误')
}
// 获取accessToken
const {
access_token, uid } = await got.post('https://api.weibo.com/oauth2/access_token', {
form: {
client_id: weiboConfig.appKey,
client_secret: weiboConfig.appSecret,
grant_type: 'authorization_code',
redirect_uri: weiboConfig.redirectUrl,
code
}
}).json()
// 通过accessToken获取UserInfo
const {
id, name: nickname, avatar_hd: avatar } = await got.get(`https://api.weibo.com/2/users/show.json?access_token=${
access_token}&uid=${
uid}`).json()
// 在自己的系统内创建User
let [user, isCreate] = await WeiboUser.upsert({
id, nickname, avatar })
// 生成登录Token,通过userType区分是微博登录用户还是系统账号登录用户
const token = await jwt.createToken({
...user.toJSON(), userType: 'weiboUser' })
return ctx.success({
nickname, avatar, token })
}
三、微博扫码登录
1. 生成微博扫码登录二维码
async getWeiboLoginQr(ctx) {
const qrApi = `https://api.weibo.com/oauth2/qrcode_authorize/generate?client_id=${
weiboConfig.appKey}&redirect_uri=${
weiboConfig.redirectUrl}&scope=&response_type=code&state=&__rnd=${
Date.now()}`
const {
url, vcode } = await got.get(qrApi).json()
return ctx.success({
weiboQrUrl: url, vcode })
}
返回的url就是微博登录二维码url,vcode相当于此二维码唯一标识,用来查询用户是否扫码
2. 前端不停轮询,查询此二维码是否被扫码授权
前端:
const id = setInterval(() => {
getWeiboLoginQrStatus({
vcode }).then((res) => {
const {
status, url } = res;
if (status === "3") {
window.location = url;
clearInterval(id);
}
});
}, 3000);
后端:
async getWeiboLoginQrStatus(ctx) {
const {
vcode } = ctx.request.query
if (!vcode) {
return ctx.error(errCode.PARAMS_ERROR, '参数错误')
}
const queryQrApi = `https://api.weibo.com/oauth2/qrcode_authorize/query?vcode=${
vcode}&__rnd=${
Date.now()}`
const {
status, url } = await got(queryQrApi).json()
return ctx.success({
status, url })
}
如果status为3,代码用户已经扫码授权了,同时返回的url即点击按钮登录后的前端回调url。之后的步骤就跟2. 授权页面跳转,获取用户code一模一样了.
边栏推荐
- Anti shake and throttling are easy to understand
- 关于 PHP 启动 MongoDb 找不到指定模块问题
- Web服务连接器:Servlet
- Title 1093: character reverse order
- What is independent IP and how about independent IP host?
- (column 22) typical column questions of C language: delete the specified letters in the string.
- What preparations should be made for website server migration?
- [happy Spring Festival] if you feel happy, dance
- 华为路由器如何配置静态路由
- 【SQL server速成之路】——身份验证及建立和管理用户账户
猜你喜欢
局域网同一个网段通信过程
Yunxiaoduo software internal test distribution test platform description document
[Baiwen smart home] first day of the course_ Learn Embedded and understand the development mode of bare metal and RTOS
大型网站如何选择比较好的云主机服务商?
关于 PHP 启动 MongoDb 找不到指定模块问题
H3C firewall rbm+vrrp networking configuration
【无标题】
YYGH-11-定时统计
Construction of yolox based on paste framework
Raised a kitten
随机推荐
Grant Yu, build a web page you want from 0
如何在业务代码中使用 ThinkPHP5.1 封装的容器内反射方法
ArcGIS应用基础4 专题图的制作
【LeetCode】Day96-第一个唯一字符&赎金信&字母异位词
C language learning notes (mind map)
Station B, Master Liu Er - dataset and data loading
Download, install and use NVM of node, and related use of node and NRM
wib3.0 跨越,在跨越(ง •̀_•́)ง
Dynamic programming -- knapsack problem
Redis message queue
Hongliao Technology: how to quickly improve Tiktok store
The usage and difference between strlen and sizeof
(column 22) typical column questions of C language: delete the specified letters in the string.
[Thesis code] SML part code reading
Anti shake and throttling are easy to understand
H3C firewall rbm+vrrp networking configuration
Huawei BFD configuration specification
The digital economy has broken through the waves. Is Ltd a Web3.0 website with independent rights and interests?
【SQL server速成之路】——身份驗證及建立和管理用戶賬戶
Baidu online AI competition - image processing challenge: the 8th program of handwriting erasure