> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Aprende a añadir el inicio de sesión a tu aplicación web tradicional mediante el Authorization Code Flow.

# Añadir el inicio de sesión mediante el Authorization Code Flow

export const AuthCodeGroup = ({children, dropdown}) => {
  const [processedChildren, setProcessedChildren] = useState(children);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      unsubscribe = window.autorun(() => {
        const processChildren = node => {
          if (typeof node === "string") {
            let processedNode = node;
            for (const [key, value] of window.rootStore.variableStore.values.entries()) {
              const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
              processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
            }
            return processedNode;
          } else if (Array.isArray(node)) {
            return node.map(processChildren);
          } else if (node && node.props && node.props.children) {
            return {
              ...node,
              props: {
                ...node.props,
                children: processChildren(node.props.children)
              }
            };
          }
          return node;
        };
        setProcessedChildren(processChildren(children));
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  return <CodeGroup dropdown={dropdown}>{processedChildren}</CodeGroup>;
};

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****ENMASCARADO*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

Puedes incorporar el inicio de sesión a tu aplicación web tradicional mediante el Flujo de Código de Autorización. Para saber cómo funciona este flujo y por qué te conviene usarlo, lee [Authorization Code Flow](/es/docs/get-started/authentication-and-authorization-flow/authorization-code-flow). Para llamar a tu API desde una aplicación web tradicional, lee [Call Your API Using the Authorization Code Flow](/es/docs/get-started/authentication-and-authorization-flow/authorization-code-flow/call-your-api-using-the-authorization-code-flow).

Para implementar el Flujo de Código de Autorización, Auth0 ofrece los siguientes recursos:

* [Regular Web App Quickstarts](/es/docs/quickstart/webapp): La forma más sencilla de implementar el flujo.
* [Authentication API](https://auth0.com/docs/api/authentication): Si prefieres crear tu propia solución, sigue leyendo para aprender a llamar directamente a nuestra API.

Después de iniciar sesión correctamente, tu aplicación tendrá acceso al <Tooltip tip="Token de ID: credencial destinada al propio cliente, en lugar de para acceder a un recurso." cta="Ver glosario" href="/es/docs/glossary?term=ID+token">token de ID</Tooltip> y al <Tooltip tip="Token de ID: credencial destinada al propio cliente, en lugar de para acceder a un recurso." cta="Ver glosario" href="/es/docs/glossary?term=access+token">token de acceso</Tooltip> del usuario. El token de ID contiene información básica del perfil del usuario, y el token de acceso puede usarse para llamar al endpoint `/userinfo` de Auth0 o a tus propias API protegidas. Para obtener más información sobre los tokens de ID, lee [ID Tokens](/es/docs/secure/tokens/id-tokens). Para obtener más información sobre los tokens de acceso, lee [Access Tokens](/es/docs/secure/tokens/access-tokens).

Solicitarás la autorización del usuario y lo redirigirás de nuevo a tu aplicación con un `authorization_code`. Después, intercambiarás el código por tokens.

<div id="prerequisites">
  ## Requisitos previos
</div>

Registra tu aplicación en Auth0. Para obtener más información, consulta [Registrar aplicación web tradicional](/es/docs/get-started/auth0-overview/create-applications/regular-web-apps).

* Selecciona **Regular Web App** como **Tipo de aplicación**.
* Agrega una **URL de callback permitida** de `{https://yourApp/callback}`.
* Asegúrate de que los **Tipos de concesión** de tu aplicación incluyan **Authorization Code**. Para obtener más información, consulta [Actualizar tipos de concesión](/es/docs/get-started/applications/update-grant-types).

<div id="authorize-user">
  ## Autorizar al usuario
</div>

Para iniciar el flujo, deberás obtener la autorización del usuario. Este paso puede incluir uno o más de los siguientes procesos:

* Autenticar al usuario;
* Redirigir al usuario a un <Tooltip tip="Proveedor de identidad (IdP): servicio que almacena y gestiona identidades digitales." cta="Ver glosario" href="/es/docs/glossary?term=Identity+Provider">proveedor de identidad</Tooltip> para gestionar la autenticación;
* Obtener el consentimiento del usuario para el nivel de permisos solicitado, a menos que ya lo haya otorgado previamente.

Para autorizar al usuario, tu aplicación debe dirigirlo a la [URL de autorización](https://auth0.com/docs/api/authentication#authorization-code-flow).

<div id="authorization-url-example">
  ### Ejemplo de URL de autorización
</div>

export const codeExample1 = `https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope={scope}&
    state={state}`;

<AuthCodeBlock children={codeExample1} language="http" />

<div id="parameters">
  ### Parámetros
</div>

| Nombre del parámetro | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `response_type`      | Indica el tipo de credencial que devolverá Auth0 (`code` o `token`). Para este flujo, el valor debe ser `code`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `client_id`          | El ID de cliente de tu aplicación. Puedes encontrar este valor en la [Configuración de la aplicación](https://manage.auth0.com/#/Applications/\{yourClientId}/settings).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `redirect_uri`       | La URL a la que Auth0 redirigirá el navegador después de que el usuario haya concedido la autorización. El código de autorización estará disponible en el parámetro `code` de la URL. Debes especificar esta URL como una URL de callback válida en la [Configuración de la aplicación](https://manage.auth0.com/#/Applications/\{yourClientId}/settings).<br /><br />**Advertencia:** Según la [especificación OAuth 2.0](https://tools.ietf.org/html/rfc6749#section-3.1.2), Auth0 elimina todo lo que aparece después del hash y *no* tiene en cuenta ningún fragmento.                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `scope`              | Especifica los [scopes](/es/docs/get-started/apis/scopes) para los que quieres solicitar autorización, que determinan qué claims (o atributos del usuario) quieres recibir. Deben estar separados por un espacio. Para obtener un token de ID en la respuesta, debes especificar al menos el scope `openid`. Si quieres obtener el perfil completo del usuario, puedes solicitar `openid profile`. Puedes solicitar cualquiera de los [scopes estándar de OpenID Connect (OIDC)](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims) sobre los usuarios, como `email`, o [claims personalizados](/es/docs/secure/tokens/json-web-tokens/json-web-token-claims#custom-claims) que sigan un [formato con namespace](/es/docs/secure/tokens/json-web-tokens/create-custom-claims). Incluye `offline_access` para obtener un [Refresh Token](/es/docs/glossary?term=Refresh+Token) (asegúrate de que el campo **Allow Offline Access** esté habilitado en la [Configuración de la aplicación](https://manage.auth0.com/#/applications)). |
| `state`              | (recomendado) Una cadena alfanumérica arbitraria y opaca que tu aplicación añade a la solicitud inicial y que Auth0 incluye al redirigir de vuelta a tu aplicación. Para ver cómo usar este valor para prevenir ataques de falsificación de solicitudes entre sitios (CSRF), consulta [Mitigate CSRF Attacks With State Parameters](/es/docs/secure/attack-protection/state-parameters).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `connection`         | (opcional) Obliga al usuario a iniciar sesión con una conexión específica. Por ejemplo, puedes pasar el valor `github` para enviar al usuario directamente a GitHub e iniciar sesión con su cuenta de GitHub. Si no se especifica, el usuario verá la pantalla de Auth0 Lock con todas las conexiones configuradas. Puedes ver una lista de tus conexiones configuradas en la pestaña **Connections** de tu aplicación.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `organization`       | (opcional) ID de la organización que se usará al autenticar a un usuario. Si no se proporciona y tu aplicación está configurada para **Display Organization Prompt**, el usuario podrá introducir el nombre de la organización al autenticarse.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `invitation`         | (opcional) ID del ticket de invitación de la organización. Al [invitar a un miembro a una Organization](/es/docs/manage-users/organizations/configure-organizations/invite-members), tu aplicación debe gestionar la aceptación de la invitación reenviando los pares clave-valor `invitation` y `organization` cuando el usuario acepte la invitación.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `login_hint`         | (opcional) Rellena previamente el campo de nombre de usuario/correo electrónico en la página de inicio de sesión o registro al redirigir a Auth0. Compatible con la experiencia de Universal Login.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |

Como ejemplo, el fragmento HTML de tu URL de autorización al añadir el inicio de sesión a tu aplicación podría verse así:

export const codeExample2 = `<a href="https://{yourDomain}/authorize?
  response_type=code&
  client_id={yourClientId}&
  redirect_uri={https://yourApp/callback}&
  scope=openid%20profile&
  state=xyzABC123">
  Iniciar sesión
</a>`;

<AuthCodeBlock children={codeExample2} language="html" />

<div id="response">
  ### Respuesta
</div>

Si todo sale bien, recibirás una respuesta `HTTP 302`. El código de autorización aparece al final de la URL:

```http lines theme={null}
HTTP/1.1 302 Found
Location: {https://yourApp/callback}?code={authorizationCode}&state=xyzABC123
```

<div id="request-tokens">
  ## Solicitar tokens
</div>

Ahora que tienes un código de autorización, debes intercambiarlo por tokens. Con el código de autorización (`code`) extraído en el paso anterior, tendrás que enviar una solicitud `POST` a la [URL del token](https://auth0.com/docs/api/authentication#authorization-code).

<div id="post-to-token-url-example">
  ### Ejemplo de solicitud POST a la URL del token
</div>

<AuthCodeGroup>
  ```bash cURL theme={null}
  curl --request POST \
    --url 'https://{yourDomain}/oauth/token' \
    --header 'content-type: application/x-www-form-urlencoded' \
    --data grant_type=authorization_code \
    --data 'client_id={yourClientId}' \
    --data 'client_secret={yourClientSecret}' \
    --data 'code=yourAuthorizationCode}' \
    --data 'redirect_uri={https://yourApp/callback}'
  ```

  ```csharp C# theme={null}
  var client = new RestClient("https://{yourDomain}/oauth/token");
  var request = new RestRequest(Method.POST);
  request.AddHeader("content-type", "application/x-www-form-urlencoded");
  request.AddParameter("application/x-www-form-urlencoded", "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}", ParameterType.RequestBody);
  IRestResponse response = client.Execute(request);
  ```

  ```go Go theme={null}
  package main

  import (
  	"fmt"
  	"strings"
  	"net/http"
  	"io/ioutil"
  )

  func main() {

  	url := "https://{yourDomain}/oauth/token"

  	payload := strings.NewReader("grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}")

  	req, _ := http.NewRequest("POST", url, payload)

  	req.Header.Add("content-type", "application/x-www-form-urlencoded")

  	res, _ := http.DefaultClient.Do(req)

  	defer res.Body.Close()
  	body, _ := ioutil.ReadAll(res.Body)

  	fmt.Println(res)
  	fmt.Println(string(body))

  }
  ```

  ```java Java theme={null}
  HttpResponse response = Unirest.post("https://{yourDomain}/oauth/token")
    .header("content-type", "application/x-www-form-urlencoded")
    .body("grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}")
    .asString();
  ```

  ```javascript Node.JS theme={null}
  var axios = require("axios").default;

  var options = {
    method: 'POST',
    url: 'https://{yourDomain}/oauth/token',
    headers: {'content-type': 'application/x-www-form-urlencoded'},
    data: new URLSearchParams({
      grant_type: 'authorization_code',
      client_id: '{yourClientId}',
      client_secret: '{yourClientSecret}',
      code: 'yourAuthorizationCode}',
      redirect_uri: '{https://yourApp/callback}'
    })
  };

  axios.request(options).then(function (response) {
    console.log(response.data);
  }).catch(function (error) {
    console.error(error);
  });
  ```

  ```php PHP theme={null}
  $curl = curl_init();

  curl_setopt_array($curl, [
    CURLOPT_URL => "https://{yourDomain}/oauth/token",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "POST",
    CURLOPT_POSTFIELDS => "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}",
    CURLOPT_HTTPHEADER => [
      "content-type: application/x-www-form-urlencoded"
    ],
  ]);

  $response = curl_exec($curl);
  $err = curl_error($curl);

  curl_close($curl);

  if ($err) {
    echo "cURL Error #:" . $err;
  } else {
    echo $response;
  }
  ```

  ```python Python theme={null}
  import http.client

  conn = http.client.HTTPSConnection("")

  payload = "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}"

  headers = { 'content-type': "application/x-www-form-urlencoded" }

  conn.request("POST", "/{yourDomain}/oauth/token", payload, headers)

  res = conn.getresponse()
  data = res.read()

  print(data.decode("utf-8"))
  ```

  ```ruby Ruby theme={null}
  require 'uri'
  require 'net/http'
  require 'openssl'

  url = URI("https://{yourDomain}/oauth/token")

  http = Net::HTTP.new(url.host, url.port)
  http.use_ssl = true
  http.verify_mode = OpenSSL::SSL::VERIFY_NONE

  request = Net::HTTP::Post.new(url)
  request["content-type"] = 'application/x-www-form-urlencoded'
  request.body = "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}"

  response = http.request(request)
  puts response.read_body
  ```
</AuthCodeGroup>

<div id="parameters">
  ### Parámetros
</div>

| Nombre del parámetro | Descripción                                                                                                                                                                                                                                                                                                                                                   |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `grant_type`         | Establece este valor en `authorization_code`.                                                                                                                                                                                                                                                                                                                 |
| `code`               | El `authorization_code` obtenido en el paso anterior de este tutorial.                                                                                                                                                                                                                                                                                        |
| `client_id`          | El ID de cliente de tu aplicación. Puedes encontrar este valor en la [Configuración de la aplicación](https://manage.auth0.com/#/Applications/\{yourClientId}/settings).                                                                                                                                                                                      |
| `client_secret`      | El secreto de cliente de tu aplicación. Puedes encontrar este valor en la [Configuración de la aplicación](https://manage.auth0.com/#/Applications/\{yourClientId}/settings). Para obtener más información sobre los métodos de autenticación de aplicaciones disponibles, consulta [Credenciales de la aplicación](/es/docs/secure/application-credentials). |
| `redirect_uri`       | La URL de callback válida configurada en la configuración de tu aplicación. Debe coincidir exactamente con el `redirect_uri` enviado a la URL de autorización en el paso anterior de este tutorial. Ten en cuenta que debe estar codificada como URL.                                                                                                         |

<div id="response">
  ### Respuesta
</div>

Si todo va bien, recibirás una respuesta HTTP 200 con una carga que incluye los valores `access_token`, `refresh_token`, `id_token` y `token_type`:

```json lines theme={null}
{
  "access_token": "eyJz93a...k4laUWw",
  "refresh_token": "GEbRxBN...edjnXbL",
  "id_token": "eyJ0XAi...4faeEoQ",
  "token_type": "Bearer"
}
```

<Warning>
  Valida tus tokens antes de guardarlos. Para saber cómo hacerlo, consulta [Validar tokens de ID](/es/docs/secure/tokens/id-tokens/validate-id-tokens) y [Validar tokens de acceso](/es/docs/secure/tokens/access-tokens/validate-access-tokens).
</Warning>

[Los tokens de ID](/es/docs/secure/tokens/id-tokens) contienen información del usuario que debe decodificarse y extraerse.

[Los tokens de acceso](/es/docs/secure/tokens/access-tokens) se utilizan para llamar al [endpoint /userinfo de la API de autenticación de Auth0](https://auth0.com/docs/api/authentication#get-user-info) o a otra API. Si estás llamando a tu propia API, lo primero que deberá hacer es [verificar el token de acceso](/es/docs/secure/tokens/access-tokens/validate-access-tokens).

[Los Refresh tokens](/es/docs/secure/tokens/refresh-tokens) se utilizan para obtener un nuevo token de acceso o token de ID después de que el anterior haya expirado. El `refresh_token` solo estará presente en la respuesta si incluiste el scope `offline_access` y habilitaste **Allow Offline Access** para tu API en el Dashboard.

<Warning>
  Los Refresh tokens deben almacenarse de forma segura, ya que permiten que un usuario permanezca autenticado prácticamente de forma indefinida.
</Warning>

<div id="use-cases">
  ## Casos de uso
</div>

<div id="basic-authentication-request">
  ### Solicitud básica de autenticación
</div>

Este ejemplo muestra la solicitud más básica que puedes hacer al autorizar al usuario en el paso 1. Muestra la pantalla de inicio de sesión de Auth0 y permite al usuario iniciar sesión con cualquiera de las conexiones que hayas configurado:

export const codeExample13 = `https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid`;

<AuthCodeBlock children={codeExample13} language="http" />

Ahora, cuando solicites tokens, tu token de ID contendrá los claims más básicos. Cuando decodifiques el token de ID, se verá similar a esto:

```json lines theme={null}
{
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt9...",
  "exp": 1478112929,
  "iat": 1478076929
}
```

<div id="request-users-name-and-profile-picture">
  ### Solicitar el nombre y la foto de perfil del usuario
</div>

Además de la autenticación habitual del usuario, este ejemplo muestra cómo solicitar datos adicionales del usuario, como su nombre y su foto de perfil.

Para solicitar el nombre y la foto de perfil del usuario, debes añadir los scopes adecuados al autorizar al usuario:

export const codeExample14 = `https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state={state}`;

<AuthCodeBlock children={codeExample14} language="http" />

Ahora, cuando solicites tokens, tu token de ID contendrá los claims de nombre e imagen que solicitaste. Al decodificarlo, se verá similar a:

```json lines theme={null}
{
  "name": "jerrie@...",
  "picture": "https://s.gravatar.com/avatar/6222081fd7dcea7dfb193788d138c457?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fje.png",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt...",
  "exp": 1478113129,
  "iat": 1478077129
}
```

<div id="request-user-log-in-with-github">
  ### Solicita al usuario que inicie sesión con GitHub
</div>

Además de la autenticación habitual del usuario, este ejemplo muestra cómo redirigir a los usuarios directamente a un proveedor de identidad social, como GitHub. Primero tendrás que configurar la conexión adecuada en [Auth0 Dashboard > Authentication > Social](https://manage.auth0.com/#/connections/social) y obtener el nombre de la conexión en la pestaña **Settings**.

Para enviar a los usuarios directamente a la pantalla de inicio de sesión de GitHub, debes pasar el parámetro `connection` y asignarle como valor el nombre de la conexión (en este caso, `github`) al autorizar al usuario en el paso 1:

export const codeExample15 = `https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state={state}&
    connection=github`;

<AuthCodeBlock children={codeExample15} language="http" />

Ahora, cuando solicites tokens, tu token de ID contendrá una claim `sub` con el identificador único del usuario que devuelve GitHub. Cuando decodifiques el token de ID, tendrá un aspecto similar a:

```json lines theme={null}
{
  "name": "Jerrie Pelser",
  "nickname": "jerriep",
  "picture": "https://avatars.githubusercontent.com/u/1006420?v=3",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "github|100...",
  "aud": "xvt...",
  "exp": 1478114742,
  "iat": 1478078742
}
```

<div id="learn-more">
  ## Más información
</div>

* [Marco de autorización de OAuth 2.0](/es/docs/authenticate/protocols/oauth)
* [Protocolo OpenID Connect](/es/docs/authenticate/protocols/openid-connect-protocol)
* [Tokens](/es/docs/secure/tokens)
* [Registrar aplicaciones web tradicionales](/es/docs/get-started/auth0-overview/create-applications/regular-web-apps)
* [Actualizar los tipos de concesión](/es/docs/get-started/applications/update-grant-types)