Login with native functions

Canvas allows you to display a login screen when the app is opened, requiring users to log in before they can access the app content.

In order to dismiss the login screen after a successful login, you can use the “login” native function.

By calling the nativeFunctions.login() function the app will immediately dismiss the login screen and reload the app, updating all the content for the user who is now logged in.

Here is an example of how to use the login native function:

<script type="text/javascript">
	// Add the event listener
	window.addEventListener("message", (event) => {
		isAppReady = event;
	}, false);

	// Log the user in
	function loginApp(isAppReady) {
		try {
			// Check if the native functions are ready to be used
			if (isAppReady.data && isAppReady.data == 'nativeFunctionsLoaded') {
				nativeFunctions.login();
			}

		} catch (ex) {
			console.log(ex.message);
		}
	}
</script>
			
<button onClick="loginApp(isAppReady)">Log me in</button>

Keep in mind that dismissing the login screen and updating the content is all that the app does in this case, cookies and sessions should still be managed by your website.

You will also want to trigger the “logout” event when a page is loaded and the user is logged out, so the app can display the login screen again.