Création d’applications React Native avec Microsoft Graph

Ce didacticiel vous apprend à créer une application React Native qui utilise l’API Microsoft Graph pour récupérer les informations de calendrier d’un utilisateur.

Conditions préalables

Avant de commencer ce didacticiel, les instructions suivantes doivent être installées sur votre ordinateur de développement.

• Au moins l’une des suivantes :
  • Kit de développement Java Et Android Studio (requis pour exécuter l’exemple sur Android)
  • Xcode (requis pour exécuter l’exemple sur iOS)
• Node.js

Vous devez également avoir un compte Microsoft personnel avec une boîte aux lettres sur Outlook.com, ou un compte scolaire ou scolaire Microsoft. Si vous n’avez pas de compte Microsoft, deux options s’offrent à vous pour obtenir un compte gratuit :

• Vous pouvez vous inscrire à un nouveau compte Microsoft personnel.
• Vous pouvez vous inscrire au programme Microsoft 365 développeur pour obtenir un abonnement Microsoft 365 gratuit.

Commentaires

N’hésitez pas à nous faire part de vos commentaires sur ce didacticiel dans GitHub référentiel.

Créer une application React Native

• 35 minutes restantes

Commencez par créer un nouveau React Native projet.

1. Ouvrez votre interface de ligne de commande (CLI) dans un répertoire où vous souhaitez créer le projet. Exécutez la commande suivante pour exécuter l’outil react-native-cli et créer un React Native projet.

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

2. Facultatif : Vérifiez que votre environnement de développement est configuré correctement en exécutant le projet. Dans votre CLI, modifiez le répertoire en répertoire GraphTutorial que vous avez créé et exécutez l’une des commandes suivantes.

   • Pour iOS : npx react-native run-ios
   • Pour Android : lancer une instance de l’émulateur Android et exécuter npx react-native run-android

Installer les dépendances

Avant de passer à autre chose, installez des dépendances supplémentaires que vous utiliserez ultérieurement.

• react-navigation pour gérer la navigation entre les vues dans l’application.
• react-native-gesture-handler, react-native-safe-area-context, react-native-screens, react-native-reanimate et masked-view requis par react-navigation.
• react-native-elements and react-native-vector-icons to provide icons for the UI.
• react-native-app-auth pour gérer l’authentification et la gestion des jetons.
• stockage async pour fournir le stockage des jetons.
• datetimepicker pour ajouter des suceurs de date et d’heure à l’interface utilisateur.
• moment pour gérer l’utilisation et la comparaison des dates et heures.
• windows-iana pour la traduction Windows fuseaux horaires au format IANA.
• microsoft-graph-client pour effectuer des appels à l’Graph Microsoft.

1. Ouvrez votre CLI dans le répertoire racine de votre React Native projet.

2. Exécutez la commande suivante :

   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
   

Liaison et configuration des dépendances pour iOS

1. Ouvrez votre CLI dans le répertoire GraphTutorial/ios .

2. Exécutez la commande suivante :

   pod install
   

3. Ouvrez le fichier GraphTutorial/ios/GraphTutorial/Info.plist dans un éditeur de texte. Ajoutez ce qui suit juste avant la dernière </dict> ligne du fichier.

   <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. Ouvrez le fichier GraphTutorial/ios/GraphTutorial/AppDelegate.h dans un éditeur de texte. Remplacez son contenu par ce qui suit.

   #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
   

Configurer les dépendances pour Android

1. Ouvrez le fichier GraphTutorial/android/app/build.gradle dans un éditeur.

2. Recherchez l’entrée defaultConfig et ajoutez la propriété suivante à l’intérieur defaultConfig.

   manifestPlaceholders = [
       appAuthRedirectScheme: 'graph-tutorial'
   ]
   

   L’entrée defaultConfig doit ressembler à ce qui suit.

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

3. Ajoutez la ligne suivante à la fin du fichier.

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

4. Enregistrez le fichier.

Concevoir l’application

L’application utilise un bac de navigation pour naviguer entre les différents affichages. Dans cette étape, vous allez créer les vues de base utilisées par l’application et implémenter le bac de navigation.

Créer des affichages

Dans cette section, vous allez créer les vues de l’application pour prendre en charge un flux d’authentification.

1. Ouvrez GraphTutorial/index.js ajoutez ce qui suit en haut du fichier, avant toute autre import instruction.

   import 'react-native-gesture-handler';
   

2. Créez un fichier dans le répertoire GraphTutorial nommé AuthContext.tsx et ajoutez le code suivant.

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

3. Créez un fichier dans le répertoire GraphTutorial nommé UserContext.tsx et ajoutez le code suivant.

   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. Créez un répertoire dans le répertoire GraphTutorial nommé écrans.

