如何自定义Amazon Cognito中Web应用的JavaScript弹窗？

Absolutely! Those vanilla JavaScript prompt() dialogs are definitely outdated and don’t match modern web app designs. You can absolutely replace them with custom UI components that fit your app’s style—here’s how to do it:

Step 1: Replace Prompt Dialogs with Custom UI #

Instead of relying on browser-native prompts, build a custom modal or form (using your frontend framework of choice, or plain HTML/CSS) to collect the verification code and new password. Here’s a practical example:

1. Add Custom UI Elements to Your HTML #

<!-- Custom Modal for Password Reset -->
<div id="passwordResetModal" style="display: none; padding: 20px; border: 1px solid #ccc; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; z-index: 1000;">
  <h3>Reset Your Password</h3>
  <div>
    <label>Verification Code:</label>
    <input type="text" id="verificationCodeInput" placeholder="Enter code from email">
  </div>
  <div style="margin-top: 10px;">
    <label>New Password:</label>
    <input type="password" id="newPasswordInput" placeholder="Enter new password">
  </div>
  <button id="submitReset" style="margin-top: 15px;">Submit</button>
  <button id="cancelReset" style="margin-top: 15px; margin-left: 10px;">Cancel</button>
</div>

2. Modify the Cognito Forgot Password Code #

Update your forgotPassword call to trigger the custom modal instead of prompts, and handle the form submission:

// Track the cognitoUser instance for the reset flow
let currentCognitoUser;

cognitoUser.forgotPassword({ 
  onSuccess: function (result) { 
    console.log('Password reset initiated: ' + result); 
    // Redirect or show login screen as needed
  }, 
  onFailure: function(err) { 
    alert(err.message || JSON.stringify(err)); 
  }, 
  inputVerificationCode: function() { 
    currentCognitoUser = cognitoUser;
    // Show your custom modal
    document.getElementById('passwordResetModal').style.display = 'block';
    
    // Handle submit button click
    document.getElementById('submitReset').onclick = function() {
      const verificationCode = document.getElementById('verificationCodeInput').value;
      const newPassword = document.getElementById('newPasswordInput').value;
      
      if (!verificationCode || !newPassword) {
        alert('Please fill in both fields');
        return;
      }
      
      currentCognitoUser.confirmPassword(verificationCode, newPassword, {
        onSuccess: function() {
          console.log('Password reset successful');
          document.getElementById('passwordResetModal').style.display = 'none';
          // Show login screen or redirect
        },
        onFailure: function(err) {
          alert(err.message || JSON.stringify(err));
        }
      });
    };
    
    // Handle cancel button click
    document.getElementById('cancelReset').onclick = function() {
      document.getElementById('passwordResetModal').style.display = 'none';
    };
  } 
});

This way, you can style the modal to match your app’s design, add form validation, and create a smoother user experience.

Step 2: AWS Console UI Customization—Does It Apply? #

The UI customization option you saw in the AWS Console is for the Amazon Cognito Hosted UI—this is the pre-built, standalone login/registration page that AWS hosts for you. If you’re integrating Cognito directly into your own web app using the JavaScript SDK (like you are now), that console customization won’t affect your app’s UI. It only modifies the look and feel of the Hosted UI pages.

So for your custom web app, you’ll need to build and style the password reset flow UI yourself, as shown above.

内容的提问来源于stack exchange，提问作者user3567195