Wire's Microsoft Outlook Calendar Add-in

Wire add-in for Microsoft Outlook

Configuration

The program is configured through environment variables listed in the .env.template file.
Depending on the deployment mode, the values are substituted differently:

• development – at built time via Webpack plugin;
• production – at container startup via a Docker entrypoint script using envsubst command.

The manifest.xml file describes the Office Add-in (its name, permissions, and endpoints), while config.js provides the app with runtime configuration such as API URLs and client IDs.

The actual values for the staging environment are provided in the .env.staging file.

Feature flag

outlookCalIntegration – Must be enabled to be able to create a group and the link.

Local Storage

• isLoggedIn
• refresh_token
• access_token

Authorize

• URL: [config.authorizeUrl]
• Callback: [config.addInBaseUrl]/callback.html
• Scope: write:conversations write:conversations_code read:self read:feature_configs
• State: random 16 hex chars
• Verifier: random 64 hex chars

State and Verifier saved to Session Storage under: state and code_verifier respectively

OAuth Callback

• When called verifies the state parameter and exchanges code for the tokens
• access_token and refresh_token then stored to Local Storage

Refresh token

• Upon 401 Add-in will go to: POST [config.apiBaseUrl]/auth/refresh and body = LocalStorage.refresh_token

How to create a new OAuth client

When available, use Backoffice. For example, the corresponding endpoint for Staging private API is located at https://staging-backoffice.ops.zinfra.io/swagger-ui/index.html#/default/register-oauth-client

Otherwise, connect to the backend pod of the Brig service and run:

curl -s -X POST localhost:8080/i/oauth/clients \
    -H "Content-Type: application/json" \
    -d '{
      "application_name":"Wire Microsoft Outlook Calendar Add-in",
      "redirect_url":"https://outlook.wire.com/callback.html" 
    }'

How to install the Add-in in MS Outlook

• Get the manifest.xml file:
  • Production:

    curl https://outlook.integrations.wire.com/manifest.xml > manifest.xml

  • Development:

    npm run dev-server-local
    # file location: dist/manifest.xml

• Open an email and go to three dots and select Get Add-ins
• Go to My Add-ins, Custom Add-ins, Add a Custom Add-in
• Choose Add from File.

Wire button will appear in the toolbar when a new event is being created

Troubleshooting

• If you are getting 401 error, please make sure that you have enabled the feature flag outlookCalIntegration for your account.
• If your browser is blocking third-party cookies, please make sure to allow them for the add-in to work properly. Or you can add https://outlook.office.com to the list of allowed websites.
• For local development the add-in requires HTTPS and uses a self-signed certificate. If the add-in does not load, open the following URL in your browser:
  https://localhost:3000/commands.html?et=
  If your browser displays a certificate warning, accept or trust the certificate, then reload Outlook and try again.