Skip to content
This repository has been archived by the owner on Jul 19, 2019. It is now read-only.

Commit

Permalink
Updating example applications for the BlackBerry Spark Communications…
Browse files Browse the repository at this point in the history
… Services SDK R7 Release. (#17)
  • Loading branch information
jkeastbb committed Nov 29, 2018
1 parent 208e6cb commit f73ad19
Show file tree
Hide file tree
Showing 55 changed files with 1,370 additions and 558 deletions.
9 changes: 7 additions & 2 deletions ClickToCall/.eslintrc.json
Expand Up @@ -24,7 +24,12 @@
"FirebaseKeyProvider": false,
"KeyProtect": false,
"USER_SECRET": false,
"KMS_ARGON_WASM_URL": false
"KMS_ARGON_WASM_URL": false,
"GooglePeopleUserManager": false,
"AUTH_CONFIGURATION": false,
"AuthenticationManager": false,
"MockUserManager": false,
"AzureUserManager": false
},

"rules":
Expand All @@ -34,7 +39,7 @@
[
"error",
{
"varsIgnorePattern": "makeCall|KMS_ARGON_WASM_URL|CONTACT_REG_ID|ID_PROVIDER_DOMAIN|USER_SECRET|ID_PROVIDER_ENVIRONMENT|createAuthManager|createUserManager|createKeyProvider|createKeyProtect"
"varsIgnorePattern": "AUTH_CONFIGURATION|makeCall|KMS_ARGON_WASM_URL|CONTACT_REG_ID|ID_PROVIDER_DOMAIN|USER_SECRET|ID_PROVIDER_ENVIRONMENT|createAuthManager|createUserManager"
}
]
}
Expand Down
22 changes: 12 additions & 10 deletions ClickToCall/README.md
@@ -1,15 +1,17 @@
![BlackBerry Spark Communications Platform](https://developer.blackberry.com/files/bbm-enterprise/documents/guide/resources/images/bnr-bbm-enterprise-sdk-title.png)
![BlackBerry Spark Communications Services](https://developer.blackberry.com/files/bbm-enterprise/documents/guide/resources/images/bnr-bbm-enterprise-sdk-title.png)

# Click To Call Sample for JavaScript

The Click to Call sample app demonstrates how to integrate a video call
experience into your website with the Spark SDK for JavaScript. This app allows a user to click a button on a webpage to start a secure video call with a predefined user or agent. The bbmChat widget handles the rendering of messages within the chat, and allows the user to send text, picture, and file messages.
experience into your website with the Spark Communications SDK. This app allows
a user to click a button on a webpage to start a secure video call with a
predefined user or agent. The bbmCall widget handles the rendering of the
incoming and outgoing video streams.

### Features

This app demonstrates how easy it is to integrate the bbmCall widget into your
webpage. It initializes the Spark SDK for JavaScript, and starts a
video call with a predefined user.
webpage. It initializes the SDK, and starts a video call with a predefined user.

<br>

Expand All @@ -19,9 +21,9 @@ video call with a predefined user.

## Getting Started

This sample requires the Spark SDK, which you can find along with related resources at the location below.
This sample requires the Spark Communications SDK for JavaScript, which you can find along with related resources at the location below.

* Getting started with the [Spark SDK](https://developers.blackberry.com/us/en/products/blackberry-bbm-enterprise-sdk.html)
* Getting started with the [Spark Communications SDK](https://developers.blackberry.com/us/en/products/blackberry-spark-communications-platform.html)
* [Development Guide](https://developer.blackberry.com/files/bbm-enterprise/documents/guide/html/index.html)
* [API Reference](https://developer.blackberry.com/files/bbm-enterprise/documents/guide/reference/javascript/index.html)

Expand All @@ -44,7 +46,7 @@ To use the ClickToCall example, you must set up the following elements in js/con

- Oauth2 configuration (AUTH_CONFIGURATION)
- A hard coded contact registration ID with whom anyone who views the page will talk (CONTACT_REG_ID)
- Your Spark user domain (ID_PROVIDER_DOMAIN)
- Your sandbox domain (ID_PROVIDER_DOMAIN)
- Firebase configuration (FIREBASE_CONFIG)
- User passcode (USER_SECRET)

Expand All @@ -53,7 +55,7 @@ To use the ClickToCall example, you must set up the following elements in js/con
Follow this guide for a walkthrough of how to integrate a video call into your webpage.

- [Import the bbmCall UI widget into your web application](#importCall)
- [Initialize the Spark SDK for JavaScript](#init)
- [Initialize the SDK](#init)
- [Perform setup](#setup)
- [Start a video call with a predefined user](#startCall)

Expand All @@ -65,7 +67,7 @@ Your web application needs to import the bbmCall widget in order to bring a vide
<link rel="import" href="node_modules/bbmCall/bbmCall.html">
```

### <a name="init"></a>Initialize the Spark SDK for JavaScript
### <a name="init"></a>Initialize the SDK

```javascript
// Instantiate BBMEnterprise.
Expand All @@ -80,7 +82,7 @@ Your web application needs to import the bbmCall widget in order to bring a vide
});
```

For more information about setting up the Spark SDK for JavaScript, visit the [Getting Started with Web](https://developer.blackberry.com/files/bbm-enterprise/documents/guide/html/gettingStarted-web.html) section of the guide.
For more information about setting up the SDK, visit the [Getting Started with Web](https://developer.blackberry.com/files/bbm-enterprise/documents/guide/html/gettingStarted-web.html) section of the guide.

### <a name="setup"></a>Perform setup
```javascript
Expand Down
29 changes: 25 additions & 4 deletions ClickToCall/callPopup.html
Expand Up @@ -22,16 +22,37 @@
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<link rel="icon" type="image/png" href="img/favicon.ico">
<script type="text/javascript" src="node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>
<script type="text/javascript" src="../support/auth/GoogleAuthManager.js"></script>
<script type="text/javascript" src="../support/identity/GenericUserInfo.js"></script>
<script type="text/javascript" src="../support/identity/FirebaseUserManager.js"></script>
<script type="text/javascript" src="../../sdk/bbm_sdk_web.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/callPopup.js"></script>
<link rel="stylesheet" type="text/css" href="css/callPopup.css"/>
<!-- import bbm-call into your application -->
<link rel="import" href="node_modules/bbmCall/bbmCall.html">
<!-- import bbm-user-email-dialog control -->
<link rel="import" href="node_modules/bbmUserEmailDialog/bbmUserEmailDialog.html"/>

<!-- Select one of the following configurations (mutually exclusive): -->

<!-- 1. Simplified: Use below .js to configure your app to work without authentication (no identity provider) -->
<script type="text/javascript" src="../support/auth/MockAuthManager.js"></script>
<script type="text/javascript" src="../support/identity/MockUserManager.js"></script>
<script type="text/javascript" src="js/config_mock.js"></script>

<!-- 2. Google: Use below .js files to configure application to work with Google -->
<!--
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<script type="text/javascript" src="../support/auth/GoogleAuthManager.js"></script>
<script type="text/javascript" src="../support/identity/GooglePeopleUserManager.js"></script>
<script type="text/javascript" src="js/config_google.js"></script>
-->

<!-- 3. Microsoft: Use below .js files to configure application to work with Azure -->
<!--
<script type="text/javascript" src="../support/auth/AzureAuthManager.js"></script>
<script type="text/javascript" src="../support/identity/AzureUserManager.js"></script>
<script type="text/javascript" src="js/config_azure.js"></script>
-->

</head>
<body>
<img id="hourglass" src="img/ic_hourglass_empty_white_24dp_1x.png">
Expand Down
17 changes: 15 additions & 2 deletions ClickToCall/js/callPopup.js
Expand Up @@ -31,7 +31,21 @@
bbmCallWidget = document.createElement('bbm-call');
await window.customElements.whenDefined('bbm-call');
await BBMEnterprise.validateBrowser();
const authManager = createAuthManager();
const authManager = new AuthenticationManager(AUTH_CONFIGURATION);
// Override getUserId() used by the MockAuthManager.
authManager.getUserId = () => new Promise((resolve, reject) => {
const userEmailDialog = document.createElement('bbm-user-email-dialog');
document.body.appendChild(userEmailDialog);
userEmailDialog.addEventListener('Ok', e => {
userEmailDialog.parentNode.removeChild(userEmailDialog);
resolve(e.detail.userEmail);
});
userEmailDialog.addEventListener('Cancel', () => {
userEmailDialog.parentNode.removeChild(userEmailDialog);
reject('Failed to get user email.');
});
});

const authUserInfo = await authManager.authenticate();

if (!authUserInfo) {
Expand Down Expand Up @@ -59,7 +73,6 @@
const userRegId = bbmeSdk.getRegistrationInfo().regId;
contactsManager = await createUserManager(userRegId,
authManager,
bbmeSdk.getIdentitiesFromAppUserId,
bbmeSdk.getIdentitiesFromAppUserIds);
await contactsManager.initialize();
makeCall(CONTACT_REG_ID, true);
Expand Down
70 changes: 70 additions & 0 deletions ClickToCall/js/config_azure.js
@@ -0,0 +1,70 @@
/*
* Copyright (c) 2018 BlackBerry. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

'use strict';

// Reg Id of the contact to start call with.
const CONTACT_REG_ID = 'contact_reg_id';

// This secret is used to protect user keys. Must be individual for each user.
const USER_SECRET = 'user_secret';

// Refer to the guide to set up your application to use Azure:
// https://developer.blackberry.com/files/bbm-enterprise/documents/guide/html/azureForWebExamples.html

// This domain is a string known to the BBM Enterprise server, which is
// generally a GUID.
// To create a new domain follow the link below
// https://account.good.com/#/a/organization/applications/add
const ID_PROVIDER_DOMAIN = 'your_idp_domain';

// The client ID of application registered on OAuth 2.0 server.
// To set up your application refer to
// https://developer.blackberry.com/files/bbm-enterprise/documents/guide/html/azureIdentityManagement.html
const CLIENT_ID = 'your_client_id';

// The tenant ID of your organization.
// To get your tenant ID refer to
// https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-howto-tenant
const TENANT_ID = 'your_tenant_id';

// =============================================================================
// Configuration below does not require modifications. Change it only if you
// want to change existing application behavior.

// The environment of your BBM Enterprise server. Must be either 'Sandbox' or
// 'Production'.
const ID_PROVIDER_ENVIRONMENT = 'Sandbox';

// The URL or relative path of the Argon2 WASM file.
const KMS_ARGON_WASM_URL = '../../sdk/argon2.wasm';

// This configuration contains service endpoints and information for OAuth2
// authentication.
const AUTH_CONFIGURATION = {
// OAuth 2.0 endpoint for requesting an access token.
authService: `https://login.microsoftonline.com/${TENANT_ID}/oauth2/v2.0/authorize`,

// The client ID of application registered on OAuth 2.0 server
clientId: CLIENT_ID,

// Scopes of OAuth 2.0 access token (which resources it can access)
scope: `api://${CLIENT_ID}/Messaging.All https://graph.microsoft.com/User.ReadWrite https://graph.microsoft.com/User.ReadBasic.All`
};

// Create the user manager for the Click To Call app.
const createUserManager = (userRegId, authManager, getIdentities) =>
Promise.resolve(new AzureUserManager(userRegId, authManager, getIdentities));
61 changes: 23 additions & 38 deletions ClickToCall/js/config.js → ClickToCall/js/config_google.js
Expand Up @@ -19,12 +19,24 @@
// Reg Id of the contact to start call with
const CONTACT_REG_ID = 'contact_reg_id';

// This domain is a string known to the BBM Enterprise server, which is
// This secret is used to protect user keys. Must be individual for each user.
const USER_SECRET = 'user_secret';

// Refer to the guide to set up your application to use Google:
// https://developer.blackberry.com/files/bbm-enterprise/documents/guide/html/googleSignInForWebExamples.html

// This domain is a string known to the BBM Enterprise server, which is
// generally a GUID.
// To create a new domain follow the link below
// https://account.good.com/#/a/organization/applications/add
const ID_PROVIDER_DOMAIN = 'your_idp_domain';

// This secret is used to protect user keys. Must be individual for each user.
const USER_SECRET = 'user_secret';
// The client ID of application registered on OAuth 2.0 server.
const CLIENT_ID = 'your_client_id';

// =============================================================================
// Configuration below does not require modifications. Change it only if you
// want to change existing application behavior.

// The environment of your BBM Enterprise server. Must be either 'Sandbox' or
// 'Production'.
Expand All @@ -37,43 +49,16 @@ const KMS_ARGON_WASM_URL = '../../sdk/argon2.wasm';
// authentication.
const AUTH_CONFIGURATION = {
// OAuth 2.0 endpoint for requesting an access token
// To use google OAuth service, put:
// 'https://accounts.google.com/o/oauth2/v2/auth'
authService : 'your_auth_service_endpoint',

// OAuth 2.0 endpoint for token validation
// To use google toke info service, put:
// 'https://www.googleapis.com/oauth2/v3/tokeninfo'
tokenInfoService : 'your_oauth_token_info_endpoint',

// OAuth 2.0 endpoint for obtaining user information (name, email, avatar URL)
// To use google user info service, put:
// 'https://www.googleapis.com/plus/v1/people/me'
userInfoService : 'your_oauth_user_info_endpoint',

authService : 'https://accounts.google.com/o/oauth2/v2/auth',

// Scopes of OAuth 2.0 access token (which resources it can access)
// If google OAuth service is used, put following scopes:
// 'https://www.googleapis.com/auth/firebase https://www.googleapis.com/auth/userinfo.email'
scope : 'your_scope_oauth',

// The client ID of application registered on OAuth 2.0 server
clientId: 'your_client_id'
};
scope : 'https://www.googleapis.com/auth/contacts',

// Firebase config info
const FIREBASE_CONFIG = {
apiKey: 'your_api_key',
authDomain: 'your_auth_domain',
databaseURL: 'your_database_url',
projectId: 'your_project_id',
storageBucket: 'your_storage_bucket',
messagingSenderId: 'your_messaging_sender_id'
// The client ID of application registered on OAuth 2.0 server.
clientId: CLIENT_ID
};

// Create the auth manager for the Click To Call app.
const createAuthManager = () => new GoogleAuthManager(AUTH_CONFIGURATION);

// Create the user manager for the Click To Call app.
const createUserManager = (userRegId, authManager, getIdentity, getIdentities) =>
FirebaseUserManager.factory.createInstance(FIREBASE_CONFIG,
userRegId, authManager, GenericUserInfo, getIdentity, getIdentities);
const createUserManager = (userRegId, authManager, getIdentities) =>
Promise.resolve(new GooglePeopleUserManager(userRegId, authManager,
getIdentities, AUTH_CONFIGURATION));
47 changes: 47 additions & 0 deletions ClickToCall/js/config_mock.js
@@ -0,0 +1,47 @@
/*
* Copyright (c) 2018 BlackBerry. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

'use strict';

// Reg Id of the contact to start call with
const CONTACT_REG_ID = 'contact_reg_id';

// This domain is a string known to the BBM Enterprise server, which is
// generally a GUID.
// To create a new domain follow the link below
// https://account.good.com/#/a/organization/applications/add
const ID_PROVIDER_DOMAIN = 'your_idp_domain';

// This secret is used to protect user keys. Must be individual for each user.
const USER_SECRET = 'user_secret';

// =============================================================================
// Configuration below does not require modifications. Change it only if you
// want to change existing application behavior.

const AUTH_CONFIGURATION = { };

// The environment of your BBM Enterprise server. Must be either 'Sandbox' or
// 'Production'.
const ID_PROVIDER_ENVIRONMENT = 'Sandbox';

// The URL or relative path of the Argon2 WASM file.
const KMS_ARGON_WASM_URL = '../../sdk/argon2.wasm';

// Create the user manager for the Click To Call app.
const createUserManager = (userRegId, authManager, getIdentities) =>
Promise.resolve(new MockUserManager(userRegId, authManager, getIdentities,
ID_PROVIDER_DOMAIN));
6 changes: 3 additions & 3 deletions ClickToCall/js/index.js
Expand Up @@ -21,8 +21,8 @@
* of how to implement generic Click To Call functionality using bbm-call UI
* widget.
*
* When user clicks "Start Secure Call" button, application will start BBME
* call with the hard coded user RegId (CONTACT_REG_ID).
* When the user clicks the "Start Secure Call" button, the application will
* start a call with the hard coded user RegId (CONTACT_REG_ID).
*
* @class ClickToCall
* @memberof Examples
Expand All @@ -37,4 +37,4 @@ function makeCall() {
alert('Failed to create popup window. Please check that your browser' +
' allows popups on this page.');
}
}
}
3 changes: 2 additions & 1 deletion ClickToCall/package.json
Expand Up @@ -4,6 +4,7 @@
"version": "1.0.0",
"main": "index.html",
"dependencies": {
"bbmCall": "file:../support/ui/widgets/bbmCall"
"bbmCall": "file:../support/ui/widgets/bbmCall",
"bbmUserEmailDialog": "file:../support/ui/widgets/bbmUserEmailDialog"
}
}

0 comments on commit f73ad19

Please sign in to comment.