您的位置:首页 > 技术中心 > 前端框架 >

浅析node怎么进行微博第三方登录

时间:2022-11-01 19:34

怎么进行微博第三方登录?下面本篇文章给大家介绍一下使用node实现微博第三方登录的方法,希望对大家有所帮助!

接入微博第三方登录可以免注册,对用户的体验更好,今天我们就用nodejs实现微博第三方登录(用其它语言也可以)。【相关教程推荐:nodejs视频教程】

实现效果

在线实例: http://www.lolmbbs.com/login

1、点击微博登录按钮登录

在这里插入图片描述

2、直接扫码登录

具体实现

一、申请weibo网站接入

登录https://open.weibo.com/connect申请web网站接入
本地开发的时候应用地址写:127.0.0.1

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、点击按钮微博登录

采用OAuth2.0授权,详细可参考文档https://open.weibo.com/wiki/Connect/login

1. 生成微博登录授权验证码
  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就去请求后端的登录回调接口

  1. created() {
  2. const { code } = this.$route.query;
  3. if (code) {
  4. loginCallback({ code }).then((res) => {
  5. this.$message({
  6. message: `${res.nickname} 欢迎您`,
  7. type: "success",
  8. });
  9. this.setUser(res);
  10. this.$router.push("/tool/qr");
  11. });
  12. }
  13. }
3. 后端登录回调接口,通过用户code获取accessToken,再通过accessToken获取用户信息,完成登录
  1. async loginCallback(ctx) {
  2. let { code } = ctx.request.body
  3. if (!code) {
  4. return ctx.error(errCode.PARAMS_ERROR, '参数错误')
  5. }
  6. // 获取accessToken
  7. const { access_token, uid } = await got.post('https://api.weibo.com/oauth2/access_token', {
  8. form: {
  9. client_id: weiboConfig.appKey,
  10. client_secret: weiboConfig.appSecret,
  11. grant_type: 'authorization_code',
  12. redirect_uri: weiboConfig.redirectUrl,
  13. code
  14. }
  15. }).json()
  16. // 通过accessToken获取UserInfo
  17. 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()
  18. // 在自己的系统内创建User
  19. let [user, isCreate] = await WeiboUser.upsert({ id, nickname, avatar })
  20. // 生成登录Token,通过userType区分是微博登录用户还是系统账号登录用户
  21. const token = await jwt.createToken({ ...user.toJSON(), userType: 'weiboUser' })
  22. return ctx.success({ nickname, avatar, token })
  23. }

三、微博扫码登录

1. 生成微博扫码登录二维码
  1. async getWeiboLoginQr(ctx) {
  2. 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()}`
  3. const { url, vcode } = await got.get(qrApi).json()
  4. return ctx.success({ weiboQrUrl: url, vcode })
  5. }

返回的url就是微博登录二维码url,vcode相当于此二维码唯一标识,用来查询用户是否扫码

2. 前端不停轮询,查询此二维码是否被扫码授权

前端:

  1. const id = setInterval(() => {
  2. getWeiboLoginQrStatus({ vcode }).then((res) => {
  3. const { status, url } = res;
  4. if (status === "3") {
  5. window.location = url;
  6. clearInterval(id);
  7. }
  8. });
  9. }, 3000);

后端:

  1. async getWeiboLoginQrStatus(ctx) {
  2. const { vcode } = ctx.request.query
  3. if (!vcode) {
  4. return ctx.error(errCode.PARAMS_ERROR, '参数错误')
  5. }
  6. const queryQrApi = `https://api.weibo.com/oauth2/qrcode_authorize/query?vcode=${vcode}&__rnd=${Date.now()}`
  7. const { status, url } = await got(queryQrApi).json()
  8. return ctx.success({ status, url })
  9. }

如果status为3,代码用户已经扫码授权了,同时返回的url即点击按钮登录后的前端回调url。之后的步骤就跟2. 授权页面跳转,获取用户code一模一样了.

更多node相关知识,请访问:nodejs 教程!

以上就是浅析node怎么进行微博第三方登录的详细内容,更多请关注gxlsystem.com其它相关文章!

热门排行

今日推荐

热门手游