Outlook SSO NAA in pure JS without node.js

Question

Outlook on Windows only uses the runtime JS file defined in the manifest for event-based add-ins. How do you import and use msal-browser in this file without using node.js?

I am aware that import is not allowed on Outlook on Windows for event based files, so i guess it is all about bundling - but is there is simpler, more straight-forward alternative to npm/node.js? Or maybe even a way without bundling at all?

I tried to use the import function, but that is prohibited for event-based add-ins on Outlook for Windows.

I also failed on using fetch and eval(), but I did not follow up on this as it seems to me that there must be an easier way to use msal-browser for SSO with NAA.

The Muffin Man · Accepted Answer · 2024-07-31 16:38:40Z

0

I also failed on using fetch and eval()

Outlook for Desktop Classic (not the new one) requires a special permissions file to allow CORS. https://learn.microsoft.com/en-us/office/dev/add-ins/outlook/use-sso-in-event-based-activation I have a pending documentation PR for this link to make it more clear on where this file goes.

Basically, in your Outlook Add-in project you need a folder called .well-known with a file called microsoft-officeaddins-allowed.json and it needs the required array populated as shown in the link example. Outlook Classic Desktop will look at this file by convention.

I am aware that import is not allowed on Outlook on Windows for event based files, so i guess it is all about bundling

Yes, that's correct. I wouldn't even bother hand coding for this environment as it's too limited and requires too much verbose code writing. Better to write it in TypesScript and let webpack bundle it to IE 11 standards.

In my webpack I have an entry defined like this:

"smart-alerts/autorun-outlook-classic": [
    "core-js/stable",
    "regenerator-runtime/runtime",
    "./src/smart-alerts/autorun-outlook-classic.ts",
  ],

and then a rule defined like so

 {
      test: /\.(ts|js)$/,
      include: [path.resolve(__dirname, "src/smart-alerts")],
      use: {
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  ie: "11",
                },
                useBuiltIns: "entry",
                corejs: "3",
              },
            ],
            "@babel/preset-typescript",
          ],
        },
      },
      exclude: /node_modules/,
    },

Using this approach in my smart-alerts src folder I have a ton of TypeScript files with various utility functions and I import them into the autorun-outlook-classic.ts file and webpack takes care of abstracting away async/await keywords among other things. Works beautifully.

answered Jul 31, 2024 at 16:38

The Muffin Man

20k30 gold badges128 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Markus Gruber Over a year ago

Thank you very much! I got bundling and transpiling to work, which allows me to use async/await while programming. microsoft-officeaddins-allowed.json is up-to-date and in the correct position, AppDomains in manifest.xml are configured correctly. As some of the fetch request work, and some dont, it seems that the problem is related to the queried server.

GovZ Over a year ago

@MarkusGruber Were you able to make NAA-SSO work on your event-based addins? thanks.

Markus Gruber Over a year ago

Yes, it's working on all platforms with the exception of Outlook on Windows, but that's not my target at the moment anyhow.

The Muffin Man Over a year ago

The values in the "allowed" array must be the full URL path to the public file. If you can put the URL in the browser and see the event based JS then you have it right.

GovZ Over a year ago

Thanks for responding @MarkusGruber. During your development, did you come across any guide on how to use webpack/bundlers with event-based addins? I am thinking of changing my existing code into a bundled one.

|

Collectives™ on Stack Overflow

Outlook SSO NAA in pure JS without node.js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related