ds00424 · February 16, 2022 17:24
diff --git a/rcOauthCallbackEx.html b/rcOauthCallbackEx.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8"/>
 		<title>3-legged OAuth Redirect Handler</title>
 	</head>
 	<body>
 		<script type="text/javascript" src="https://unpkg.com/@ringcentral/sdk@latest/dist/ringcentral.min.js"></script>
 		<script>
 			// Here we implement the RingCentral OAuth2 PKCE login using the Top Frame Setup as described on:
 			// https://github.com/ringcentral/ringcentral-js/tree/master/sdk
 			// This file is the redirectUri and is redirected to from the RC loginUrl.
 			// As there is NO window.opener (we *navigated* to loginUrl), the standard popup flow does not work.
 			// So this code must now take the query params provided and call Ring Central login().
 			// But since we are using PKCE, we need the code_verifier created on the previous page - which is not longer loaded
 			// The previous page should have gotten the cv from rcsdk and saved it to local storage so we can read it here
 			// and pass to login.
 			// Reminder: This URL must be registered with RingCentral
 			var rcsdk = new RingCentral.SDK({
 				server: "https://platform.devtest.ringcentral.com",
 				redirectUri: "YOUR_REDIRECTURI_HERE",
 				clientId: "YOUR_CLIENT_ID_HERE",
 			});
 			
 			var loginOptions = rcsdk.parseLoginRedirect(window.location.hash || window.location.search);
 			loginOptions.code_verifier = localStorage.getItem("rcCodeVerifier");		// read the cv from local storage
 			localStorage.removeItem('rcCodeVerifier');									// remove the cv from local storage
 			rcsdk.login(loginOptions)													// call RC login
 			.then(function(ret) {
 				console.log("RC Login() return:");
 				console.log(ret);
 				// Here if all good, we could navigate back to the main page
 			}).catch(function(e) {
 				alert("Login error " + e.message);
 			});
 			
 			// Once the login() completes successfully, we can reload the main page and when rcsdk.platform().loggedIn() is called
 			// we should find that we are logged in. :-)
 		</script>
 	</body>
 </html>
