首页 > 其他分享 >Springboot和Vue(2或者3都行)实现Twitter授权登录,并获取用户公开信息-OAuth1.0。

Springboot和Vue(2或者3都行)实现Twitter授权登录,并获取用户公开信息-OAuth1.0。

时间:2024-02-06 20:22:52浏览次数:34  
标签:Vue Springboot twitter OAuth1.0 Twitter twitter4j CONSUMER 代码 String

第一步

先申请twitter开发者账号,创建App,我这里没有创建app,当时好像是默认有一个app,twitter官方说,创建一个app需要先删除一个app,我是没有充钱的,不知道充钱和免费使用接口的是不是一样的。


第二步

在生成CustomerKey以及CustomeSecret,我之后会用到这两个,这写密钥一生成永久有效,除非又重新生成了,在生成的时候有一次复制的机会,关闭了得重新生成才能复制了。下面的两个token可以不用生成,因为没有用到。

第三步

Settings填写回调地址(这个回调地址,据我的试错来讲,是服务器地址--就是后端那边的地址),以及填写网站地址。

其中这callback URL一定是https开头的,而且不能localhost或者127.0.0.1,一定要是有效域名+你后端在@RequestMapping写的路径,例如https://baidu.com/callback 第二个地址,我不知道有什么用,我就填了前端绑定的域名,例如:https://baidu.com,这个地址不要填到具体的路由跳转路径

第四步

前端代码

这部分代码很简单只有一个按钮去访问后端的地址。
点击查看代码
<template>
<div class="otherSign">
                <div class="twitter" @click="twitter">
                  <img src="/public/appImg/X.png" />
                </div>
</template>

点击查看代码
<script setup>

const twitter = async () => {
  const response = await twitterAPI();
  if (response.code === 200) {
    window.open(response.data.authUrl, "_blank");
  }
}
</script>
点击查看代码
export const twitterAPI = () => {
    return request({
        url: "/twitter/backend/twitter-login",
        method: "GET"
    })
}
这里是前端请求后端代替用户向推特发起登录请求,我这里所有的处理逻辑都放在了后端,前端我也不会怎么处理

后端代码

这个代码是前端的请求,会触发的代码,我直接写在了Controller层,因为之前写了好多天,很烦,干脆直接把逻辑写在Controller层

导入依赖

点击查看代码
 <!--twitter鉴权包-->
        <dependency>
            <groupId>org.twitter4j</groupId>
            <artifactId>twitter4j-core</artifactId>
            <version>4.0.7</version>
        </dependency>

Controller代码

点击查看代码
//关于推特应该要用到的类/接口
import twitter4j.Twitter;
import twitter4j.TwitterException;
import twitter4j.TwitterFactory;
import twitter4j.User;
import twitter4j.auth.AccessToken;
import twitter4j.auth.RequestToken;
import twitter4j.conf.ConfigurationBuilder;
  @Autowired
    private TwitterLogin twitterLogin;
  private static final String CONSUMER_KEY = "your CONSUMER_KEY "; //前面生成的
    private static final String CONSUMER_SECRET = "your CONSUMER_SECRET";//前面生成的
    private static final String CALLBACK_URL = "https://baidu.com/callback";//这里是回调函数,baidu.com只是个例子,要填自己的,注意,一定是https开头,就是有SSL证书

  //创建推特对象  其实我这里代码冗余了 
  private Twitter createTwitterInstance(){
    ConfigurationBuilder cb = new ConfigurationBuilder();
    cb.setDebugEnabled(true)
            .setOAuthConsumerKey(CONSUMER_KEY)
            .setOAuthConsumerSecret(CONSUMER_SECRET)
            .setIncludeEmailEnabled(true);
    TwitterFactory tf = new TwitterFactory(cb.build());
    return tf.getInstance();
  }
//这一步是我们自己前端触发的,主要是调起twitter登录接口,要开启合理上网工具才能跳转twitter登录页的,不然会没有反应。
@RequestMapping("/twitter/backend/twitter-login")
    //public Map<String,String> twitterLogin(){
    public Result twitterLogin(){
      TwitterFactory factory = new TwitterFactory();
      Twitter twitter = factory.getInstance();
      twitter.setOAuthConsumer(CONSUMER_KEY,CONSUMER_SECRET);
      try {
        RequestToken requestToken = twitter.getOAuthRequestToken(CALLBACK_URL);
        String authUrl = requestToken.getAuthenticationURL();
        Map<String,String> response = new HashMap<>();
        response.put("authUrl",authUrl);
        return Result.success(response, ResultCodeEnum.SUCCESS);
      } catch (TwitterException e) {
        e.printStackTrace();
        return Result.error(Collections.emptyMap(),ResultCodeEnum.DATA_ERROR);
      }
    }

