Guías

Script tag

El botón de Andco en una página sin paso de build, como elemento personalizado.

Cuando no hay bundler —una página estática, un CMS, una plantilla de servidor— @andco/sdk-script entrega el botón como elemento personalizado. Se configura con atributos y no hay ningún paso de registro.

index.htmlhtml

<script type="module" src="https://unpkg.com/@andco/sdk-script/andco.js"></script>

<andco-button
  client-id="tu-client-id"
  redirect-to="https://tuapp.com/"
  scopes="openid email profile"
></andco-button>

Eso es todo: el elemento se registra solo, monta el iframe de Andco, abre la ventana emergente cuando la persona hace clic e intercambia el código al volver.

Atributos

Atributo	Para qué
`client-id`	tu cliente OAuth. Obligatorio
`redirect-to`	la URL registrada de retorno. Obligatorio
`scopes`	separados por espacios
`flow`	`authorization` o `intent`
`locale`	etiqueta BCP 47, por ejemplo `es-CL`
`theme-mode`	`light`, `dark` o `system`
`disabled`, `busy`	estado visual
`endpoint-auth`, `endpoint-api`, `endpoint-widget`	solo para apuntar a otro entorno

Varios elementos en la misma página que declaren la misma configuración comparten una sola instancia, y por lo tanto una sola sesión.

Escuchar el resultado

html

<script type="module">
  const button = document.querySelector("andco-button");

  button.addEventListener("andco-complete", () => location.reload());
  button.addEventListener("andco-error", (event) => console.error(event.detail));
  button.addEventListener("andco-dismiss", () => console.log("closed the window"));
</script>

Los eventos llevan prefijo andco- para no chocar con los tuyos.

Leer la sesión

html

<script type="module">
  import { andcoSessionFor } from "https://unpkg.com/@andco/sdk-script/andco.js";

  const button = document.querySelector("andco-button");
  button.addEventListener("andco-complete", () => {
    const session = andcoSessionFor(button);
    console.log(session?.user.email);
  });
</script>

Valores que no son escalares

Un atributo solo puede llevar texto. Lo que no es escalar —por ejemplo la contribución de autorización de un Resource Server— se asigna como propiedad, que es la división habitual en Web Components:

html

<script type="module">
  document.querySelector("andco-button").authorization = {
    scopes: ["openid", "email"],
    authorizations: [{ resourceServerId: "bank", resource: "https://bank.andco.cl" }],
  };
</script>

Cuándo no usar esto

Si tu página tiene un bundler, usa @andco/sdk directamente o el paquete de tu framework: tendrás tipos, verás los errores al compilar y no cargarás el elemento personalizado.