1. Preparación previa - OAuth2 ==============================

1.1 Flujo de autorización para aplicaciones web

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

1. El usuario es redirgiido para solicitar su identidad en GitHub
2. GitHub redirige al usuario de vuelta al sitio web
3. La aplicación utiliza el token de acceso del usuario para interactuar con la API

1.2 Flujo básico de autenticación OAuth2

El flujo de autenticación se divide en varias etapas que permiten la autorización segura del usuario sin compartir credenciales directas.

2. Integración del botón de inicio de sesión con GitHub =======================================================

2.1 Propósito de esta etapa

El objetivo principal es colocar un botón de "Iniciar sesión con GitHub" en la página web y agregar el código frontend necesario para que, al hacer clic, se abra el diálogo de autenticación de GitHub.

2.2 Colocación del botón de GitHub

Para mostrar el botón de forma adecuada, es necesario obtener una imagen representativa y ubicarla en una posición visible dentro del formulario de inicio de sesión. Se pueden encontrar iconos adicionales en bibliotecas de vectores como iconos vectoriales gratuitos.

2.3 Código frontend (Vue)

Para lograr el efecto deseado, se debe agregar el siguiente código al componente Vue:

<div class="login-options">
    <span class="label-text">Iniciar sesión con:</span>
    <img :src="iconos.sociales.qq" width="22" height="22" class="social-icon" title="QQ">
    <img :src="iconos.sociales.baidu" width="22" height="22" class="social-icon" title="Baidu">
    <img :src="iconos.sociales.weibo" width="22" height="22" class="social-icon" title="Weibo">
    <img :src="iconos.sociales.alipay" width="22" height="22" class="social-icon" title="Alipay">
    <img :src="iconos.sociales.gitee" width="22" height="22" class="social-icon" title="Gitee">
    <img :src="iconos.sociales.github" width="22" height="22" class="social-icon" title="GitHub" @click="redirigirOAuthGitHub">
</div>

2.4 Código backend (Java)

1. Configuración de GitHub en archivo de propiedades:

# Configuración OAuth de GitHub
github.client-id=TU_CLIENT_ID_AQUI
github.client-secret=TU_CLIENT_SECRET_AQUI
github.redirect-uri=https://tu-dominio.com/gitHubCallback
github.authorize-url=https://github.com/login/oauth/authorize
github.token-url=https://github.com/login/oauth/access_token
github.user-api=https://api.github.com/user

2. Clase de configuración de constantes:

package com.miproyecto.configuracion;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;

/**
 * Configuración de constantes para OAuth de GitHub
 */
@Configuration
@PropertySource("classpath:oauth.properties")
public class ConfiguracionGitHub {

    @Value("${github.client-id}")
    private String clientId;

    @Value("${github.client-secret}")
    private String clientSecret;

    @Value("${github.redirect-uri}")
    private String redirectUri;

    @Value("${github.authorize-url}")
    private String authorizeUrl;

    @Value("${github.token-url}")
    private String tokenUrl;

    @Value("${github.user-api}")
    private String userApiUrl;

    // Getters omitidos para brevedad
}

3. Controlador para obtener URL de autorización:

/**
 * Genera la URL de redirección para autenticación con GitHub
 */
@GetMapping("/obtenerUrlGitHub")
public Resultado obtenerUrlAutorizacion() {
    String urlAutorizacion = configuracionGitHub.getAuthorizeUrl();
    String uriRedireccion = configuracionGitHub.getRedirectUri();
    
    // Generador de UUID para protección contra CSRF
    String tokenCsrf = UUID.randomUUID().toString().replace("-", "");

    // Construcción de la URL de autorización
    StringBuilder urlBuilder = new StringBuilder();
    urlBuilder.append(urlAutorizacion);
    urlBuilder.append("?client_id=").append(configuracionGitHub.getClientId());
    urlBuilder.append("&redirect_uri=").append(UtilidadesURL.codificar(uriRedireccion));
    urlBuilder.append("&state=").append(tokenCsrf);

    return Resultado.exito("URL generada correctamente", urlBuilder);
}

3. Obtención del AccessToken ============================

3.1 Obtención del código de autorización

URL de solicitud:

https://github.com/login/oauth/authorize

Método: GET

Parámetros requeridos:

Respuesta:

Si el usuario inicia sesión y autoriza correctamente, será redirigido a la URI de callback con el código de autorización:

https://tu-dominio.com/gitHubCallback?code=CODIGO_AUTORIZACION&state=TOKEN_CSRF

Si el usuario cancela el proceso, la página de login se cerrará.

3.2 Intercambio de código por AccessToken

Una vez recibido el código de autorización, se debe intercambiar por un token de acceso.

URL de solicitud:

POST https://github.com/login/oauth/access_token

Método: POST

Parámetros:

Respuesta exitosa:

access_token=gho_TOKEN_DE_ACCESO&scope=repo%2Cgist&token_type=bearer

El código de autorización expira en 10 minutos. Es importante verificar que el parámetro state coincida para prevenir ataques CSRF.

3.3 Consideraciones de seguridad

Es fundamental implementar manejo de errores para los siguientes escenarios:

• Errores en la solicitud de autorización
• Errores en la solicitud del token de acceso
• Errores en el flujo de dispositivo
• Expiración y revocación de tokens

4. Obtención de información del usuario =======================================

Una vez obtenido el AccessToken, se puede consultar la información del usuario:

URL de solicitud:

https://api.github.com/user?access_token=TOKEN_OBTENIDO

Método: GET

Parámetros:

La API devolverá los datos del perfil del usuario autorizado, incluyendo información pública como nombre, correo electrónico, avatar y otros datos disponibles.

5. Notas de implementación ==========================

• Los diferentes proyectos pueden presentar variaciones según los requisitos específicos
• Esta guía proporciona una implementación base que puede adaptarse según necesidades particulares
• Es importante validar siempre los códigos de estado y manejar apropiadamente los errores de la API