Guías

JavaScript sin framework

El SDK en una página sin framework, con módulos ES.

bash

npm install @andco/sdk

La instancia

src/andco.jsjs

import { createAndcoInstanceForBrowser } from "@andco/sdk/browser";

export const andco = createAndcoInstanceForBrowser({
  clientId: "tu-client-id",
  redirectTo: new URL("/", location.origin).href,
  initialScopes: ["openid", "email", "profile"],
});

Reaccionar a la sesión

src/main.jsjs

import { andco } from "./andco.js";

const status = document.querySelector("#status");

andco.auth.onChange((session) => {
  status.textContent = session ? session.user.email : "Sin sesión";
});

onChange devuelve la función para dejar de observar, y al suscribirse dispara la carga inicial. No hace falta llamar a nada más para arrancar.

Si necesitas el valor una sola vez:

const { data: session } = await andco.auth.getSession();

Ingresar y salir

document.querySelector("#sign-in").addEventListener("click", async () => {
  const { data: session, error } = await andco.auth.signIn();
  if (error) return showError(error);
  if (!session) return; // closed the window
});

document.querySelector("#sign-out").addEventListener("click", () => andco.auth.signOut());

La ventana emergente debe abrirse durante un gesto de la persona. Llamar a signIn desde un setTimeout o después de un await largo hace que el navegador la bloquee.

Si la bloquea igual, cae a redirección:

const { error } = await andco.auth.signIn();
if (error?.code === "popup_blocked") {
  await andco.auth.signIn({ presentation: "redirect" });
}

El botón hospedado

Sin framework, el controlador es lo que conecta el iframe.

src/button.jsjs

import { AndcoButtonController } from "@andco/sdk/browser";
import { andco } from "./andco.js";

const iframe = document.querySelector("#andco-button");
const controller = new AndcoButtonController({
  client: andco,
  authorization: { scopes: ["openid", "email", "profile"] },
  onComplete: () => console.log("done"),
  onError: (error) => showError(error),
});

controller.subscribe((snapshot) => {
  iframe.src = snapshot.iframeURL;
  iframe.hidden = !snapshot.ready;
});

const disconnect = controller.connect(iframe);

El iframe es tuyo: tú decides dónde va y cómo se ve su caja. El controlador se encarga del protocolo, de la ventana emergente y del intercambio del código.

Si tu página no tiene un paso de build, @andco/sdk-script hace esto mismo con una etiqueta: ver Script tag.

Llamar a la API

const { data, error } = await andco.rest.http.GET("/accounts");
if (error) return showError(error);
render(data);

Fallos del callback

const { error } = await andco.session.ready;
if (error) showError(error);