Partager via

Déployer un complément Office d’authentification unique (SSO) sur Microsoft Azure App Service

  • Article

Les compléments Office qui utilisent l’authentification unique nécessitent du code côté serveur. Pour prendre en charge le code côté serveur dans le déploiement, vous devez utiliser Azure App Service. Suivez les étapes décrites dans cet article pour déployer votre complément Office dans Azure App Service de préproduction ou de déploiement.

Configuration requise

Les étapes décrites dans cet article fonctionnent pour un complément Office créé par le générateur Yeoman pour les compléments Office à l’aide du type de Office Add-in Task Pane project supporting single sign-on (localhost) projet. Vérifiez que vous avez configuré le projet de complément pour qu’il s’exécute correctement sur localhost. Pour plus d'informations, consultez Démarrage rapide de l'authentification unique.

Remarque

Pour plus d’informations sur le déploiement d’un complément Office que vous avez créé à l’aide du Kit de ressources Teams, consultez Déployer une application Teams dans le cloud et Déployer votre première application Teams. Les compléments créés avec le Kit de ressources Teams utilisent le manifeste unifié pour Microsoft 365. Pour plus d’informations sur la publication de compléments et le chargement indépendant, voir Déployer et publier des compléments Office.

Les étapes décrites dans cet article nécessitent également :

Créer l’application App Service

Les étapes suivantes configurent un déploiement de base du complément Office. Il existe plusieurs façons de configurer le déploiement qui ne sont pas abordées dans cette documentation. Pour obtenir des options supplémentaires sur la configuration de votre déploiement, consultez Meilleures pratiques de déploiement.

Se connecter à Azure

  1. Ouvrez votre projet de complément Office dans VS Code.

  2. Sélectionnez le logo Azure dans la barre d’activité. Si la barre d’activité est masquée, ouvrez-la en sélectionnant Afficher> labarre d’activitéd’apparence>.

  3. Dans l’explorateur App Service, sélectionnez Se connecter à Azure... et suivez les instructions.

    Bouton Se connecter à Azure sélectionné dans l’extension Azure.

Configurer l’application App Service

