Skip to content

Commit 6b153d3

Browse files
amrutha95Amrutha Srinivasannmetulevshweaver-MSFT
authored
ElectronProvider using MSAL and sample (#868)
* Added electron app * delete * Added electron sample folder * Added electron sample folder * Added electron sample folder * added electron provider * Electron provider * Electron provider * Electron provider * Electron provider * Electron provider * Electron provider * Update README.md * Added license * Cleaned up license * Update packages/providers/mgt-electron-provider/README.md Co-authored-by: Nikola Metulev <[email protected]> * Update packages/providers/mgt-electron-provider/README.md Co-authored-by: Nikola Metulev <[email protected]> * Update samples/electron-app/package.json Co-authored-by: Nikola Metulev <[email protected]> * Update packages/providers/mgt-electron-provider/README.md Co-authored-by: Nikola Metulev <[email protected]> * Review comments & removed cache plugin * Update packages/providers/mgt-electron-provider/src/Authenticator/CustomFileProtocol.ts Co-authored-by: Nikola Metulev <[email protected]> * Changed initialization of ElectronAuthenticator * updated sample readme * Update README.md * Removed all evidence of incremental consent support :P * Warning * minor readme formatting * PR review comments * Comment formatting and bugfix * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md Co-authored-by: Amrutha Srinivasan <[email protected]> Co-authored-by: Nikola Metulev <[email protected]> Co-authored-by: Shane Weaver <[email protected]> Co-authored-by: Nikola Metulev <[email protected]>
1 parent f9dfd40 commit 6b153d3

File tree

23 files changed

+1142
-2
lines changed

23 files changed

+1142
-2
lines changed

‎lerna.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
{
2-
"packages": ["packages/*", "packages/providers/*", "samples/react-app", "samples/angular-app", "samples/vue-app"],
2+
"packages": [
3+
"packages/*",
4+
"packages/providers/*",
5+
"samples/react-app",
6+
"samples/angular-app",
7+
"samples/vue-app",
8+
"samples/electron-app"
9+
],
310
"npmClient": "yarn",
411
"useWorkspaces": true,
512
"version": "independent"

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"packages/providers/*",
88
"samples/react-app",
99
"samples/angular-app",
10-
"samples/vue-app"
10+
"samples/vue-app",
11+
"samples/electron-app"
1112
],
1213
"scripts": {
1314
"build": "npm run prettier:check && npm run clean && lerna run build --scope @microsoft/*",

‎packages/providers/mgt-electron-provider/README.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Microsoft Graph Toolkit Electron Provider
2+
The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph.
3+
4+
The `@microsoft/mgt-electron-provider` package exposes the `ElectronAuthenticator` and `ElectronProvider` classes which use [MSAL node](https://www.npmjs.com/package/@azure/msal-node) to sign in users and acquire tokens to use with Microsoft Graph.
5+
6+
7+
## Usage
8+
9+
1. Install the packages
10+
11+
```bash
12+
npm install @microsoft/mgt-element @microsoft/mgt-electron-provider
13+
```
14+
15+
2. Initialize the provider in your renderer process (Front end, eg. renderer.ts)
16+
17+
```ts
18+
import {Providers} from '@microsoft/mgt-element';
19+
import {ElectronProvider} from '@microsoft/mgt-electron-provider/dist/Provider';
20+
21+
// initialize the auth provider globally
22+
Providers.globalProvider = new ElectronProvider();
23+
```
24+
25+
3. Initialize ElectronAuthenticator in Main.ts (Back end)
26+
27+
```ts
28+
import { ElectronAuthenticator, MsalElectronConfig } from '@microsoft/mgt-electron-provider/dist/Authenticator';
29+
...
30+
let mainWindow = new BrowserWindow({
31+
width: 800,
32+
height: 800,
33+
webPreferences: {
34+
nodeIntegration: true
35+
}
36+
});
37+
let config: MsalElectronConfig = {
38+
clientId: '<your_client_id>',
39+
authority: '<your_authority_url>', //optional, uses common authority by default
40+
mainWindow: mainWindow, //This is the BrowserWindow instance that requires authentication
41+
scopes: [
42+
'user.read',
43+
],
44+
};
45+
ElectronAuthenticator.initialize(config);
46+
```
47+
48+
See [provider usage documentation](https://docs.microsoft.com/graph/toolkit/providers) to learn about how to use the providers with the mgt components, to sign in/sign out, get access tokens, call Microsoft Graph, and more. See [Electron provider documentation](https://docs.microsoft.com/graph/toolkit/providers/electron).
49+
50+
### Cache Plugin
51+
52+
[MSAL Node](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-node) supports an in-memory cache by default and provides the ICachePlugin interface to perform cache serialization, but does not provide a default way of storing the token cache to disk. If you need persistent cache storage to enable silent log-ins or cross-platform caching, we recommend using the default implementation provided by MSAL Node [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/extensions/msal-node-extensions). You can import this plugin, and pass the instance of the cache plugin while initializing ElectronAuthenticator.
53+
54+
```ts
55+
let config: MsalElectronConfig = {
56+
...
57+
cachePlugin: new PersistenceCachePlugin(filePersistence)
58+
};
59+
```
60+
61+
For more details on how to implement this, refer to the sample for this extension [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/extensions/samples/msal-node-extensions).
62+
63+
64+
65+
## See also
66+
* [Build an electron app and integrate Microsoft Graph Toolkit](https://docs.microsoft.com/graph/toolkit/get-started/build-an-electron-app)
67+
* [Microsoft Graph Toolkit docs](https://aka.ms/mgt-docs)
68+
* [Microsoft Graph Toolkit repository](https://aka.ms/mgt)
69+
* [Microsoft Graph Toolkit playground](https://mgt.dev)
70+

‎packages/providers/mgt-electron-provider/package.json‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "@microsoft/mgt-electron-provider",
3+
"version": "2.0.0",
4+
"description": "The Microsoft Graph Toolkit Electron Provider",
5+
"keywords": [
6+
"microsoft graph",
7+
"microsoft graph toolkit",
8+
"mgt",
9+
"msal",
10+
"electron",
11+
"auth",
12+
"authentication"
13+
],
14+
"homepage": "https://github.com/microsoftgraph/microsoft-graph-toolkit",
15+
"bugs": {
16+
"url": "https://github.com/microsoftgraph/microsoft-graph-toolkit/issues"
17+
},
18+
"repository": {
19+
"type": "git",
20+
"url": "https://github.com/microsoftgraph/microsoft-graph-toolkit"
21+
},
22+
"author": "Microsoft",
23+
"license": "MIT",
24+
"main": "./dist/index.js",
25+
"types": "./dist/index.d.ts",
26+
"module": "./dist/index.js",
27+
"files": [
28+
"dist",
29+
"src"
30+
],
31+
"scripts": {
32+
"build": "npm run clean && npm run build:compile",
33+
"build:compile": "npm run compile",
34+
"build:watch": "npm run compile:watch",
35+
"clean": "shx rm -rf ./dist && shx rm -rf ./tsconfig.authenticator.tsbuildinfo && shx rm -rf ./tsconfig.provider.tsbuildinfo",
36+
"compile": "tsc -p ./tsconfig.provider.json && tsc -p ./tsconfig.authenticator.json",
37+
"compile:watch": "tsc -w -p ./tsconfig.provider.json && tsc -w -p ./tsconfig.authenticator.json",
38+
"lint": "tslint -c ../../../tslint.json 'src/**/*.ts'",
39+
"postpack": "cpx *.tgz ../../../artifacts"
40+
},
41+
"dependencies": {
42+
"@azure/msal-node": "^1.0.0-beta.1",
43+
"@microsoft/mgt-element": "*",
44+
"@microsoft/microsoft-graph-client": "^2.2.1",
45+
"electron": "^11.0.2"
46+
},
47+
"publishConfig": {
48+
"directory": "dist"
49+
}
50+
}

‎packages/providers/mgt-electron-provider/src/Authenticator/AuthCodeListener.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
/**
9+
* AuthCodeListener is the base class from which
10+
* special CustomFileProtocol and HttpAuthCode inherit
11+
* their structure and members.
12+
*/
13+
export abstract class AuthCodeListener {
14+
private hostName: string;
15+
16+
/**
17+
* Constructor
18+
* @param hostName - A string that represents the host name that should be listened on (i.e. 'msal' or '127.0.0.1')
19+
*/
20+
constructor(hostName: string) {
21+
this.hostName = hostName;
22+
}
23+
24+
/**
25+
* hostName getter
26+
*
27+
* @readonly
28+
* @type {string}
29+
* @memberof AuthCodeListener
30+
*/
31+
public get host(): string {
32+
return this.hostName;
33+
}
34+
35+
/**
36+
* Start listening for auth code
37+
*
38+
* @abstract
39+
* @memberof AuthCodeListener
40+
*/
41+
public abstract start(): void;
42+
43+
/**
44+
* Stop listening for auth code
45+
*
46+
* @abstract
47+
* @memberof AuthCodeListener
48+
*/
49+
public abstract close(): void;
50+
}

‎packages/providers/mgt-electron-provider/src/Authenticator/Constants.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
export const REDIRECT_URI = 'msal://redirect';
9+
export const COMMON_AUTHORITY_URL = 'https://login.microsoftonline.com/common/';
10+
export const CACHE_LOCATION = './data/cache.json';

‎packages/providers/mgt-electron-provider/src/Authenticator/CustomFileProtocol.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
import { AuthCodeListener } from './AuthCodeListener';
9+
import { protocol } from 'electron';
10+
import * as path from 'path';
11+
import * as url from 'url';
12+
13+
/**
14+
* CustomFileProtocolListener can be instantiated in order
15+
* to register and unregister a custom file protocol on which
16+
* MSAL can listen for Auth Code responses.
17+
*/
18+
export class CustomFileProtocolListener extends AuthCodeListener {
19+
constructor(hostName: string) {
20+
super(hostName);
21+
}
22+
23+
/**
24+
* Registers a custom file protocol on which the library will
25+
* listen for Auth Code response.
26+
*/
27+
public start(): void {
28+
protocol.registerFileProtocol(this.host, (req, callback) => {
29+
const requestUrl = url.parse(req.url, true);
30+
callback(path.normalize(`${__dirname}/${requestUrl.path}`));
31+
});
32+
}
33+
34+
/**
35+
* Unregisters a custom file protocol to stop listening for
36+
* Auth Code response.
37+
*/
38+
public close() {
39+
protocol.unregisterProtocol(this.host);
40+
}
41+
}

0 commit comments

Comments
 (0)