我正在使用来自 AWS amplify 的 AWS
withAuthenticator
的 aws-amplify-react-native
组件。我可以为注册执行此操作<SignUp signUpConfig={signUpConfig} />
,我想自定义登录、确认注册、忘记密码屏幕,而无需从头开始编写自己的组件。
signUp 配置似乎是可行的,因为
signUpConfig
是此类的一部分 https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react-native/src/Auth /SignUp.tsx#L47
但同样不适用于 singIn 和其他组件。是否有替代方案可以自定义登录、确认注册、忘记密码屏幕。
注意[1] - 我无法使用
Authenticator
的aws-amplify-react-native
组件,注册屏幕显示在页面的一半上,显然它有渲染错误。
注[2] - 我也无法使用
Authenticator
中的 @aws-amplify/ui-react
,似乎它只为 React 而构建,不适用于 React-Native。尽管文档说它也适用于反应本机。
您必须使用 aws-amplify 中的
Auth
。我做了这样的事情。
/* Import the Amplify Auth API */
import { Auth } from 'aws-amplify';
export default function LoginScreen() {
const login = async () => {
if (validateInputFields(formData)) {
try {
await Auth.signIn(formData.email, formData.password);
goToHomeScreen();
} catch (err) { console.log({ err }); }
}
}
return (
<View>
{/* Email and Password fields /*}
<Button title="Login" onPress={() => login()} />
</View>
)
}
该文档也有用于注册的 API 👍
https://docs.amplify.aws/guides/authentication/custom-auth-flow/q/platform/js/
虽然我已经了解了您的需求,但我编写了一个详细的解决方案,使用 amplify v5 解决自定义工作流程,如下所示:
免责声明:我假设您已经在aws平台中设置了amplify和cognito。
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Auth } from "aws-amplify";
const SlideAuth = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const [error, setError] = useState(null);
const navigate = useNavigate();
const handleSignIn = async (event) => {
event.preventDefault();
if (username !== "" || password !== " ") {
try {
await Auth.signIn(username, password);
// Redirect to dashboard after successful sign-in
navigate("/dashboard");
} catch (error) {
setError(error.message);
}
}
};
const handleSignUp = async (e) => {
e.preventDefault();
console.log({ email, username, password });
try {
const { user } = await Auth.signUp({
username,
password,
attributes: { email },
});
console.log(user);
} catch (error) {
console.log("error signing up:", error);
}
reset();
};
const reset = async () => {
// await new Promise((resolve) => setTimeout(resolve, 2000)); --> to simulate delay
setUsername("");
setPassword("");
setEmail("");
};
这些描述了启动和运行它所需的辅助方法。如果您计划执行确认流程,这有点棘手,因为将向您发送带有唯一代码的电子邮件。为了让您的用户能够确认他们是真人,请创建一个带有基本单个输入字段(可能是模式)的屏幕,允许用户在其中发布发送的唯一代码。确认逻辑如下:
const confirmSignUp = async(username, code) => {
try {
const res = await Auth.confirmSignUp(username, code);
console.log(res);
} catch (error) {
console.log("error confirming sign up", error);
}
}
下面描述一个基本形式:
return (
<div className="body-size">
<div className="main">
<input type="checkbox" id="chk" aria-hidden="true" />
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<input
type="button"
value=" confirm email"
style={{ display: "relative", top: "0", right: "0" }}
onClick={() => confirmSignUp("spaco", "046488")}
/>
</div>
<div className="signup">
<form onSubmit={handleSignUp}>
<label htmlFor="chk" aria-hidden="true">
Sign up
</label>
<input
className="auth-input"
type="text"
name="username"
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="User name"
required
/>
<input
className="auth-input"
type="email"
name="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
required
/>
<input
className="auth-input"
type="password"
name="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
required
/>
<button className="authBtn">Sign up</button>
{error && <p className="error-message">{error}</p>}
</form>
</div>
<div className="login">
<form onSubmit={handleSignIn}>
<label htmlFor="chk" aria-hidden="true">
Login
</label>
<input
className="auth-input"
type="text"
name="username"
placeholder="username"
value={username}
onChange={(event) => setUsername(event.target.value)}
required
/>
<input
className="auth-input"
type="password"
name="password"
placeholder="Password"
value={password}
onChange={(event) => setPassword(event.target.value)}
required
/>
<button className="authBtn">Login</button>
</form>
</div>
</div>
</div>
);
};
export default SlideAuth;