Integración de Inicio de Sesión de Terceros con Gitee usando Spring Boot y Vue.js

Conceptos Fundamentales de OAuth2 para Gitee

La implementación de un inicio de sesión de terceros con Gitee se basa en el protocolo OAuth2. Antes de sumergirnos en los detalles técnicos, es crucial comprender el flujo de autenticación y las políticas de uso de la API de Gitee.

1.1. Pautas de Uso de la API

Al integrar con la API de Gitee, es importante adherirse a las siguientes directrices:

Los usuarios de Gitee son los propietarios de sus datos; se debe respetar y proteger su privacidad.
No se debe utilizar la marca "Gitee" en el nombre de la aplicación.
Está prohibido recolectar o almacenar recursos del usuario sin su consentimiento explícito.
Evite el abuso de la API; las solicitudes excesivas pueden resultar en la interrupción del acceso.

1.2. Flujo Básico de Autenticación OAuth2

El proceso de autenticación OAuth2 con Gitee sigue estos pasos:

La aplicación cliente inicia una solicitud de autorización al servidor de Gitee, incluyendo su ID de cliente (client_id) y la URL de redirección (redirect_uri).
El servidor de autenticación de Gitee, tras la aprobación del usuario, redirige al navegador a la redirect_uri proporcionada, adjuntando un código de autorización (code) como parámetro.
Utilizando este code, junto con el client_id y una clave secreta (client_secret), la aplicación cliente realiza una solicitud al servidor de Gitee para obtener un token de acceso (access_token).
Con el access_token obtenido, la aplicación cliente puede hacer peticiones a la API de Gitee para recuperar información del perfil del usuario, como ID, nombre y correo electrónico.
Configuración del Componente de Inicio de Sesión en el Frontend

Para permitir que los usuarios inicien sesión a través de Gitee, se debe integrar un botón en la interfaz de usuario de la aplicación. Este botón, al ser pulsado, iniciará el flujo de autenticación de Gitee.

2.1. Implementaicón Frontend (Vue.js)

A continuación, se muestra un ejemplo de cómo se podría implementar un conjunto de iconos de inicio de sesión de terceros, incluyendo Gitee, en un componente Vue.js:

<template>
  <div class="social-login-options">
    <span class="label">Iniciar sesión con:</span>
    <a href="#" @click.prevent="loginWith('qq')" title="QQ"><img :src="qqIconSrc" alt="QQ" class="social-icon"></a>
    <a href="#" @click.prevent="loginWith('baidu')" title="Baidu"><img :src="baiduIconSrc" alt="Baidu" class="social-icon"></a>
    <a href="#" @click.prevent="loginWith('weibo')" title="Weibo"><img :src="weiboIconSrc" alt="Weibo" class="social-icon"></a>
    <a href="#" @click.prevent="loginWith('alipay')" title="Alipay"><img :src="alipayIconSrc" alt="Alipay" class="social-icon"></a>
    <a href="#" @click.prevent="loginWith('gitee')" title="Gitee"><img :src="giteeIconSrc" alt="Gitee" class="social-icon"></a>
    <a href="#" @click.prevent="loginWith('github')" title="GitHub"><img :src="githubIconSrc" alt="GitHub" class="social-icon"></a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      qqIconSrc: '/icons/qq.png',
      baiduIconSrc: '/icons/baidu.png',
      weiboIconSrc: '/icons/weibo.png',
      alipayIconSrc: '/icons/alipay.png',
      giteeIconSrc: '/icons/gitee.png',
      githubIconSrc: '/icons/github.png',
    };
  },
  methods: {
    loginWith(provider) {
      if (provider === 'gitee') {
        // Redirigir al endpoint del backend que genera la URL de autorización de Gitee
        window.location.href = '/api/oauth2/gitee/authorize';
      } else {
        console.log(`Iniciar sesión con ${provider}`);
        // Lógica para otros proveedores
      }
    },
  },
};
</script>

<style scoped>
.social-login-options {
  display: flex;
  align-items: center;
  margin-top: 15px;
  line-height: 22px;
  color: #9b9b9b;
}

.label {
  vertical-align: middle;
  margin-right: 8px;
}

.social-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-left: 8px;
  cursor: pointer;
}
</style>

2.2. Configuración y Controlador Backend (Spring Boot)

