+ SSO with nested app authentication
+ This add-in demonstrates how to connect to Microsoft Graph from an add-in.
+
+
+
+
+
+
+
+
+
diff --git a/Samples/auth/Outlook-Event-SSO-NAA/src/taskpane/taskpane.js b/Samples/auth/Outlook-Event-SSO-NAA/src/taskpane/taskpane.js
new file mode 100644
index 000000000..84bb0443a
--- /dev/null
+++ b/Samples/auth/Outlook-Event-SSO-NAA/src/taskpane/taskpane.js
@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
+ * See LICENSE in the project root for license information.
+ */
+
+/* global document, console, fetch, Office */
+
+import { createNestablePublicClientApplication } from "@azure/msal-browser";
+import { auth } from "../launchevent/authconfig";
+
+const sideloadMsg = document.getElementById("sideload-msg");
+const signInButton = document.getElementById("btnSignIn");
+const itemSubject = document.getElementById("item-subject");
+
+let pca = undefined;
+let isPCAInitialized = false;
+
+Office.onReady(async (info) => {
+ if (info.host === Office.HostType.Outlook) {
+ sideloadMsg.style.display = "none";
+ document.getElementById("app-body").style.display = "flex";
+ signInButton.onclick = signInUser;
+ // Initialize the public client application.
+ try {
+ pca = await createNestablePublicClientApplication({
+ auth: auth,
+ });
+ isPCAInitialized = true;
+ } catch (error) {
+ // All console.log statements write to the runtime log. For more information, see https://learn.microsoft.com/office/dev/add-ins/testing/runtime-logging
+ console.log(`Error creating pca: ${error}`);
+ }
+ }
+});
+
+/**
+ * Signs in the user using NAA and SSO auth flow. If successful, displays the user's name in the task pane.
+ */
+async function signInUser() {
+ // Check that PCA initialized correctly in Office.onReady().
+ if (!isPCAInitialized) {
+ itemSubject.innerText = "Can't sign in because the PCA could not be initialized. See console logs for details.";
+ return;
+ }
+
+ // Specify minimum scopes needed for the access token.
+ const tokenRequest = {
+ scopes: ["User.Read"],
+ };
+ let accessToken = null;
+ try {
+ const authResult = await pca.acquireTokenSilent(tokenRequest);
+ accessToken = authResult.accessToken;
+ console.log("Acquired token silently.");
+ } catch (error) {
+ console.log(`Unable to acquire token silently: ${error}`);
+ }
+ if (accessToken === null) {
+ // If silently acquiring the token fails, send an interactive request via popup.
+ try {
+ const authResult = await pca.acquireTokenPopup(tokenRequest);
+ accessToken = authResult.accessToken;
+ console.log("Acquired token interactively.");
+ } catch (popupError) {
+ // Failed to acquire the token with the popup.
+ console.log(`Unable to acquire token interactively: ${popupError}`);
+ }
+ }
+
+ // Log error if both silent and popup requests failed.
+ if (accessToken === null) {
+ console.error("Unable to acquire access token.");
+ return;
+ }
+
+ // Call the Microsoft Graph API with the access token.
+ const response = await fetch(`https://graph.microsoft.com/v1.0/me`, {
+ headers: { Authorization: accessToken },
+ });
+
+ if (response.ok) {
+ // Get the user name from response JSON.
+ const data = await response.json();
+ const name = data.displayName;
+
+ if (itemSubject) {
+ itemSubject.innerText = "You are now signed in as " + name + ".";
+ }
+ } else {
+ const errorText = await response.text();
+ console.log("Microsoft Graph call failed - error text: " + errorText);
+ }
+}
diff --git a/Samples/auth/Outlook-Event-SSO-NAA/src/well-known/microsoft-officeaddins-allowed.json b/Samples/auth/Outlook-Event-SSO-NAA/src/well-known/microsoft-officeaddins-allowed.json
new file mode 100644
index 000000000..98794c343
--- /dev/null
+++ b/Samples/auth/Outlook-Event-SSO-NAA/src/well-known/microsoft-officeaddins-allowed.json
@@ -0,0 +1,6 @@
+{
+ "allowed":
+ [
+ "https://localhost:3000/public/launchevent.js"
+ ]
+}
\ No newline at end of file
diff --git a/Samples/auth/Outlook-Event-SSO-NAA/webpack.config.js b/Samples/auth/Outlook-Event-SSO-NAA/webpack.config.js
new file mode 100644
index 000000000..6e1072eff
--- /dev/null
+++ b/Samples/auth/Outlook-Event-SSO-NAA/webpack.config.js
@@ -0,0 +1,114 @@
+/* eslint-disable no-undef */
+
+const devCerts = require("office-addin-dev-certs");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+
+const urlDev = "https://localhost:3000/";
+const urlProd = "https://www.contoso.com/"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION
+
+async function getHttpsOptions() {
+ const httpsOptions = await devCerts.getHttpsServerOptions();
+ return { ca: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };
+}
+
+module.exports = async (env, options) => {
+ const dev = options.mode === "development";
+ const config = {
+ devtool: "source-map",
+ entry: {
+ polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
+ taskpane: ["./src/taskpane/taskpane.js", "./src/taskpane/taskpane.html"],
+ commands: ["./src/launchevent/launchevent.js", "./src/launchevent/commands.html"],
+ launchevent: "./src/launchevent/launchevent.js", // Your event code needs to be listed as an entry.
+ },
+ output: {
+ clean: true,
+ },
+ resolve: {
+ extensions: [".html", ".js"],
+ },
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ // exclude: /node_modules/, // Exclude all node_modules except @azure
+ include: [path.resolve(__dirname, "node_modules/@azure"), path.resolve(__dirname, "src")],
+ exclude: /node_modules/,
+ use: {
+ loader: "babel-loader",
+ options: {
+ presets: ["@babel/preset-env"],
+ },
+ },
+ },
+ {
+ test: /\.html$/,
+ exclude: /node_modules/,
+ use: "html-loader",
+ },
+ {
+ test: /\.(png|jpg|jpeg|gif|ico)$/,
+ type: "asset/resource",
+ generator: {
+ filename: "assets/[name][ext][query]",
+ },
+ },
+ ],
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ filename: "taskpane.html",
+ template: "./src/taskpane/taskpane.html",
+ chunks: ["polyfill", "taskpane"],
+ }),
+ new HtmlWebpackPlugin({
+ filename: "commands.html",
+ template: "./src/launchevent/commands.html",
+ chunks: ["polyfill", "commands"],
+ }),
+ new CopyWebpackPlugin({
+ patterns: [
+ {
+ from: "assets/*",
+ to: "assets/[name][ext][query]",
+ },
+ {
+ from: "manifest*.xml",
+ to: "[name]" + "[ext]",
+ transform(content) {
+ if (dev) {
+ return content;
+ } else {
+ return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
+ }
+ },
+ },
+ {
+ from: "./src/well-known",
+ to: ".well-known",
+ },
+ ],
+ }),
+ ],
+ devServer: {
+ hot: false,
+ client: false,
+ static: {
+ directory: path.join(__dirname, "dist"),
+ publicPath: "/public",
+ },
+ headers: {
+ "Access-Control-Allow-Origin": "*",
+ },
+ server: {
+ type: "https",
+ options: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
+ },
+ port: process.env.npm_package_config_dev_server_port || 3000,
+ },
+ };
+
+ return config;
+};
+