Создание приложений React Native с применением Microsoft Graph

В этом руководстве рассказывается о создании приложения React Native, которое использует API microsoft Graph для получения сведений о календаре для пользователя.

Предварительные требования

Перед началом этого учебного пособия на компьютере разработки должно быть установлено следующее.

• По крайней мере один из следующих ниже.
  • Android Studio и Набор разработки Java (необходимые для запуска примера на Android)
  • Xcode (необходимый для запуска примера на iOS)
• Node.js

Вы также должны иметь личную учетную запись Майкрософт с почтовым ящиком на Outlook.com или учетную запись Microsoft work или school. Если у вас нет учетной записи Майкрософт, существует несколько вариантов получения бесплатной учетной записи:

• Вы можете зарегистрироваться на новую личную учетную запись Майкрософт.
• Вы можете зарегистрироваться в программе Microsoft 365 разработчика, чтобы получить бесплатную Microsoft 365 подписку.

Отзывы

Обратите внимание на этот учебник в репозитории GitHub.

Создание приложения React Native

• Осталось 35 мин

Начните с создания нового React Native проекта.

1. Откройте интерфейс командной строки (CLI) в каталоге, где необходимо создать проект. Запустите следующую команду для запуска средства react-native-cli и создания нового React Native проекта.

   npx react-native init GraphTutorial --template react-native-template-typescript
   

2. Необязательный: Убедитесь, что среда разработки настроена правильно, запуская проект. В CLI измените каталог на только что созданный каталог GraphTutorial и запустите одну из следующих команд.

   • Для iOS: npx react-native run-ios
   • Для Android: запустите экземпляр эмулятора Android и запустите npx react-native run-android

Установка зависимостей

Прежде чем двигаться дальше, установите дополнительные зависимости, которые вы будете использовать позже.

• реактивной навигации для обработки навигации между представлениями в приложении.
• React-native-gesture-handler, react-native-safe-area-context, react-native-screens, react-native-reanimate, and masked-view required by react-navigation.
• react-native-elements и react-native-vector-icons для предоставления значков для пользовательского интерфейса.
• react-native-app-auth для обработки проверки подлинности и управления маркерами.
• async-storage для хранения маркеров.
• datetimepicker для добавления в пользовательский интерфейс даты и времени.
• момент для обработки размывов и сравнения дат и времени.
• windows-iana для перевода Windows часовых поясов в формат IANA.
• microsoft-graph-client для звонков в microsoft Graph.

1. Откройте CLI в корневом каталоге React Native проекта.

2. Выполните следующую команду.

   npm install @react-navigation/native@5.9.6 @react-navigation/drawer@5.12.7 @react-navigation/stack@5.14.7
   npm install @react-native-community/masked-view@0.1.11 react-native-safe-area-context@3.3.0 windows-iana
   npm install react-native-reanimated@2.2.0 react-native-screens@3.5.0 @react-native-async-storage/async-storage@1.15.5
   npm install react-native-elements@3.4.2 react-native-vector-icons@8.1.0 react-native-gesture-handler@1.10.3
   npm install react-native-app-auth@6.4.0 moment@2.29.1 moment-timezone @microsoft/microsoft-graph-client@3.0.0
   npm install @react-native-community/datetimepicker@3.5.2
   npm install @microsoft/microsoft-graph-types --save-dev
   

Ссылка и настройка зависимостей для iOS

1. Откройте CLI в каталоге GraphTutorial/ios .

2. Выполните следующую команду.

   pod install
   

3. Откройте файл GraphTutorial/ios/GraphTutorial/Info.plist в текстовом редакторе. Добавьте следующую строку перед последней строкой </dict> в файле.

   <key>UIAppFonts</key>
   <array>
     <string>AntDesign.ttf</string>
     <string>Entypo.ttf</string>
     <string>EvilIcons.ttf</string>
     <string>Feather.ttf</string>
     <string>FontAwesome.ttf</string>
     <string>FontAwesome5_Brands.ttf</string>
     <string>FontAwesome5_Regular.ttf</string>
     <string>FontAwesome5_Solid.ttf</string>
     <string>Foundation.ttf</string>
     <string>Ionicons.ttf</string>
     <string>MaterialIcons.ttf</string>
     <string>MaterialCommunityIcons.ttf</string>
     <string>SimpleLineIcons.ttf</string>
     <string>Octicons.ttf</string>
     <string>Zocial.ttf</string>
   </array>
   

4. Откройте файл GraphTutorial/ios/GraphTutorial/AppDelegate.h в текстовом редакторе. Замените его содержимое следующим.

   #import <React/RCTBridgeDelegate.h>
   #import <UIKit/UIKit.h>
   #import "RNAppAuthAuthorizationFlowManager.h"
   
   @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, RNAppAuthAuthorizationFlowManager>
   
   @property (nonatomic, strong) UIWindow *window;
   @property (nonatomic, weak) id<RNAppAuthAuthorizationFlowManagerDelegate> authorizationFlowManagerDelegate;
   
   @end
   

Настройка зависимостей для Android

1. Откройте файл GraphTutorial/android/app/build.gradle в редакторе.

2. Найдите запись defaultConfig и добавьте в нее следующее свойство defaultConfig.

   manifestPlaceholders = [
       appAuthRedirectScheme: 'graph-tutorial'
   ]
   

   Запись defaultConfig должна выглядеть так же, как и следующая.

   defaultConfig {
       applicationId "com.graphtutorial"
       minSdkVersion rootProject.ext.minSdkVersion
       targetSdkVersion rootProject.ext.targetSdkVersion
       versionCode 1
       versionName "1.0"
       manifestPlaceholders = [
           appAuthRedirectScheme: 'graph-tutorial'
       ]
   }
   

