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

为了直接从您的应用调用用户池联合 IDP，您需要将提供者选项传递给 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>
)

放大：“未提供 Cognito 联合身份池”与联合登录

1 个答案: