【问题标题】：How to use aws cognito with web federation and javascript如何将 aws cognito 与 Web 联合和 javascript 一起使用
【发布时间】：2021-01-18 23:02:04
【问题描述】：

我正在尝试使用 AWS Cognito 和身份提供商（使用亚马逊登录）为我的 javascript 应用程序提供登录功能。经过大量搜索，我不得不问你们：您能指出一个描述步骤的好教程吗？我知道那里有很多文档，但是文档不完整，或者是没有使用 cognito 的文档。到目前为止我所拥有的是：

我已经注册了一个应用程序
我使用从 (1) 获得的应用程序 ID 创建了一个身份池

我尝试了以下方法来创建具有功能的登录按钮，但这不起作用：

<!DOCTYPE html>
<html>
    <head>
        <script src="aws-sdk.js" type="text/javascript"></script>
        <script>
            // Initialize the Amazon Cognito credentials provider
            AWS.config.region = 'eu-west-1'; // Region
            AWS.config.credentials = new AWS.CognitoIdentityCredentials({
                IdentityPoolId: 'xxx',
            });

        </script>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content</div>
        <a href id="LoginWithAmazon">
            <img border="0" alt="Login with Amazon"
                 src="https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_156x32.png"
                 width="156" height="32" />
        </a>
<script>
document.getElementById('LoginWithAmazon').onclick = function() {
    options = { scope : 'profile' };
    amazon.Login.authorize(options, 'MY_REDIRECT_URL');
    return false;
  };
</script>
    </body>
</html>

我没有重定向，也没有看到登录弹出窗口。提前致谢。

【问题讨论】：

您尝试使用 Cognito 实现的场景是什么。是集成亚马逊登录进行身份验证吗？您使用的是 Cognito 用户池还是联合身份？
是的，我尝试集成亚马逊登录进行身份验证。我使用联合身份。

标签： javascript amazon-web-services amazon-cognito login-with-amazon

【解决方案1】：

您在问题中提到您希望使用 Amazon Cognito 为您的应用程序提供登录功能。

Amazon Cognito 支持两个实体，它们本质上都是高度解耦的：

用户池
身份池

用户池允许您向 Web 或移动应用程序添加身份验证，而身份池允许经过验证/未经验证的用户访问身份池设置中的 IAM 角色中指定的一组 AWS 资源。 Cognito 身份池不充当身份验证者，而是充当授权者，并在后端运行 get-credentials-for-identity API 调用后提供临时 AWS 凭证。

根据我从您的用例中了解到的情况，您希望在您的 JavaScript Web 应用程序中有一个“使用 Amazon 登录”按钮，在成功验证 JWT[1] 后，它将带您进入一个网页。要实现此用例，应使用 Amazon Cognito 用户池。首先，您需要将亚马逊作为身份提供商集成到您创建的用户池中[2]。之后，您需要通过为您的用户池启动一个 auth 对象来在代码中提及相同的内容：

 function initCognitoSDK() {
        var authData = {
            ClientId : '<TODO: your app client ID here>', // Your client id here
            AppWebDomain : '<TODO: your app web domain here>', // Exclude the "https://" part. 
            TokenScopesArray : <TODO: your scope array here>, // like ['openid','email','phone']...
            RedirectUriSignIn : '<TODO: your redirect url when signed in here>',
            RedirectUriSignOut : '<TODO: your redirect url when signed out here>',
            IdentityProvider : '<TODO: your identity provider you want to specify here>', 
                    UserPoolId : '<TODO: your user pool id here>', 
                    AdvancedSecurityDataCollectionFlag : <TODO: boolean value indicating whether you want to enable advanced security data collection>
        };

在开发您的应用程序时，您可以参考这个示例应用程序[3]，因为它具有相同的用例。

我希望这个答案对您有所帮助。

参考文献

[1]。 https://docs.aws.amazon.com/cognito/latest/developerguide/amazon-cognito-user-pools-using-tokens-verifying-a-jwt.html

[2]。 https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html

[3]。 https://github.com/aws/amazon-cognito-auth-js/tree/master/sample

【讨论】：

非常感谢。这是我需要理解的那种解释。对用户池和身份池之间差异的简短回顾非常有帮助。谢谢