Removed Teams dependency and simplified Teams sample (#90)

nmetulev · web-flow · commit a2a07fc9ac67 · 2019-05-23T12:18:19.000-07:00
* published 0.1.0

* removed teams dependency and simplified teams sample
diff --git a/docs/providers/Teams.md b/docs/providers/Teams.md
@@ -7,21 +7,58 @@ author: nmetulev
 
 # Microsoft Teams provider
 
-Use the Teams provider inside your Microsoft Teams App, inside a Tab, to power it with Microsoft Graph access.
+Use the Teams provider inside your Microsoft Teams Tab to facilitate authentication and Microsoft Graph access to all components.
 
-Visit [the authentication docs](../providers.md) to learn more about the role of providers in the Microsoft Graph Toolkit
+Visit [the authentication docs](../providers.md) to learn more about the role of providers in the Microsoft Graph Toolkit.
 
 ## Getting started
 
-Initialize the provider inside your html using the `mgt-teams-provider` component.
+Before using the Teams provider, you will need to make sure you have referenced the [Microsoft Teams SDK](https://docs.microsoft.com/en-us/javascript/api/overview/msteams-client?view=msteams-client-js-latest#using-the-sdk) in your page.
+
+Here is an example using the provider in HTML (via CDN):
 
 ```html
-<mgt-teams-provider
-  client-id="<YOUR_CLIENT_ID>"
-  auth-popup-url="https://<YOUR-DOMAIN>.com/AUTH-PATH"
-></mgt-teams-provider>
+  <!-- Microsoft Teams sdk must be referenced before the toolkit -->
+  <script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
+
+  <mgt-teams-provider
+    client-id="<YOUR_CLIENT_ID>"
+    auth-popup-url="https://<YOUR-DOMAIN>.com/AUTH-PATH"
+  ></mgt-teams-provider>
+
+```
+
+Here is an example using the provider in JS modules (via NPM):
+
+Make sure to install both the toolkit and the Microsoft Teams sdk
+
+```bash
+npm install @microsoft/mgt @microsoft/teams-js
+```
+
+Then import and use the provider
+
+```ts
+import '@microsoft/teams-js';
+import {Providers, TeamsProvider} from '@microsoft/mgt'; 
+
+Providers.globalProvider = new TeamsProvider(config);
+```
+
+where `config` is
+
+```ts
+export interface TeamsConfig {
+  clientId: string;
+  authPopupUrl: string;
+  scopes?: string[];
+  msalOptions?: Configuration;
+}
 ```
 
+See [sample](https://github.com/microsoftgraph/microsoft-graph-toolkit/tree/master/samples/teams-tab) for full example
+
 ## Configuring your Teams App
 
 If you are just getting started with Teams Apps, you can follow the getting started guide [here](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/tabs/tabs-overview). You could also use the [App Studio](https://docs.microsoft.com/en-us/microsoftteams/platform/get-started/get-started-app-studio) to quickly develop your app manifest for Microsoft Teams.
@@ -42,20 +79,14 @@ Make sure to enable Implicit Grant Flow as this is a requirement for web apps re
 
 ### Create the popup page
 
-In order to login with your Teams credentials, you need to provide a URL that the Teams App with open in a popup, which will follow the authentication flow. This URL needs to be in your domain, and it needs to call the `TeamsProvider.handleAuth();` method. That's the only thing that this page needs to do. For example (if you are using parcel to bundle your app) - `auth.html`:
+In order to login with your Teams credentials, you need to provide a URL that the Teams App with open in a popup, which will follow the authentication flow. This URL needs to be in your domain, and it needs to call the `TeamsProvider.handleAuth();` method. That's the only thing that this page needs to do. For example:
 
 ```html
-<html>
-  <head>
-    <script src="./node_modules/@microsoft/mgt/dist/es6/index.js"></script>
-    <script>
-      var teamsProvider = parcelRequire('node_modules/@microsoft/mgt/dist/es6/index.js');
-      teamsProvider.TeamsProvider.handleAuth();
-    </script>
-  </head>
-</html>
+<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js">
+</script>
+    mgt.TeamsProvider.handleAuth();
+</script>
 ```
 
-### Configure Redirect URIs
-
-After you publish this page in your website, you need to get it's URL and use it in the `auth-popup-url` property. This URL also needs to be configured as a valid redirect URI at your app configuration, at the AAD portal.
+After you publish this page in your website, you need to get it's URL and use it in the `auth-popup-url/authPopupUrl` property. This URL also needs to be configured as a valid redirect URI at your app configuration, at the AAD portal.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/mgt",
-  "version": "0.1.0-preview.8",
+  "version": "0.1.0",
   "description": "The Microsoft Graph Toolkit",
   "keywords": [
     "microsoft graph",
@@ -49,7 +49,6 @@
     "@microsoft/microsoft-graph-client": "^1.7.0-Preview.1",
     "@microsoft/microsoft-graph-types": "^1.8.0",
     "@microsoft/microsoft-graph-types-beta": "microsoftgraph/msgraph-typescript-typings#beta",
-    "@microsoft/teams-js": "^1.4.1",
     "lit-element": "^2.1.0",
     "msal": "^1.0.0",
     "office-ui-fabric-core": "10.0.0"
diff --git a/samples/teams-tab/MySampleApp.zip b/samples/teams-tab/MySampleApp.zip
diff --git a/samples/teams-tab/auth.html b/samples/teams-tab/auth.html
@@ -1,9 +1,10 @@
 <html>
   <head>
-    <script src="./node_modules/@microsoft/mgt/dist/es6/index.js"></script>
+    <script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
+    <script src="./bundle/mgt-loader.js"></script>
     <script>
-      var mgt = parcelRequire('node_modules/@microsoft/mgt/dist/es6/index.js');
-      mgt.TeamsProvider.auth();
+      mgt.TeamsProvider.handleAuth();
     </script>
   </head>
+  <body></body>
 </html>
diff --git a/samples/teams-tab/index.html b/samples/teams-tab/index.html
@@ -1,14 +1,11 @@
 <html>
+  <head>
+    <script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
+  </head>
   <body>
-    <head>
-      <script src="./node_modules/@microsoft/mgt/dist/es6/index.js"></script>
-    </head>
-    <mgt-teams-provider
-      client-id="ded74c58-5126-42b0-be48-c3971d8c8e98"
-      login-popup-url="https://mgtsampleapps.z5.web.core.windows.net/auth.html"
-    ></mgt-teams-provider>
-    <mgt-login style="float: right;"></mgt-login>
-    <mgt-person person-id="alex"></mgt-person>
-    <mgt-agenda id="myDay"></mgt-agenda>
+    <mgt-teams-provider client-id="<CLIENT-ID>" auth-popup-url="auth.html"></mgt-teams-provider>
+    <mgt-login></mgt-login>
+    <mgt-agenda group-by-day></mgt-agenda>
   </body>
 </html>
diff --git a/samples/teams-tab/package.json b/samples/teams-tab/package.json
diff --git a/samples/teams-tab/readme.md b/samples/teams-tab/readme.md
@@ -0,0 +1,25 @@
+# Microsoft Teams Tab sample
+
+For the quickest way to run this sample, you will need:
+
+* Visual Studio Code
+* [Live Server extension in Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
+* [ngrok](https://ngrok.com/)
+
+1. Visit the [Microsoft identity platform documentation](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app) to learn more about creating a new application and retrieving a clientId. Add the client id in `index.html`
+
+    > Note: Msal only supports the Implicit Flow for OAuth. Make sure to enable Implicit Flow in your application in the Azure Portal (it is not enabled by default). Under `Authentication`, find the `Implicit grant` section and check both checkboxes for `Access tokens` and `ID tokens`
+
+2. Open `index.html` with Live Server and start `ngrok` in terminal/cmd 
+
+    ```bash
+    ngrok http [port]
+    ```
+
+    Live Server default port is `8080`
+
+4. Go back to the application registration in the Azure portal and add the redirect url. The redirect url is your ngrok url with the auth page appended.
+
+    Ex: `https://b5d9404b.ngrok.io/auth.html`
+
+5. Now you can use [App Studio](https://docs.microsoft.com/en-us/microsoftteams/platform/get-started/get-started-app-studio) to quickly develop your app manifest for Microsoft Teams and test the app. Use the ngrok url for the tab url.
diff --git a/src/providers/MsalProvider.ts b/src/providers/MsalProvider.ts
@@ -77,7 +77,7 @@ export class MsalProvider extends IProvider {
     if (this._userAgentApplication.isCallback(window.location.hash)) {
       return;
     }
-    if (this._userAgentApplication.getAccount()) {
+    if (this._userAgentApplication.getAccount() && (await this.getAccessToken(null))) {
       this.setState(ProviderState.SignedIn);
     } else {
       this.setState(ProviderState.SignedOut);
diff --git a/src/providers/TeamsProvider.ts b/src/providers/TeamsProvider.ts
@@ -7,10 +7,11 @@
 
 import { AuthenticationProviderOptions } from '@microsoft/microsoft-graph-client/lib/es/IAuthenticationProviderOptions';
 import { MsalProvider } from './MsalProvider';
-import * as microsoftTeams from '@microsoft/teams-js';
 import { LoginType, ProviderState } from './IProvider';
 import { Configuration, UserAgentApplication } from 'msal';
 
+declare var microsoftTeams: any;
+
 export interface TeamsConfig {
   clientId: string;
   authPopupUrl: string;
@@ -36,29 +37,16 @@ export class TeamsProvider extends MsalProvider {
     return this._accessToken;
   }
 
-  static async isAvailable(): Promise<boolean> {
-    const ms = 1000;
-    return Promise.race([
-      new Promise<boolean>((resolve, reject) => {
-        microsoftTeams.initialize();
-        microsoftTeams.getContext(function(context) {
-          if (context) {
-            resolve(true);
-          } else {
-            resolve(false);
-          }
-        });
-      }),
-      new Promise<boolean>((resolve, reject) => {
-        let id = setTimeout(() => {
-          clearTimeout(id);
-          resolve(false);
-        }, ms);
-      })
-    ]);
+  static async isAvailable() {
+    return !!microsoftTeams;
   }
 
   static handleAuth() {
+    if (!this.isAvailable) {
+      console.error('Make sure you have referenced the Microsoft Teams sdk before using the TeamsProvider');
+      return;
+    }
+
     // we are in popup world now - authenticate and handle it
 
     var url = new URL(window.location.href);
@@ -117,6 +105,11 @@ export class TeamsProvider extends MsalProvider {
       options: config.msalOptions
     });
 
+    if (!TeamsProvider.isAvailable) {
+      console.error('Make sure you have referenced the Microsoft Teams sdk before using the TeamsProvider');
+      return;
+    }
+
     this._authPopupUrl = config.authPopupUrl;
     microsoftTeams.initialize();
     this.accessToken = sessionStorage.getItem(this._sessionStorageTokenKey);
diff --git a/src/utils/version.ts b/src/utils/version.ts
@@ -8,4 +8,4 @@
 // THIS FILE IS AUTO GENERATED
 // ANY CHANGES WILL BE LOST DURING BUILD
 
-export const PACKAGE_VERSION = '0.1.0-preview.8';
+export const PACKAGE_VERSION = '0.1.0';

Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@ export class MsalProvider extends IProvider {`
`77`	`77`	`if (this._userAgentApplication.isCallback(window.location.hash)) {`
`78`	`78`	`return;`
`79`	`79`	`}`
`80`		`- if (this._userAgentApplication.getAccount()) {`
	`80`	`+ if (this._userAgentApplication.getAccount() && (await this.getAccessToken(null))) {`
`81`	`81`	`this.setState(ProviderState.SignedIn);`
`82`	`82`	`} else {`
`83`	`83`	`this.setState(ProviderState.SignedOut);`