Amplify：'No Cognito Federated Identity pool provided‘with federation login

Question

我正在使用Amplify的React UI工具包，并且我正在尝试让我的社交登录与Cognito一起工作。

目前，我正在让No Cognito Federated Identity pool provided

下面是按钮的代码：

<AmplifyAuthenticator federated={{
    googleClientId:
        '*id*',
    facebookAppId: '*id*'
}} usernameAlias="email">
    <AmplifySignUp headerText="Create Account" slot="sign-up"/>
    <AmplifySignIn slot="sign-in">
        <div slot="federated-buttons">
            <AmplifyGoogleButton onClick={() => Auth.federatedSignIn()}/>
            <AmplifyFacebookButton onClick={() => Auth.federatedSignIn()}/>
        </div>
    </AmplifySignIn>
</AmplifyAuthenticator>

我尝试创建了一个身份池，并填写了Cognito、Google和Facebook的身份验证提供程序，但仍然收到相同的错误。

对于这两个提供者中的URI，我已经包含了域地址作为授权的javascript源，对于重定向，我在域的末尾添加了oauth2/idpresponse。

这在Amplify托管UI中有效，但不适用于我的React解决方案。

在Cognito上，我的重定向是我的域/token。因为我等待Amplify在重定向用户之前设置cookie。

token.tsx

export default function TokenSetter() {
    const router = useRouter();
    useAuthRedirect(() => {
        // We are not using the router here, since the query object will be empty
        // during prerendering if the page is statically optimized.
        // So the router's location would return no search the first time.
        const redirectUriAfterSignIn =
            extractFirst(queryString.parse(window.location.search).to || "") || "/";

        router.replace(redirectUriAfterSignIn);
    });

    return <p>loading..</p>;
}

这是我的Amplify.configure()

Amplify.configure({
    Auth: {
        region: process.env.USER_POOL_REGION,
        userPoolId: process.env.USER_POOL_ID,
        userPoolWebClientId: process.env.USER_POOL_CLIENT_ID,
        IdentityPoolId: process.env.IDENTITY_POOL_ID,
        oauth: {
            domain: process.env.IDP_DOMAIN,
            scope: ["email", "openid"],
            // Where users get sent after logging in.
            // This has to be set to be the full URL of the /token page.
            redirectSignIn: process.env.REDIRECT_SIGN_IN,
            // Where users are sent after they sign out.
            redirectSignOut: process.env.REDIRECT_SIGN_OUT,
            responseType: "token",
        },
    },
});

Answer 1

为了直接从您的应用程序调用用户池联合身份提供商，您需要将提供者选项传递给Auth.federatedSignIn

Auth.federatedSignIn({
  provider: provider,
})

这些选项在枚举中定义。

export enum CognitoHostedUIIdentityProvider {
    Cognito = 'COGNITO',
    Google = 'Google',
    Facebook = 'Facebook',
    Amazon = 'LoginWithAmazon',
    Apple = 'SignInWithApple',
}

不幸的是，不是详尽的。如果您有自定义的OIDC或SAML idp，则使用提供者名称或id。

对于Facebook，调用看起来是这样的：

Auth.federatedSignIn({
  provider: 'Facebook',
})

集成了一个按钮：

const FacebookSignInButton = () => (
  <AmplifyButton
    onClick={()=>Auth.federatedSignIn({provider: 'Facebook'})}>
    Sign in with Facebook
  </AmplifyButton>
)