El backend de Spring Boot se encargará de gestionar las credenciales de Gitee y construir la URL de autorización.

2.2.1. Propiedades de Configuración de Gitee

Defina las credenciales de Gitee en el archivo de propiedades de Spring Boot (e.g., application.properties o application.yml):

# Configuración de Gitee OAuth2
app.oauth2.gitee.clientId=YOUR_GITEE_APP_ID
app.oauth2.gitee.clientSecret=YOUR_GITEE_APP_KEY
app.oauth2.gitee.redirectUri=https://www.yourdomain.com/oauth2/callback/gitee
app.oauth2.gitee.authUrl=https://gitee.com/oauth/authorize
app.oauth2.gitee.tokenUrl=https://gitee.com/oauth/token
app.oauth2.gitee.userInfoUrl=https://gitee.com/api/v5/user

2.2.2. Clase de Configuración de Propiedades

Una clase de configuración en Spring Boot para encapsular las propiedades de Gitee:

package com.example.app.config;

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;

@Configuration
@ConfigurationProperties(prefix = "app.oauth2.gitee")
public class GiteeOAuth2Properties {

    private String clientId;
    private String clientSecret;
    private String redirectUri;
    private String authUrl;
    private String tokenUrl;
    private String userInfoUrl;

    // Getters y Setters
    public String getClientId() { return clientId; }
    public void setClientId(String clientId) { this.clientId = clientId; }
    public String getClientSecret() { return clientSecret; }
    public void setClientSecret(String clientSecret) { this.clientSecret = clientSecret; }
    public String getRedirectUri() { return redirectUri; }
    public void setRedirectUri(String redirectUri) { this.redirectUri = redirectUri; }
    public String getAuthUrl() { return authUrl; }
    public void setAuthUrl(String authUrl) { this.authUrl = authUrl; }
    public String getTokenUrl() { return tokenUrl; }
    public void setTokenUrl(String tokenUrl) { this.tokenUrl = tokenUrl; }
    public String getUserInfoUrl() { return userInfoUrl; }
    public void setUserInfoUrl(String userInfoUrl) { this.userInfoUrl = userInfoUrl; }
}

2.2.3. Endpoint del Controlador para la Redirección de Autorización

Este controlador genera la URL de autorización de Gitee a la que el frontend redirigirá al usuario.

package com.example.app.controller;

import com.example.app.config.GiteeOAuth2Properties;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.util.UriComponentsBuilder;

import java.util.UUID;

@RestController
@RequestMapping("/api/oauth2/gitee")
public class GiteeAuthController {

    private final GiteeOAuth2Properties giteeProperties;

    public GiteeAuthController(GiteeOAuth2Properties giteeProperties) {
        this.giteeProperties = giteeProperties;
    }

    /**
     * Genera la URL de autorización de Gitee y redirige al usuario.
     * El frontend debe invocar este endpoint para iniciar el flujo de autenticación.
     * @return ResponseEntity con la URL de redirección.
     */
    @GetMapping("/authorize")
    public ResponseEntity<String> initiateGiteeAuth() {
        String state = UUID.randomUUID().toString().replaceAll("-", "");

        String authorizationUrl = UriComponentsBuilder.fromUriString(giteeProperties.getAuthUrl())
                .queryParam("client_id", giteeProperties.getClientId())
                .queryParam("redirect_uri", giteeProperties.getRedirectUri())
                .queryParam("response_type", "code")
                .queryParam("state", state)
                .queryParam("scope", "user_info") // Solicitar acceso a la información básica del usuario
                .build()
                .toUriString();

        return ResponseEntity.status(HttpStatus.FOUND) // 302 Found
                .header("Location", authorizationUrl)
                .body("Redirigiendo a Gitee para autorización...");
    }
}

Adquisición del Token de Acceso (Access Token)

Después de que el usuario otorga el permiso, Gitee redirige al navegador a la redirect_uri especificada con un code de autorización. Este code es esencial para obtener el access_token.

3.1. Obtención del Código de Autorización

El primer paso es la solicitud inicial de autorización. Si un usuario ya ha autorizado su aplicación previamente para los mismos scope, Gitee puede omitir la página de confirmación.

URL de Solicitud:

GET https://gitee.com/oauth/authorize

