├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── screenshot.png
└── webex-auth.html


/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | All notable changes to this project will be documented in this file.
 2 | We follow the [Semantic Versioning 2.0.0](http://semver.org/) format.
 3 | 
 4 | ## 2.0.0 - 2018-9-10
 5 | 
 6 | ### Added
 7 | 
 8 | ### Deprecated
 9 | 
10 | ### Fixed
11 | - Update 'Spark' to 'Webex Teams' where appropriate
12 | 
13 | ### Added
14 | - Initial release
15 | 
16 | ### Deprecated
17 | 
18 | ### Removed
19 | 
20 | ### Fixed
21 | 
22 | ## 1.1.0 - 2015-12-07
23 | 
24 | ### Added
25 | - Initial release
26 | 
27 | ### Deprecated
28 | 
29 | ### Removed
30 | 
31 | ### Fixed
32 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Guidance on how to contribute
 2 | 
 3 | > All contributions to this project will be released under the Apache 2.0 License.
 4 | > By submitting a pull request or filing a bug, issue, or
 5 | > feature request, you are agreeing to comply with this waiver of copyright interest.
 6 | > Details can be found in our [LICENCE](LICENSE).
 7 | 
 8 | 
 9 | There are two primary ways to help:
10 |  - Using the issue tracker, and
11 |  - Changing the code-base.
12 | 
13 | 
14 | ## Using the issue tracker
15 | 
16 | Use the issue tracker to suggest feature requests, report bugs, and ask questions.
17 | This is also a great way to connect with the developers of the project as well
18 | as others who are interested in this solution.
19 | 
20 | Use the issue tracker to find ways to contribute. Find a bug or a feature, mention in
21 | the issue that you will take on that effort, then follow the _Changing the code-base_
22 | guidance below.
23 | 
24 | 
25 | ## Changing the code-base
26 | 
27 | Generally speaking, you should fork this repository, make changes in your
28 | own fork, and then submit a pull-request. All new code should have associated unit
29 | tests that validate implemented features and the presence or lack of defects.
30 | Additionally, the code should follow any stylistic and architectural guidelines
31 | prescribed by the project. In the absence of such guidelines, mimic the styles
32 | and patterns in the existing code-base.
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 |                            CISCO SAMPLE CODE LICENSE
 2 |                                   Version 1.1
 3 |                 Copyright (c) 2018 Cisco and/or its affiliates
 4 | 
 5 |    These terms govern this Cisco Systems, Inc. ("Cisco"), example or demo
 6 |    source code and its associated documentation (together, the "Sample
 7 |    Code"). By downloading, copying, modifying, compiling, or redistributing
 8 |    the Sample Code, you accept and agree to be bound by the following terms
 9 |    and conditions (the "License"). If you are accepting the License on
10 |    behalf of an entity, you represent that you have the authority to do so
11 |    (either you or the entity, "you"). Sample Code is not supported by Cisco
12 |    TAC and is not tested for quality or performance. This is your only
13 |    license to the Sample Code and all rights not expressly granted are
14 |    reserved.
15 | 
16 |    1. LICENSE GRANT: Subject to the terms and conditions of this License,
17 |       Cisco hereby grants to you a perpetual, worldwide, non-exclusive, non-
18 |       transferable, non-sublicensable, royalty-free license to copy and
19 |       modify the Sample Code in source code form, and compile and
20 |       redistribute the Sample Code in binary/object code or other executable
21 |       forms, in whole or in part, solely for use with Cisco products and
22 |       services. For interpreted languages like Java and Python, the
23 |       executable form of the software may include source code and
24 |       compilation is not required.
25 | 
26 |    2. CONDITIONS: You shall not use the Sample Code independent of, or to
27 |       replicate or compete with, a Cisco product or service. Cisco products
28 |       and services are licensed under their own separate terms and you shall
29 |       not use the Sample Code in any way that violates or is inconsistent
30 |       with those terms (for more information, please visit:
31 |       www.cisco.com/go/terms).
32 | 
33 |    3. OWNERSHIP: Cisco retains sole and exclusive ownership of the Sample
34 |       Code, including all intellectual property rights therein, except with
35 |       respect to any third-party material that may be used in or by the
36 |       Sample Code. Any such third-party material is licensed under its own
37 |       separate terms (such as an open source license) and all use must be in
38 |       full accordance with the applicable license. This License does not
39 |       grant you permission to use any trade names, trademarks, service
40 |       marks, or product names of Cisco. If you provide any feedback to Cisco
41 |       regarding the Sample Code, you agree that Cisco, its partners, and its
42 |       customers shall be free to use and incorporate such feedback into the
43 |       Sample Code, and Cisco products and services, for any purpose, and
44 |       without restriction, payment, or additional consideration of any kind.
45 |       If you initiate or participate in any litigation against Cisco, its
46 |       partners, or its customers (including cross-claims and counter-claims)
47 |       alleging that the Sample Code and/or its use infringe any patent,
48 |       copyright, or other intellectual property right, then all rights
49 |       granted to you under this License shall terminate immediately without
50 |       notice.
51 | 
52 |    4. LIMITATION OF LIABILITY: CISCO SHALL HAVE NO LIABILITY IN CONNECTION
53 |       WITH OR RELATING TO THIS LICENSE OR USE OF THE SAMPLE CODE, FOR
54 |       DAMAGES OF ANY KIND, INCLUDING BUT NOT LIMITED TO DIRECT, INCIDENTAL,
55 |       AND CONSEQUENTIAL DAMAGES, OR FOR ANY LOSS OF USE, DATA, INFORMATION,
56 |       PROFITS, BUSINESS, OR GOODWILL, HOWEVER CAUSED, EVEN IF ADVISED OF THE
57 |       POSSIBILITY OF SUCH DAMAGES.
58 | 
59 |    5. DISCLAIMER OF WARRANTY: SAMPLE CODE IS INTENDED FOR EXAMPLE PURPOSES
60 |       ONLY AND IS PROVIDED BY CISCO "AS IS" WITH ALL FAULTS AND WITHOUT
61 |       WARRANTY OR SUPPORT OF ANY KIND. TO THE MAXIMUM EXTENT PERMITTED BY
62 |       LAW, ALL EXPRESS AND IMPLIED CONDITIONS, REPRESENTATIONS, AND
63 |       WARRANTIES INCLUDING, WITHOUT LIMITATION, ANY IMPLIED WARRANTY OR
64 |       CONDITION OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-
65 |       INFRINGEMENT, SATISFACTORY QUALITY, NON-INTERFERENCE, AND ACCURACY,
66 |       ARE HEREBY EXCLUDED AND EXPRESSLY DISCLAIMED BY CISCO. CISCO DOES NOT
67 |       WARRANT THAT THE SAMPLE CODE IS SUITABLE FOR PRODUCTION OR COMMERCIAL
68 |       USE, WILL OPERATE PROPERLY, IS ACCURATE OR COMPLETE, OR IS WITHOUT
69 |       ERROR OR DEFECT.
70 | 
71 |    6. GENERAL: This License shall be governed by and interpreted in
72 |       accordance with the laws of the State of California, excluding its
73 |       conflict of laws provisions. You agree to comply with all applicable
74 |       United States export laws, rules, and regulations. If any provision of
75 |       this License is judged illegal, invalid, or otherwise unenforceable,
76 |       that provision shall be severed and the rest of the License shall
77 |       remain in full force and effect. No failure by Cisco to enforce any of
78 |       its rights related to the Sample Code or to a breach of this License
79 |       in a particular situation will act as a waiver of such rights. In the
80 |       event of any inconsistencies with any other terms, this License shall
81 |       take precedence.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # webex-auth-sample
 2 | 
 3 | ## Description
 4 | 
 5 | A simple application demonstrating how to retrieve a Cisco Webex OAuth2 token for use with the Cisco Webex APIs.
 6 | 
 7 |   - **Technology stack**: HTML/JavaScript
 8 | 
 9 |   - **Status**:  v1.0 [CHANGELOG](CHANGELOG.md)
10 | 
11 | ## Demo
12 | 
13 | A live demo of the project can be viewed on GitHub. Please follow the link below:
14 | 
15 | - [Webex Auth Sample Live Demo](https://webexsamples.github.io/webex-auth-sample/webex-auth.html)
16 | 
17 | To test this with a live integration, make sure to add `https://webexsamples.github.io/webex-auth-sample/webex-auth.html` to your redirect URIs on the [Developer Portal](https://developer.webex.com/my-apps).
18 | 
19 | ## Installation
20 | 
21 | * From a terminal, clone this repo to your local PC:
22 | 
23 |     ```bash
24 |     git clone https://github.com/WebexSamples/webex-auth-sample.git
25 |     ```
26 | 
27 | * The HTML page must be served from a web server (not just opened from the local file system).  
28 | 
29 |     If you have Node.js and NPM v5.2+, you can run the following from the root of this repo to start a simple web server serving everything in the current directory:
30 | 
31 |     ```bash
32 |     cd webex-auth-sample
33 |     npx http-server
34 |     ```
35 | 
36 |     ```bash
37 |     #Example response
38 |     npx: installed 23 in 3.334s
39 |     Starting up http-server, serving ./
40 |     Available on:
41 |     http://127.0.0.1:8080
42 |     http://10.99.58.21:8080
43 |     http://172.16.255.1:8080
44 |     http://192.168.52.1:8080
45 |     Hit CTRL-C to stop the server
46 |     ```
47 | 
48 | ## Usage
49 | 
50 | - Register a Webex 'integration' application at [https://developer.webex.com/my-apps](https://developer.webex.com/my-apps)
51 | 
52 | - The **Redirect URI** provided during registration should be the URL where this sample app page will be hosted, which can be a 'localhost' URL, e.g.:
53 | 
54 |     ```
55 |     http://127.0.0.1:8080/webex-auth.html
56 |     ```
57 | 
58 | - **Scopes** should include, at minimum, `spark:rooms_read` (note `spark:all` will not work)
59 | 
60 | - The application **Client ID** and **Client Secret** generated during registration are required to run the app - the secret will only be displayed once.  Make a note of these two values to run the sample
61 | 
62 | ## Getting help
63 | 
64 | * Webex developer support: [https://developer.webex.com/support](https://developer.webex.com/support)
65 | 
66 | ## Getting involved
67 | 
68 | Suggestions and enhancements welcome, see [CONTRIBUTING](CONTRIBUTING.md).
69 | 
70 | ----
71 | 
72 | ## Open source licensing info
73 | [LICENSE](LICENSE)
74 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WebexSamples/webex-auth-sample/fb92046614dc382b8e00ac94c5868b93ee039c16/screenshot.png


--------------------------------------------------------------------------------
/webex-auth.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <script type="text/javascript">
  4 | //Sample application demonstrating how to perform a Webex OAuth2 authentication and Webex API access token request
  5 | //Note: this page must be accessed from a web server, Step #3 below may fail if loaded from the file system
  6 | 
  7 | // Helper function that generates a random alpha/numeric string
  8 | var randomString = function(length) {
  9 |     var str = "";
 10 |     var range = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 11 |     for(var i = 0; i < length; i++) {
 12 |         str += range.charAt(Math.floor(Math.random() * range.length));
 13 |     }
 14 |     return str;
 15 | }
 16 | 
 17 | // Helper function that parses a query string into a dictionary object
 18 | var parseQueryStr = function( queryString) {
 19 |     var params = {}, keyvals, temp, i, l;
 20 |     keyvals = queryString.split("&");  // Split out key/value pairs
 21 |     for ( i = 0, l = keyvals.length; i < l; i++ ) {  // Split key/value strings into a dictionary object
 22 |         tmp = keyvals[i].split('=');
 23 |         params[tmp[0]] = tmp[1];
 24 |     }
 25 |     return params;
 26 | };
 27 | 
 28 | // Step #1: Fires when the user clicks the 'Request Auth Code' button
 29 | function codeClick() {
 30 |     var appClientId = document.getElementById('clientId').value;
 31 |     var appRedirectUri = document.getElementById('redirectUri').value;
 32 |     var appOAuthScopes = document.getElementById('oauthScopes').value;
 33 |     var appStateValue = document.getElementById('stateValue').value;
 34 | 	
 35 | 	// Store client id and secret in localstorage (NOTE: THIS IS NOT A SECURE WAY TO STORE SECRETS)
 36 | 	var appClientSecret=document.getElementById('clientSecret').value;
 37 | 	localStorage.setItem('appClientId', appClientId);
 38 | 	localStorage.setItem('clientSecret', appClientSecret);
 39 | 
 40 |     //Build the request URL.
 41 |     var requestUrl = 'https://webexapis.com/v1/authorize?' + 
 42 |         'response_type=code&' + 
 43 |         'scope=' + encodeURIComponent(appOAuthScopes) + '&' + 
 44 |         'state=' + encodeURIComponent(appStateValue) + '&' +    
 45 |         'client_id=' + encodeURIComponent(appClientId) + '&' + 
 46 |         'redirect_uri=' + encodeURIComponent(appRedirectUri); 
 47 |     window.location = requestUrl; 
 48 | }
 49 | 
 50 | // Step #2: On page load, check if the 'code=' query param is present
 51 | // If so user has already authenticated, and  page has been reloaded via the Redirect URI
 52 | window.onload = function(e) {
 53 |     document.getElementById('redirectUri').value = window.location.href.split("?")[0]; // Detect the current page's base URL
 54 | 
 55 | 	// Write back the values if they are available
 56 | 	document.getElementById('clientId').value = localStorage.getItem('appClientId');
 57 | 	document.getElementById('clientSecret').value = localStorage.getItem('clientSecret');
 58 | 
 59 | 
 60 |     var params = parseQueryStr(window.location.search.substring(1)); // Parse the query string params into a dictionary
 61 |     if (params['code']) { // If the query param 'code' exists, then...
 62 |         document.getElementById('code').value = params['code']; // Display the auth code
 63 |         document.getElementById('tokenButton').removeAttribute('hidden'); // Reveal the 'Request Access Token' button
 64 |     }
 65 |     if (params['state']) { // If the query param 'state' exists, then...
 66 |         document.getElementById('stateDisplay').value = params['state']; // Display the state parameter
 67 |     }
 68 |     if (params['error']) { // If the query param 'error' exists, then something went wrong...
 69 |         alert('Error requesting auth code: ' + params['error'] + ' / ' + params['error_description']);
 70 |     }
 71 | }
 72 | 
 73 | // Step #3: Fires when the user clicks the 'Request Access Token' button
 74 | // Takes the auth code and requests an access token
 75 | function tokenClick() {
 76 |     var appClientId = document.getElementById('clientId').value;
 77 |     var appClientSecret = document.getElementById('clientSecret').value;
 78 |     var appRedirectUri = document.getElementById('redirectUri').value;
 79 |     var appStateValue = document.getElementById('stateValue').value;
 80 | 
 81 |     var xhttp = new XMLHttpRequest(); // Create an AJAX HTTP request object
 82 |     xhttp.onreadystatechange = function() {  // Define a handler, which fires when the request completes
 83 |         if (xhttp.readyState == 4) { // If the request state = 4 (completed)...
 84 |             if (xhttp.status == 200) { // And the status = 200 (OK), then...
 85 |                 var authInfo = JSON.parse(xhttp.responseText); // Parse the JSON response into an object
 86 |                 document.getElementById('token').value = authInfo['access_token']; // Retrieve the access_token field, and display it
 87 |                 document.getElementById('refresh').value = authInfo['refresh_token']; // Retrieve the refresh_token field, and display it
 88 | 
 89 | 				if (document.getElementById('token').value) {
 90 | 					document.getElementById('tokenRefReshButton').removeAttribute('hidden'); // Reveal the 'Refresh Access Token' button
 91 | 				}
 92 |             } else alert('Error requesting access token: ' + xhttp.statusText)
 93 |          }
 94 |     }
 95 |     xhttp.open('POST', 'https://webexapis.com/v1/access_token', true); // Initialize the HTTP request object for POST to the access token URL
 96 |     // Build the HTML form request body 
 97 |     var body = 'grant_type=authorization_code&'+  // This is an OAuth2 Authorization Code request
 98 |         'state=' + encodeURIComponent(appStateValue) + '&' +
 99 |         'redirect_uri='+encodeURIComponent(appRedirectUri)+'&'+ // Same custom app Redirect URI 
100 |         'code='+encodeURIComponent(document.getElementById('code').value)+'&'+ // User auth code retrieved previously
101 |         'client_id='+encodeURIComponent(appClientId)+'&'+ // The custom app Client ID
102 |         'client_secret='+encodeURIComponent(appClientSecret); // The custom app Client Secret
103 |     xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Sending the content as URL-encoded form data
104 |     xhttp.send(body); // Execute the AJAX HTTP request
105 | }
106 | 
107 | 
108 | // Step #4: Fires when the user clicks the 'Refresh Access Token' button
109 | // Takes the auth code and requests an access token
110 | function tokenRefreshClick() {
111 | 	var appClientId=document.getElementById('clientId').value;
112 | 	var appClientSecret=document.getElementById('clientSecret').value;
113 | 	var appRedirectUri=document.getElementById('redirectUri').value;
114 | 
115 | 	xhttp = new XMLHttpRequest(); // Create an AJAX HTTP request object
116 | 	xhttp.onreadystatechange = function() {  // Define a handler, which fires when the request completes
117 | 		if (xhttp.readyState == 4) { // If the request state = 4 (completed)...
118 | 			if (xhttp.status == 200) { // And the status = 200 (OK), then...
119 | 				var authInfo = JSON.parse(xhttp.responseText); // Parse the JSON response into an object
120 | 				document.getElementById('token').value = authInfo['access_token']; // Retrieve the access_token field, and display it
121 |                 document.getElementById('refresh').value = authInfo['refresh_token']; // Retrieve the refresh_token field, and display it
122 | 			} else alert('Error requesting access token: ' + xhttp.statusText)
123 |  		}
124 | 	}
125 | 	xhttp.open('POST', 'https://webexapis.com/v1/access_token', true); // Initialize the HTTP request object for POST to the access token URL
126 | 	// Build the HTML form request body 
127 | 	var body = 'grant_type=refresh_token&'+  // This is an OAuth2 Authorization Code request		
128 | 		'refresh_token='+encodeURIComponent(document.getElementById('refresh').value)+'&'+ // User auth code retrieved previously
129 | 		'client_id='+encodeURIComponent(appClientId)+'&'+ // The custom app Client ID
130 | 		'client_secret='+encodeURIComponent(appClientSecret); // The custom app Client Secret
131 | 	xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Sending the content as URL-encoded form data
132 | 	xhttp.send(body); // Execute the AJAX HTTP request
133 | }
134 | </script>
135 | 
136 | <style type="text/css">
137 | body {font: 14px/1.55 'CiscoSansLight', Arial,'Liberation Sans',FreeSans,sans-serif;}
138 | .glasspane {background: #049fd9; height: 40px; width: 850px; display: inline; float: left;}
139 | .glasspane h1 {opacity: 1; color: #fff; margin-top: 2px; margin-bottom: 0; font-weight: normal; font-size:25px; padding-left:10px}
140 | .table {margin: 10px 0 0 0; float:left; background-color: #eee; padding: 10px;}
141 | td:first-child {width: 116px;}
142 | input, textarea {width: 700px; display: block;}
143 | textarea {height: 140px;}
144 | .wrapper {width: 900px; float:left;}
145 | </style>
146 | 
147 | 	<head>
148 | 		<title>Webex APIs Authentication Demo</title>
149 | 	</head>
150 | 	<body>
151 | 		<div class="wrapper">
152 | 			<div class="glasspane">
153 | 				<h1>Webex APIs Authentication Demo</h1>
154 | 			</div>
155 | 			<div class="table">
156 | 				<table>
157 | 					<tr>
158 | 						<td>Client ID:</td>
159 | 						<td><input id="clientId"/></td>
160 | 					</tr>
161 | 					<tr>
162 | 						<td>Client Secret:</td>
163 | 						<td><input id="clientSecret"/></td>
164 | 					</tr>
165 | 					<tr>
166 | 						<td>OAuth Scopes:</td>
167 | 						<td><input id="oauthScopes" value="spark:rooms_read"/></td>
168 | 					</tr>
169 | 					<tr>
170 | 						<td>State:</td>
171 | 						<td><input id="stateValue" value="MyAuthState"/></td>
172 | 					</tr>
173 | 					<tr>
174 | 						<td>Redirect URI:</td> 
175 | 						<td><input id="redirectUri"/><button name="codeButton" type="button" onClick="codeClick()">Request Auth Code</button></td>
176 | 					</tr>
177 | 				</table>
178 | 			</div>
179 | 				
180 | 			<div class="table">
181 | 				<table>
182 | 					<tr>
183 | 						<td>Returned State:</td>
184 | 						<td><input id="stateDisplay" readonly/></td>
185 | 					</tr>
186 | 					<tr>
187 | 						<td>Auth Code:</td>
188 | 						<td><input id="code" readonly/> <button id="tokenButton" type="button" hidden onClick="tokenClick()">Request Access Token</button></td>
189 | 					</tr>
190 | 				</table>
191 | 			</div>
192 | 			
193 | 			<div class="table">
194 | 				<table>
195 | 					<tr>
196 | 						<td>Access Token:</td> 
197 | 						<td><textarea id="token" readonly style="vertical-align: top"></textarea></td>
198 | 					</tr>
199 | 					<tr>
200 | 						<td>Refresh Token:</td> 
201 | 						<td><textarea id="refresh" readonly style="vertical-align: top"></textarea></td>
202 | 					</tr>            
203 | 				</table>
204 | 			</div>
205 | 
206 | 			<div class="table">
207 | 				<table>
208 | 					<tr>
209 | 						<td>Refresh the token:</td>
210 | 						<td><button id="tokenRefReshButton" type="button" hidden onClick="tokenRefreshClick()">Refresh Access Token</button></td>
211 | 					</tr>				
212 | 				</table>
213 | 			</div>
214 | 		</div>
215 | 	</body>
216 | </html>
217 | 


--------------------------------------------------------------------------------