3. Добавьте следующую строку в конец файла.

   apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
   

4. Сохраните файл.

Проектирование приложения

Приложение будет использовать ящик навигации для перемещения между различными представлениями. На этом шаге вы создайте основные представления, используемые приложением, и реализуйте ящик навигации.

Создание представлений

В этом разделе будут создаваться представления для приложения для поддержки потока проверки подлинности.

1. Откройте GraphTutorial/index.js и добавьте следующее в верхней части файла перед любыми другими утверждениями import .

   import 'react-native-gesture-handler';
   

2. Создайте новый файл в каталоге GraphTutorial с именем AuthContext.tsx и добавьте следующий код.

   import * as React from 'react';
   
   type AuthContextType = {
     signIn: () => Promise<void>;
     signOut: () => void;
   }
   
   export const AuthContext = React.createContext<AuthContextType>({
     signIn: async () => {},
     signOut: () => {}
   });
   

3. Создайте новый файл в каталоге GraphTutorial с именем UserContext.tsx и добавьте следующий код.

   import * as React from 'react';
   import { ImageSourcePropType } from 'react-native';
   
   type UserContextType = {
     userLoading: boolean;
     userFirstName: string;
     userFullName: string;
     userEmail: string;
     userTimeZone: string;
     userPhoto: ImageSourcePropType;
   }
   
   export const UserContext = React.createContext<UserContextType>({
     userLoading: true,
     userFirstName: '',
     userFullName: '',
     userEmail: '',
     userTimeZone: '',
     userPhoto: require('./images/no-profile-pic.png')
   });
   

4. Создание нового каталога в каталоге GraphTutorial с именем экранов.

5. Создайте новый файл в каталоге GraphTutorial/screens с именем HomeScreen.tsx. Добавьте указанный ниже код в файл.

   import React from 'react';
   import {
     ActivityIndicator,
     Platform,
     StyleSheet,
     Text,
     View,
   } from 'react-native';
   import { createStackNavigator } from '@react-navigation/stack';
   
   import { UserContext } from '../UserContext';
   
   const Stack = createStackNavigator();
   
   const HomeComponent = () => {
     const userContext = React.useContext(UserContext);
   
     return (
       <View style={styles.container}>
         <ActivityIndicator
           color={Platform.OS === 'android' ? '#276b80' : undefined}
           animating={userContext.userLoading}
           size='large' />
         {userContext.userLoading ? null: <Text>Hello {userContext.userFirstName}!</Text>}
       </View>
     );
   }
   
   export default class HomeScreen extends React.Component {
     render() {
       return (
         <Stack.Navigator>
           <Stack.Screen name='Home'
             component={HomeComponent}
             options={{
               headerShown: false
             }} />
         </Stack.Navigator>
       );
     }
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center'
     }
   });
   

6. Создайте новый файл в каталоге GraphTutorial/screens с именем CalendarScreen.tsx. Добавьте указанный ниже код в файл.

   import React from 'react';
   import {StyleSheet, Text, View} from 'react-native';
   import {createStackNavigator} from '@react-navigation/stack';
   
   const Stack = createStackNavigator();
   
   // Temporary placeholder view
   const CalendarComponent = () => (
     <View style={styles.container}>
       <Text>Calendar</Text>
     </View>
   );
   
   export default class CalendarScreen extends React.Component {
     render() {
       return (
         <Stack.Navigator>
           <Stack.Screen
             name='Calendar'
             component={CalendarComponent}
             options={{
               headerShown: false,
             }}
           />
         </Stack.Navigator>
       );
     }
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
     },
   });
   

7. Создайте новый файл в каталоге GraphTutorial/screens с именем SignInScreen.tsx. Добавьте указанный ниже код в файл.

   // Adapted from https://reactnavigation.org/docs/auth-flow
   import React from 'react';
   import {Alert, Button, StyleSheet, View} from 'react-native';
   import {ParamListBase} from '@react-navigation/native';
   import {StackNavigationProp} from '@react-navigation/stack';
   
   import {AuthContext} from '../AuthContext';
   
   type SignInProps = {
     navigation: StackNavigationProp<ParamListBase>;
   };
   
   export default class SignInScreen extends React.Component<SignInProps> {
     static contextType = AuthContext;
   
     _signInAsync = async () => {
       await this.context.signIn();
     };
   
     componentDidMount() {
       this.props.navigation.setOptions({
         title: 'Please sign in',
         headerShown: true,
       });
     }
   
     render() {
       return (
         <View style={styles.container}>
           <Button title='Sign In' onPress={this._signInAsync} />
         </View>
       );
     }
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
     },
   });
   

8. Создайте новый файл в каталоге GraphTutorial/screens с именем AuthLoadingScreen.tsx. Добавьте указанный ниже код в файл.

   // Adapted from https://reactnavigation.org/docs/auth-flow
   import React from 'react';
   import {
     ActivityIndicator,
     Platform,
     Text,
     StyleSheet,
     View,
   } from 'react-native';
   
   export default class AuthLoadingScreen extends React.Component {
     render() {
       return (
         <View style={styles.container}>
           <ActivityIndicator
             color={Platform.OS === 'android' ? '#276b80' : undefined}
             size='large' />
           <Text style={styles.statusText}>Logging in...</Text>
         </View>
       );
     }
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center'
     },
     statusText: {
       marginTop: 10
     }
   });
   

