Introduction
Thank you for always reading our articles!
When developing in-house, you may need to check the operation of a web browser. In addition, you may want to set up authentication while taking security into consideration, but you may not want to implement it in a cumbersome way.
I wanted to implement a web browser with authentication functionality in my own in-house development with minimal configuration. I realized that by using AWS Cognito + CloudFront, I could implement a web browser with authentication functionality that would be satisfactory for in-house testing.
I think I'll have a chance to use it in the future, so I'd like to leave this article here.
Target Audience
- For those who want to easily implement a web browser with authentication functionality.
- Those looking for a way to manage web browsers for in-house testing.
- Those who want to catch up on service integration.
Composition
Tried Actions
In order to build this site, I created a test page in advance.
- Sample Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shark Inc. | FinOps Shark - Innovative Financial Solutions</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue', Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
line-height: 1.6;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
header {
background: linear-gradient(135deg, #1a237e, #283593);
color: white;
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
display: flex;
align-items: center;
}
.logo-icon {
width: 40px;
height: 40px;
margin-right: 10px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 15 L80 40 L80 70 L50 85 L20 70 L20 40 Z" fill="%233949ab" stroke="white" stroke-width="3"/><path d="M40 50 L60 30 L60 70 Z" fill="white"/></svg>') no-repeat center;
background-size: contain;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
transition: opacity 0.3s;
}
.nav-links a:hover {
opacity: 0.8;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #283593, #3949ab);
color: white;
padding: 8rem 0 4rem;
margin-top: 5rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
background-size: cover;
}
.hero-content {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.hero-text {
flex: 1;
max-width: 600px;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
line-height: 1.2;
}
.hero p {
font-size: 1.3rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.cta-button {
display: inline-block;
padding: 1rem 2.5rem;
background: #00bcd4;
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
transition: transform 0.3s, box-shadow 0.3s;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,188,212,0.3);
}
.hero-image {
flex: 1;
text-align: center;
}
.shark-animation {
width: 400px;
height: 300px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><path d="M50 150 Q200 80 350 150 Q200 220 50 150" fill="%231e88e5" stroke="white" stroke-width="3"/><circle cx="100" cy="130" r="8" fill="white"/><path d="M350 150 L380 130 L380 170 Z" fill="%231e88e5" stroke="white" stroke-width="2"/></svg>') no-repeat center;
background-size: contain;
animation: swim 3s ease-in-out infinite;
}
@keyframes swim {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* Features Section */
.features {
padding: 5rem 0;
background: #f8f9fa;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #283593;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
color: #00bcd4;
}
.feature-card h3 {
color: #283593;
margin-bottom: 1rem;
}
/* Services Section */
.services {
padding: 5rem 0;
}
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.service-item {
display: flex;
align-items: center;
padding: 2rem;
background: #f8f9fa;
border-radius: 10px;
transition: background 0.3s;
}
.service-item:hover {
background: #eceff1;
}
.service-icon {
font-size: 2.5rem;
margin-right: 1.5rem;
color: #283593;
}
/* Stats Section */
.stats {
background: linear-gradient(135deg, #283593, #3949ab);
color: white;
padding: 4rem 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
.stat-item h3 {
font-size: 3rem;
margin-bottom: 0.5rem;
}
/* CTA Section */
.cta-section {
background: #00bcd4;
color: white;
padding: 4rem 0;
text-align: center;
}
.cta-section h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.cta-section p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.cta-secondary {
background: white;
color: #00bcd4;
padding: 1rem 2.5rem;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: transform 0.3s;
}
.cta-secondary:hover {
transform: translateY(-2px);
}
/* Footer */
footer {
background: #1a237e;
color: white;
padding: 3rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h4 {
margin-bottom: 1rem;
font-size: 1.2rem;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section ul li a {
color: #ccc;
text-decoration: none;
transition: color 0.3s;
}
.footer-section ul li a:hover {
color: white;
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid #283593;
color: #ccc;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero-content {
flex-direction: column;
text-align: center;
}
.shark-animation {
width: 300px;
height: 200px;
margin-top: 2rem;
}
.features-grid,
.services-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<header>
<nav class="container">
<div class="logo">
<div class="logo-icon"></div>
Shark Inc.
</div>
<ul class="nav-links">
<li><a href="#services">Services</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<h1>FinOps Shark</h1>
<p>Financial solutions with speed and precision.<br>Sharply accelerate your business growth.</p>
<a href="#contact" class="cta-button">Request Free Consultation</a>
</div>
<div class="hero-image">
<div class="shark-animation"></div>
</div>
</div>
</div>
</section>
<section class="features" id="features">
<div class="container">
<h2 class="section-title">Shark Features</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>High-Speed Processing</h3>
<p>AI-powered high-speed data processing provides real-time financial insights, supporting quick decision-making.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔒</div>
<h3>Security</h3>
<p>Bank-level security thoroughly protects your valuable data, ensuring worry-free usage.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📈</div>
<h3>Growth Support</h3>
<p>Data-driven precise advice powerfully backs up your business growth.</p>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<div class="container">
<h2 class="section-title">Our Services</h2>
<div class="services-grid">
<div class="service-item">
<div class="service-icon">💰</div>
<div>
<h3>Financial Consulting</h3>
<p>Expert financial analysis and optimization proposals to achieve improved profitability.</p>
</div>
</div>
<div class="service-item">
<div class="service-icon">🔄</div>
<div>
<h3>Automation Solutions</h3>
<p>Accounting process automation significantly improves operational efficiency.</p>
</div>
</div>
<div class="service-item">
<div class="service-icon">📊</div>
<div>
<h3>Real-time Analytics</h3>
<p>Constantly monitor the latest financial situation, enabling quick management decisions.</p>
</div>
</div>
<div class="service-item">
<div class="service-icon">🎯</div>
<div>
<h3>Strategy Planning Support</h3>
<p>Data-based strategy planning supports certain growth.</p>
</div>
</div>
</div>
</div>
</section>
<section class="stats">
<div class="container">
<div class="stats-grid">
<div class="stat-item">
<h3>500+</h3>
<p>Client Companies</p>
</div>
<div class="stat-item">
<h3>35%</h3>
<p>Average Cost Reduction</p>
</div>
<div class="stat-item">
<h3>24/7</h3>
<p>Support System</p>
</div>
<div class="stat-item">
<h3>99.9%</h3>
<p>System Uptime</p>
</div>
</div>
</div>
</section>
<section class="cta-section" id="contact">
<div class="container">
<h2>Ready to experience FinOps Shark?</h2>
<p>Request a free consultation and we'll propose the optimal solution for your company.</p>
<a href="#" class="cta-secondary">Request Free Consultation</a>
</div>
</section>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4>Shark Inc.</h4>
<p>Accelerating business growth<br>with innovative financial solutions</p>
</div>
<div class="footer-section">
<h4>Services</h4>
<ul>
<li><a href="#">Financial Consulting</a></li>
<li><a href="#">Automation Solutions</a></li>
<li><a href="#">Real-time Analytics</a></li>
<li><a href="#">Strategy Planning Support</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Company Information</h4>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Legal Information</h4>
<ul>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Legal Notices</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Shark Inc. All Rights Reserved.</p>
</div>
</div>
</footer>
</body>
</html>
- Image
Amazon S3 Settings
Prepare an S3 bucket with website hosting enabled.
Store a test page in the bucket.
(All other settings are default.)
CloudFront Settings
Set it up so that it links to the S3 bucket you created earlier.
For security reasons, we'll also set up OAC.
Warning
After configuring OAC, you must update the S3 bucket policy.
Notice
Unless you select Redirect HTTP to HTTPS as the viewer protocol policy, the HTTPS connection will not be established.
Warning
The actual access path is distribution domain name/index.html.
Cognito Settings
Configure the user pool and login user.
Clicking the Show login page button will display the login screen.
All you have to do is enter your login information and a web browser will appear.
Impressions
If you are using it in a testing environment, I think S3 + CloudFront + Cognito is easy to use. On top of that, you can combine it in a wide range of ways, such as pipeline settings and code signing with Signer.
Thank you for reading the article to the end.
Top comments (0)