SDK Integration

The AccessGate SDK silently collects behavioral data in the browser and packages it for verification. No continuous API calls or background polling required.

Installation

html
<!-- Production -->
<script src="https://sdk.runloci.com/accessgate-sdk.min.js"></script>

<!-- Staging -->
<script src="https://sdk-staging.runloci.com/accessgate-sdk.min.js"></script>

NPM

bash
npm install @runloci/accessgate-sdk
javascript
import AccessGateSDK from '@runloci/accessgate-sdk';

Initialization

Initialize the SDK when your page loads:

javascript
const sdk = new AccessGateSDK({
  enableBehavioralBiometrics: true,
  maxMouseEvents: 500,
  maxKeystrokeEvents: 200,
  trackNavigation: true
});

Configuration Options

Option Type Default Description
enableBehavioralBiometrics boolean true Enable mouse/keyboard tracking
maxMouseEvents number 500 Max mouse events to store
maxKeystrokeEvents number 200 Max keystroke events to store
trackNavigation boolean true Track page navigation
trackScroll boolean true Track scroll behavior

Keep default values unless you have specific performance requirements. Higher limits provide better accuracy.

---

Data Collection

What Gets Collected

Device Signals:

  • Browser fingerprint (canvas, WebGL, fonts)
  • Screen resolution and color depth
  • Timezone and language settings
  • Platform and browser version
  • Hardware info (cores, memory, touch support)

Behavioral Signals:

  • Mouse movement patterns (position, speed, acceleration)
  • Click events (timing, position, button)
  • Keystroke dynamics (press/release timing)
  • Scroll behavior (depth, speed, patterns)
  • Navigation flow (page transitions, time on page)

Mobile Signals (when available):

  • Touch patterns (pressure, size, position)
  • Device orientation
  • Accelerometer data

All data stays in browser memory until you explicitly trigger collection. No automatic network transmission.

---

Collecting Data

Basic Collection

javascript
const data = await sdk.collect();

Returns:

javascript
{
  device: {
    user_agent: "Mozilla/5.0...",
    fingerprint: {
      screen: { width: 1920, height: 1080, colorDepth: 24 },
      canvas: "abc123",
      webgl: "def456",
      timezone: "Africa/Lagos",
      language: "en-US",
      hardware: { cores: 8, memory: 16, touchSupport: false }
    }
  },
  behavior: {
    mouseMovements: 245,
    clickPattern: "human",
    keystrokeTimings: [120, 150, 200],
    scrollBehavior: "natural",
    timeOnPage: 45000,
    formFillSpeed: 2.5
  }
}

Enhanced Collection (Raw Events)

Include raw behavioral events for maximum accuracy:

javascript
const data = await sdk.collect({
  includeLocation: true,
  includeBehavioral: true
});

Additional fields:

javascript
{
  // ... device and behavior fields ...
  behavioral: {
    mouse: [
      { timestamp: 1700000001000, x: 100, y: 200, type: 'move' },
      { timestamp: 1700000001500, x: 102, y: 202, type: 'click', button: 0 }
    ],
    keystrokes: [
      { timestamp: 1700000002000, key: 'Shift', type: 'keydown' },
      { timestamp: 1700000002100, key: 'A', type: 'keydown' }
    ],
    session: [
      { timestamp: 1698501590000, path: '/login', timeOnPage: 45, scrollDepth: 67, interactions: 12 }
    ]
  },
  location: {
    latitude: 6.5244,
    longitude: 3.3792,
    accuracy: 10,
    source: 'gps'
  }
}

includeLocation: true will prompt the user for location permission. Only use when necessary.

---

Integration Patterns

Login Flow

javascript
const loginForm = document.getElementById('login-form');

loginForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  
  // Collect behavioral data
  const accessgateData = await sdk.collect();
  
  // Send to your backend
  const response = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      email: loginForm.email.value,
      password: loginForm.password.value,
      accessgate_data: accessgateData
    })
  });
  
  const result = await response.json();
  
  if (result.requires_2fa) {
    showTwoFactorModal();
  } else if (result.success) {
    window.location.href = '/dashboard';
  } else {
    showError(result.error);
  }
});

Payment Flow

javascript
const paymentForm = document.getElementById('payment-form');

paymentForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  
  // Collect with raw events for high-value actions
  const accessgateData = await sdk.collect({
    includeBehavioral: true
  });
  
  const response = await fetch('/api/process-payment', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      amount: paymentForm.amount.value,
      card_token: paymentForm.card_token.value,
      accessgate_data: accessgateData
    })
  });
  
  const result = await response.json();
  
  if (result.decision === 'block') {
    showError('Transaction declined for security reasons.');
  } else if (result.decision === 'review') {
    await requestOTP();
  } else {
    showSuccess('Payment successful!');
  }
});

Single Page Applications (SPA)

For SPAs, reset the SDK when navigating between protected sections:

javascript
// On route change
router.beforeEach((to, from, next) => {
  if (to.meta.protected) {
    sdk.reset();
  }
  next();
});

// On protected action
async function protectedAction() {
  const data = await sdk.collect();
  // ... verify with backend
}

SDK Methods

collect(options?)

Collect all stored behavioral data.

javascript
const data = await sdk.collect({
  includeLocation: false,
  includeBehavioral: false
});

reset()

Clear all stored data and start fresh.

javascript
sdk.reset();

isReady()

Check if SDK is initialized and collecting data.

javascript
if (sdk.isReady()) {
  // SDK is active
}

getStats()

Get current collection statistics (for debugging).

javascript
const stats = sdk.getStats();
// { mouseEvents: 234, keystrokeEvents: 89, sessionDuration: 45000 }

Privacy Considerations

What We DON'T Collect

  • Actual keystrokes (content of what you type)
  • Form field values
  • Passwords or sensitive data
  • Personal identifying information
  • Screenshots or recordings

What We DO Collect

  • Timing patterns (when keys are pressed, not which keys)
  • Movement patterns (how the mouse moves)
  • Device characteristics (browser type, screen size)

AccessGate is designed with privacy-by-design principles. We analyze behavior patterns, not content.

---

Browser Support

Browser Minimum Version
Chrome 60+
Firefox 55+
Safari 11+
Edge 79+
Mobile Chrome 60+
Mobile Safari 11+

Troubleshooting

SDK Not Collecting Data

javascript
// Check if SDK is loaded
if (typeof AccessGateSDK === 'undefined') {
  console.error('AccessGate SDK not loaded');
}

// Check if SDK is ready
if (!sdk.isReady()) {
  console.error('SDK not initialized');
}

// Check collection stats
console.log(sdk.getStats());

Empty Behavioral Data

  • Ensure SDK is initialized before the user interacts with the page
  • Check that enableBehavioralBiometrics is true
  • Verify the user has interacted with the page (mouse movement, keystrokes)

Performance Concerns

If you notice performance issues:

javascript
// Reduce collection limits
const sdk = new AccessGateSDK({
  maxMouseEvents: 200,
  maxKeystrokeEvents: 100
});

Next Steps

Support