我创建了一个自定义注册页面,并且正在使用 amplify 和 cognito。在 cognito 中,我使用电子邮件、given_name 和 family_name,但我不断收到以下错误。我不确定我做错了什么。我找不到使用名字和姓氏的示例注册页面。我手动创建了一个测试用户,并且可以登录,因此 aws-exports.js 似乎可以正常工作。
Error signing up: InvalidParameterException: Attributes did not conform to the schema: name.givenName: The attribute name.givenName is required, name.familyName: The attribute name.familyName is required
所需属性 电子邮件 给定的名称 姓氏
这是我的注册页面。
'use client';
import { useState } from 'react';
import { signUp } from 'aws-amplify/auth';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
export default function SignUp() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [given_name, setGivenName] = useState('');
const [family_name, setFamilyName] = useState('');
const [error, setError] = useState('');
const router = useRouter();
const handleSignUp = async (e: React.FormEvent) => {
e.preventDefault();
try {
await signUp({
username: email,
password,
attributes: {
email,
given_name,
family_name
},
});
router.push('/login');
} catch (err) {
setError('Failed to sign up. Please try again.');
console.error('Error signing up:', err);
}
};
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full space-y-8">
<div>
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
Create your account
</h2>
</div>
<form className="mt-8 space-y-6" onSubmit={handleSignUp}>
<div className="rounded-md shadow-sm -space-y-px">
<div>
<input
id="email"
name="email"
type="email"
required
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="Email address"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div>
<input
id="password"
name="password"
type="password"
required
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div>
<input
id="given_name"
name="given_name"
type="text"
required
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="Given name"
value={given_name}
onChange={(e) => setGivenName(e.target.value)}
/>
</div>
<div>
<input
id="family_name"
name="family_name"
type="text"
required
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="Family name"
value={family_name}
onChange={(e) => setFamilyName(e.target.value)}
/>
</div>
</div>
{error && (
<div className="text-red-500 text-sm mt-2">{error}</div>
)}
<div>
<button
type="submit"
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Sign Up
</button>
</div>
</form>
<div className="text-center">
<Link href="/login" className="font-medium text-indigo-600 hover:text-indigo-500">
Already have an account? Sign in
</Link>
</div>
</div>
</div>
);
}
您的注册有效负载似乎错误,您应该使用
options
作为用户属性。
import { signUp } from "aws-amplify/auth"
const { isSignUpComplete, userId, nextStep } = await signUp({
username: "[email protected]",
password: "hunter2",
options: { // <-- HERE !!!!
userAttributes: {
email: "[email protected]",
given_name: "John",
family_name: "Smith"
},
}
});