App Service prend en charge différentes versions de Node.js sur Linux et Windows. Sélectionnez l’onglet correspondant à celui que vous souhaitez utiliser, puis suivez les instructions pour créer votre application App Service.

  1. Cliquez avec le bouton droit (ou sélectionnez et maintenez la touche) sur App Services, puis sélectionnez Créer une application web. Un conteneur Linux est utilisé par défaut.
  2. Tapez un nom global unique pour votre application web, puis appuyez sur Entrée. Le nom doit être unique dans l’ensemble d’Azure et utiliser uniquement des caractères alphanumériques ('A-Z', 'a-z' et '0-9') et des traits d’union ('-').
  3. Dans Sélectionner une pile d’exécution, sélectionnez la pile d’exécution Node 16 LTS .
  4. Dans Sélectionner un niveau tarifaire, sélectionnez Gratuit (F1) et attendez que les ressources soient approvisionnées dans Azure. Lorsque vous êtes invité à déployer, ne déployez pas encore le complément. Vous réaliserez cette opération à une étape ultérieure.
  1. Cliquez avec le bouton droit (ou sélectionnez et maintenez la touche) sur votre application App Service, puis sélectionnez Ouvrir dans le portail.
  2. Lorsque le portail s’ouvre dans le navigateur, copiez le nom de domaine de l’URL (et non la https:// partie) à partir du volet Vue d’ensemble et enregistrez-le. Vous en aurez besoin dans les étapes ultérieures.

Mettre à jour package.json

  1. Ouvrez le fichier package.json. Remplacez ensuite la start commande dans la "scripts" section par l’entrée suivante.

    "start": "node middletier.js",

  2. Recherchez l’entrée "prestart" dans la section « scripts » et supprimez-la. Cette section n’est pas nécessaire pour ce déploiement.

  3. Enregistrez le fichier.

Mettre à jour webpack.config.js

  1. Ouvrez le fichier webpack.config.js.

  2. Définissez les urlDev constantes et urlProd sur les valeurs suivantes. (Notez que le https protocole n’est pas spécifié.) Cela entraîne le remplacement localhost:3000 de webpack par le nom de domaine de votre site web dans le /dist/manifest.xml fichier.

    const urlDev = "localhost:3000";
const urlProd = "<your-web-site-domain-name>";

  3. Recherchez la première CopyWebpackPlugin section et mettez-la à jour pour copier également le fichier package.json dans le dossier dist, comme illustré dans l’exemple suivant.

    new CopyWebpackPlugin({
    patterns: [
    {
        from: "assets/*",
        to: "assets/[name][ext][query]",
    },
    {
        from: "package.json",
        to: "package.json",
    },
    {
        from: "manifest*.xml",
        to: "[name]" + "[ext]",
        transform(content) {
            if (dev) {
                return content;
            } else {
                return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
            }
        },
    },
  ],
}),

  4. Enregistrez le fichier.

Mise à jour du manifeste

  1. Ouvrez le fichier manifest.xml.

  2. Remplacez par <SupportUrl DefaultValue="https://www.contoso.com/help"/> l’URL de la page d’aide de votre site web.

  3. Remplacez par <AppDomain>https://www.contoso.com</AppDomain> l’URL de votre site web.

  4. Dans la <Scopes> section située en bas du fichier, ajoutez l’étendue openid comme indiqué dans le code XML suivant.

    <Scopes>
    <Scope>User.Read</Scope>
    <Scope>profile</Scope>
    <Scope>openid</Scope>
</Scopes>

  5. Enregistrez le fichier.

Mettre à jour fallbackauthdialog.js (ou fallbackauthdialog.ts)

  1. Ouvrez le fichier src/helpers/fallbackauthdialog.js ou src/helpers/fallbackauthdialog.ts si votre projet utilise TypeScript.
  2. Recherchez le sur la redirectUri ligne 24 et modifiez la valeur pour utiliser l’URL de votre application App Service que vous avez enregistrée précédemment. Par exemple, redirectUri: "https://contoso-sso.azurewebsites.net/fallbackauthdialog.html",
  3. Enregistrez le fichier.

Mettre à jour. ENV

. Le fichier ENV contient une clé secrète client. À des fins d’apprentissage dans cet article, vous pouvez déployer le . Fichier ENV dans Azure. Toutefois, pour un déploiement de production, vous devez déplacer le secret et toutes les autres données confidentielles dans Azure Key Vault.

  1. Ouvrez le . Fichier ENV .
  2. Définissez la NODE_ENV variable sur la valeur production.
  3. Enregistrez le fichier.

Mettre à jour app.js (ou app.ts)

Le app.js (ou app.ts) nécessite plusieurs modifications mineures pour s’exécuter correctement dans un déploiement. Il est plus simple de remplacer simplement le fichier par une version mise à jour pour le déploiement.

  1. Ouvrez le fichier src/middle-tier/app.js ou src/middle-tier/app.ts si votre projet utilise TypeScript.

  2. Remplacez l’intégralité du contenu du fichier par le code suivant.

    /*
 * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. -->
 *
 * This file is the main Node.js server file that defines the express middleware.
 */

require("dotenv").config();
import * as createError from "http-errors";
import * as path from "path";
import * as cookieParser from "cookie-parser";
import * as logger from "morgan";
import express from "express";
import { getUserData } from "./msgraph-helper";
import { validateJwt } from "./ssoauth-helper";

/* global console, process, require, __dirname */

const app = express();
const port = process.env.PORT;

app.set("port", port);

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug");

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

/* Turn off caching when developing */
if (process.env.NODE_ENV !== "production") {
  app.use(express.static(path.join(process.cwd(), "dist"), { etag: false }));

  app.use(function (req, res, next) {
    res.header("Cache-Control", "private, no-cache, no-store, must-revalidate");
    res.header("Expires", "-1");
    res.header("Pragma", "no-cache");
    next();
  });
} else {
  // In production mode, let static files be cached.
  app.use(express.static(path.join(process.cwd())));
  console.log("static set up: " + path.join(process.cwd()));
}

const indexRouter = express.Router();
indexRouter.get("/", function (req, res) {
  res.sendFile("/taskpane.html", { root: __dirname });
});

// Route APIs
indexRouter.get("/getuserdata", validateJwt, getUserData);

app.use("/", indexRouter);

// Catch 404 and forward to error handler
app.use(function (req, res, next) {
  console.log("error 404");
  next(createError(404));
});

// error handler
app.use(function (err, req, temp, res) {
  // set locals, only providing error in development
  console.log("error 500");
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500).send({
    message: err.message,
  });
});

