리액트 네이티브에서 Parse를 통한 사용자 등록 구현 가이드
리액트 네이티브 사용자 등록
소개
많은 앱의 핵심에서 사용자 계정은 사용자가 자신의 정보를 안전하게 접근할 수 있도록 하는 개념을 가지고 있습니다. Parse는 사용자 계정 관리를 위해 필요한 많은 기능을 자동으로 처리하는 Parse.User라는 전문 사용자 클래스를 제공합니다.
이 가이드에서는 Parse.User 클래스를 사용하여 리액트 네이티브 앱을 위한 사용자 등록 기능을 만드는 방법을 배울 것입니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
목표
리액트 네이티브 앱을 위한 Parse를 사용하여 사용자 등록 기능을 구축하는 것입니다.
1 - 가입 방법 이해하기
Parse 사용자 관리는 Parse.User 객체 유형을 사용하며, 이는 기본 ParseObject 유형을 확장하고, current 및 getUsername, 같은 고유한 도우미 메서드를 포함하여 앱 전반에 걸쳐 사용자 데이터를 검색하는 데 도움을 줍니다. Parse.User 객체에 대해 더 읽으려면 여기에서 공식 문서를 확인하세요.
이 가이드에서는 signUp 메서드를 사용하여 새롭고 유효하며 고유한 Parse.User 객체를 로컬 및 서버에서 생성하는 방법을 배우게 됩니다. 이 메서드는 유효한 username 및 password 값을 인수로 사용합니다.
2 - 사용자 등록 구성 요소 만들기
이제 기능 구성 요소를 만들어 보겠습니다. 이 구성 요소는 우리 앱에서 signUp 메서드를 호출할 것입니다. 먼저, 루트 디렉토리에 UserRegistration.js라는 새 파일을 생성합니다 (UserRegistration.tsx TypeScript를 사용하는 경우) 그리고 필요한 입력 요소(username 및 password 입력란을 추가합니다. 상태 훅을 사용하여 useState를 통해 데이터를 관리합니다:
1 import React, { FC, ReactElement, useState } from "react";
2 import { Button, StyleSheet, TextInput } from "react-native";
3 import Parse from "parse/react-native";
4
5 export const UserRegistration: FC<{}> = ({}): ReactElement => {
6 const [username, setUsername] = useState("");
7 const [password, setPassword] = useState("");
8
9 return (
10 <>
11 <TextInput
12 style={styles.input}
13 value={username}
14 placeholder={"Username"}
15 onChangeText={(text) => setUsername(text)}
16 autoCapitalize={"none"}
17 />
18 <TextInput
19 style={styles.input}
20 value={password}
21 placeholder={"Password"}
22 secureTextEntry
23 onChangeText={(text) => setPassword(text)}
24 />
25 <Button title={"Sign Up"} onPress={() => {}} />
26 </>
27 );
28 };
29
30 const styles = StyleSheet.create({
31 input: {
32 height: 40,
33 marginBottom: 10,
34 backgroundColor: '#fff',
35 },
36 });3 - 가입 기능 만들기
이제 signUp 메서드를 호출할 가입 기능을 만들 수 있습니다:
1 const doUserRegistration = async function () {
2 // Note that these values come from state variables that we've declared before
3 const usernameValue = username;
4 const passwordValue = password;
5 // Since the signUp method returns a Promise, we need to call it using await
6 return await Parse.User.signUp(usernameValue, passwordValue)
7 .then((createdUser) => {
8 // Parse.User.signUp returns the already created ParseUser object if successful
9 Alert.alert(
10 'Success!',
11 `User ${createdUser.getUsername()} was successfully created!`,
12 );
13 return true;
14 })
15 .catch((error) => {
16 // signUp can fail if any parameter is blank or failed an uniqueness check on the server
17 Alert.alert('Error!', error.message);
18 return false;
19 });
20 };참고: 새로운 사용자를 생성하는 것은 signUp을 사용하여 현재 로그인된 사용자로 만들기 때문에, 사용자가 앱을 계속 사용하기 위해 다시 로그인할 필요가 없습니다.
이 함수를 UserRegistration 컴포넌트 안에, return 호출 직전에 삽입하여 호출하고 테스트할 수 있도록 하세요. 양식의 가입 버튼 onPress 동작을 () => doUserRegistration()로 업데이트하고, Alert를 react-native. 이제 컴포넌트는 다음과 같아야 합니다:
1 import React, { FC, ReactElement, useState } from "react";
2 import { Alert, Button, StyleSheet, TextInput } from "react-native";
3 import Parse from "parse/react-native";
4
5 export const UserRegistration: FC<{}> = ({}): ReactElement => {
6 const [username, setUsername] = useState("");
7 const [password, setPassword] = useState("");
8
9 const doUserRegistration = async function (): Promise<boolean> {
10 // Note that these values come from state variables that we've declared before
11 const usernameValue: string = username;
12 const passwordValue: string = password;
13 // Since the signUp method returns a Promise, we need to call it using await
14 return await Parse.User.signUp(usernameValue, passwordValue)
15 .then((createdUser: Parse.User) => {
16 // Parse.User.signUp returns the already created ParseUser object if successful
17 Alert.alert(
18 "Success!",
19 `User ${createdUser.get("username")} was successfully created!`
20 );
21 return true;
22 })
23 .catch((error: object) => {
24 // signUp can fail if any parameter is blank or failed an uniqueness check on the server
25 Alert.alert("Error!", error.message);
26 return false;
27 });
28 };
29
30 return (
31 <>
32 <TextInput
33 style={styles.input}
34 value={username}
35 placeholder={"Username"}
36 onChangeText={(text) => setUsername(text)}
37 autoCapitalize={"none"}
38 />
39 <TextInput
40 style={styles.input}
41 value={password}
42 placeholder={"Password"}
43 secureTextEntry
44 onChangeText={(text) => setPassword(text)}
45 />
46 <Button title={"Sign Up"} onPress={() => doUserRegistration()} />
47 </>
48 );
49 };
50
51 const styles = StyleSheet.create({
52 input: {
53 height: 40,
54 marginBottom: 10,
55 backgroundColor: "#fff",
56 },
57 });4 - 구성 요소 테스트
마지막 단계는 React Native 애플리케이션 내에서 새로운 컴포넌트를 사용하는 것입니다 App.js 파일 (또는 App.tsx TypeScript를 사용하는 경우):
1 import { UserRegistration } from "./UserRegistration";
2 /*
3 Your functions here
4 */
5 return (
6 <>
7 <StatusBar />
8 <SafeAreaView style={styles.container}>
9 <>
10 <Text style={styles.title}>React Native on Back4App</Text>
11 <Text>User registration tutorial</Text>
12 <UserRegistration />
13 </>
14 </SafeAreaView>
15 </>
16 );
17
18 // Remember to add some styles at the end of your file
19 const styles = StyleSheet.create({
20 container: {
21 flex: 1,
22 backgroundColor: "#fff",
23 alignItems: "center",
24 justifyContent: "center",
25 },
26 title: {
27 fontSize: 20,
28 fontWeight: "bold",
29 },
30 });이제 귀하의 앱은 다음과 같아야 합니다:
원하는 사용자 자격 증명을 제공한 후, 모든 것이 성공적이라면 가입하기를 누른 후 이 메시지를 볼 수 있습니다:
이전과 동일한 사용자 이름으로 사용자를 등록하려고 하면 오류 처리를 테스트할 수 있습니다:
비밀번호 없이 가입하려고 하면 또 다른 오류가 발생합니다:
결론
이 가이드의 끝에서, React Native에서 새로운 Parse 사용자를 등록하는 방법을 배웠습니다. 다음 가이드에서는 사용자를 로그인하고 로그아웃하는 방법을 보여드리겠습니다.