Our goal in this step is to extract the 'app.asar' as can be seen on the picture above.
Quarantine or not I always have some side projects, this time it's the app I start every morning: MS Teams.
From previous experiences as a SharePoint architect, I know that quality information is usually presented by MS internal people, who are working on the product teams. So to realize that Teams is much more than just the client app, please watch the following videos (originally channel9, but I prefer YouTube links):
Update: in my original version I had here the title 'architecture' and some screenshots from the suggested videos to watch, but I've decided to remove those to avoid any copyright issues ...
Few words on the app, before we dive into details ... MS Teams is implemented as an Electron app, MS already gained experience building Electron apps with their VSCode application, and for Teams they picked the same, BUT in a totally different manner! While VSCode is a standalone app, MS Teams client app is 'just' a wrapper around the web version, to hook it up with your desktop OS services and give you a more 'native' experience. As it's an Electron app, there is a ton of nodejs involved, most of them are visible, but there are some important pieces where MS only deployed binaries.My autopsy assumes MacOS as a platform, but the process should be similar on any other OS. As a result of the whole shebang, you should have an extracted version of Teams app, with most of the functionality in place. You should be able to start up Teams from the 'source code', but it has some requirements ... I assume you are somewhat familiar with 'Terminal' and Node.js!
Our goal in this step is to extract the 'app.asar' as can be seen on the picture above.
# cd /Applications/Microsoft Teams.app/Contents/Resources # ls *.asar app.asar electron.asarWe are interested in the app.asar, and to keep my plate clean, I created a folder for the experiment in my dev folder. Successful extraction of the asar file requires some extra files in place in advance. To extract, I use npx, so I could avoid global install of asar.
... navigate to the folder where you gonna work ... # mkdir teamz # cp /Applications/Microsoft\ Teams.app/Contents/Resources/app.asar . # cp -r /Applications/Microsoft\ Teams.app/Contents/Resources/app.asar.unpacked . # npx asar extract app.asar src # cd src; ls src assets/ env_config.json external/ lib/ locales/ node_modules/ package.jsonBingo! Let's check package.json
package.json file in VSCode
As I don't wanna install Electron globally, and we need a given version of it, I will do a dirty shortcut ...
# cd .. # mkdir elektron; cd elektron # npm init ... name your project whatever you want, I named mine 'elektron' # npm install electron@v3.1.13I also downgraded my version of nodejs, but that is a different stroy ...
According to package.json presumably lib/main.js, is our entry point to start the app. Well, from experience I can tell,
without some adjustments to the code, it won't! main.js is the main entry-point of the code, contains bootstrap for the app.
As I haven't done a global install of Electron there are things out of context. (Please note, that I'm not an Electron expert,
so due to the fact I had to do shortcuts).
From (line #32)
let appName = electron_1.app.getName();To
let appName = 'Teams'As I learned the hard way, electron.app.getAppPath() function is used overall in the code, so it's better to override the default value
electron_1.app.setPath('userData', userDataPath);
To
electron_1.app.setPath('userData', userDataPath);
electron_1.app.setAppPath('<your path>/teamz/src');
We are now just few steps away to start the app, but first we have to move our existing Teams preferences folder to safety.
On MacOS, application configurations setting for teams can be found under '~/Library/Application\ Support/Microsoft/Teams/'.
If you are planning to use the 'Teams app' in the normal way as well, I suggest you make a backup of this folder (though Teams is
storing most of you data in Azure).
# mv ~/Library/Application\ Support/Microsoft/Teams/ ~/Library/Application\ Support/Microsoft/Teams.backup # mkdir ~/Library/Application\ Support/Microsoft/Teams/And now the 'hard part'! There is an authentication flow going on, and it fails when we start the app with electron. But I managed to fix it, so at least you can login once and use the app. To achieve this we need to modify 'adal-impl-mac.js, below is my diff:
178c178
< if (this.currentRequestStatus.errorCode === 204 /* AD_ERROR_SERVER_WRONG_USER */) {
---
> if (this.currentRequestStatus && this.currentRequestStatus.errorCode === 204 /* AD_ERROR_SERVER_WRONG_USER */) {
188c188
< + 'error:' + this.currentRequestStatus.errorCode
---
> //+ 'error:' + (this.currentRequestStatus) ? this.currentRequestStatus.errorCode : 'unknown'
190c190
< if (!this.hasTriedLogout && appConfig.getInstance().getSetting(constants.settings.handle300)
---
> if (this.currentRequestStatus && !this.hasTriedLogout && appConfig.getInstance().getSetting(constants.settings.handle300
Living on the edge? Let's try to start ...
node ../elektron/node_modules/electron/cli.js lib/main.jsImportant! if there is an earlier Teams folder under ~/Library/Application\ Support/Microsoft/ the app will start, but turns idle at a certain point!
