Step 1: Create Thymeleaf Template
Add container element in your template:<!-- src/main/resources/templates/index.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
<title>Spring Rollout Integration</title>
</head>
<body>
<h1>Your Application</h1>
<div id="rollout-container"></div>
<script src="/js/rollout.js"></script>
</body>
</html>
Step 2: Add JavaScript Initialization
Create static JavaScript file:// src/main/resources/static/js/rollout.js
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('rollout-container');
const csrfToken = document.querySelector('meta[name="_csrf"]').content;
const csrfHeader = document.querySelector('meta[name="_csrf_header"]').content;
fetch('/rollout-token', {
headers: {
'Content-Type': 'application/json',
[csrfHeader]: csrfToken
}
})
.then(response => response.json())
.then(data => {
const token = data.token;
// Add required styles
const styleLink = document.createElement('link');
styleLink.rel = 'stylesheet';
styleLink.href = 'https://esm.sh/@rollout/link-react@latest/dist/style.css';
document.body.appendChild(styleLink);
// Dynamically load Rollout bundle
import(/* webpackIgnore: true */ 'https://esm.sh/@rollout/link-react@latest?bundle=all').then(
({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
const root = createRoot(container);
root.render(
createElement(
RolloutLinkProvider,
{ token },
createElement(CredentialsManager)
)
);
}
);
});
});
Step 3: Create Spring Controller
Implement token generation endpoint:// src/main/java/com/example/demo/RolloutController.java
@RestController
public class RolloutController {
@Value("${rollout.client-secret}")
private String clientSecret;
@Value("${rollout.client-id}")
private String clientId;
@GetMapping("/rollout-token")
public ResponseEntity<Map<String, String>> generateToken(
@AuthenticationPrincipal User user
) {
Instant now = Instant.now();
String token = Jwts.builder()
.setIssuer(clientId)
.setSubject(user.getUsername())
.setIssuedAt(Date.from(now))
.setExpiration(Date.from(now.plusSeconds(900))) // 15 minutes
.signWith(SignatureAlgorithm.HS512, clientSecret)
.compact();
return ResponseEntity.ok().body(Collections.singletonMap("token", token));
}
@PostMapping("/credential-webhook")
public ResponseEntity<?> handleWebhook(
@RequestBody CredentialRequest request
) {
// Handle credential storage
System.out.println("New credential: " + request.getId() + " for " + request.getAppKey());
return ResponseEntity.ok().build();
}
public static class CredentialRequest {
private String id;
private String appKey;
// Getters and setters
}
}
Step 4: Security Configuration
Configure CSRF and content security policy:// src/main/java/com/example/demo/SecurityConfig.java
@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
http
.csrf(csrf -> csrf
.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
)
.headers(headers -> headers
.contentSecurityPolicy(csp -> csp
.policyDirectives("style-src 'self' https://esm.sh; " +
"script-src 'self' https://esm.sh; " +
"connect-src 'self' https://api.rollout.io")
)
)
.authorizeHttpRequests(auth -> auth
.requestMatchers("/rollout-token").authenticated()
.requestMatchers("/credential-webhook").permitAll()
.anyRequest().authenticated()
)
.formLogin(withDefaults());
return http.build();
}
}
Step 5 (Optional): Handle Credential Events
Update the JavaScript to handle events:// Update the import block
.then(({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
const handleCredentialAdded = ({ id, appKey }) => {
fetch('/credential-webhook', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
[csrfHeader]: csrfToken
},
body: JSON.stringify({
id,
appKey
})
});
};
const root = createRoot(container);
root.render(
createElement(
RolloutLinkProvider,
{ token },
createElement(CredentialsManager, {
onCredentialAdded: handleCredentialAdded
})
)
);
});
Step 6: Spring Boot-Specific Configuration
Add dependencies topom.xml:
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt-api</artifactId>
<version>0.11.5</version>
</dependency>
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt-impl</artifactId>
<version>0.11.5</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt-jackson</artifactId>
<version>0.11.5</version>
<scope>runtime</scope>
</dependency>
application.properties:
rollout.client-secret=${ROLLOUT_CLIENT_SECRET:defaultSecret}