Cómo ejecutar el proyecto completadoHow to run the completed project

  • Tiempo de lectura: 4 minutos

Requisitos previosPrerequisites

Para ejecutar el proyecto completado en esta carpeta, necesita lo siguiente:To run the completed project in this folder, you need the following:

  • Node.js y Descuido instalados en el equipo de desarrollo.Node.js and Yarn installed on your development machine. (Nota: Este tutorial se escribió con Node versión 14.15.0 y La versión 1.22.0 de Lana.(Note: This tutorial was written with Node version 14.15.0 and Yarn version 1.22.0. Los pasos de esta guía pueden funcionar con otras versiones, pero no se han probado).The steps in this guide may work with other versions, but that has not been tested.)
  • Ya sea una cuenta personal de Microsoft con un buzón en Outlook.com o una cuenta de Microsoft para trabajo o escuela.Either a personal Microsoft account with a mailbox on Outlook.com, or a Microsoft work or school account.

Si no tienes una cuenta de Microsoft, hay un par de opciones para obtener una cuenta gratuita:If you don't have a Microsoft account, there are a couple of options to get a free account:

Registrar una aplicación web con el Centro de administración de Azure Active DirectoryRegister a web application with the Azure Active Directory admin center

  1. Abra un explorador y vaya al centro de administración de Azure Active Directory.Open a browser and navigate to the Azure Active Directory admin center. Inicie sesión con una cuenta personal (también conocida como: cuenta Microsoft) o una cuenta profesional o educativa.Login using a personal account (aka: Microsoft Account) or Work or School Account.

  2. Seleccione Azure Active Directory en el panel de navegación izquierdo y, a continuación, seleccione Registros de aplicaciones en Administrar.Select Azure Active Directory in the left-hand navigation, then select App registrations under Manage.

    Captura de pantalla de los registros de aplicacionesA screenshot of the App registrations

  3. Seleccione Nuevo registro.Select New registration. En la página Registrar una aplicación, establezca los valores siguientes.On the Register an application page, set the values as follows.

    • Establezca Nombre como Office Add-in Graph Tutorial.Set Name to Office Add-in Graph Tutorial.
    • Establezca Tipos de cuenta admitidos en Cuentas en cualquier directorio de organización y cuentas personales de Microsoft.Set Supported account types to Accounts in any organizational directory and personal Microsoft accounts.
    • En URI de redirección, establezca la primera lista desplegable en Single-page application (SPA) y establezca el valor https://localhost:3000/consent.html.Under Redirect URI, set the first drop-down to Single-page application (SPA) and set the value to https://localhost:3000/consent.html.

    Captura de pantalla de la página Registrar una aplicación

  4. Seleccione Registrar.Select Register. En la página Tutorial de Office Add-in Graph, copie el valor del id. de aplicación (cliente) y guárdelo, lo necesitará en el paso siguiente.On the Office Add-in Graph Tutorial page, copy the value of the Application (client) ID and save it, you will need it in the next step.

    Captura de pantalla del identificador de aplicación del nuevo registro de la aplicación

  5. Seleccione Certificados y secretos en Administrar.Select Certificates & secrets under Manage. Seleccione el botón Nuevo secreto de cliente.Select the New client secret button. Escriba un valor en Descripción, seleccione una de las opciones para Expira y seleccione Agregar.Enter a value in Description and select one of the options for Expires and select Add.

  6. Copie el valor del secreto de cliente antes de salir de esta página.Copy the client secret value before you leave this page. Lo necesitará en el siguiente paso.You will need it in the next step.

    Importante

    El secreto de cliente no se vuelve a mostrar, así que asegúrese de copiarlo en este momento.This client secret is never shown again, so make sure you copy it now.

  7. Seleccione permisos de API en Administrar y, a continuación, seleccione Agregar un permiso.Select API permissions under Manage, then select Add a permission.

  8. Seleccione Microsoft Graph y, a continuación, permisos delegados.Select Microsoft Graph, then Delegated permissions.

  9. Seleccione los permisos siguientes y, a continuación, seleccione Agregar permisos.Select the following permissions, then select Add permissions.

    • Calendars.ReadWrite: esto permitirá que la aplicación lea y escriba en el calendario del usuario.Calendars.ReadWrite - this will allow the app to read and write to the user's calendar.
    • MailboxSettings.Read: esto permitirá que la aplicación obtenga la zona horaria del usuario desde su configuración de buzón.MailboxSettings.Read - this will allow the app to get the user's time zone from their mailbox settings.

    Captura de pantalla de los permisos configurados