5. Créez un fichier dans le répertoire GraphTutorial/screens nommé HomeScreen.tsx. Ajoutez le code suivant au fichier.

   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. Créez un fichier dans le répertoire GraphTutorial/screens nommé CalendarScreen.tsx. Ajoutez le code suivant au fichier.

   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. Créez un fichier dans le répertoire GraphTutorial/screens nommé SignInScreen.tsx. Ajoutez le code suivant au fichier.

   // 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. Créez un fichier dans le répertoire GraphTutorial/screens nommé AuthLoadingScreen.tsx. Ajoutez le code suivant au fichier.

   // 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
     }
   });
   

Créer un caisse de navigation

Dans cette section, vous allez créer un menu pour l’application et mettre à jour l’application afin d’utiliser la navigation par réaction pour naviguer entre les écrans.

1. Créez un répertoire dans les menus nommés du répertoire GraphTutorial.

2. Créez un fichier dans le répertoire GraphTutorial/menus nommé DrawerMenu.tsx. Ajoutez le code suivant au fichier.

   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. Créez un répertoire dans le répertoire GraphTutorial nommé images.

4. Ajoutez une image de profil par défautno-profile-pic.png dans ce répertoire. Vous pouvez utiliser n’importe quelle image de votre genre ou celle de cet exemple.

5. Ouvrez le fichier GraphTutorial/App.tsx et remplacez tout le contenu par ce qui suit.

   // 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. Enregistrez toutes vos modifications.

7. Rechargez l’application dans votre émulateur.

Le menu de l’application doit fonctionner pour naviguer entre les deux fragments et changer lorsque vous appuyez sur les boutons Se connectez ou se connectez.

Inscrire l’application sur le portail

• 28 minutes restantes

Dans cet exercice, vous allez créer une application native Azure AD à l’aide Azure Active Directory centre d’administration.

1. Ouvrez un navigateur, accédez au Centre d’administration Azure Active Directory et connectez-vous à l’aide d’un compte personnel (ou compte Microsoft) ou d’un compte professionnel ou scolaire.

2. Sélectionnez Azure Active Directory dans le volet de navigation gauche, puis sélectionnez Inscriptions d’applications sous Gérer.

   

3. Sélectionnez Nouvelle inscription. Sur la page Inscrire une application, définissez les valeurs comme suit.

   • Définissez le Nom sur React Native Graph Tutorial.
   • Définissez les Types de comptes pris en charge sur Comptes dans un annuaire organisationnel et comptes personnels Microsoft.
   • Sous URI de redirection, modifiez la liste de listes en client public (mobile & bureau) et définissez la valeur sur graph-tutorial://react-native-auth/ .

   

4. Sélectionner Inscription. Dans la page React Native Graph didacticiel, copiez la valeur de l’ID de l’application (client) et enregistrez-la. Vous en aurez besoin à l’étape suivante.

   

Ajouter une authentification Azure AD

• 25 minutes restantes

Dans cet exercice, vous allez étendre l’application de l’exercice précédent pour prendre en charge l’authentification avec Azure AD. Cette étape est nécessaire pour obtenir le jeton d’accès OAuth nécessaire pour appeler l’Graph Microsoft. Pour ce faire, vous allez intégrer la bibliothèque react-native-app-auth dans l’application.

1. Créez un répertoire dans le répertoire GraphTutorial nommé th.

2. Créez un fichier dans le répertoire GraphTutorial/auth nommé AuthConfig.ts. Ajoutez le code suivant au fichier.

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

   Remplacez YOUR_APP_ID_HERE par l’ID d’application de l’inscription de votre application.

Implémentation de la connexion

Dans cette section, vous allez créer une classe d’aide à l’authentification et mettre à jour l’application pour se connecter et vous en sortir.

1. Créez un fichier dans le répertoire GraphTutorial/auth nommé AuthManager.ts. Ajoutez le code suivant au fichier.

   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. Ouvrez le fichier GraphTutorial/App.tsx import et ajoutez l’instruction suivante en haut du fichier.

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

3. Remplacez la déclaration authContext existante par ce qui suit.

   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. Ouvrez le fichier GraphTutorial/menus/DrawerMenu.tsx import et ajoutez l’instruction suivante en haut du fichier.

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

5. Ajoutez le code suivant à la componentDidMount fonction.

   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. Enregistrez vos modifications et rechargez l’application dans votre émulateur.

Si vous vous connectez à l’application, un jeton d’accès doit s’afficher sur l’écran d’accueil .

Obtenir les détails de l’utilisateur

Dans cette section, vous allez créer un fournisseur d’authentification personnalisé pour la bibliothèque cliente Graph, créer une classe d’aide pour contenir tous les appels à Microsoft Graph DrawerMenuContent et mettre à jour la classe pour utiliser cette nouvelle classe afin d’obtenir l’utilisateur connecté.

1. Créez un répertoire dans le répertoire GraphTutorial nommé graph.