当用户完成登录确认授权之后,twitter会自动跳转我们的回调地址,我的回调地址是有效的后端域名,加请求地址 这里顺便得到了用户信息,并且利用 HttpServletResponse 跳转到网站的首页(或者前端特殊处理第三方用户的页面,我这里跳的是特殊处理页)。如果你的网站需要携带什么token才能登录进去,请自己写在后端写好逻辑,twitter授权登录只是让我们得到twitter用户账号信息,至于你自己的网站关于登录这部分的逻辑,还是得自己代码帮这个twitter用户走完逻辑。
点击查看代码
 @GetMapping("/twitter/backend/callback")
    public void twitterCallback(@RequestParam("oauth_token") String oauthToken,
                                  @RequestParam("oauth_verifier") String oauthVerifier,
                                HttpServletResponse response) throws IOException {
    //  根据oauthToken oauthVerifier调用Twitter API 获取访问令牌
      //处理访问令牌,存储在后端或者返回给前端
      /* System.out.println("oauthToken:"+oauthToken);
      System.out.println("oauthVerifier:"+oauthVerifier); */
     Twitter twitter = createTwitterInstance();
      AccessToken accessToken = null;
      try {
        accessToken = twitter.getOAuthAccessToken(
                new RequestToken(oauthToken,""),oauthVerifier);
      //获取访问令牌和密钥
      String token = accessToken.getToken();
      String secret = accessToken.getTokenSecret();

      //使用访问令牌和密钥创建推特对象
      Twitter twitterWithToken = createTwitterInstance();
      twitterWithToken.setOAuthAccessToken(new AccessToken(token,secret));

      //获取当前用户信息
      User user = twitterWithToken.verifyCredentials();
      String userName = user.getName();
      String screenName = user.getScreenName();
      //这个接口不能获取到email
      // String email = user.getEmail();
      String id = String.valueOf(user.getId());
      System.out.println("userName:"+userName);
      System.out.println("screenName:"+screenName);
      // System.out.println("email:"+email);
      System.out.println("id:"+id);
      //插入/或不插入数据库
          Result rs = twitterLogin.saveInfo(userName, screenName);
          Object data = rs.getData();
          // String url = "https://前端域名/twitterDue?result="+URLEncoder.encode(rs,"UTF-8");
          String jsonString = JSON.toJSONString(data);
          String url = "https://前端域名/twitterDue?result="+jsonString;  
          response.sendRedirect(url);
      } catch (TwitterException e) {
        throw new RuntimeException(e);
      }

    }
关于twitter授权登录

官网还有关于这三步更详细的解说,我这里用到的是twitter使用 OAuth1.0做第三方授权的 API。这里三个步骤,1、2个步骤写在了第一个请求那里,第3个步骤写在了回调里面,总的来说,三个步骤,两个请求就够了。我的前端是vue3。

标签:Vue,Springboot,twitter,OAuth1.0,Twitter,twitter4j,CONSUMER,代码,String
From: https://www.cnblogs.com/ozq2020/p/18010251

相关文章

  • Vue3 - 移动端配置Rem布局
    1、项目搭建2、安装插件npminstallamfe-flexible--savenpminstallpostcss-pxtorem--save-dev3、引入插件import'amfe-flexible'//main.ts4、vite.config.ts配置import{defineConfig}from'vite'importpostCssPxToRemfrom'postcss-pxtore......
  • 零基础入门Vue之画龙点睛——再探监测数据
    追忆上一节:零基础入门Vue之影分身之术——列表渲染&渲染原理浅析虽然我深知,大佬告诉我”先学应用层在了解底层,以应用层去理解底层“,但Vue的数据如何检测的我不得不去学否则,在写代码的时候,可能会出现我难以解释的bug对此,本篇文章,将记录我对Vue检测数据的理解对于Vue检测数据......
  • Java微服务SpringCloud+Uniapp+Vue3+Element Plus开源BizSpring商城
    产品介绍BizSpring电商平台概述BizSpring电商平台,是基于最新SpringCloud微服务架构开发的多语言电商平台,使用领先的Vue3.0+ElementPlus+uniapp技术开发的移动全端业务、实现了多平台同步构建及建设的解决方案。应用发布基于Uni-app,实现跨多个平台(H5、公众号、头条、抖音......
  • SpringBoot集成Flink-CDC 采集PostgreSQL变更数据发布到Kafka
    (之前写了一个flink-cdc同步数据的博客,发布在某N,最近代码开源了,直接复制过来了,懒得重新写了,将就着看下吧)最近做的一个项目,使用的是pg数据库,公司没有成熟的DCD组件,为了实现数据变更消息发布的功能,我使用SpringBoot集成Flink-CDC采集PostgreSQL变更数据发布到Kafka。 一、业务......
  • SpringBoot使用Validation框架手动校验对象是否符合规则
      在springboot项目中引入<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency> 伪代码importlombok.Data;import......
  • 解决警告:Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__
    如果你也发现了上述警告,传送门:https://vuejs.org/api/compile-time-flags#webpack,感谢文章https://stackoverflow.com/questions/77752897/feature-flag-vue-prod-hydration-mismatch-details-is-not-explicitly-defined......
  • vue新项目启动步骤
    项目启动前npminstall--registryhttps://registry.npm.taobao.org启动项目npmrunserve项目buildnpmrunbuild~#打包时请指定生产环境信息#生产环境可选项请参考package.json中的script脚本Lintsandfixesfilesnpmrunlint自定义配置SeeConfiguration......
  • Animate.css + Vue2
    Animate.css+Vue2包:https://www.npmjs.com/package/vue2-animate安装:npminstall--savevue2-animate导入:import'vue2-animate/dist/vue2-animate.min.css';使用1:<transitionname="fadeLeft"><pv-if="isShow">he......
  • 创建Vue应用
    更新记录```2024年2月6日发布。2023年11月1日迁移。```创建Vue应用方式1:直接引入根据官方文档引入js文件即可。方式2:Vue脚手架安装npminstall-g@vue/cli创建项目vuecreateprojectName//或者npmcreatevite@latest//使用vite启动项目npmrunserve......
  • vue3 动态加载el-icon图标
    https://element-plus.org/zh-CN/component/icon.html静态示例<el-icon><Menu/></el-icon>动态示例Menu为图标名称,可替换,注意是字符串<el-icon><component:is="Menu"/></el-icon>在菜单列表中使用,渲染出每个菜单不同的图标<el-menu:default-act......