Giter Club home page Giter Club logo

msgraph-training-react-native's Introduction

page_type description products languages
sample
This sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from React Native apps.
ms-graph
office-exchange-online
typescript

Microsoft Graph sample React Native app

React Native CI License.

This sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from React Native mobile apps.

NOTE: This sample was originally built from a tutorial published on the Microsoft Graph tutorials page. That tutorial has been removed.

Prerequisites

To run the completed project in this folder, you need the following:

  • A configured development environment for React Native using the React Native CLI. For instructions on configuring your environment, see Setting up the development environment.
  • Either a personal Microsoft account with a mailbox on Outlook.com, or a Microsoft work or school account.

If you don't have a Microsoft account, there are a couple of options to get a free account:

Register an application with the Azure Active Directory admin center

  1. Open a browser and navigate to the Azure Active Directory admin center and login using a personal account (aka: Microsoft Account) or Work or School Account.

  2. Select Azure Active Directory in the left-hand navigation, then select App registrations under Manage.

  3. Select New registration. On the Register an application page, set the values as follows.

    • Set Name to React Native Graph Sample.
    • Set Supported account types to Accounts in any organizational directory and personal Microsoft accounts.
    • Under Redirect URI, change the dropdown to Public client (mobile & desktop), and set the value to graph-sample://react-native-auth/.
  4. Select Register. On the React Native Graph Tutorial page, copy the value of the Application (client) ID and save it, you will need it in the next step.

Configure the sample

  1. Rename the GraphRNSample/auth/AuthConfig.example.ts file to AuthConfig.ts.

  2. Edit the AuthConfig.ts file and make the following changes.

    1. Replace YOUR_APP_ID_HERE with the Application (client) ID you got from the App Registration Portal.
  3. In your command-line interface (CLI), navigate to the GraphRNSample directory and run the following commands to install requirements.

    npm install
    npx pod-install ios

Run the sample

  1. Run the following command to start the sample.
npm start
  1. In another instance of your CLI also in the GraphRNSample directory, run one of the following commands:

    • To run on an iOS Simulator: npm run ios
    • To run on an Android virtual device: npm run android (start an Android virtual device from Android Studio first)

Code of conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

msgraph-training-react-native's People

Contributors

augaldecr avatar dependabot[bot] avatar github-actions[bot] avatar jasonjoh avatar microsoft-github-policy-service[bot] avatar msftbot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

msgraph-training-react-native's Issues

Links are blocked

I am getting "graph-tutorial" links are blocked message when the sign-in button is clicked and tries to redirect. Can you please help me with why I am getting this error and how to resolve this?

Upload new tutorial

Could you upload new tutorial about 'POST' like saving contact via msgraph.
I requested to add permission but it's not verifying for 2 ~ 3 months

Calendar tab throwing "Error getting events {}"

Running the app to see the JSON dump of the calendar events and getting "Error getting events {}"
Screenshot 2021-04-07 at 6 40 33 AM and on clicking "OK" it keeps on throwing the loading screen.

Screen.Recording.2021-04-07.at.6.37.17.AM.mov

[LOC] "```JSX" code block is not ended properly

"```JSX" code block is not ended properly in an article causing MT engine not to translate text under it properly.
Repro steps:

  1. Go to https://github.com/microsoftgraph/msgraph-training-react-native/blob/live/tutorial/02-create-app.md and view the file in the "raw" mode
  2. Search for "file and replace the entire contents with the following."
  3. See the "```JSX" code block which is not properly ended

Actual results:
Code block is not ended properly
Expected results:
Code block should be ended properly

GH article:
https://github.com/microsoftgraph/msgraph-training-react-native/blob/live/tutorial/02-create-app.md
image

There is a typo mistake in (Configure dependencies for Android) section

Hello,
I found there is a typo mistake in (Configure dependencies for Android) section, while i going through the tutorial i found this problem.

https://docs.microsoft.com/en-us/graph/tutorials/react-native?tutorial-step=1

MIstake
defaultConfig { manifestPlaceholders = [ appAuthRedirectScheme: 'graphtutorial' ] }

Correction
defaultConfig { manifestPlaceholders = [ appAuthRedirectScheme: 'graph-tutorial' ] }

Please make the correction as soon as possible.

Thanks

is it supported for Expo?

does this sample project applicable on expo?
or i should eject my project to be able to use the dependencies?

SignOut is not revoking the tokens and the same logged in user displays forever

Where did you get the code?

Describe the bug

We are diligently following this tutorial to accomplish React Native AD Authentication. However, while using this file we were unable to sign out the user from signOutAsync method. While searching online I tried this as shown below but I am getting the following error: [SyntaxError: JSON Parse error: Unexpected identifier "Invariant"]

Can someone kindly help?

import AsyncStorage from '@react-native-community/async-storage';
import { authorize, refresh, AuthConfiguration, revoke } from 'react-native-app-auth';
import { Platform } from 'react-native';
import { AuthConfig } from './AuthConfig';

export class AuthManager {

//Sign out/revoke configuration
const signoutConfig = {
 issuer: 'https://login.microsoftonline.com/'+AuthConfig.tenantId+'/oauth2/v2.0/authorize',
 clientId: AuthConfig.appId,
 redirectUrl: Platform.OS === 'ios' ? 'urn:ietf:wg:oauth:2.0:oob' : 'ourproject://react-native-auth',
 scopes: AuthConfig.appScopes
};

 static signOutAsync = async () => {
   const userToken = await AsyncStorage.getItem('userToken');
   console.log("*****accessToken**** token is",userToken)
   try {      
     const result = await revoke(signoutConfig, {
       tokenToRevoke: userToken,
       includeBasicAuth: true,
       sendClientId: true,
     });
     console.log("result for signout is",result)

   } catch (error) {
     console.log('signout error: ', JSON.parse(error));
   }

   // Clear storage
   await AsyncStorage.removeItem('userToken');
   await AsyncStorage.removeItem('refreshToken');
   await AsyncStorage.removeItem('expireTime');
   await AsyncStorage.removeItem('userEmail');
 }
}

Authenticate API

Is it possible to use this repo to test API authentication by impersonating Server AD App through Client AD App?

Unable to use this React Native library for accessing Azure AD API's

We have an API App Service in Azure and we created two AD Apps one is for the server-side (API) and another is for the client (Mobile App) side. Also, impersonated the API AD App into the Mobile App.

We were unable to implement React Native AD Authentication using the Client App ID and TENANT ID from this link https://docs.microsoft.com/en-us/graph/tutorials/react-native

Which library should we utilize to accomplish React Native AD Auth users to log in only within our organization using our Tenant ID and access the API Content?

I already tried Azure AD Library AzureAD/microsoft-authentication-library-for-js#2367

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.