Создание ящика навигации

В этом разделе вы создадим меню для приложения и обновим приложение для перемещения между экранами с помощью реактивной навигации.

1. Создание нового каталога в каталоге GraphTutorial с именем меню.

2. Создайте новый файл в каталоге GraphTutorial/menus с именем DrawerMenu.tsx. Добавьте указанный ниже код в файл.

   import React, {FC} from 'react';
   import {
     Alert,
     Image,
     StyleSheet,
     Text,
     View,
     ImageSourcePropType,
   } from 'react-native';
   import {
     createDrawerNavigator,
     DrawerContentScrollView,
     DrawerItem,
     DrawerItemList,
     DrawerContentComponentProps,
   } from '@react-navigation/drawer';
   import {ParamListBase} from '@react-navigation/native';
   import {StackNavigationProp} from '@react-navigation/stack';
   
   import {AuthContext} from '../AuthContext';
   import {UserContext} from '../UserContext';
   import HomeScreen from '../screens/HomeScreen';
   import CalendarScreen from '../screens/CalendarScreen';
   
   const Drawer = createDrawerNavigator();
   
   type CustomDrawerContentProps = DrawerContentComponentProps & {
     userName: string;
     userEmail: string;
     userPhoto: ImageSourcePropType;
     signOut: () => void;
   };
   
   type DrawerMenuProps = {
     navigation: StackNavigationProp<ParamListBase>;
   };
   
   const CustomDrawerContent: FC<CustomDrawerContentProps> = props => (
     <DrawerContentScrollView {...props}>
       <View style={styles.profileView}>
         <Image
           source={props.userPhoto}
           resizeMode='contain'
           style={styles.profilePhoto}
         />
         <Text style={styles.profileUserName}>{props.userName}</Text>
         <Text style={styles.profileEmail}>{props.userEmail}</Text>
       </View>
       <DrawerItemList {...props} />
       <DrawerItem label='Sign Out' onPress={props.signOut} />
     </DrawerContentScrollView>
   );
   
   export default class DrawerMenuContent extends React.Component<DrawerMenuProps> {
     static contextType = AuthContext;
   
     state = {
       // TEMPORARY
       userLoading: true,
       userFirstName: 'Adele',
       userFullName: 'Adele Vance',
       userEmail: 'adelev@contoso.com',
       userTimeZone: 'UTC',
       userPhoto: require('../images/no-profile-pic.png'),
     };
   
     _signOut = async () => {
       this.context.signOut();
     };
   
     async componentDidMount() {
       this.props.navigation.setOptions({
         headerShown: false,
       });
     }
   
     render() {
       const userLoaded = !this.state.userLoading;
   
       return (
         <UserContext.Provider value={this.state}>
           <Drawer.Navigator
             drawerType='front'
             screenOptions={{
               headerShown: true,
               headerStyle: {
                 backgroundColor: '#276b80',
               },
               headerTintColor: 'white',
             }}
             drawerContent={props => (
               <CustomDrawerContent
                 {...props}
                 userName={this.state.userFullName}
                 userEmail={this.state.userEmail}
                 userPhoto={this.state.userPhoto}
                 signOut={this._signOut}
               />
             )}>
             <Drawer.Screen
               name='Home'
               component={HomeScreen}
               options={{drawerLabel: 'Home', headerTitle: 'Welcome'}}
             />
             {userLoaded && (
               <Drawer.Screen
                 name='Calendar'
                 component={CalendarScreen}
                 options={{drawerLabel: 'Calendar'}}
               />
             )}
           </Drawer.Navigator>
         </UserContext.Provider>
       );
     }
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
     },
     profileView: {
       alignItems: 'center',
       padding: 10,
     },
     profilePhoto: {
       width: 80,
       height: 80,
       borderRadius: 40,
     },
     profileUserName: {
       fontWeight: '700',
     },
     profileEmail: {
       fontWeight: '200',
       fontSize: 10,
     },
   });
   

3. Создание нового каталога в каталоге GraphTutorial с именем изображений.

4. Добавьте изображение профиля по умолчанию с именемno-profile-pic.png в этом каталоге. Вы можете использовать любое изображение, которое вам нравится, или использовать его из этого примера.

