microsoftgraph · muthurathinam · Jun 19, 2019 · May 7, 2019 · May 7, 2019 · May 8, 2019
@@ -20,8 +20,7 @@ src/**/*.d.ts
 
 samples/node/secrets.json
 samples/browser/src/secrets.js
-samples/browser/src/graph-js-sdk-core.js
-samples/browser/src/graph-js-sdk-web.js
+samples/browser/src/graph-js-sdk.js
 samples/browser/src/graph-es-sdk.js
 
 spec/**/*.js

@@ -1,5 +1,5 @@
 {
 	"hooks": {
-		"pre-commit": "lint-staged && npm run lint && npm run test"
+		"pre-commit": "npm run pre-build && git add src/Version.ts && lint-staged && npm run lint && npm run test"
 	}
 }
@@ -16,24 +16,32 @@ The Microsoft Graph JavaScript client library is a lightweight wrapper around th
 npm install @microsoft/microsoft-graph-client
 ```
 
-import `@microsoft/microsoft-graph-client` into your module.
+import `@microsoft/microsoft-graph-client` into your module and also you will need polyfills for fetch like [isomorphic-fetch](https://www.npmjs.com/package/isomorphic-fetch).
 
 ```typescript
+import "isomorphic-fetch";
 import { Client } from "@microsoft/microsoft-graph-client";
 ```
 
 ### Via Script Tag
 
-Include `lib/graph-js-sdk-web.js` in your page.
+Include [graph-js-sdk.js](https://cdn.jsdelivr.net/npm/@microsoft/microsoft-graph-client/lib/graph-js-sdk.js) in your HTML page.
 
 ```HTML
-<script type="text/javascript" src="graph-js-sdk-web.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@microsoft/microsoft-graph-client/lib/graph-js-sdk.js"></script>
 ```
 
-Incase if your application ships with [es6-promise](https://www.npmjs.com/package/es6-promise) and [isomorphic-fetch](https://www.npmjs.com/package/isomorphic-fetch) just use `lib/graph-js-sdk-core.js`
+In case your browser doesn't have support for [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) [[support](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Browser_compatibility)] or [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) [[support](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#Browser_compatibility)], you need to use polyfills like [github/fetch](https://github.com/github/fetch) for fetch and [es6-promise](https://github.com/stefanpenner/es6-promise) for promise.
 
 ```HTML
-<script type="text/javascript" src="graph-js-sdk-core.js"></script>
+<!-- polyfilling promise -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"></script>
+
+<!-- polyfilling fetch -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/whatwg-fetch/dist/fetch.umd.min.js"></script>
+
+<!-- depending on your browser you might wanna include babel polyfill -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.4.4/dist/polyfill.min.js"></script>
 ```
 
 ## Getting started
@@ -47,11 +55,11 @@ Register your application to use Microsoft Graph API using one of the following
 
 ### 2. Authenticate for the Microsoft Graph service
 
-The Microsoft Graph JavaScript Client Library has an adapter implementation ([MSALAuthenticationProvider](src/MSALAuthenticationProvider.ts)) for [MSAL](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-core) (Microsoft Authentication Library) which takes care of getting the `accessToken`. MSAL library does not ship with this library, user has to include it externally (For including MSAL, refer [this](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-core#installation)).
+The Microsoft Graph JavaScript Client Library has an adapter implementation ([ImplicitMSALAuthenticationProvider](src/ImplicitMSALAuthenticationProvider.ts)) for [MSAL](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-core) (Microsoft Authentication Library) which takes care of getting the `accessToken`. MSAL library does not ship with this library, user has to include it externally (For including MSAL, refer [this](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-core#installation)).
 
-> **Note:** MSAL is supported only for frontend applications, for server-side authentication you have to implement your own AuthenticationProvider. Refer implementing [Custom Authentication Provider](./docs/CustomAuthenticationProvider.md).
+> **Important Note:** MSAL is supported only for frontend applications, for server-side authentication you have to implement your own AuthenticationProvider. Learn how you can create a [Custom Authentication Provider](./docs/CustomAuthenticationProvider.md).
 
-#### Creating an instance of MSALAuthenticationProvider in browser environment
+#### Creating an instance of ImplicitMSALAuthenticationProvider in browser environment
 
 Refer devDependencies in [package.json](./package.json) for the compatible msal version and update that version in below.
 
@@ -60,20 +68,24 @@ Refer devDependencies in [package.json](./package.json) for the compatible msal
 ```
 
 ```typescript
-const clientId = "your_client_id"; // Client Id of the registered application
-const callback = (errorDesc, token, error, tokenType) => {};
-// An Optional options for initializing the MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/MSAL-basics#configuration-options
-const options = {
-	redirectUri: "Your redirect URI",
+
+// Configuration options for MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/MSAL.js-1.0.0-api-release#configuration-options
+const msalConfig = {
+	auth: {
+		clientId: "your_client_id"; // Client Id of the registered application
+		redirectUri: "your_redirect_uri",
+	},
 };
 const graphScopes = ["user.read", "mail.send"]; // An array of graph scopes
 
-// Initialize the MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/MSAL-basics#initialization-of-msal
-const userAgentApplication = new Msal.UserAgentApplication(clientId, undefined, callback, options);
-const authProvider = new MicrosoftGraph.MSALAuthenticationProvider(userAgentApplication, graphScopes);
+// Important Note: This library implements loginPopup and acquireTokenPopup flow, remember this while initializing the msal
+// Initialize the MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js#1-instantiate-the-useragentapplication
+const msalApplication = new Msal.UserAgentApplication(msalConfig);
+const options = new MicrosoftGraph.MSALAuthenticationProviderOptions(graphScopes);
+const authProvider = new MicrosoftGraph.ImplicitMSALAuthenticationProvider(msalApplication, options);
 ```
 
