This page demonstrates different ways to integrate Labloom with your existing website.
Method 1: Direct Redirect
Redirect users directly to Labloom with return URL parameters.
// JavaScript example
function redirectToLabloom() {
const returnUrl = encodeURIComponent(window.location.href);
const labloomUrl = `https://your-labloom-domain.com?return_url=${returnUrl}`;
window.location.href = labloomUrl;
}
// HTML example
<a href="https://your-labloom-domain.com?return_url=https://yoursite.com/dashboard">
Access Health Dashboard
</a>
Method 2: Popup Window
Open Labloom in a popup window and listen for authentication events.
function openLabloomPopup() {
const popup = window.open(
'https://your-labloom-domain.com?popup=true',
'labloom',
'width=800,height=600,scrollbars=yes,resizable=yes'
);
// Listen for messages from the popup
window.addEventListener('message', function(event) {
if (event.data.source === 'labloom') {
if (event.data.type === 'auth_success') {
console.log('User authenticated:', event.data.user);
popup.close();
// Handle successful authentication
handleUserAuthenticated(event.data.user);
}
}
});
}
function handleUserAuthenticated(user) {
alert(`Welcome ${user.email}! You're now authenticated.`);
// Update your UI, store user info, etc.
}
Method 3: Iframe Embed
Embed Labloom directly in your page using an iframe.
<iframe
src="https://your-labloom-domain.com?embedded=true"
width="100%"
height="600"
frameborder="0"
id="labloom-iframe">
</iframe>
<script>
// Listen for messages from the iframe
window.addEventListener('message', function(event) {
if (event.data.source === 'labloom') {
if (event.data.type === 'auth_success') {
console.log('User authenticated in iframe:', event.data.user);
// Handle authentication success
}
}
});
</script>
Method 4: API Integration
Use server-side integration with authentication tokens.
// Server-side example (Node.js/Express)
app.post('/auth/labloom', async (req, res) => {
const { email, password } = req.body;
try {
// Authenticate with your system first
const user = await authenticateUser(email, password);
// Generate a secure token for Labloom
const token = generateSecureToken(user);
// Redirect to Labloom with token
const labloomUrl = `https://your-labloom-domain.com?token=${token}&user_id=${user.id}`;
res.redirect(labloomUrl);
} catch (error) {
res.status(401).json({ error: 'Authentication failed' });
}
});
// Client-side
function authenticateWithLabloom() {
fetch('/auth/labloom', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password })
}).then(response => {
if (response.redirected) {
window.location.href = response.url;
}
});
}
⚙️ Configuration Guide
To set up these integrations, you'll need to:
Deploy Labloom: Host the application on your domain
Configure CORS: Allow your website to communicate with Labloom
Set up authentication: Configure shared authentication or SSO
Handle redirects: Implement the redirect logic in your application
Environment Variables
# Add to your .env file
VITE_EXTERNAL_AUTH_ENABLED=true
VITE_ALLOWED_ORIGINS=https://yoursite.com,https://anotherdomain.com
VITE_DEFAULT_REDIRECT_URL=https://yoursite.com/dashboard
URL Parameters
return_url - Where to redirect after authentication