本地主机上 Cognito 托管 UI 的 Facebook 登录设置

Posted 2023-03-27

【中文标题】本地主机上 Cognito 托管 UI 的 Facebook 登录设置

【英文标题】：Facebook login setup for Cognito hosted UI on localhost

【发布时间】：2018-11-19 11:47:06

【问题描述】：

我正在尝试使用 AWS Cognito 托管 UI 来允许用户使用 Facebook 登录用户池。我希望能够在我的本地开发环境中进行身份验证。我的问题是我似乎无法找出正确的 URL 来指定使事情在 localhost:3000 上运行。

我尝试了很多组合，但我似乎不断收到“无法加载 UL”错误：

在前端，我使用 aws-amplify-react 的 withOAuth 函数来利用加载托管 UI 的函数：

import React, Component from 'react';
import Amplify from 'aws-amplify';
import  withOAuth  from 'aws-amplify-react';

const oauth = 
    domain: 'my-app-client-domain.auth.us-east-1.amazoncognito.com',
    scope: [
        'phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'
    ],
    redirectSignIn: 'https://localhost:3000/authenticated',
    redirectSignOut: 'https://localhost:3000/logout',
    responseType: 'code'

Amplify.configure(
    Auth: 
        oauth: oauth
    
);

class LoginButton extends Component 
    render() 
        return (<LoginButtonContainer>
            <LoginButton onPress=this.props.OAuthSignIn>Log in</LoginButton>
        </LoginButtonContainer>);
    

export default withOAuth(LoginButton);

我的 Facebook 应用设置在“设置 -> 基本”下如下所示：

应用域： my-app-client-domain.auth.us-east-1.amazoncognito.com

网站网址： https://my-app-client-domain.auth.us-east-1.amazoncognito.com/oauth2/idpresponse

在“产品 -> Facebook 登录 -> 设置”下：

有效的 OAuth 重定向 URI：https://localhost:3000/authenticated

AWS 控制台中我的用户池设置为：

在“应用集成 -> 应用客户端设置”下：

显然，我还将应用集成域名设置为“my-app-client-domain”，并且我在“Federation -> Identity providers”下设置了我的 facebook 应用

所以，总而言之，我目前有以下 URL 设置：

前端应用

域

：my-app-client-domain.auth.us-east-1.amazoncognito.com

redirectSignIn

：https://localhost:3000/authenticated

redirectSignOut

：https://localhost:3000/logout Facebook 设置

应用程序域：

my-app-client-domain.auth.us-east-1.amazoncognito.com

网站网址：

https://my-app-client-domain.auth.us-east-1.amazoncognito.com/oauth2/idpresponse

有效的 OAuth 重定向 URIs

：https://localhost:3000/authenticated AWS 用户池设置：

回调网址：

https://my-app-client-domain.auth.us-east-1.amazoncognito.com/oauth2/idpresponse, https://localhost:3000/authenticated

退出网址：

https://my-app-client-domain.auth.us-east-1.amazoncognito.com/oauth2/idpresponse, https://localhost:3000/logout

域前缀：

my-app-client-domain

我的任何设置是否看起来有问题，或者可能与我设置错误的实际 URL 无关？

【参考方案1】：

结果，不出所料，我的问题完全不相关。我在 AWS 中为我​​的身份提供商设置了错误的 Facebook 应用程序 ID，所以如果您遇到此问题，值得仔细检查。

话虽如此，但缺乏有关设置 Facebook 应用程序以与 Cognito 一起使用的文档是让我陷入困境的原因。另外，我也确实需要更新我的 URL 设置，所以以下是最终对我有用的设置：

前端应用

域

：my-app-client-domain.auth.us-east-1.amazoncognito.com

redirectSignIn

：https://localhost:3000/authenticated

redirectSignOut

：https://localhost:3000/logout Facebook 设置

应用程序域：

localhost

网站网址：

https://localhost:3000/

有效的 OAuth 重定向 URIs

：https://my-app-client-domain.auth.us-east-1.amazoncognito.com/oauth2/idpresponse AWS 用户池设置：

回调网址：

https://localhost:3000/authenticated

退出网址：

https://localhost:3000/logout

域前缀：

my-app-client-domain

【讨论】：

developers.facebook.com/docs/facebook-login/security/… "2018 年 10 月 6 日，所有应用都必须使用 HTTPS。"