reactjs - 放大:联合登录时“未提供 Cognito 联合身份池”
问题描述
我正在使用 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 时。
令牌.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",
},
},
});
解决方案
为了直接从您的应用程序调用用户池联合 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>
)
推荐阅读
- android - 如何在 Android 中从本地编译的 C++ 二进制文件访问相机
- generics - 返回具有指定类型的列表的通用函数
- javascript - 如何添加一个新的数字(字符串)键并将其余键移动 +1 而不会破坏 Vuejs 数据中的反应性
- python - 使用 Openflow 进行速率限制
- linux - 如何找到我的 Rust 项目的哪个部分使用 GLIBC 2.18
- python - 如何将文本文件与文本字典进行比较并为匹配的文本赋予特定颜色?
- flutter - Flutter 以不同的方式创建状态有什么区别?
- angularjs - 如何在 AngularJS 的 Web API GET 请求中发送多个 SQL 查询参数?
- php - 在 codeigniter 中创建一个函数,如果输入日期时间比当前日期时间早 2 天,则返回 true,否则返回 false
- vagrant - 如何为 knative eventing 测试设置一个简单的测试环境?