Autenticación - B3 Docs

Para Desarrolladores: Todas las demostraciones están alojadas en la aplicación global-accounts. Para probar localmente, ejecute pnpm dev en el directorio global-accounts y acceda a las demostraciones en http://localhost:5173/demos.

Demostración Interactiva

Experimenta la autenticación B3 en acción con todos los proveedores disponibles:

Esta es una demostración interactiva en vivo utilizando el SDK de B3 real. Cuando no especificas strategies, se muestran todas las opciones de autenticación disponibles. Ve la página completa de la demostración para más ejemplos.

Estrategias de Autenticación

B3 Global Accounts admite múltiples estrategias de autenticación para adaptarse a las necesidades de tu aplicación.

Autenticación de Google

import { SignInWithB3 } from "@b3dotfun/sdk/global-account/react";

const b3Chain = {
  id: 8333,
  name: "B3",
  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
  rpc: "https://mainnet-rpc.b3.fun",
};

function GoogleAuth() {
  return (
    <SignInWithB3
      strategies={["google"]}
      chain={b3Chain}
      partnerId="tu-id-de-socio"
      onLoginSuccess={(globalAccount) => {
        console.log("Autenticación de Google exitosa:", globalAccount);
      }}
      onError={async (error) => {
        console.error("Falló la autenticación:", error);
      }}
    />
  );
}

Autenticación de Discord

import { SignInWithB3 } from "@b3dotfun/sdk/global-account/react";

const b3Chain = {
  id: 8333,
  name: "B3",
  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
  rpc: "https://mainnet-rpc.b3.fun",
};

function DiscordAuth() {
  return (
    <SignInWithB3
      strategies={["discord"]}
      chain={b3Chain}
      partnerId="tu-id-de-socio"
      onLoginSuccess={(globalAccount) => {
        console.log("Autenticación de Discord exitosa:", globalAccount);
      }}
      onError={async (error) => {
        console.error("Falló la autenticación:", error);
      }}
    />
  );
}

Múltiples Estrategias Específicas

Puedes permitir que los usuarios elijan entre múltiples proveedores de autenticación específicos:

import { SignInWithB3 } from "@b3dotfun/sdk/global-account/react";

const b3Chain = {
  id: 8333,
  name: "B3",
  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
  rpc: "https://mainnet-rpc.b3.fun",
};

function MultipleAuthOptions() {
  return (
    <SignInWithB3
      strategies={["google", "discord", "x"]}
      chain={b3Chain}
      partnerId="tu-id-de-socio"
      onLoginSuccess={(globalAccount) => {
        console.log("Autenticación exitosa:", globalAccount);
      }}
    />
  );
}

Especifica un arreglo de estrategias para mostrar solo esas opciones de autenticación a tus usuarios.

Autenticación sin Interfaz

Para implementaciones personalizadas, usa el servicio de autenticación sin interfaz:

Autenticación Básica

import { authenticate } from "@b3dotfun/sdk/global-account/app";

async function authenticateUser(accessToken: string, identityToken: string) {
  try {
    const authResult = await authenticate(accessToken, identityToken, {
      // configuración adicional
    });
    
    if (authResult) {
      console.log("Autenticación exitosa:", authResult);
      return authResult;
    } else {
      console.log("Falló la autenticación");
      return null;
    }
  } catch (error) {
    console.error("Error de autenticación:", error);
    throw error;
  }
}

Autenticación en React Native

// Para aplicaciones React Native
import { authenticate } from "@b3dotfun/sdk/global-account/app";

async function authenticateInReactNative() {
  const result = await authenticate("access-token", "identity-token");
  return result;
}

Hooks de Autenticación

Hook useB3

El hook principal para acceder al estado de autenticación:

import { useB3 } from "@b3dotfun/sdk/global-account/react";

function AuthStatus() {
  const { account, user } = useB3();

  return (
    <div>
      {account ? (
        <div>
          <p>Bienvenido, {user?.displayName}!</p>
          <p>Dirección de la Cuenta: {account.address}</p>
        </div>
      ) : (
        <p>Por favor, inicia sesión</p>
      )}
    </div>
  );
}

El hook useB3 proporciona acceso a la account autenticada (cuenta de billetera) y al user (datos del perfil del usuario). Usa useAuthStore para acceder a los estados de carga y autenticación.

Hook useAccountWallet

Accede a la información de la billetera y al estado de la conexión:

import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";

function WalletInfo() {
  const { wallet, address, ensName } = useAccountWallet();

  return (
    <div>
      {address && (
        <div>
          <p>Dirección de la Billetera: {address}</p>
          {ensName && <p>ENS: {ensName}</p>}
          {wallet?.meta?.icon && <img src={wallet.meta.icon} alt="Icono de la billetera" />}
        </div>
      )}
    </div>
  );
}

Manejo de Errores

Implementa un manejo adecuado de errores para los flujos de autenticación:

function AuthWithErrorHandling() {
  const [authError, setAuthError] = useState<string | null>(null);

  return (
    <div>
      <SignInWithB3
        strategies={["google", "discord"]}
        chain={b3Chain}
        partnerId="tu-id-de-socio"
        onLoginSuccess={(globalAccount) => {
          setAuthError(null);
          console.log("Éxito:", globalAccount);
        }}
        onError={async (error) => {
          setAuthError(error.message);
          console.error("Error de autenticación:", error);
        }}
      />
      
      {authError && (
        <div className="error">
          Falló la autenticación: {authError}
        </div>
      )}
    </div>
  );
}

Mejores Prácticas

ID de Socio

Siempre usa tu ID de socio único para una correcta atribución y análisis.

Manejo de Errores

Implementa un manejo de errores exhaustivo para una mejor experiencia del usuario.

Gestión de Sesiones

Establece duraciones de sesión apropiadas basadas en las necesidades de seguridad de tu aplicación.

Configuración del Entorno

Usa variables de entorno adecuadas para diferentes etapas de despliegue.

Referencia de la API de Componentes

SignInWithB3

El componente principal del botón de autenticación.

Props

strategies

AllowedStrategy[]

Arreglo de estrategias de autenticación para mostrar. Las opciones incluyen: "google", "discord", "x", "apple", "walletConnect", "io.metamask", "com.coinbase.wallet".Dejar indefinido para mostrar todas las opciones.

chain

Chain

requerido

Objeto de configuración de la cadena de blockchain con id, name, nativeCurrency, y rpc.

partnerId

string

requerido

Tu ID de socio único para B3 Global Accounts.

Función de callback llamada cuando la autenticación tiene éxito.

onError

(error: Error) => Promise<void>

Función de callback asíncrona llamada cuando ocurre un error.

Si cerrar o no el modal después del inicio de sesión exitoso.

buttonText

string | ReactNode

Texto personalizado o componente para el botón de inicio de sesión.

withLogo

boolean

predeterminado:"true"

Si mostrar o no el logo de B3 en el botón.

Estrategias de Autenticación Disponibles

B3 Global Accounts admite los siguientes métodos de autenticación:

Estrategia	Tipo	Descripción
`"google"`	Social	Autenticación OAuth de Google
`"discord"`	Social	Autenticación OAuth de Discord
`"x"`	Social	Autenticación de X (anteriormente Twitter)
`"apple"`	Social	Iniciar sesión con Apple
`"guest"`	Sin contraseña	Autenticación de invitado sin registro
`"walletConnect"`	Billetera	Protocolo WalletConnect
`"io.metamask"`	Billetera	Extensión de navegador MetaMask
`"com.coinbase.wallet"`	Billetera	Cartera de Coinbase

Próximos Pasos

Referencia de Hooks

Explora todos los hooks de React disponibles.

Ejemplos

Ve ejemplos completos de integración.

Prueba la Demo

Aplicación de demostración de autenticación interactiva.

Overview

Global Accounts

​Demostración Interactiva

​Estrategias de Autenticación

​Inicio de Sesión Social

​Autenticación de Google

​Autenticación de Discord

​Múltiples Estrategias Específicas

​Autenticación sin Interfaz

​Autenticación Básica

​Autenticación en React Native

​Hooks de Autenticación

​Hook useB3

​Hook useAccountWallet

​Manejo de Errores

​Mejores Prácticas

ID de Socio

Manejo de Errores

Gestión de Sesiones

Configuración del Entorno

​Referencia de la API de Componentes

​SignInWithB3

​Props

​Estrategias de Autenticación Disponibles

​Próximos Pasos

Referencia de Hooks

Ejemplos

Prueba la Demo

Demostración Interactiva

Estrategias de Autenticación

Inicio de Sesión Social

Autenticación de Google

Autenticación de Discord

Múltiples Estrategias Específicas

Autenticación sin Interfaz

Autenticación Básica

Autenticación en React Native

Hooks de Autenticación

Hook useB3

Hook useAccountWallet

Manejo de Errores

Mejores Prácticas

Referencia de la API de Componentes

SignInWithB3

Props

Estrategias de Autenticación Disponibles

Próximos Pasos