Configurar el inicio de sesión único del complemento de OfficeConfigure Office Add-in single sign-on

Actualice el registro de la aplicación para admitir el inicio de sesión único (SSO) del complemento de Office.Update the app registration to support Office Add-in single sign-on (SSO).

  1. Seleccione Exponer una API.Select Expose an API. En la sección Ámbitos definidos por esta API, seleccione Agregar un ámbito.In the Scopes defined by this API section, select Add a scope. Cuando se le pida que establezca un URI de id. de aplicación, establezca el valor en api://localhost:3000/YOUR_APP_ID_HERE , reemplazando con el identificador de YOUR_APP_ID_HERE aplicación.When prompted to set an Application ID URI, set the value to api://localhost:3000/YOUR_APP_ID_HERE, replacing YOUR_APP_ID_HERE with the application ID. Elija Guardar y continuar.Choose Save and continue.

  2. Rellene los campos como se muestra a continuación y seleccione Agregar ámbito.Fill in the fields as follows and select Add scope.

    • Nombre del ámbito:access_as_userScope name: access_as_user
    • ¿Quién puede dar su consentimiento?: Administradores y usuariosWho can consent?: Admins and users
    • Nombre para mostrar del consentimiento del administrador:Access the app as the userAdmin consent display name: Access the app as the user
    • Descripción del consentimiento del administrador:Allows Office Add-ins to call the app's web APIs as the current user.Admin consent description: Allows Office Add-ins to call the app's web APIs as the current user.
    • Nombre para mostrar del consentimiento del usuario:Access the app as youUser consent display name: Access the app as you
    • Descripción del consentimiento del usuario:Allows Office Add-ins to call the app's web APIs as you.User consent description: Allows Office Add-ins to call the app's web APIs as you.
    • Estado: habilitadoState: Enabled

    Captura de pantalla del formulario Agregar un ámbito

  3. En la sección Aplicaciones cliente autorizadas, seleccione Agregar una aplicación cliente.In the Authorized client applications section, select Add a client application. Escriba un identificador de cliente en la siguiente lista, habilite el ámbito en Ámbitos autorizados y seleccione Agregar aplicación.Enter a client ID from the following list, enable the scope under Authorized scopes, and select Add application. Repita este proceso para cada uno de los IDs de cliente de la lista.Repeat this process for each of the client IDs in the list.

    • d3590ed6-52b3-4102-aeff-aad2292ab01c (Microsoft Office)d3590ed6-52b3-4102-aeff-aad2292ab01c (Microsoft Office)
    • ea5a67f6-b6f3-4338-b240-c655ddc3cc8e (Microsoft Office)ea5a67f6-b6f3-4338-b240-c655ddc3cc8e (Microsoft Office)
    • 57fb890c-0dab-4253-a5e0-7188c88b2bb4 (Office en la Web)57fb890c-0dab-4253-a5e0-7188c88b2bb4 (Office on the web)
    • 08e18876-6177-487e-b8b5-cf950c1e598c (Office en la Web)08e18876-6177-487e-b8b5-cf950c1e598c (Office on the web)

Instalar certificados de desarrolloInstall development certificates

  1. Ejecute el siguiente comando para generar e instalar certificados de desarrollo para el complemento.Run the following command to generate and install development certificates for your add-in.

    npx office-addin-dev-certs install

    Si se le solicita confirmación, confirme las acciones.If prompted for confirmation, confirm the actions. Una vez completado el comando, verá un resultado similar al siguiente.Once the command completes, you will see output similar to the following.

    You now have trusted access to https://localhost.