5. Откройте файл GraphTutorial/App.tsx и замените все содержимое следующим.

   // Adapted from https://reactnavigation.org/docs/auth-flow
   import * as React from 'react';
   import {NavigationContainer, ParamListBase} from '@react-navigation/native';
   import {
     createStackNavigator,
     StackNavigationProp,
   } from '@react-navigation/stack';
   
   import {AuthContext} from './AuthContext';
   import SignInScreen from './screens/SignInScreen';
   import DrawerMenuContent from './menus/DrawerMenu';
   import AuthLoadingScreen from './screens/AuthLoadingScreen';
   
   const Stack = createStackNavigator();
   
   type Props = {
     navigation: StackNavigationProp<ParamListBase>;
   };
   
   export default function App({navigation}: Props) {
     const [state, dispatch] = React.useReducer(
       (prevState: any, action: any) => {
         switch (action.type) {
           case 'RESTORE_TOKEN':
             return {
               ...prevState,
               userToken: action.token,
               isLoading: false,
             };
           case 'SIGN_IN':
             return {
               ...prevState,
               isSignOut: false,
               userToken: action.token,
             };
           case 'SIGN_OUT':
             return {
               ...prevState,
               isSignOut: true,
               userToken: null,
             };
         }
       },
       {
         isLoading: true,
         isSignOut: false,
         userToken: null,
       },
     );
   
     React.useEffect(() => {
       const bootstrapAsync = async () => {
         let userToken = null;
         // TEMPORARY
         dispatch({type: 'RESTORE_TOKEN', token: userToken});
       };
   
       bootstrapAsync();
     }, []);
   
     const authContext = React.useMemo(
       () => ({
         signIn: async () => {
           dispatch({type: 'SIGN_IN', token: 'placeholder-token'});
         },
         signOut: async () => {
           dispatch({type: 'SIGN_OUT'});
         },
       }),
       [],
     );
   
     return (
       <AuthContext.Provider value={authContext}>
         <NavigationContainer>
           <Stack.Navigator>
             {state.isLoading ? (
               <Stack.Screen name='Loading' component={AuthLoadingScreen} />
             ) : state.userToken == null ? (
               <Stack.Screen name='SignIn' component={SignInScreen} />
             ) : (
               <Stack.Screen name='Main' component={DrawerMenuContent} />
             )}
           </Stack.Navigator>
         </NavigationContainer>
       </AuthContext.Provider>
     );
   }
   

6. Сохраните все изменения.

7. Перезагрузите приложение в эмуляторе.

Меню приложения должно работать для перемещения между двумя фрагментами и изменения при нажатии кнопки Вход или Вход .

Регистрация приложения на портале

• Осталось 28 мин

В этом упражнении будет создаваться новое родной приложение Azure AD с Azure Active Directory центра администрирования.

1. Откройте браузер и перейдите в Центр администрирования Azure Active Directory и войдите с помощью личной учетной записи (т.е. учетной записи Майкрософт) или рабочей или учебной учетной записи.

2. Выберите Azure Active Directory на панели навигации слева, затем выберите Регистрация приложений в разделе Управление.

   

3. Выберите Новая регистрация. На странице Зарегистрировать приложение задайте необходимые значения следующим образом.

   • Введите имя React Native Graph Tutorial.
   • Введите поддерживаемые типы учетных записей для учетных записей в любом каталоге организаций и личных учетных записей Microsoft.
   • В статье Перенаправление URI измените отсев на общедоступный клиент (мобильный & рабочий стол) и установите значение graph-tutorial://react-native-auth/ .

   

4. Нажмите Зарегистрировать. На странице React Native Graph учебника скопируйте значение ID приложения (клиента) и сохраните его, оно потребуется на следующем шаге.

   

Добавление проверки подлинности с помощью Azure AD

• Осталось 25 мин

В этом упражнении вы расширит приложение от предыдущего упражнения для поддержки проверки подлинности с помощью Azure AD. Это необходимо для получения необходимого маркера доступа OAuth для вызова microsoft Graph. Для этого в приложение будет интегрирована библиотека react-native-app-auth .

1. Создание нового каталога в каталоге GraphTutorial с именем auth.

2. Создайте новый файл в каталоге GraphTutorial/auth с именем AuthConfig.ts. Добавьте указанный ниже код в файл.

   export const AuthConfig = {
     appId: 'YOUR_APP_ID_HERE',
     appScopes: [
       'openid',
       'offline_access',
       'profile',
       'User.Read',
       'MailboxSettings.Read',
       'Calendars.ReadWrite'
     ]
   };
   

   Замените YOUR_APP_ID_HERE с помощью ID приложения из регистрации приложения.

Реализация входа в систему

В этом разделе вы создадим класс помощника проверки подлинности и обновим приложение, чтобы войти и выйти.

1. Создайте новый файл в каталоге GraphTutorial/auth с именем AuthManager.ts. Добавьте указанный ниже код в файл.

   import AsyncStorage from '@react-native-async-storage/async-storage';
   import { authorize, refresh, AuthConfiguration } from 'react-native-app-auth';
   import { Platform } from 'react-native';
   import moment from 'moment';
   
   import { AuthConfig } from './AuthConfig';
   
   const config: AuthConfiguration = {
     clientId: AuthConfig.appId,
     redirectUrl: 'graph-tutorial://react-native-auth/',
     scopes: AuthConfig.appScopes,
     additionalParameters: { prompt: 'select_account' },
     serviceConfiguration: {
       authorizationEndpoint: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
       tokenEndpoint: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
     }
   };
   
   export class AuthManager {
   
     static signInAsync = async () => {
       const result = await authorize(config);
   
       console.log(result.accessToken);
   
       // Store the access token, refresh token, and expiration time in storage
       await AsyncStorage.setItem('userToken', result.accessToken);
       await AsyncStorage.setItem('refreshToken', result.refreshToken);
       await AsyncStorage.setItem('expireTime', result.accessTokenExpirationDate);
     }
   
     static signOutAsync = async () => {
       // Clear storage
       await AsyncStorage.removeItem('userToken');
       await AsyncStorage.removeItem('refreshToken');
       await AsyncStorage.removeItem('expireTime');
     }
   
     static getAccessTokenAsync = async() => {
       const expireTime = await AsyncStorage.getItem('expireTime');
   
       if (expireTime !== null) {
         // Get expiration time - 5 minutes
         // If it's <= 5 minutes before expiration, then refresh
         const expire = moment(expireTime).subtract(5, 'minutes');
         const now = moment();
   
         if (now.isSameOrAfter(expire)) {
           // Expired, refresh
           console.log('Refreshing token');
           const refreshToken = await AsyncStorage.getItem('refreshToken');
           console.log(`Refresh token: ${refreshToken}`);
           const result = await refresh(config, { refreshToken: refreshToken || '' });
   
           // Store the new access token, refresh token, and expiration time in storage
           await AsyncStorage.setItem('userToken', result.accessToken);
           await AsyncStorage.setItem('refreshToken', result.refreshToken || '');
           await AsyncStorage.setItem('expireTime', result.accessTokenExpirationDate);
   
           return result.accessToken;
         }
   
         // Not expired, just return saved access token
         const accessToken = await AsyncStorage.getItem('userToken');
         return accessToken;
       }
   
       return null;
     }
   }
   

