Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
@ciscospark/widget-recents
Advanced tools
The Webex Teams Recents Widget allows developers to easily incorporate Cisco Webex Teams (formerly Cisco Spark) Recents list and events into an application.
This widget handles coordination between your application and the Webex Teams APIs, and provides components of the Webex Teams recents list experience without having to build all of the front end UI yourself. Furthermore, the widget functions as a central point of contact for all other widgets by providing a robust events api that allows a developer to listen to realtime events on the Webex platform and react to those events.
Our widget is built using React, Redux, and the Webex Teams JavaScript SDK.
This widget supports:
Depending on how comfortable you are with these frameworks, there are are a number of ways you can "install" our code.
If you haven't already, go to Cisco Webex for Developers (https://developer.webex.com) and sign up for an account. Once you've created an account you can get your developer access here.
When you want to eventually create an integration and have your own users take advantage of the widget, you'll need to create an integration with the following scopes:
spark:all
Head over to the Webex for Developers Documentation for more information about how to setup OAuth for your app: https://developer.webex.com/authentication.html
Using our CDN requires the least amount of work to get started. Add the following into your HTML file:
<!-- Production compiled and minified CSS -->
<link rel="stylesheet" href="https://code.s4d.io/widget-recents/production/main.css">
<!-- Production compiled and minified JavaScript -->
<script src="https://code.s4d.io/widget-recents/production/bundle.js"></script>
For the latest builds that are pulled from the head of the master branch:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://code.s4d.io/widget-recents/latest/main.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.s4d.io/widget-recents/latest/bundle.js"></script>
Follow these instructions to checkout and build the react-widgets
repo https://github.com/webex/react-widgets/blob/master/README.md
To build the Recents Widget, run the following from the root directory:
npm run build:package widget-recents
To use the space widget within an existing React appliction, a developer can install the component directly from npm.
npm install --save @ciscospark/widget-recents
import RecentsWidget from '@ciscospark/widget-recents';
// Sass import required for styling widgets
import '@ciscospark/widget-recents/src/momentum.scss';
<RecentsWidget accessToken='XXXXXXXXXXXXXX' />
All of the React configurable properties are listed in the "Configuration" section.
If you are developing an application that makes use of our Webex SDK in addition to the widgets, some additional configuration is needed.
In order for the Webex Teams Recents Widget to function in a project that is already using the Webex SDK via npm, the versions of the SDK must match specifically.
Any "@webex" packages that are added to your project manually need to match the versions in the widgets' package.json file.
If you would just like to get running immediately, follow these instructions to get a webpack-dev-server running with the widget.
Create a .env
file in the root of the React project with the following lines, replacing the Xs with the appropriate value:
WEBEX_ACCESS_TOKEN=XXXXXXXXXXXXXXX
From the root directory run: npm run start:package widget-recents
When loading the widgets there are some configuration options you can provide:
Authentication methods:
Name | Data API | Description |
---|---|---|
accessToken | data-access-token | Access token for the user account initiating the messaging session. For testing purposes you can use a developer access token from https://developer.webex.com. |
guestToken | data-guest-token | Guest Access token for the user account initiating the messaging session. A guest issuer application is required to generate a guest token. https://developer.webex.com/docs/guest-issuer. |
sdkInstance | N/A: global only feature | A Webex SDK instance that has already been created and authenticated. |
Optional configurations:
Name | Data API | Description |
---|---|---|
logLevel | data-log-level | (default: silent ) When present, widget will log debug information to console. This can be set to: error , warn , debug , info , trace , or silent |
enableAddButton | data-enable-add-button | (default: false) Enables the "Add Space" button present on other clients in the header. |
enableSpaceListFilter | data-enable-space-list-filter | (default: true) This enables a search term input box for filtering the recents widget's space list. To disable, set this to false . |
enableUserProfile | data-enable-user-profile | (default: true) Enables the current user's profile display in the header. |
enableUserProfileMenu | data-enable-user-profile-popover | (default: false) Enables the current user's profile setting menu in the header. |
The easiest way to get the Webex Teams Recents Widget into your web site is to add the built resources and attach data attributes to your a container.
If you're using our CDN, skip to the next section.
dist
directory to own project.<script />
tag to your page to include the bundle.js
<link />
tag to include main.css
If you would like to embed with the widget without any additional behaviors into your page, use this data api. The div
containing our data-toggle
attribute must exist on the page before our javascript bundle loads.
Create a container where you would like to embed the widget and add the required configuration options. Be sure to include data-toggle="ciscospark-recents"
.
<div
class="webexteams-widget"
data-toggle="ciscospark-recents"
data-access-token="AN_ACCESS_TOKEN"
/>
If you need additional behaviors or need to do additional work before the widget loads, it may be useful for to programmatically instatiate the widget after the intial page loads.
<div id="my-webexteams-widget" />
<script>
var widgetEl = document.getElementById('my-webexteams-widget');
// Init a new widget
ciscospark.widget(widgetEl).recentsWidget({
accessToken: 'AN_ACCESS_TOKEN'
});
</script>
my-webexteams-widget
is an arbitrary id to illustrate one way to select the DOM element. But please ensure that thewidgetEl
that you pass tociscospark.widget()
is a DOM element.
You can also attach to an existing widget. Currently this gives you access to events. Other functionality will be added in future releases.
var widgetEl = document.getElementById('webexteams-widget-id');
var widgetObject = ciscospark.widget(widgetEl);
When a widget needs to be removed from the page you will want to call the .remove()
method. This will close any network connections active and remove the widget from the DOM. You can also pass a callback as a parameter to the .remove()
method. The method also returns a Promise that is thenable.
The returned value, removed
, is true
if a matching widget has been removed, and is false
no widget was found.
// Basic remove
ciscospark.widget(widgetEl).remove();
// With callback
ciscospark.widget(widgetEl).remove(function(removed) {
if (removed) {
console.log('removed!');
}
});
// With Promise
ciscospark.widget(widgetEl).remove().then(function(removed) {
if (removed) {
console.log('removed!');
}
});
If you are also using the Webex Teams JS SDK on the same page, please be sure to load that before you load the widget scripts.
The Recents widget exposes a few events for hooking into widget functionality. You can directly add DOM event listener like this:
<div
class="webexteams-widget"
data-toggle="ciscospark-recents"
data-access-token="AN_ACCESS_TOKEN"
/>
<script>
document.getElementById('webexteams-widget').addEventListener('EVENT_NAME', function(event) {
// Handle the event here
console.log(event.detail);
});
</script>
If you are using browser globals, you can provide a callback parameter that will fire whenever any event occurs. You can filter the actions using the name provided like this:
var widgetEl = document.getElementById('my-webexteams-widget');
// Init a new widget
ciscospark.widget(widgetEl).recentsWidget({
accessToken: 'AN_ACCESS_TOKEN',
onEvent: callback
});
function callback(name, detail) {
if (name === 'messages:created') {
// Perform an action if a new message has been created
}
}
Or you can use the (ampersand-events
)[https://github.com/AmpersandJS/ampersand-events] API to listen to events like this:
var widgetEl = document.getElementById('webexteams-widget');
ciscospark.widget(widgetEl).on('messages:created', function(e) {
console.log(e.detail);
});
All available events are outlined in our events guide
This widget has been tested on the following browsers for messaging and meeting:
Please see CONTRIBUTING.md for more details.
© 2016-2018 Cisco and/or its affiliates. All Rights Reserved.
FAQs
Cisco Spark React Recents Widget
The npm package @ciscospark/widget-recents receives a total of 3 weekly downloads. As such, @ciscospark/widget-recents popularity was classified as not popular.
We found that @ciscospark/widget-recents demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 31 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.