app.listen(process.env.PORT, () => console.log("Server listening on port: " + process.env.PORT));

  3. Enregistrez le fichier.

Mettre à jour l’inscription de l’application

Nous vous recommandons de créer plusieurs inscriptions d’applications pour les tests localhost, intermédiaires et de déploiement. Les étapes suivantes garantissent que l’inscription d’application que vous utilisez pour le déploiement utilise correctement l’URL de l’application App Service.

  1. Dans le Portail Azure, ouvrez l’inscription de votre application. Notez que l’inscription de l’application peut se trouver dans un compte différent de celui de votre application App Service. Veillez à vous connecter au compte approprié.

  2. Dans la barre latérale gauche, sélectionnez Authentification.

    Page d’authentification dans l’inscription de l’application Azure.

  3. Dans le volet Authentification, recherchez et modifiez-le https://localhost:3000/fallbackauthdialog.html pour utiliser l’URL de l’application App Service que vous avez enregistrée précédemment. Par exemple : https://contoso.sso.azurewebsites.net/fallbackauthdialog.html.

  4. Enregistrez la modification.

  5. Dans la barre latérale gauche, sélectionnez Exposer une API.

  6. Modifiez le champ URI d’ID d’application et remplacez par localhost:3000 le domaine de l’URL d’application App Service que vous avez enregistrée précédemment.

  7. Enregistrez les modifications.

Générer et déployer

Une fois les fichiers et l’inscription d’application mis à jour, vous pouvez déployer le complément.

  1. Dans VS Code, ouvrez le terminal et exécutez la commande npm run build. Cela génère un dossier nommé dist que vous pouvez déployer.
  2. Dans VS Code Explorer accédez au dist dossier . Cliquez avec le bouton droit (ou sélectionnez et maintenez la touche) sur le dist dossier, puis sélectionnez Déployer sur l’application web....
  3. Lorsque vous êtes invité à sélectionner une ressource, sélectionnez l’application App Service que vous avez créée précédemment.
  4. Lorsque vous y êtes invité, sélectionnez Déployer.
  5. Lorsque vous êtes invité à toujours déployer l’espace de travail, choisissez Oui.

Si vous apportez des modifications supplémentaires au code, vous devez réexécuter npm run build et redéployer le projet.

Déploiement de mises à jour

Vous allez déployer les mises à jour sur votre application web de la même manière que celle décrite précédemment. Les modifications apportées au manifeste nécessitent la redistribution de votre manifeste aux utilisateurs. Le processus à suivre dépend de votre méthode de publication. Pour plus d’informations sur la mise à jour de votre complément, voir Gérer votre complément Office.

Tester le déploiement

Chargez la version test du fichier ./dist/manifest.xml et testez les fonctionnalités du complément dans Office. Pour plus d’informations, consultez Charger une version test d’un complément Office à des fins de test.

Remarque

Si l’inscription de votre application se trouve sur un locataire différent de celui où vous chargez la version test du complément, le complément n’aura pas le consentement de l’administrateur pour Microsoft Graph. Pour tester dans ce scénario, vous avez besoin d’un administrateur pour déployer de manière centralisée le complément sur le locataire Microsoft 365. Pour plus d’informations, consultez Déployer des compléments dans le Centre d’administration Microsoft 365

Si vous rencontrez des problèmes de déploiement, consultez la documentation de résolution des problèmes Azure App Service. Si vous utilisez un déploiement central ou envisagez de déployer sur AppSource, nous vous recommandons de valider le manifeste du complément Office à l’aide de l’option « -p » pour la production.

Étapes suivantes