ds00424/rcOauthCallbackEx.html

## 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>

## 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>