如何在浏览器中通过AWS Cognito实现用户名密码认证？

我完全懂你的困境——作为非前端开发者，面对一堆框架和SDK确实头大，尤其是只想用纯HTML+JS搞定Cognito用户名密码认证的时候。下面给你一套一步步的解决方案，完全不需要React/Angular，也不用npm折腾，直接用浏览器能跑的代码就行：

别再纠结AWS SDK for Browser的复杂示例了，直接用AWS Amplify的CDN版本——它封装了Cognito的所有核心操作，不用安装任何包，只要在HTML里加个脚本就能用，完美适配纯前端场景。

先在HTML里引入Amplify的CDN脚本，然后填入你的用户池、客户端、身份池信息，完成基础连接：

<!-- 引入Amplify的CDN脚本 -->
<script src="https://cdn.amplifyjs.com/lib/amplify-3.4.3.min.js"></script>
<script>
// 替换成你自己的Cognito信息
Amplify.configure({
  Auth: {
    userPoolId: '你的用户池ID',
    userPoolWebClientId: '你的应用客户端ID',
    identityPoolId: '你的身份池ID',
    region: '你的AWS区域（比如us-east-1）'
  }
});
</script>

做一个纯HTML表单，用Amplify的Auth.signIn()方法处理登录请求，成功后跳转页面，失败则显示错误信息：

<div id="login-container">
  <input type="text" id="username" placeholder="用户名">
  <input type="password" id="password" placeholder="密码">
  <button onclick="handleLogin()">登录</button>
  <div id="error-tip" style="color:red;"></div>
</div>

<script>
async function handleLogin() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  
  try {
    // 调用Cognito完成登录
    const user = await Auth.signIn(username, password);
    // 登录成功，跳转到你的业务页面
    window.location.href = '/dashboard.html';
  } catch (error) {
    // 显示具体错误，比如用户名密码错误、用户未验证等
    document.getElementById('error-tip').textContent = error.message;
  }
}
</script>

在后续页面（比如dashboard.html）加载时，检查用户是否已登录，未登录则自动跳回登录页：

<script src="https://cdn.amplifyjs.com/lib/amplify-3.4.3.min.js"></script>
<script>
// 同样要先初始化Amplify配置，和登录页一致
Amplify.configure({
  Auth: {
    userPoolId: '你的用户池ID',
    userPoolWebClientId: '你的应用客户端ID',
    identityPoolId: '你的身份池ID',
    region: '你的AWS区域'
  }
});

// 页面加载时检查登录状态
async function checkAuth() {
  try {
    // 获取当前登录用户
    const user = await Auth.currentAuthenticatedUser();
    console.log('当前登录用户:', user.username);
    // 这里可以继续加载你的业务内容
  } catch (error) {
    // 用户未登录，跳回登录页
    window.location.href = '/login.html';
  }
}

// 页面加载完成后执行检查
window.onload = checkAuth;
</script>

登录成功后，Amplify会自动从身份池获取AWS临时凭证，你可以用这个凭证直接调用Lambda函数：

<!-- 引入AWS SDK的Lambda客户端CDN -->
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1000.0.min.js"></script>
<script>
async function callMyLambda() {
  try {
    // 获取当前用户的AWS临时凭证
    const credentials = await Auth.currentCredentials();
    // 配置Lambda客户端
    const lambda = new AWS.Lambda({
      credentials: credentials,
      region: '你的AWS区域'
    });
    
    // 调用Lambda函数，替换成你的函数名和参数
    const params = {
      FunctionName: '你的Lambda函数名',
      Payload: JSON.stringify({ task: '处理业务请求' })
    };
    
    const result = await lambda.invoke(params).promise();
    // 处理Lambda返回的结果
    console.log('Lambda返回内容:', JSON.parse(result.Payload));
  } catch (error) {
    console.error('调用Lambda失败:', error);
  }
}

// 触发调用示例
callMyLambda();
</script>

• 确保你的Cognito应用客户端配置里，允许的回调URL和你的页面域名完全一致（比如http://localhost:8000），否则会触发跨域错误。
• 如果用户池开启了邮箱/手机号验证，登录时可能会遇到UserNotConfirmedException，需要额外处理验证流程（比如调用Auth.resendSignUp()发送验证码，再用Auth.confirmSignUp()完成验证）。
• Cognito的应用客户端ID是可以公开的，不用藏着掖着——Web客户端本来就需要这个信息来和用户池通信。

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