-#### Creating an instance of MSALAuthenticationProvider in node environment
+#### Creating an instance of ImplicitMSALAuthenticationProvider in node environment
 
 Refer devDependencies in [package.json](./package.json) for the compatible msal version and update that version in below.
 
@@ -84,19 +96,22 @@ npm install msal@<version>
 ```typescript
 import { UserAgentApplication } from "msal";
 
-import { MSALAuthenticationProvider } from "./node_modules/@microsoft/microsoft-graph-client/lib/src/MSALAuthenticationProvider";
+import { ImplicitMSALAuthenticationProvider } from "./node_modules/@microsoft/microsoft-graph-client/lib/src/ImplicitMSALAuthenticationProvider";
 
-const clientId = "your_client_id"; // Client Id of the registered application
-const callback = (errorDesc, token, error, tokenType) => {};
 // An Optional options for initializing the MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/MSAL-basics#configuration-options
-const options = {
-	redirectUri: "Your redirect URI",
+const msalConfig = {
+	auth: {
+		clientId: "your_client_id", // Client Id of the registered application
+		redirectUri: "your_redirect_uri",
+	},
 };
 const graphScopes = ["user.read", "mail.send"]; // An array of graph scopes
 
-// Initialize the MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/MSAL-basics#initialization-of-msal
-const userAgentApplication = new UserAgentApplication(clientId, undefined, callback, options);
-const authProvider = new MSALAuthenticationProvider(userAgentApplication, graphScopes);
+// Important Note: This library implements loginPopup and acquireTokenPopup flow, remember this while initializing the msal
+// Initialize the MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js#1-instantiate-the-useragentapplication
+const msalApplication = new UserAgentApplication(msalConfig);
+const options = new MicrosoftGraph.MSALAuthenticationProviderOptions(graphScopes);
+const authProvider = new ImplicitMSALAuthenticationProvider(msalApplication, options);
 ```
 
 User can integrate own preferred authentication library by implementing `IAuthenticationProvider` interface. Refer implementing [Custom Authentication Provider](./docs/CustomAuthenticationProvider.md).

@@ -0,0 +1,30 @@
+module.exports = function(api) {
+	api.cache(true);
+	const presets = [
+		[
+			"@babel/preset-env",
+			{
+				targets: {
+					ie: 11,
+				},
+			},
+		],
+	];
+
+	const plugins = [
+		[
+			"@babel/plugin-transform-runtime",
+			{
+				absoluteRuntime: false,
+				corejs: false,
+				helpers: true,
+				regenerator: true,
+				useESModules: false,
+			},
+		],
+	];
+	return {
+		presets,
+		plugins,
+	};
+};
@@ -4,46 +4,45 @@ All calls to Microsoft Graph are chained together starting with **.api()**, then
 
 ## Path supports the following formats
 
-* `me`
-* `/me`
-* `https://graph.microsoft.com/v1.0/me`
-* `https://graph.microsoft.com/beta/me`
-* `me/events?$filter=startswith(subject, "Adventure")`
+-   `me`
+-   `/me`
+-   `https://graph.microsoft.com/v1.0/me`
+-   `https://graph.microsoft.com/beta/me`
+-   `me/events?$filter=startswith(subject, "Adventure")`
 
 ## Promise based calling
 
 Getting user details with `async`/`await`,
 
 ```typescript
 try {
-    let res = await client.api("/me").get();
-    console.log(res);
+	let res = await client.api("/me").get();
+	console.log(res);
 } catch (error) {
-    throw error;
+	throw error;
 }
 ```
 
 Getting user details with `then`/`catch`,
 
 ```typescript
 client
-    .api('/me')
-    .get()
-    .then((res) => {
-        console.log(res);
-    }).catch((err) => {
-        console.log(err);
-    });
+	.api("/me")
+	.get()
+	.then((res) => {
+		console.log(res);
+	})
+	.catch((err) => {
+		console.log(err);
+	});
 ```
 
 ## Callback based calling
 
 Getting user details by passing `callback`,
 
 ```typescript
-client
-    .api('/me')
-    .get((err, res, rawResponse) => {
-        console.log(res);
-    });
+client.api("/me").get((err, res) => {
+	console.log(res);
+});
 ```
