์ฌ์ฉ์ ID ์ฐ๊ฒฐ - React Native SDK
์ด ํ์ด์ง์ ๋ด์ฉ
Realm ์ ์ฌ์ฉ์๋ฅผ ์ฑ ์ ๋ก๊ทธ ํ๊ธฐ ์ํด ๋ง์ ์ธ์ฆ ์ ๊ณต์ ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๊ฐ ์ ๊ณต์ ๋ ๊ณ ์ ํ ์ฌ์ฉ์ ID๋ฅผ ์์ฑํฉ๋๋ค. Realm ์ ์ฌ์ฉํ๋ฉด ์ฌ๋ฌ ์๊ฒฉ ์ฆ๋ช ์ ํ๋์ ์ฌ์ฉ์ ID๋ก ๋ณํฉํ ์ ์์ต๋๋ค.
useUser ํํฌ๋ฅผ ์ฌ์ฉํ์ฌ ID๋ฅผ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค.
์ข ์์ฑ ๊ฐ์ ธ์ค๊ธฐ
import React, {useEffect, useState} from 'react'; import { FlatList, Pressable, StyleSheet, Text, TextInput, View, } from 'react-native'; import {Credentials} from 'realm'; import { AppProvider, UserProvider, useApp, useUser, useAuth, useEmailPasswordAuth, AuthOperationName, } from '@realm/react';
์ ๊ณต์ ์ค์
ID๋ฅผ ์ฐ๊ฒฐํ๋ ค๋ฉด ๋จผ์ ๋ก๊ทธ์ธํ ์ฌ์ฉ์๊ฐ ํ์ํฉ๋๋ค. ์ฆ, AppProvider
๋ฐ UserProvider
๊ฐ ํ์ํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ UserProvider
๋ด์ ๋ชจ๋ ๊ตฌ์ฑ ์์์์ ID๋ฅผ ํ์ฌ ์ฌ์ฉ์์๊ฒ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค.
export const LinkIdentities = () => { return ( <AppProvider id={APP_ID}> <UserProvider fallback={LogIn}> <RegisterUser /> </UserProvider> </AppProvider> ); }; // Log in an anonymous user. This component only mounts // if there is no authenticated user. const LogIn = () => { const {logInWithAnonymous} = useAuth(); return ( <View> <Text>No one is logged in yet.</Text> <Pressable onPress={logInWithAnonymous}> <Text style={styles.buttonText}>Log in</Text> </Pressable> </View> ); };
UI ๋ฐ ๋งํฌ ID ๋ง๋ค๊ธฐ
๋ค์ ์์ ์์๋ ์ฑ์ ํ์ฌ ์ฌ์ฉ์์ ์ฐ๊ฒฐ๋ ๊ฐ ID์ ์ฌ์ฉ์ ID๋ฅผ ๋ ๋๋งํฉ๋๋ค. ์ฒ์์๋ ์ต๋ช ์ฌ์ฉ์ ID๋ง ๋ ๋๋ง๋์ง๋ง ์ด๋ฉ์ผ/๋น๋ฐ๋ฒํธ ID๋ฅผ ๋ง๋ค์ด ์ต๋ช ์ฌ์ฉ์์๊ฒ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค.
type UserIdentity = { providerType: string; id: string; }; // Link an anonymous user to an email/password identity. // For this example, the App Services backend automatically // confirms users' emails. const RegisterUser = () => { const app = useApp(); const user = useUser(); const {logOut} = useAuth(); const {register, result} = useEmailPasswordAuth(); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [userIdentities, setUserIdentities] = useState(user.identities); // Use `result` to react to successful registration // by linking credentials with the current user. useEffect(() => { if (result.operation === AuthOperationName.Register && result.success) { linkCredentials(); } }, [result]); if (!userIdentities.length) { setUserIdentities(user.identities); } const linkCredentials = async () => { const credentials = Credentials.emailPassword(email, password); await user.linkCredentials(credentials); setUserIdentities(user.identities); }; const registerAndLinkIdentities = async () => { register({email, password}); }; const deleteUser = async () => { app.deleteUser(app.currentUser!); }; return ( <View> {/* Show all identities associated with the current user */} <FlatList data={userIdentities} renderItem={({item}) => ( <Text >ID: {item.id}</Text> )} keyExtractor={item => item.id} /> <Text>Link anonymous user with email/password account</Text> <View> <TextInput onChangeText={setEmail} value={email} placeholder="email..." /> <TextInput onChangeText={setPassword} value={password} placeholder="password..." /> </View> <View> <Pressable onPress={registerAndLinkIdentities}> <Text style={styles.buttonText}>Register</Text> </Pressable> <Pressable onPress={logOut}> <Text style={styles.buttonText}>Log out</Text> </Pressable> <Pressable onPress={deleteUser}> <Text style={styles.buttonText}>Delete user</Text> </Pressable> </View> </View> ); };