2. Откройте файл GraphTutorial/App.tsx import и добавьте следующее утверждение в верхнюю часть файла.

   import {AuthManager} from './auth/AuthManager';
   

3. Замените существующее authContext объявление следующим.

   const authContext = React.useMemo(
     () => ({
       signIn: async () => {
         await AuthManager.signInAsync();
         const token = await AuthManager.getAccessTokenAsync();
         dispatch({ type: 'SIGN_IN', token: token });
       },
       signOut: async () => {
         await AuthManager.signOutAsync();
         dispatch({ type: 'SIGN_OUT' });
       }
     }),
     []
   );
   

4. Откройте файл GraphTutorial/menus/DrawerMenu.tsx import и добавьте следующее утверждение в верхнюю часть файла.

   import {AuthManager} from '../auth/AuthManager';
   

5. Добавьте в функцию следующий componentDidMount код.

   try {
     const accessToken = await AuthManager.getAccessTokenAsync();
   
     // TEMPORARY
     this.setState({userFirstName: accessToken, userLoading: false});
   } catch (error) {
     Alert.alert(
       'Error getting token',
       JSON.stringify(error),
       [
         {
           text: 'OK'
         }
       ],
       { cancelable: false }
     );
   }
   

6. Сохраните изменения и перезагрузите приложение в эмуляторе.

При входе в приложение необходимо увидеть маркер доступа, отображаемый на экране Welcome .

Получение сведений о пользователе

В этом разделе вы создадим настраиваемый поставщик проверки подлинности для клиентской библиотеки Graph, создадим класс помощников для удержания всех вызовов в Microsoft Graph DrawerMenuContent и обновим класс для использования этого нового класса для входа в систему пользователя.

1. Создание нового каталога в каталоге GraphTutorial с именем graph.

2. Создайте новый файл в каталоге GraphTutorial/graph с именем GraphAuthProvider.ts. Добавьте указанный ниже код в файл.

   import { AuthManager } from '../auth/AuthManager';
   
   // Used by Graph client to get access tokens
   // See https://github.com/microsoftgraph/msgraph-sdk-javascript/blob/dev/docs/CustomAuthenticationProvider.md
   export class GraphAuthProvider {
     getAccessToken = async() => {
       const token = await AuthManager.getAccessTokenAsync();
       return token || '';
     }
   }
   

3. Создайте новый файл в каталоге GraphTutorial/graph с именем GraphManager.ts. Добавьте указанный ниже код в файл.

   import {Client} from '@microsoft/microsoft-graph-client';
   import {GraphAuthProvider} from './GraphAuthProvider';
   
   // Set the authProvider to an instance
   // of GraphAuthProvider
   const clientOptions = {
     authProvider: new GraphAuthProvider(),
   };
   
   // Initialize the client
   const graphClient = Client.initWithMiddleware(clientOptions);
   
   export class GraphManager {
     static getUserAsync = async () => {
       // GET /me
       return await graphClient
         .api('/me')
         .select('displayName,givenName,mail,mailboxSettings,userPrincipalName')
         .get();
     };
   }
   

4. Откройте файл GraphTutorial/views/DrawerMenu.tsx import и добавьте в верхней части файла следующие утверждения.

   import {GraphManager} from '../graph/GraphManager';
   import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
   

5. Замените componentDidMount метод следующим.

   async componentDidMount() {
     this.props.navigation.setOptions({
       headerShown: false,
     });
   
     try {
       // Get the signed-in user from Graph
       const user: MicrosoftGraph.User = await GraphManager.getUserAsync();
   
       // Update UI with display name and email
       this.setState({
         userLoading: false,
         userFirstName: user.givenName!,
         userFullName: user.displayName!,
         // Work/School accounts have email address in mail attribute
         // Personal accounts have it in userPrincipalName
         userEmail: user.mail! || user.userPrincipalName!,
         userTimeZone: user.mailboxSettings?.timeZone!
       });
     } catch(error) {
       Alert.alert(
         'Error getting user',
         JSON.stringify(error),
         [
           {
             text: 'OK'
           }
         ],
         { cancelable: false }
       );
     }
   }
   

Если вы сохраните изменения и перезагрузите приложение сейчас, после внесения в него пользовательский интерфейс обновляется с отображаемого имени пользователя и адресом электронной почты.

Просмотр календаря

• Осталось 10 мин

В этом упражнении вы будете включать Graph Microsoft в приложение. Для этого приложения вы будете использовать клиентскую библиотеку Microsoft Graph JavaScript для звонков в Microsoft Graph.

Получение событий календаря из Outlook

В этом разделе вы расширит GraphManager CalendarScreen класс, чтобы добавить функцию для получения событий пользователя на текущей неделе и обновить для использования этих новых функций.