@@ -10,12 +10,24 @@ In order to instantiate a Client object, one has to pass in the `authProvider` o
 
 Pass an instance of a class which implements [AuthenticationProvider](../src/IAuthenticationProvider.ts) interface as `authProvider` in [ClientOptions](../src/IClientOptions.ts), which will instantiate the Client with default set of middleware chain.
 
-Library is shipped with one such authentication provider named [MSALAuthenticationProvider](../src/MSALAuthenticationProvider.ts). This MSALAuthenticationProvider depends on an authentication library [msal.js](https://github.com/AzureAD/microsoft-authentication-library-for-js) which is not shipped along with the library, one has to externally include msal.js to use MSALAuthenticationProvider.
+Library is shipped with one such authentication provider named [ImplicitMSALAuthenticationProvider](../src/ImplicitMSALAuthenticationProvider.ts). This ImplicitMSALAuthenticationProvider depends on an authentication library [msal.js](https://github.com/AzureAD/microsoft-authentication-library-for-js) which is not shipped along with the library, one has to externally include msal.js to use ImplicitMSALAuthenticationProvider.
 
 ```typescript
-// Instantiating Client with MSALAuthenticationProvider
+// Instantiating Client with ImplicitMSALAuthenticationProvider
+
+// An Optional options for initializing the MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/MSAL-basics#configuration-options
+const msalConfig = {
+	auth: {
+		clientId: <CLIENT_ID> // Client Id of the registered application
+	},
+};
+
+// Important Note: This library implements loginPopup and acquireTokenPopup flow, remember this while initializing the msal
+// Initialize the MSAL @see https://github.com/AzureAD/microsoft-authentication-library-for-js#1-instantiate-the-useragentapplication
+const msalApplication = new UserAgentApplication(msalConfig);
+const options = new MicrosoftGraph.MSALAuthenticationProviderOptions(<SCOPES>); // An array of graph scopes
 let clientOptions: ClientOptions = {
-    authProvider: new MSALAuthenticationProvider(<CLIENT_ID>, <SCOPES>, <OPTIONS>)
+    authProvider: new ImplicitMSALAuthenticationProvider(msalApplication, options)
 };
 const client = Client.initWithMiddleware(clientOptions);
 ```

@@ -68,14 +68,14 @@ Can use own middlewares and the ones shipped with the library [[Here](../src/mid
 
 Using AuthenticationHandler [one shipped with the library] and MyLoggingHandler, and MyHttpMessageHandler [custom ones] to create a middleware chain here.
 
-NOTE: Instead of MSALAuthenticationProvider, one can provide his own Authentication Handler. For more about using custom authentication provider, refer [here](./CustomAuthenticationProvider.md).
+NOTE: Instead of ImplicitMSALAuthenticationProvider, one can provide his own Authentication Handler. For more about using custom authentication provider, refer [here](./CustomAuthenticationProvider.md).
 
 ```typescript
-import { MSALAuthenticationProvider } from "@microsoft/microsoft-graph-client";
+import { ImplicitMSALAuthenticationProvider } from "@microsoft/microsoft-graph-client";
 import { MyLoggingHandler } from "./MyLoggingHandler";
 import { MyHttpMessageHandler } from "./MyHttpMessageHandler";
 
-let authProvider = new MSALAuthenticationProvider("<CLIENT_ID>", ["user.read"]);
+let authProvider = new ImplicitMSALAuthenticationProvider("<CLIENT_ID>", ["user.read"]);
 let authenticationHandler = new AuthenticationHandler(authProvider);
 let myLoggingHandler = new MyLoggingHandler();
 let myHttpMessageHandler = new MyHttpMessageHandler();

@@ -27,6 +27,6 @@ client
 	.select("displayName")
 	.responseType(ResponseType.RAW)
 	.get((error, rawResponse) => {
-		console.log(rawResponse)
+		console.log(rawResponse);
 	});
 ```
@@ -0,0 +1,31 @@
+const { series } = require("gulp");
+
+const licenseStr = `/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+`;
+
+const moduleHeader = `/**
+ * @module Version
+ */
+`;
+
+const versionFile = `${licenseStr}
+// THIS FILE IS AUTO GENERATED
+// ANY CHANGES WILL BE LOST DURING BUILD
+
+${moduleHeader}
+export const PACKAGE_VERSION = "[VERSION]";
+`;
+
+function setVersion(cb) {
+	var pkg = require("./package.json");
+	var fs = require("fs");
+	fs.writeFileSync("src/Version.ts", versionFile.replace("[VERSION]", pkg.version));
+	cb();
+}
+
+exports.setVersion = setVersion;