Referencia

@andco/sdk-script

El botón de Andco como elemento personalizado, sin paso de build.

html

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

El módulo registra <andco-button> al cargarse. No hay paso de registro ni configuración global.

andco-button

html

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

Atributos

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

Todos son observados: cambiarlos en vivo reconfigura el botón.

Eventos

Evento	Cuándo
`andco-ready`	la superficie hospedada quedó lista
`andco-activate`	la persona activó el control
`andco-complete`	la autorización o el Intent terminaron
`andco-dismiss`	la persona cerró la ventana
`andco-error`	algo falló. El detalle lleva el error

El prefijo andco- existe para que estos eventos no choquen con los de tu página.

Propiedades

Lo que no es escalar no cabe en un atributo. Se asigna como propiedad, que es la división estándar en Web Components:

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

andcoSessionFor

andcoSessionFor(element: AndcoButtonElement): AndcoSession | null | undefined

La sesión de la instancia que ese elemento usa, con los tres estados de siempre.

andcoInstance

andcoInstance(options: Record<string, unknown>): AndcoSessionClient

La instancia que corresponde a una configuración, para cuando necesitas llamar a la API desde la misma página.

Varios elementos que declaran la misma configuración resuelven la misma instancia. Es deliberado: son el mismo cliente OAuth en la misma página, y varias instancias significarían varias sesiones para una sola persona.

Cuándo no usar esto

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