What is @microsoft/teams-js?
@microsoft/teams-js is a JavaScript library that allows developers to integrate their web applications with Microsoft Teams. It provides a set of APIs to interact with Teams features such as authentication, notifications, and user context.
What are @microsoft/teams-js's main functionalities?
Authentication
This feature allows you to authenticate users within your Teams application. The code sample demonstrates how to initiate an authentication flow using the `microsoftTeams.authentication.authenticate` method.
const microsoftTeams = require('@microsoft/teams-js');
microsoftTeams.authentication.authenticate({
url: window.location.origin + '/auth-start',
width: 600,
height: 535,
successCallback: (result) => {
console.log('Authentication successful:', result);
},
failureCallback: (reason) => {
console.log('Authentication failed:', reason);
}
});
Notifications
This feature allows you to show notifications to users within your Teams application. The code sample demonstrates how to display a notification using the `microsoftTeams.notifications.showNotification` method.
const microsoftTeams = require('@microsoft/teams-js');
microsoftTeams.notifications.showNotification({
message: 'This is a notification',
duration: 3000
});
User Context
This feature allows you to retrieve the context of the user within Teams. The code sample demonstrates how to get the user context using the `microsoftTeams.getContext` method.
const microsoftTeams = require('@microsoft/teams-js');
microsoftTeams.getContext((context) => {
console.log('User context:', context);
});
Other packages similar to @microsoft/teams-js
botbuilder
The `botbuilder` package is part of the Microsoft Bot Framework and allows developers to create bots that can interact with users in Microsoft Teams. It provides functionalities for handling messages, dialogs, and other interactions within Teams, making it a good alternative for building conversational experiences.
office-js
The `office-js` package is used for developing Office Add-ins, including those for Microsoft Teams. It provides APIs to interact with Office applications and services, and can be used to extend the functionality of Teams by integrating with other Office 365 services.
Microsoft Teams JavaScript client library
Welcome to the Teams JavaScript client library! For breaking changes, please refer to our changelog in the current <root>/packages/teams-js
directory.
This JavaScript library is part of the Microsoft Teams developer platform. See full library reference documentation.
Getting Started
See instructions in the monorepo root for how to clone and build the repository.
Whenever building or testing the Teams client library, you can run pnpm build
or pnpm test
from the packages/teams-js directory.
Installation
To install the stable version:
npm
npm install --save @microsoft/teams-js
pnpm
pnpm add @microsoft/teams-js
Production
You can reference these files directly from here or point your package manager at them.
Usage
As a package
Install either using npm or pnpm.
If you are using any dependency loader such as RequireJS or SystemJS or module bundler such as browserify, webpack, you can use import
syntax to import specific modules. For e.g.
import { app } from '@microsoft/teams-js';
As a script tag
Reference the library inside of your .html
page using:
<script
src="https://res.cdn.office.net/teams-js/2.28.0/js/MicrosoftTeams.min.js"
integrity="sha384-gT2igbByugSUPXBgDA+rtfKk4JMSCfG+3DKSivyLqF2Riv4vTLqaC/tFpySw0eIM"
crossorigin="anonymous"
></script>
<script src="node_modules/@microsoft/teams-js@2.28.0/dist/MicrosoftTeams.min.js"></script>
<script src="MicrosoftTeams.min.js"></script>
Dependencies
Teams client library depends on Promise
type. If you support older browsers and devices which may not yet provide it natively (e.g. IE 11), you need to provide a global polyfill, such as es6-promise, in your bundled application. If you're using a script tag to reference the Teams client library, you need to make sure the polyfill is included and initialized before the Teams client library is initialized.
Full Documentation and Examples
While each interface, class, function, etc. includes compact developer documentation, full documentation about library usage, including examples, can be found here.
Testing
The Teams Test App is used to validate the Teams client library APIs.
Troubleshooting
If the CDN hash value on the npm page is out of date please refer to [here] (https://github.com/OfficeDev/microsoft-teams-library-js/blob/main/packages/teams-js/README.md) for an up to date version. If you notice this problem, please report that issue to us in [GitHub Issues] (https://github.com/OfficeDev/microsoft-teams-library-js/issues)
Contributing
Please be sure to check out the Contributor's guide for crucial steps.