Parámetros de Consulta Requeridos:

response_type: Siempre code.
client_id: El ID de la aplicación registrado en Gitee.
redirect_uri: La URL donde Gitee redirigirá al usuario después de la autorización (debe estar registrada en su aplicación de Gitee). Se recomienda codificarla con URL encoding.
scope: Los permisos solicitados (ej. user_info para información del usuario).
state (Opcional): Un valor arbitrario para prevenir ataques CSRF. Gitee lo devolverá tal cual.

Respuesta (Redirección):

Si la autorización es exitosa, Gitee redirigirá al navegador a su redirect_uri con los siguientes parámetros:

https://www.yourdomain.com/oauth2/callback/gitee?code=YOUR_AUTHORIZATION_CODE&state=YOUR_STATE_VALUE

Si el usuario cancela la autorización, la página de Gitee simplemente se cerrará o redirigirá sin el code.

3.2. Intercambio del Código de Autorización por el Token de Acceso

Una vez obtanido el code, su servidor debe realizar una solicitud POST al servidor de Gitee para intercambiarlo por el access_token. Es crucial enviar el client_secret de forma segura, preferiblemente en el cuerpo de la solicitud.

URL de Solicitud:

POST https://gitee.com/oauth/token

Parámetros de Consulta/Cuerpo Requeridos:

grant_type: Siempre authorization_code para este paso.
client_id: El ID de su aplicación Gitee.
client_secret: La clave secreta de su aplicación Gitee.
code: El código de autorización recibido en el paso anterior.
redirect_uri: Debe coincidir exactamente con la redirect_uri utilizada en el paso de autorización inicial.

Respuesta Exitosa:

Si la solicitud es exitosa, Gitee devolverá un JSON (o string url-encoded) con la siguiente información:

{
  "access_token": "YOUR_ACCESS_TOKEN",
  "token_type": "bearer",
  "expires_in": 7776000,
  "refresh_token": "YOUR_REFRESH_TOKEN",
  "scope": "user_info",
  "created_at": 1678886400
}

Los campos importantes son:

access_token: El token para acceder a los recursos del usuario.
expires_in: Duración de validez del access_token en segundos.
refresh_token: Utilizado para obtener nuevos access_token sin la intervención del usuario.

Nota sobre errores: Si recibe un código de estado 403 Forbidden, asegúrese de que el encabezado User-Agent esté configurado en su solicitud.

3.3. (Opcional) Refresco del Token de Acceso

Cuando un access_token caduca, se puede usar el refresh_token para obtener un nuevo access_token sin necesidad de que el usuario vuelva a autorizar la aplicación.

URL de Solicitud:

POST https://gitee.com/oauth/token

Parámetros de Consulta/Cuerpo Requeridos:

grant_type: Siempre refresh_token para este paso.
refresh_token: El refresh_token obtenido en la solicitud anterior.

Respuesta Exitosa:

La respuesta será similar a la de obtanción inicial del access_token, proporcionando un nuevo access_token y refresh_token.

Recuperación de Información del Usuario

Con un access_token válido, la aplicación puede realizar solicitudes a la API de Gitee para obtener los datos del perfil del usuario.

URL de Solicitud:

GET https://gitee.com/api/v5/user

Parámetros de Consulta Requeridos:

access_token: El token de acceso obtenido previamente.

Esta solicitud devolverá información detallada del usuario en formato JSON, como su ID, nombre de usuario, avatar, y otros datos del perfil.

Etiquetas: SpringBoot vue.js OAuth2 gitee Login

Publicado el 7-19 02:37

Friki Work

Integración de Inicio de Sesión de Terceros con Gitee usando Spring Boot y Vue.js

1.1. Pautas de Uso de la API

1.2. Flujo Básico de Autenticación OAuth2

2.1. Implementaicón Frontend (Vue.js)

2.2. Configuración y Controlador Backend (Spring Boot)

2.2.1. Propiedades de Configuración de Gitee

2.2.2. Clase de Configuración de Propiedades

2.2.3. Endpoint del Controlador para la Redirección de Autorización

3.1. Obtención del Código de Autorización

3.2. Intercambio del Código de Autorización por el Token de Acceso

3.3. (Opcional) Refresco del Token de Acceso

Etiquetas populares