사용자 ID 연결 - React Native SDK

이 페이지의 내용

종속성 가져오기

제공자 설정
UI 및 링크 ID 만들기

Atlas Device 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>
  );
};

돌아가기

다중 사용자 애플리케이션

사용자 API 키 생성 및 관리