简单模拟gitee账号第三方登录-爱代码爱编程

gitee官方文档地址Gitee OAuth 文档

前端代码

<div class="login-login-oauth__container">
			      <div class="ui horizontal divider login-login__oauth-title">
			          <span class="text-muted">其他方式登录</span>
			      </div>
			      <div class="ui horizontal list login-oauth__list">
			          <div class="item" title="使用 Gitee 账号授权登录">
			              <a href="">
			                  <img src="@/assets/img/login/gitee.svg" th:src="@{/img/gitee.svg}"/>
			              </a>
			          </div>
			          <!-- <div class="item" title="使用 GitHub 账号授权登录">
			              <a th:href="@{/auth/github}">
			                  <img src="../assets/img/login/github.svg" th:src="@{/img/github.svg}"/>
			              </a>
			          </div>
			          <div class="item" title="功能开发中...">
			              <a href="#">
			                  <img src="../assets/img/login/weixin.svg" th:src="@{/img/weixin.svg}"/>
			              </a>
			          </div>
			          <div class="item" title="功能开发中...">
			              <a href="#">
			                  <img src="../assets/img/login/qq.svg" th:src="@{/img/qq.svg}"/>
			              </a>
			          </div> -->
			      </div>
			  </div>

创建应用流程

1.在 修改资料 -> 第三方应用，创建要接入码云的应用。

2. 填写应用相关信息，勾选应用所需要的权限。其中: 回调地址是用户授权后，码云回调到应用，并且回传授权码的地址。将授权码的地址复制到前端界面点击gitee的图片，跳转处的a标签里。

 3.创建成功后，会生成 Cliend ID 和 Client Secret。他们将会在上述OAuth2 认证基本流程用到。

 模拟登录成功后的界面success.vue

<template>
	<div>
		<h1>登录成功！</h1>
		<h1>用户名:<span>{{this.name}}</span></h1>
		<img :src="this.avatarUrl ">		
	</div>
</template>

<script>
	import { userLogin3 } from "../../config/api";
	export default {
	  data() {
	    return {
			name:'',
			avatarUrl:''
	    };
	  },
	  created(){
		  // 获取地址栏中的code
		  const queryString = window.location.search;
		  const urlParams = new URLSearchParams(queryString);
		  const code = urlParams.get('code');
		  userLogin3({ params: {
		  			      code: code
		  			   } 
		  			  }).then((res) => {
		  				  alert(code)
		  					console.log(res)
							this.name=res.name;
							this.avatarUrl=res.avatar_url;
							alert(this.name)
		  			  });
	  },
	};
</script>

后端代码实现：在LoginController中加入以下代码

/**
     * 第三方gitee登录
     */
    @GetMapping("/success")
    public String login3(String code, Map<String,String> map) {
        // 获取accesskey
        String accessKey = getAccessKey(code);
        System.out.println(accessKey);
        // 通过accessKey获取用户信息
        String userInfo = getUserInfo(accessKey);
        // 取出用户名
//        String name = (String) JSONObject.parseObject(userInfo).get("name");
//        // 取出头像
//        String avatar_url = (String) JSONObject.parseObject(userInfo).get("avatar_url");
//
//        // 放入请求域
//        map.put("name",name);
//        map.put("avatar_url",avatar_url);

        return userInfo;
    }

    /**
     * 获取用户信息
     */
    private String getUserInfo(String accessKey) {
        String json = "";
        OkHttpClient client = new OkHttpClient();
        // 通过该地址能够获取到用户信息
        String url = "https://gitee.com/api/v5/user?access_token=" + accessKey;
        Request request = new Request.Builder()
                .get()
                .url(url).build();
        System.out.println(request);
        try {
            Response response = client.newCall(request).execute();
            json = response.body().string();
            System.out.println(json);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return json;
    }

    /**
     * 获取AccessKey
     */
    private String getAccessKey(String code) {
        OkHttpClient client = new OkHttpClient();
        // 通过该地址能够获取到access_token
        String url = "https://gitee.com/oauth/token";
        // 封装请求参数
        FormBody requestBody = new FormBody.Builder()
                .add("grant_type", "authorization_code")
                .add("code", code)
                .add("client_id", "3b8f7a3fd44a6d749683939621ff9a373943320caee81ca397d6970cb564df67")
                .add("redirect_uri", "http://localhost:8081/success")
                .add("client_secret", "caa979493c87eae74a8ac911b49ae3dac86859603dd2259c555c82c712e6814c")
                .build();
        Request request = new Request.Builder()
                .post(requestBody)
                .url(url).build();
        String accessKey = "";
        try {
            Response response = client.newCall(request).execute();
            String json = response.body().string();
            // 获取json串中的access_token属性
            accessKey = (String) JSONObject.parseObject(json).get("access_token");
        } catch (IOException e) {
            e.printStackTrace();
        }
        return accessKey;
    }

运行实现效果：获取到了gitee的用户名和头像地址

 只是简单实现了一个模拟第三方登录的demo。以后开发过程中如果用到了第三方登录，我还是回来完善博客的。供参考