diff --git a/ringCentralOAuthEx.html b/ringCentralOAuthEx.html
 <!DOCTYPE html>
 <html  lang="en">
 	<head>
 		<meta charset="UTF-8"/>
 		<title>3-legged OAuth - PKCE Top frame setup</title>
 	</head>
 	<body>
 		<button id="rcLogin">Login</button>
 		<div id='LoginStatus'>RC NOT logged in</div>
 		<button id="rcLogout">Logout</button>
 		<div id='LogoutStatus'></div>
 	
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 		<script type="text/javascript" src="https://unpkg.com/es6-promise@latest/dist/es6-promise.auto.js"></script>
 		<script type="text/javascript" src="https://unpkg.com/whatwg-fetch@latest/dist/fetch.umd.js"></script>
 		<script type="text/javascript" src="https://unpkg.com/@ringcentral/sdk@latest/dist/ringcentral.min.js"></script>
 		<script type="text/javascript">
 			// Here we implement the RingCentral OAuth2 PKCE login using the Top Frame Setup as described on:
 			// https://github.com/ringcentral/ringcentral-js/tree/master/sdk
 			// Note that this flow will *navigate* to the loginUrl and NOT open a popup
 			// this creates a challenge when using PKCE as the code_verifier is created here
 			// But the we navigate away from this page and the flow is resumed in the redirectUrl
 			// So we must save the PKCE code_verifier to local storage and read it again i the redirectUrl.
 			$(document).ready(function() {
 				var rcsdk = new RingCentral.SDK({
 					server: "https://platform.devtest.ringcentral.com",
 					redirectUri: "YOUR_REDIRECTURI_HERE",
 					clientId: "YOUR_CLIENT_ID_HERE",
 				});
 				
 				$("#rcLogin").click(function() {
 					rcsdk.platform().loggedIn()
 					.then(function(status) {
 						if (status) {												// if already logged in
 							$("#LoginStatus").html("RC logged in");
 							$("#rcLogin").prop("disabled", true);
 							return true;
 						} else {													// If not logged in
 							var loginUrl = rcsdk.loginUrl({ usePKCE: true });		// get the login URL
 							var cv = rcsdk.platform().codeVerifier;
 							localStorage.setItem('rcCodeVerifier', cv);
 							window.location.assign(loginUrl);
 							return true;
 						}
 					});
 				});
 				
 				$("#rcLogout").click(function() {
 					rcsdk.logout()
 					.then(function() {
 						$("#LoginStatus").html("RC NOT logged in");
 						$("#rcLogin").prop("disabled", false);
 					}).catch(function(e) {
 						alert("Logout error " + e.message);
 					});
 				});

 			});
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8"/>
	<title>3-legged OAuth Redirect Handler</title>
	</head>
	<body>
	<script type="text/javascript" src="https://unpkg.com/@ringcentral/sdk@latest/dist/ringcentral.min.js"></script>
	<script>
	// Here we implement the RingCentral OAuth2 PKCE login using the Top Frame Setup as described on:
	// https://github.com/ringcentral/ringcentral-js/tree/master/sdk
	// This file is the redirectUri and is redirected to from the RC loginUrl.
	// As there is NO window.opener (we navigated to loginUrl), the standard popup flow does not work.
	// So this code must now take the query params provided and call Ring Central login().
	// But since we are using PKCE, we need the code_verifier created on the previous page - which is not longer loaded
	// The previous page should have gotten the cv from rcsdk and saved it to local storage so we can read it here
	// and pass to login.
	// Reminder: This URL must be registered with RingCentral
	var rcsdk = new RingCentral.SDK({
	server: "https://platform.devtest.ringcentral.com",
	redirectUri: "YOUR_REDIRECTURI_HERE",
	clientId: "YOUR_CLIENT_ID_HERE",
	});

	var loginOptions = rcsdk.parseLoginRedirect(window.location.hash \|\| window.location.search);
	loginOptions.code_verifier = localStorage.getItem("rcCodeVerifier"); // read the cv from local storage
	localStorage.removeItem('rcCodeVerifier'); // remove the cv from local storage
	rcsdk.login(loginOptions) // call RC login
	.then(function(ret) {
	console.log("RC Login() return:");
	console.log(ret);
	// Here if all good, we could navigate back to the main page
	}).catch(function(e) {
	alert("Login error " + e.message);
	});

	// Once the login() completes successfully, we can reload the main page and when rcsdk.platform().loggedIn() is called
	// we should find that we are logged in. :-)
	</script>
	</body>
	</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8"/>
	<title>3-legged OAuth - PKCE Top frame setup</title>
	</head>
	<body>
	<button id="rcLogin">Login</button>
	<div id='LoginStatus'>RC NOT logged in</div>
	<button id="rcLogout">Logout</button>
	<div id='LogoutStatus'></div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://unpkg.com/es6-promise@latest/dist/es6-promise.auto.js"></script>
	<script type="text/javascript" src="https://unpkg.com/whatwg-fetch@latest/dist/fetch.umd.js"></script>
	<script type="text/javascript" src="https://unpkg.com/@ringcentral/sdk@latest/dist/ringcentral.min.js"></script>
	<script type="text/javascript">
	// Here we implement the RingCentral OAuth2 PKCE login using the Top Frame Setup as described on:
	// https://github.com/ringcentral/ringcentral-js/tree/master/sdk
	// Note that this flow will navigate to the loginUrl and NOT open a popup
	// this creates a challenge when using PKCE as the code_verifier is created here
	// But the we navigate away from this page and the flow is resumed in the redirectUrl
	// So we must save the PKCE code_verifier to local storage and read it again i the redirectUrl.
	$(document).ready(function() {
	var rcsdk = new RingCentral.SDK({
	server: "https://platform.devtest.ringcentral.com",
	redirectUri: "YOUR_REDIRECTURI_HERE",
	clientId: "YOUR_CLIENT_ID_HERE",
	});

	$("#rcLogin").click(function() {
	rcsdk.platform().loggedIn()
	.then(function(status) {
	if (status) { // if already logged in
	$("#LoginStatus").html("RC logged in");
	$("#rcLogin").prop("disabled", true);
	return true;
	} else { // If not logged in
	var loginUrl = rcsdk.loginUrl({ usePKCE: true }); // get the login URL
	var cv = rcsdk.platform().codeVerifier;
	localStorage.setItem('rcCodeVerifier', cv);
	window.location.assign(loginUrl);
	return true;
	}
	});
	});

	$("#rcLogout").click(function() {
	rcsdk.logout()
	.then(function() {
	$("#LoginStatus").html("RC NOT logged in");
	$("#rcLogin").prop("disabled", false);
	}).catch(function(e) {
	alert("Logout error " + e.message);
	});
	});

	});
	</script>
	</body>
	</html>