1. Откройте файл GraphTutorial/graph/GraphManager.tsx и добавьте следующий метод в GraphManager класс.

   static getCalendarView = async(start: string, end: string, timezone: string) => {
     // GET /me/calendarview
     return await graphClient.api('/me/calendarview')
       .header('Prefer', `outlook.timezone="${timezone}"`)
       .query({ startDateTime: start, endDateTime: end})
       // $select='subject,organizer,start,end'
       // Only return these fields in results
       .select('subject,organizer,start,end')
       // $orderby=createdDateTime DESC
       // Sort results by when they were created, newest first
       .orderby('start/dateTime')
       .top(50)
       .get();
   }
   

   Примечание

   Рассмотрим, что делает getCalendarView код.

   • Вызывается URL-адрес /v1.0/me/calendarView.
   • Функция header добавляет загон Prefer: outlook.timezone в запрос, в результате чего время отклика будет в предпочтительном часовом поясе пользователя.
   • Функция query добавляет параметры startDateTime и параметры endDateTime , определяя окно времени для представления календаря.
   • Функция select ограничивает поля, возвращаемые для каждого события, только теми, которые на самом деле будет использовать приложение.
   • Функция orderby сортировать результаты к началу.
   • Функция top ограничивает результаты первыми 50 событиями.

2. Откройте GraphTutorial/views/CalendarScreen.tsx и замените все содержимое следующим кодом.

   import React from 'react';
   import {
     ActivityIndicator,
     Alert,
     FlatList,
     Modal,
     Platform,
     ScrollView,
     StyleSheet,
     Text,
     View,
   } from 'react-native';
   import {createStackNavigator} from '@react-navigation/stack';
   import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
   import moment from 'moment-timezone';
   import {findIana} from 'windows-iana';
   
   import {UserContext} from '../UserContext';
   import {GraphManager} from '../graph/GraphManager';
   
   const Stack = createStackNavigator();
   const CalendarState = React.createContext<CalendarScreenState>({
     loadingEvents: true,
     events: [],
   });
   
   type CalendarScreenState = {
     loadingEvents: boolean;
     events: MicrosoftGraph.Event[];
   };
   
   // Temporary JSON view
   const CalendarComponent = () => {
     const calendarState = React.useContext(CalendarState);
   
     return (
       <View style={styles.container}>
         <Modal visible={calendarState.loadingEvents}>
           <View style={styles.loading}>
             <ActivityIndicator
               color={Platform.OS === 'android' ? '#276b80' : undefined}
               animating={calendarState.loadingEvents}
               size='large'
             />
           </View>
         </Modal>
         <ScrollView>
           <Text>{JSON.stringify(calendarState.events, null, 2)}</Text>
         </ScrollView>
       </View>
     );
   };
   
   export default class CalendarScreen extends React.Component {
     static contextType = UserContext;
   
     state: CalendarScreenState = {
       loadingEvents: true,
       events: [],
     };
   
     async componentDidMount() {
       try {
         const tz = this.context.userTimeZone || 'UTC';
         // Convert user's Windows time zone ("Pacific Standard Time")
         // to IANA format ("America/Los_Angeles")
         // Moment.js needs IANA format
         const ianaTimeZone = findIana(tz)[0];
   
         // Get midnight on the start of the current week in the user's
         // time zone, but in UTC. For example, for PST, the time value
         // would be 07:00:00Z
         const startOfWeek = moment
           .tz(ianaTimeZone!.valueOf())
           .startOf('week')
           .utc();
   
         const endOfWeek = moment(startOfWeek).add(7, 'day');
   
         const events = await GraphManager.getCalendarView(
           startOfWeek.format(),
           endOfWeek.format(),
           tz,
         );
   
         this.setState({
           loadingEvents: false,
           events: events.value,
         });
       } catch (error) {
         Alert.alert(
           'Error getting events',
           JSON.stringify(error),
           [
             {
               text: 'OK',
             },
           ],
           {cancelable: false},
         );
       }
     }
   
     render() {
       return (
         <CalendarState.Provider value={this.state}>
           <Stack.Navigator>
             <Stack.Screen
               name='Calendar'
               component={CalendarComponent}
               options={{
                 headerShown: false,
               }}
             />
           </Stack.Navigator>
         </CalendarState.Provider>
       );
     }
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
     },
     loading: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
     },
     eventItem: {
       padding: 10,
     },
     eventSubject: {
       fontWeight: '700',
       fontSize: 18,
     },
     eventOrganizer: {
       fontWeight: '200',
     },
     eventDuration: {
       fontWeight: '200',
     },
   });
   

Теперь вы можете запустить приложение, войти и нажмите элемент навигации Календарь в меню. Вы должны увидеть сброс JSON событий в приложении.

Отображение результатов

Теперь вы можете заменить свалку JSON чем-то, чтобы отобразить результаты в удобной для пользователя манере. В этом разделе вы добавим на FlatList экран календаря для отображения событий.

1. Добавьте следующий метод выше объявления CalendarScreen класса.

   const convertDateTime = (dateTime: string): string => {
     return moment(dateTime).format('MMM Do H:mm a');
   };
   

2. Замените ScrollView метод CalendarComponent следующим.

   <FlatList
     data={calendarState.events}
     renderItem={({item}) => (
       <View style={styles.eventItem}>
         <Text style={styles.eventSubject}>{item.subject}</Text>
         <Text style={styles.eventOrganizer}>
           {item.organizer!.emailAddress!.name}
         </Text>
         <Text style={styles.eventDuration}>
           {convertDateTime(item.start!.dateTime!)} -{' '}
           {convertDateTime(item.end!.dateTime!)}
         </Text>
       </View>
     )}
   />
   

