iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >浅析node怎么进行微博第三方登录
  • 639
分享到

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

nodenodejs​Node.js 2022-11-22 23:11:02 639人浏览 安东尼
摘要

接入微博第三方登录可以免注册,对用户的体验更好,今天我们就用nodejs实现微博第三方登录(用其它语言也可以)。【相关教程推荐:nodejs视频教程】实现效果在线实例: Http://www.lolmbbs.com/login1、点击微博登

接入微博第三方登录可以免注册,对用户的体验更好,今天我们就用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. 生成微博登录授权验证码
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一模一样了.

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

--结束END--

本文标题: 浅析node怎么进行微博第三方登录

本文链接: https://www.lsjlt.com/news/173423.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 浅析node怎么进行微博第三方登录
    接入微博第三方登录可以免注册,对用户的体验更好,今天我们就用nodejs实现微博第三方登录(用其它语言也可以)。【相关教程推荐:nodejs视频教程】实现效果在线实例: http://www.lolmbbs.com/login1、点击微博登...
    99+
    2022-11-22
    node nodejs​ Node.js
  • node如何进行微博第三方登录
    这篇文章主要介绍“node如何进行微博第三方登录”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“node如何进行微博第三方登录”文章能帮助大家解决问题。实现效果点击微博登录按钮登录直接扫码登录具体实现...
    99+
    2023-07-04
  • 浅析node是怎么实现github第三方登录的
    一、详细流程二、具体流程1.注册应用①登录github,Settings=>Developer settings=>OAuth Apps=>Register a new application ②填写应用信息③注册完成,得...
    99+
    2022-11-22
    nodejs​ node
  • 浅析node怎么实现单点登录系统
    一. 基础知识1.1 同源策略源 = 协议 + 域名 +端口以http://www.a.com为例:https://www.a.com ❌(协议不同)http://www.b.com ❌(域名不同)http://www.a.com:3000...
    99+
    2022-11-22
    nodejs node
  • Android中怎么实现第三方QQ登录
    本篇文章给大家分享的是有关Android中怎么实现第三方QQ登录,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。第三方登录之QQ代码区public class ...
    99+
    2023-05-30
    android
  • Java中怎么实现第三方应用登录
    这篇文章给大家介绍Java中怎么实现第三方应用登录,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。什么是OAuth3.0OAuth是一项协议,它为用户资源的授权提供了一个安全、开放而简易的标准,OAuth的授权不会使第三...
    99+
    2023-06-20
  • Node怎么运用Cookie和Session进行登录验证
    本篇内容主要讲解“Node怎么运用Cookie和Session进行登录验证”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Node怎么运用Cookie和Session进行登录验证”吧!1️⃣ 定义...
    99+
    2023-07-04
  • OAuth机制_web站点接入微软azure账号进行三方登录
    文章目录 ⭐前言⭐微软三方登录流程💖 web站点获取微软账号流程💖 node封装微软登录接口💖 webapp 自定义code换token...
    99+
    2023-09-16
    microsoft 前端 azure javascript aAuth2.0 node oAuth
  • SpringBoot项目中怎么对第三方JAR进行打包
    SpringBoot项目中怎么对第三方JAR进行打包?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。SpringBoot项目打包成可运行JAR包,但是不是所有JA...
    99+
    2023-05-31
    springboot 第三 jar
  • 利用spring boot怎么对第三方jar包进行加载
    本篇文章给大家分享的是有关利用spring boot怎么对第三方jar包进行加载,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。具体方法如下:<!-- 配置需要定时执行的任...
    99+
    2023-05-31
    springboot 第三 jar包
  • 怎么在GitLab上进行第一次登录并更改密码
    这篇文章主要讲解了“怎么在GitLab上进行第一次登录并更改密码”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么在GitLab上进行第一次登录并更改密码”吧!第一步:访问GitLab网站首...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作