2. Créez un fichier dans le répertoire GraphTutorial/graph nommé GraphAuthProvider.ts. Ajoutez le code suivant au fichier.

   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. Créez un fichier dans le répertoire GraphTutorial/graph nommé GraphManager.ts. Ajoutez le code suivant au fichier.

   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. Ouvrez le fichier GraphTutorial/views/DrawerMenu.tsx import et ajoutez les instructions suivantes en haut du fichier.

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

5. Remplacez la componentDidMount méthode par ce qui suit.

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

Si vous enregistrez vos modifications et rechargez l’application maintenant, une fois la connectez-vous à l’interface utilisateur mise à jour avec le nom d’affichage et l’adresse e-mail de l’utilisateur.

Obtenir un affichage Calendrier

• 10 minutes restantes

Dans cet exercice, vous allez incorporer le Graph Microsoft dans l’application. Pour cette application, vous allez utiliser la bibliothèque cliente Microsoft Graph JavaScript pour appeler Microsoft Graph.

Récupérer les événements de calendrier à partir d’Outlook

Dans cette section, vous GraphManager allez étendre la classe pour ajouter une fonction afin d’obtenir les événements de l’utilisateur CalendarScreen pour la semaine en cours et mettre à jour pour utiliser ces nouvelles fonctions.

1. Ouvrez le fichier GraphTutorial/graph/GraphManager.tsx et ajoutez la méthode suivante à la GraphManager classe.

   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();
   }
   

   Notes

   Réfléchissez à ce que fait le getCalendarView code.

   • L’URL qui sera appelée est /v1.0/me/calendarView.
   • La header fonction ajoute l’en-tête Prefer: outlook.timezone à la demande, ce qui entraîne la place des heures dans la réponse dans le fuseau horaire préféré de l’utilisateur.
   • La query fonction ajoute les paramètres startDateTime endDateTime et définit la fenêtre de temps pour l’affichage Calendrier.
   • La select fonction limite les champs renvoyés pour chaque événement à ceux que l’application utilisera réellement.
   • La orderby fonction trie les résultats par heure de début.
   • La top fonction limite les résultats aux 50 premiers événements.

2. Ouvrez GraphTutorial/views/CalendarScreen.tsx et remplacez tout son contenu par le code suivant.

   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',
     },
   });
   

Vous pouvez maintenant exécuter l’application, vous connectez et appuyez sur l’élément de navigation Calendrier dans le menu. Vous devriez voir un vidage JSON des événements dans l’application.

Afficher les résultats

Vous pouvez désormais remplacer le vidage JSON par un autre qui permet d’afficher les résultats de manière conviviale. Dans cette section, vous allez ajouter un a à l’écran FlatList du calendrier pour restituer les événements.

1. Ajoutez la méthode suivante au-dessus de la déclaration CalendarScreen de classe.

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

2. Remplacez la ScrollView méthode par CalendarComponent ce qui suit.

   <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. Exécutez l’application, connectez-vous et appuyez sur l’élément de navigation Calendrier. Vous devriez voir la liste des événements.

   

Créer un événement

• 5 minutes restantes

Dans cette section, vous allez ajouter la possibilité de créer des événements sur le calendrier de l’utilisateur.

Créer l’écran d’événement

1. Ouvrez ./graph/GraphManager.ts et ajoutez la fonction suivante à la GraphManager classe.

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

   Cette fonction utilise le SDK Graph pour créer un événement.

2. Créez un fichier dans ./screens nommé NewEventScreen.tsx et ajoutez le code suivant.

   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'
     }
   });
   

   Considérez ce que fait createEvent la fonction. Il crée un objet MicrosoftGraph.Event à l’aide des valeurs du formulaire, puis transmet cet objet à la GraphManager.createEvent fonction.

3. Ouvrez ./menus/DrawerMenu.tsx et ajoutez l’instruction import suivante en haut du fichier.

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

4. Ajoutez le code suivant à l’intérieur de l’élément <Drawer.Navigator> , juste au-dessus de la </Drawer.Navigator> ligne.

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

5. Enregistrez vos modifications et redémarrez ou actualisez l’application. Sélectionnez l’option Nouvel événement dans le menu pour obtenir le nouveau formulaire d’événement.

6. Remplissez le formulaire, puis sélectionnez Créer.

   

Félicitations !

• Tout est terminé !

Vous avez terminé le didacticiel React Native de Graph Microsoft. Maintenant que vous disposez d’une application de travail qui appelle Microsoft Graph, vous pouvez expérimenter et ajouter de nouvelles fonctionnalités. Consultez la vue d’ensemble de Microsoft Graph pour voir toutes les données accessibles avec Microsoft Graph.

Commentaires

N’hésitez pas à nous faire part de vos commentaires sur ce didacticiel dans GitHub référentiel.