3. Запустите приложение, вопишите и нажмите элемент навигации Календарь . Список событий.

   

Создание нового события

• Осталось 5 мин

В этом разделе вы добавим возможность создания событий в календаре пользователя.

Создание нового экрана событий

1. Откройте ./graph/GraphManager.ts и добавьте в класс следующую GraphManager функцию.

   static createEvent = async(newEvent: any) => {
     // POST /me/events
     await graphClient.api('/me/events')
       .post(newEvent);
   }
   

   Эта функция использует Graph SDK для создания нового события.

2. Создайте новый файл на экранах с именем NewEventScreen.tsx и добавьте следующий код.

   import React from 'react';
   import {
     ActivityIndicator,
     Alert,
     Button,
     Modal,
     Platform,
     ScrollView,
     StyleSheet,
     Text,
     View,
   } from 'react-native';
   import DateTimePicker from '@react-native-community/datetimepicker';
   import { createStackNavigator } from '@react-navigation/stack';
   import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
   import moment from 'moment-timezone';
   
   import { UserContext } from '../UserContext';
   import { GraphManager } from '../graph/GraphManager';
   import { TextInput } from 'react-native-gesture-handler';
   
   const Stack = createStackNavigator();
   const NewEventState = React.createContext<NewEventState>({
     isCreating: false,
     subject: '',
     attendees: '',
     body: '',
     timeZone: '',
     startDate: new Date(),
     endDate: new Date(),
     disableCreate: () => { return true },
     updateValue: () => {}
   });
   
   type NewEventState = {
     isCreating: boolean;
     subject: string;
     attendees: string;
     body: string;
     timeZone: string;
     startDate: Date;
     endDate: Date;
     disableCreate: () => boolean;
     updateValue: (newValue: string | Date | boolean, fieldName: string) => void;
   }
   
   type DateTimeInputProps = {
     value: Date;
     onChange: (event: Event, newValue: Date | undefined) => void;
   }
   
   // The picker acts very differently on Android and iOS
   // iOS can use a single picker for both date and time,
   // where Android requires two. Also the iOS version can
   // be displayed all the time, while the Android version is a
   // modal pop-up. Encapsulating this into a reusable component
   const DateTimeInput = (props: DateTimeInputProps) => {
     const [showDatePicker, setShowDatePicker] = React.useState(false);
     const [showTimePicker, setShowTimePicker] = React.useState(Platform.OS === 'ios');
   
     return (
       <View style={Platform.OS === 'android' ? styles.dateTime : null}>
         { Platform.OS === 'android' &&
           <Text
             style={styles.time}
             onPress={()=>{setShowTimePicker(true)}}>
             {formatTime(props.value)}
           </Text>
         }
         { showTimePicker &&
           <DateTimePicker
             mode={Platform.OS === 'ios' ? 'datetime' : 'time'}
             value={props.value}
             onChange={(e, d) => {
               setShowTimePicker(Platform.OS === 'ios');
               if (d)
                 props.onChange(e,d);
             }}
             />
         }
         { Platform.OS === 'android' &&
           <Text
             style={styles.date}
             onPress={()=>{setShowDatePicker(true)}}>
             {formatDate(props.value)}
           </Text>
         }
         { showDatePicker &&
           Platform.OS === 'android' &&
           <DateTimePicker
             mode='date'
             value={props.value}
             onChange={(e, d) => {
               setShowDatePicker(Platform.OS === 'ios');
               if (d)
                 props.onChange(e,d);
             }}
             />
         }
       </View>
     )
   }
   
   const NewEventComponent = () => {
     const newEventState = React.useContext(NewEventState);
   
     const createEvent = async () => {
       newEventState.updateValue(true, 'isCreating');
   
       // Create a new Event object with the
       // required fields
       const newEvent: MicrosoftGraph.Event = {
         subject: newEventState.subject,
         start: {
           dateTime: moment(newEventState.startDate).format('YYYY-MM-DDTHH:mm:ss'),
           timeZone: newEventState.timeZone
         },
         end: {
           dateTime: moment(newEventState.endDate).format('YYYY-MM-DDTHH:mm:ss'),
           timeZone: newEventState.timeZone
         }
       };
   
       // Only add attendees if the user specified them
       if (newEventState.attendees.length > 0) {
         newEvent.attendees = [];
   
         // Value should be a ;-delimited list of email addresses
         // NOTE: The app does no validation of this
         const emails = newEventState.attendees.split(';')
   
         emails.forEach((email) => {
           newEvent.attendees!.push({
             emailAddress: { address: email }
           });
         });
       }
   
       // Only add body if the user specified one
       if (newEventState.body.length > 0) {
         newEvent.body = {
           content: newEventState.body,
           // For simplicity, add it as a plain-text body
           contentType: 'text'
         };
       }
   
       await GraphManager.createEvent(newEvent);
   
       Alert.alert('Success',
         'Event created',
         [
           {
             text: 'OK',
             onPress: () => {
               newEventState.updateValue(false, 'isCreating');
             }
           }
         ]
       );
     }
   
     return (
       <ScrollView style={styles.container}>
         <Modal visible={newEventState.isCreating}>
           <View style={styles.loading}>
             <ActivityIndicator
               color={Platform.OS === 'android' ? '#276b80' : undefined}
               animating={newEventState.isCreating}
               size='large' />
           </View>
         </Modal>
           <View style={styles.formField}>
             <Text style={styles.fieldLabel}>Subject</Text>
             <TextInput style={styles.textInput}
               value={newEventState.subject}
               onChangeText={(text) => newEventState.updateValue(text, 'subject')} />
           </View>
           <View style={styles.formField}>
             <Text style={styles.fieldLabel}>Attendees</Text>
             <TextInput style={styles.textInput}
               placeholder="Email (separate multiple with ';')"
               value={newEventState.attendees}
               onChangeText={(text) => newEventState.updateValue(text, 'attendees')} />
           </View>
           <View style={styles.formField}>
             <Text style={styles.fieldLabel}>Start</Text>
             <DateTimeInput
               value={newEventState.startDate}
               onChange={(e, date) => newEventState.updateValue(date!, 'startDate')} />
           </View>
           <View style={styles.formField}>
             <Text style={styles.fieldLabel}>End</Text>
             <DateTimeInput
               value={newEventState.endDate}
               onChange={(e, date) => newEventState.updateValue(date!, 'endDate')} />
           </View>
           <View style={styles.formField}>
             <TextInput style={styles.multiLineTextInput}
               multiline={true}
               textAlignVertical='top'
               placeholder='Body'
               value={newEventState.body}
               onChangeText={(text) => newEventState.updateValue(text, 'body')} />
           </View>
           <View style={styles.formField}>
             <Button title="Create"
               disabled={newEventState.disableCreate()}
               onPress={createEvent}/>
           </View>
       </ScrollView>
     );
   }
   
   const formatTime = (dateTime: Date): string => {
     return moment(dateTime).format('h:mm A');
   }
   
   const formatDate = (dateTime: Date): string => {
     return moment(dateTime).format('MMM D, YYYY');
   }
   
   // When first loading the form, set the start time
   // to the nearest hour or half-hour
   const getDefaultStart = (): Date => {
     const now = moment().startOf('minute');
     const offset = 30 - (now.minute() % 30);
   
     return now.add(offset, 'minutes').toDate();
   }
   
   // When first loading the form, set the end time
   // to start + 30 min
   const getDefaultEnd = (): Date => {
     return moment(getDefaultStart()).add(30, 'minutes').toDate();
   }
   
   export default class NewEventScreen extends React.Component {
     static contextType = UserContext;
   
     // Disable the create button if:
     // - App is waiting for the result of create request
     // - Subject is empty
     // - Start time is after end time
     disableCreate = () => {
       return this.state.isCreating ||
         this.state.subject.length <= 0 ||
         moment(this.state.startDate).isAfter(this.state.endDate);
     }
   
     onStateValueChange = (newValue: string | Date | boolean, fieldName: string) => {
       this.setState({ [fieldName]: newValue });
     }
   
     state: NewEventState = {
       isCreating: false,
       subject: '',
       attendees: '',
       body: '',
       timeZone: this.context.userTimeZone,
       startDate: getDefaultStart(),
       endDate: getDefaultEnd(),
       disableCreate: this.disableCreate,
       updateValue: this.onStateValueChange
     };
   
     render() {
       return (
         <NewEventState.Provider value={this.state}>
           <Stack.Navigator>
             <Stack.Screen name='NewEvent'
               component={ NewEventComponent }
               options={{
                 headerShown: false
               }} />
           </Stack.Navigator>
         </NewEventState.Provider>
       );
     }
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1
     },
     loading: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center'
     },
     formField: {
       paddingHorizontal: 10,
       paddingVertical: 5
     },
     fieldLabel: {
       fontWeight: '700',
       marginBottom: 10
     },
     textInput: {
       borderColor: 'gray',
       borderWidth: 1,
       height: 40,
       padding: 10
     },
     multiLineTextInput: {
       borderColor: 'gray',
       borderWidth: 1,
       height: 200,
       padding: 10
     },
     time: {
       padding: 10,
       backgroundColor: '#e6e6e6',
       color: '#147efb',
       marginRight: 10
     },
     date: {
       padding: 10,
       backgroundColor: '#e6e6e6',
       color: '#147efb'
     },
     dateTime: {
       flexDirection: 'row'
     }
   });
   

   Рассмотрим, что делает createEvent функция. Он создает объект с MicrosoftGraph.Event использованием значений из формы, а затем передает этот объект функции GraphManager.createEvent .

3. Откройте ./menus/DrawerMenu.tsx import и добавьте следующее утверждение в верхней части файла.

   import NewEventScreen from '../screens/NewEventScreen';
   

4. Добавьте следующий код внутри элемента <Drawer.Navigator> , прямо над строкой </Drawer.Navigator> .

   {userLoaded && (
     <Drawer.Screen
       name='NewEvent'
       component={NewEventScreen}
       options={{drawerLabel: 'New event'}}
     />
   )}
   

5. Сохраните изменения и перезапустите или обновите приложение. Выберите параметр New event в меню, чтобы добраться до новой формы события.

6. Заполните форму и выберите Create.

   

Поздравляем!

• 100% завершено

Вы завершили учебный React Native Microsoft Graph. Теперь, когда у вас есть рабочее приложение, которое вызывает Microsoft Graph, вы можете экспериментировать и добавлять новые функции. В обзоре microsoft Graph, чтобы увидеть все данные, к ним можно получить доступ с помощью microsoft Graph.

Отзывы

В репозитории GitHub.