Certificate: <path>\localhost.crt
Key: <path>\localhost.key

  2. Copie las rutas de acceso a localhost.crt y localhost.key, las necesitará en el paso siguiente.Copy the paths to localhost.crt and localhost.key, you'll need them in the next step.

Actualizar el manifiestoUpdate the manifest

  1. Abra el manifest.xml archivo y realice los siguientes cambios.Open the manifest.xml file and make the following changes.
    1. Reemplazar NEW_GUID_HERE con un nuevo GUID, como b4fa03b8-1eb6-4e8b-a380-e0476be9e019 .Replace NEW_GUID_HERE with a new GUID, like b4fa03b8-1eb6-4e8b-a380-e0476be9e019.
    2. Reemplaza todas las instancias por YOUR_APP_ID_HERE el identificador de aplicación del registro de la aplicación.Replace all instances of YOUR_APP_ID_HERE with the application ID from your app registration.

Configuración del ejemploConfigure the sample

  1. Cambie el nombre example.env del archivo a .env .Rename the example.env file to .env.

  2. Edite .env el archivo y realice los siguientes cambios.Edit the .env file and make the following changes.

    1. Reemplace YOUR_APP_ID_HERE por el id. de aplicación que obtuvo del Portal de registro de aplicaciones.Replace YOUR_APP_ID_HERE with the Application Id you got from the App Registration Portal.
    2. Reemplace YOUR_CLIENT_SECRET_HERE por el secreto de cliente que obtuvo del Portal de registro de aplicaciones.Replace YOUR_CLIENT_SECRET_HERE with the client secret you got from the App Registration Portal.
    3. Reemplace PATH_TO_LOCALHOST.CRT por la ruta de acceso al archivo localhost.crt desde el resultado del npx office-addin-dev-certs install comando.Replace PATH_TO_LOCALHOST.CRT with the path to your localhost.crt file from the output of the npx office-addin-dev-certs install command.
    4. Reemplace PATH_TO_LOCALHOST.KEY por la ruta de acceso al archivo localhost.key desde el resultado del npx office-addin-dev-certs install comando.Replace PATH_TO_LOCALHOST.KEY with the path to your localhost.key file from the output of the npx office-addin-dev-certs install command.

  3. Cambie el nombre config.example.js del archivo a config.js .Rename the config.example.js file to config.js.

  4. Edite config.js el archivo y realice los siguientes cambios.Edit the config.js file and make the following changes.

    1. Reemplace YOUR_APP_ID_HERE por el id. de aplicación que obtuvo del Portal de registro de aplicaciones.Replace YOUR_APP_ID_HERE with the Application Id you got from the App Registration Portal.

  5. En la interfaz de línea de comandos (CLI), vaya a este directorio y ejecute el siguiente comando para instalar los requisitos.In your command-line interface (CLI), navigate to this directory and run the following command to install requirements.

    yarn install

Ejecutar el ejemploRun the sample

  1. Ejecute el siguiente comando en la CLI para iniciar la aplicación.Run the following command in your CLI to start the application.

    yarn start

  2. En el explorador, vaya a Office.com e inicie sesión.In your browser, go to Office.com and sign in. Seleccione Crear en la barra de herramientas izquierda y, a continuación, seleccione Hoja de cálculo.Select Create in the left-hand toolbar, then select Spreadsheet.

    Captura de pantalla del menú Crear en Office.com

  3. Seleccione la pestaña Insertar y, a continuación, seleccione Complementos de Office.Select the Insert tab, then select Office Add-ins.

  4. Seleccione Cargar mi complemento y, a continuación, seleccione Examinar.Select Upload My Add-in, then select Browse. Cargue el manifest.xml archivo.Upload your manifest.xml file.

  5. Seleccione el botón Importar calendario en la pestaña Inicio para abrir el panel de tareas.Select the Import Calendar button on the Home tab to open the taskpane.

    Captura de pantalla del botón Importar calendario en la pestaña Inicio