rotur.dev/auth
If you are making a website that connects to rotur, your users will often trust it more if it uses the official way to login to rotur.
About
https://rotur.dev/auth is a versatile authentication API that supports both redirect-based and iframe-based authentication flows, allowing you to integrate Rotur authentication seamlessly into your application.
Authentication Methods
1. Redirect-Based Authentication (Simple)
The traditional approach where you redirect your page to the auth endpoint and the user returns with a token.
How do i get a rotur token using this?
Have a look at the example page here:
You can view the source of this page here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Token Checker</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
.container {
margin-top: 50px;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
#token-display {
margin-top: 20px;
padding: 15px;
background-color: #f8f9fa;
border-radius: 4px;
word-break: break-all;
}
</style>
</head>
<body>
<div class="container" id="main-container">
<h1>Authentication Required</h1>
<p>Please click the button below to authenticate.</p>
<button id="auth-button">Authenticate</button>
</div>
<div class="container" id="token-container" style="display: none;">
<h1>Authentication Successful</h1>
<p>Your token:</p>
<div id="token-display"></div>
</div>
<script>
// Check for token parameter when page loads
window.onload = function() {
// Get URL parameters using URLSearchParams
const urlParams = new URLSearchParams(window.location.search);
const token = urlParams.get('token');
if (token) {
// If token exists, show the token display
document.getElementById('main-container').style.display = 'none';
document.getElementById('token-container').style.display = 'block';
document.getElementById('token-display').textContent = token;
// Remove token from URL by replacing current history state
window.history.replaceState({}, document.title, window.location.pathname);
} else {
// If no token, setup auth button
document.getElementById('auth-button').addEventListener('click', function() {
window.location.href = "https://rotur.dev/auth";
});
}
};
</script>
</body>
</html>
2. Iframe-Based Authentication (Advanced)
For a more seamless user experience, you can embed the Rotur authentication flow directly in your application using an iframe and postMessage communication.
How iframe authentication works
Create an iframe that loads
https://rotur.dev/authListen for postMessage events from the iframe
Handle the authentication result when the user completes the login process and clicks "Allow Access"
Implementation Example
<!DOCTYPE html>
<html>
<head>
<title>Rotur Iframe Auth Example</title>
<style>
#auth-container {
width: 400px;
height: 500px;
border: 1px solid #ccc;
border-radius: 8px;
margin: 20px auto;
}
#auth-iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="auth-container">
<iframe id="auth-iframe" src="https://rotur.dev/auth" style="display: none;"></iframe>
<div id="loading">Loading authentication...</div>
<div id="success" class="hidden">
<h3>Authentication Successful!</h3>
<p>Token: <span id="token-display"></span></p>
</div>
</div>
<script>
// Listen for messages from the iframe
window.addEventListener('message', function(event) {
// Verify the origin for security
if (event.origin !== 'https://rotur.dev') {
return;
}
// Handle authentication success
if (event.data.type === 'rotur-auth-token') {
// Authentication was successful
const token = event.data.token;
// Hide the iframe and show success message
document.getElementById('auth-iframe').style.display = 'none';
document.getElementById('success').classList.remove('hidden');
document.getElementById('token-display').textContent = token;
// You can now use the token for API calls
console.log('Received Rotur token:', token);
// Example: Store token for later use
localStorage.setItem('rotur_token', token);
}
});
// Show the iframe when page loads
window.onload = function() {
document.getElementById('auth-iframe').style.display = 'block';
document.getElementById('loading').style.display = 'none';
};
</script>
</body>
</html>PostMessage Events
The iframe will send the following message to the parent window when authentication is successful:
Authentication Success:
{
type: 'rotur-auth-token',
token: 'user_auth_token_here'
}Note: The message is sent to all origins ('*'), so always verify the origin in your event listener for security.
Security Considerations
Origin Verification: Always verify that messages come from
https://rotur.devHTTPS Only: Only use iframe authentication over HTTPS connections
Token Storage: Store tokens securely (consider using secure HTTP-only cookies for sensitive applications)
CSP Headers: Ensure your Content Security Policy allows framing from
rotur.devWildcard Origin: The auth page sends messages to all origins (
'*'), so proper origin verification is critical
Advantages of Iframe Authentication
Seamless UX: Users don't leave your application
Responsive Design: Easy to style and integrate with your UI
Real-time Feedback: Immediate response without page refreshes
Mobile Friendly: Works well on mobile devices without navigation disruption
CSS Integration Tips
/* Style the iframe container */
.rotur-auth-container {
max-width: 400px;
margin: 0 auto;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
/* Responsive iframe */
.rotur-auth-iframe {
width: 100%;
height: 500px;
border: none;
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.rotur-auth-container {
box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
}
}Last updated