CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <script src="https://cdn.usefathom.com/script.js" data-site="AXHBWSDY" defer></script> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />  <title>Single-Page Apps - OAuth 2.0 Simplified</title> <meta name="description" content="Since the entire source is available to the browser, single-page apps cannot maintain the confidentiality of a client secret, so the secret is not used." /> <link rel="canonical" href="/oauth2-servers/single-page-apps/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Single-Page Apps - OAuth 2.0 Simplified" /> <meta property="og:description" content="Since the entire source is available to the browser, single-page apps cannot maintain the confidentiality of a client secret, so the secret is not used." /> <meta property="og:url" content="/oauth2-servers/single-page-apps/" /> <meta property="og:site_name" content="OAuth 2.0 Simplified" /> <meta property="article:modified_time" content="2021-12-16T20:18:34+00:00" /> <meta property="og:image" content="/wp-content/uploads/2016/08/okta_oauth-diagrams_20170622-01-1.png" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:label1" content="Est. reading time" /> <meta name="twitter:data1" content="7 minutes" /> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"/#website","url":"/","name":"OAuth 2.0 Simplified","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"/oauth2-servers/single-page-apps/#primaryimage","url":"/wp-content/uploads/2016/08/okta_oauth-diagrams_20170622-01-1.png","contentUrl":"/wp-content/uploads/2016/08/okta_oauth-diagrams_20170622-01-1.png","width":752,"height":428},{"@type":"WebPage","@id":"/oauth2-servers/single-page-apps/#webpage","url":"/oauth2-servers/single-page-apps/","name":"Single-Page Apps - OAuth 2.0 Simplified","isPartOf":{"@id":"/#website"},"primaryImageOfPage":{"@id":"/oauth2-servers/single-page-apps/#primaryimage"},"datePublished":"2016-08-10T01:50:21+00:00","dateModified":"2021-12-16T20:18:34+00:00","description":"Since the entire source is available to the browser, single-page apps cannot maintain the confidentiality of a client secret, so the secret is not used.","breadcrumb":{"@id":"/oauth2-servers/single-page-apps/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["/oauth2-servers/single-page-apps/"]}]},{"@type":"BreadcrumbList","@id":"/oauth2-servers/single-page-apps/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"/"},{"@type":"ListItem","position":2,"name":"OAuth.com","item":"/"},{"@type":"ListItem","position":3,"name":"Single-Page Apps"}]}]}</script>  <link rel='dns-prefetch' href='//ajax.googleapis.com' /> <link rel='dns-prefetch' href='//www.oauth.com' /> <link rel='dns-prefetch' href='//fonts.googleapis.com' /> <link rel='dns-prefetch' href='//s.w.org' /> <link rel="alternate" type="application/rss+xml" title="OAuth 2.0 Simplified » Feed" href="/feed/" /> <link rel="shortcut icon" type="image/x-icon" href="/wp-content/themes/oauthdotcom/favicon.ico" /><script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/www.oauth.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.0.3"}}; /*! This file is auto-generated */ !function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode,e=(p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0),i.toDataURL());return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([129777,127995,8205,129778,127999],[129777,127995,8203,129778,127999])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(e=t.source||{}).concatemoji?c(e.concatemoji):e.wpemoji&&e.twemoji&&(c(e.twemoji),c(e.wpemoji)))}(window,document,window._wpemojiSettings); </script> <style> .themify_builder .wow { visibility: hidden; } div:not(.caroufredsel_wrapper) > .themify_builder_slider > li:not(:first-child), .mfp-hide { display: none; } a.themify_lightbox, .module-gallery a, .gallery-icon, .themify_lightboxed_images .post a[href$="jpg"], .themify_lightboxed_images .post a[href$="gif"], .themify_lightboxed_images .post a[href$="png"], .themify_lightboxed_images .post a[href$="JPG"], .themify_lightboxed_images .post a[href$="GIF"], .themify_lightboxed_images .post a[href$="PNG"], .themify_lightboxed_images .post a[href$="jpeg"], .themify_lightboxed_images .post a[href$="JPEG"] { cursor:not-allowed; } .themify_lightbox_loaded a.themify_lightbox, .themify_lightbox_loaded .module-gallery a, .themify_lightbox_loaded .gallery-icon { cursor:pointer; } </style><style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='themify-common-css' href='/wp-content/themes/themify-ultra/themify/css/themify.common.min.css?ver=4.7.7' type='text/css' media='all' /> <meta name="themify-framework-css" data-href="/wp-content/themes/themify-ultra/themify/css/themify.framework.min.css?ver=4.7.7" content="themify-framework-css" id="themify-framework-css" /><meta name="builder-styles-css" data-href="/wp-content/themes/themify-ultra/themify/themify-builder/css/themify-builder-style.min.css?ver=4.7.7" content="builder-styles-css" id="builder-styles-css" /> <link rel='stylesheet' id='wp-block-library-css' href='/wp-includes/css/dist/block-library/style.min.css?ver=6.0.3' type='text/css' media='all' /> <style id='global-styles-inline-css' type='text/css'> body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} </style> <link rel='stylesheet' id='theme-style-css' href='/wp-content/themes/themify-ultra/style.min.css?ver=1.0.0' type='text/css' media='all' /> <link rel='stylesheet' id='themify-media-queries-css' href='/wp-content/themes/themify-ultra/media-queries.min.css?ver=1.0.0' type='text/css' media='all' /> <link rel='stylesheet' id='ultra-header-css' href='/wp-content/themes/themify-ultra/styles/header-slide-out.min.css?ver=1.0.0' type='text/css' media='all' /> <link rel='stylesheet' id='ultra-color-css' href='/wp-content/themes/themify-ultra/styles/theme-color-grey.min.css?ver=1.0.0' type='text/css' media='all' /> <link rel='stylesheet' id='theme-style-child-css' href='/wp-content/themes/oauthdotcom/style.css?ver=1.0.0' type='text/css' media='all' /> <link rel='stylesheet' id='themify-google-fonts-css' href='https://fonts.googleapis.com/css?family=Open+Sans%3A400italic%2C600italic%2C700italic%2C400%2C300%2C600%2C700&subset=latin&ver=6.0.3' type='text/css' media='all' /> <link rel='stylesheet' id='fabric-master-css' href='/wp-content/themes/oauthdotcom/css/master.css?ver=6b3fdcf6dd3cb8565a44c5f9ee7664d1db16e916' type='text/css' media='all' /> <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js?ver=2.2.4' id='jquery-js'></script> <link rel="https://api.w.org/" href="/wp-json/" /><link rel="alternate" type="application/json" href="/wp-json/wp/v2/pages/36" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="/wp-includes/wlwmanifest.xml" /> <meta name="generator" content="WordPress 6.0.3" /> <link rel='shortlink' href='/?p=36' /> <link rel="alternate" type="application/json+oembed" href="/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.oauth.com%2Foauth2-servers%2Fsingle-page-apps%2F" /> <link rel="alternate" type="text/xml+oembed" href="/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.oauth.com%2Foauth2-servers%2Fsingle-page-apps%2F&format=xml" /> <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin/> <script type="text/javascript"> var tf_mobile_menu_trigger_point = 1200; </script> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @-webkit-keyframes themifyAnimatedBG { 0% { background-color: #33baab; } 100% { background-color: #e33b9e; } 50% { background-color: #4961d7; } 33.3% { background-color: #2ea85c; } 25% { background-color: #2bb8ed; } 20% { background-color: #dd5135; } } @keyframes themifyAnimatedBG { 0% { background-color: #33baab; } 100% { background-color: #e33b9e; } 50% { background-color: #4961d7; } 33.3% { background-color: #2ea85c; } 25% { background-color: #2bb8ed; } 20% { background-color: #dd5135; } } .themify_builder_row.animated-bg { -webkit-animation: themifyAnimatedBG 30000ms infinite alternate; animation: themifyAnimatedBG 30000ms infinite alternate; } </style> <script src="//use.typekit.net/ekm8nhh.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> </head> <body class="page-template-default page page-id-36 page-parent page-child parent-pageid-6 themify-fw-4-7-7 themify-ultra-2-6-5 skin-default gecko not-ie default_width sidebar-none no-home no-touch builder-parallax-scrolling-active ready-view header-slide-out fixed-header default theme-color-grey rss-off tile_enable filter-hover-none filter-featured-only masonry-enabled"> <noscript></noscript> <script type="text/javascript"> function themifyMobileMenuTrigger(e) { var w = document.body.clientWidth; if( w > 0 && w <= tf_mobile_menu_trigger_point ) { document.body.classList.add( 'mobile_menu_active' ); } else { document.body.classList.remove( 'mobile_menu_active' ); } } themifyMobileMenuTrigger(); var _init =function () { jQuery( window ).on('tfsmartresize.tf_mobile_menu', themifyMobileMenuTrigger ); document.removeEventListener( 'DOMContentLoaded', _init, {once:true,passive:true} ); _init=null; }; document.addEventListener( 'DOMContentLoaded', _init, {once:true,passive:true} ); </script> <div id="pagewrap" class="hfeed site"> <div id="headerwrap" > <a id="menu-icon" href="#mobile-menu"></a> <header id="header" class="clearfix" itemscope="itemscope" itemtype="https://schema.org/WPHeader"> <div id="site-logo"> <a href="https://developer.okta.com" title="Sponsored by Okta" target="_blank"></a> </div> <div class="header-bar"> <a href="https://www.oauth.com" id="home-link" title="OAuth 2.0 Simplified"> <img src="/wp-content/themes/oauthdotcom/images/oauth_logo.png" srcset="/wp-content/themes/oauthdotcom/images/oauth_logo.png 1x, /wp-content/themes/oauthdotcom/images/oauth_logo@2x.png 2x" alt="OAuth 2.0 Servers" /> </a> </div>  <div id="mobile-menu" class="sidemenu sidemenu-off"> <div class="social-widget"> </div>  <div id="searchform-wrap"> <form method="get" id="searchform" action="/"> <div class="oauth-search"> <i class="icon-clear-search">X</i> <input type="text" name="s" id="s" value="" /> </div> </form> </div>  <nav id="main-nav-wrap" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement"> <ul id="main-nav" class="main-nav clearfix"><li class="page_item page-item-6 page_item_has_children current_page_ancestor current_page_parent"><a href="/">OAuth.com</a> <ul class='children'> <li class="page_item page-item-2"><a href="/oauth2-servers/background/">Background</a></li> <li class="page_item page-item-914"><a href="/oauth2-servers/getting-ready/" data-section="1">Getting Ready</a></li> <li class="page_item page-item-896 page_item_has_children"><a href="/oauth2-servers/accessing-data/" data-section="2">Accessing Data in an OAuth Server</a> <ul class='children'> <li class="page_item page-item-898"><a href="/oauth2-servers/accessing-data/create-an-application/" data-section="2.1">Create an Application</a></li> <li class="page_item page-item-903"><a href="/oauth2-servers/accessing-data/setting-up-the-environment/" data-section="2.2">Setting up the Environment</a></li> <li class="page_item page-item-907"><a href="/oauth2-servers/accessing-data/authorization-request/" data-section="2.3">Authorization Request</a></li> <li class="page_item page-item-910"><a href="/oauth2-servers/accessing-data/obtaining-an-access-token/" data-section="2.4">Obtaining an Access Token</a></li> <li class="page_item page-item-912"><a href="/oauth2-servers/accessing-data/making-api-requests/" data-section="4.5">Making API Requests</a></li> </ul> </li> <li class="page_item page-item-28 page_item_has_children"><a href="/oauth2-servers/signing-in-with-google/" data-section="3">Signing in with Google</a> <ul class='children'> <li class="page_item page-item-883"><a href="/oauth2-servers/signing-in-with-google/create-an-application/" data-section="3.1">Create an Application</a></li> <li class="page_item page-item-886"><a href="/oauth2-servers/signing-in-with-google/setting-up-the-environment/" data-section="3.2">Setting up the Environment</a></li> <li class="page_item page-item-888"><a href="/oauth2-servers/signing-in-with-google/authorization-request/" data-section="3.3">Authorization Request</a></li> <li class="page_item page-item-891"><a href="/oauth2-servers/signing-in-with-google/getting-an-id-token/" data-section="3.4">Getting an ID Token</a></li> <li class="page_item page-item-893"><a href="/oauth2-servers/signing-in-with-google/verifying-the-user-info/" data-section="3.5">Verifying the User Info</a></li> </ul> </li> <li class="page_item page-item-95 page_item_has_children"><a href="/oauth2-servers/server-side-apps/" data-section="4">Server-Side Apps</a> <ul class='children'> <li class="page_item page-item-865"><a href="/oauth2-servers/server-side-apps/authorization-code/" data-section="4.1">Authorization Code Grant</a></li> <li class="page_item page-item-869"><a href="/oauth2-servers/server-side-apps/example-flow/" data-section="4.2">Example Flow</a></li> <li class="page_item page-item-872"><a href="/oauth2-servers/server-side-apps/possible-errors/" data-section="4.3">Possible Errors</a></li> <li class="page_item page-item-874"><a href="/oauth2-servers/server-side-apps/user-experience/" data-section="4.4">User Experience and Security Considerations</a></li> </ul> </li> <li class="page_item page-item-36 page_item_has_children current_page_item"><a href="/oauth2-servers/single-page-apps/" data-section="5">Single-Page Apps</a> <ul class='children'> <li class="page_item page-item-856"><a href="/oauth2-servers/single-page-apps/authorization/" data-section="5.1">Authorization</a></li> <li class="page_item page-item-850"><a href="/oauth2-servers/single-page-apps/example-flow/" data-section="5.2">Example Flow</a></li> <li class="page_item page-item-847"><a href="/oauth2-servers/single-page-apps/implicit-flow/" data-section="5.3">Implicit Flow for Single-Page Apps</a></li> <li class="page_item page-item-854"><a href="/oauth2-servers/single-page-apps/security-considerations/" data-section="5.4">Security Considerations for Single-Page Apps</a></li> </ul> </li> <li class="page_item page-item-33 page_item_has_children"><a href="/oauth2-servers/mobile-and-native-apps/" data-section="6">Mobile and Native Apps</a> <ul class='children'> <li class="page_item page-item-838"><a href="/oauth2-servers/mobile-and-native-apps/authorization/" data-section="6.1">Authorization</a></li> <li class="page_item page-item-841"><a href="/oauth2-servers/mobile-and-native-apps/security-considerations/" data-section="6.2">Security Considerations</a></li> </ul> </li> <li class="page_item page-item-138 page_item_has_children"><a href="/oauth2-servers/making-authenticated-requests/" data-section="7">Making Authenticated Requests</a> <ul class='children'> <li class="page_item page-item-833"><a href="/oauth2-servers/making-authenticated-requests/refreshing-an-access-token/" data-section="7.1">Refresh Tokens</a></li> </ul> </li> <li class="page_item page-item-140 page_item_has_children"><a href="/oauth2-servers/client-registration/" data-section="8">Client Registration</a> <ul class='children'> <li class="page_item page-item-142"><a href="/oauth2-servers/client-registration/registering-new-application/" data-section="8.1">Registering a New Application</a></li> <li class="page_item page-item-144"><a href="/oauth2-servers/client-registration/client-id-secret/" data-section="8.2">The Client ID and Secret</a></li> <li class="page_item page-item-146"><a href="/oauth2-servers/client-registration/deleting-applications-revoking-secrets/" data-section="8.3">Deleting Applications and Revoking Secrets</a></li> </ul> </li> <li class="page_item page-item-148 page_item_has_children"><a href="/oauth2-servers/authorization/" data-section="9">Authorization</a> <ul class='children'> <li class="page_item page-item-161"><a href="/oauth2-servers/authorization/the-authorization-request/" data-section="9.1">The Authorization Request</a></li> <li class="page_item page-item-164"><a href="/oauth2-servers/authorization/requiring-user-login/" data-section="9.2">Requiring User Login</a></li> <li class="page_item page-item-166"><a href="/oauth2-servers/authorization/the-authorization-interface/" data-section="9.3">The Authorization Interface</a></li> <li class="page_item page-item-168"><a href="/oauth2-servers/authorization/the-authorization-response/" data-section="9.4">The Authorization Response</a></li> <li class="page_item page-item-170"><a href="/oauth2-servers/authorization/security-considerations/" data-section="9.5">Security Considerations</a></li> </ul> </li> <li class="page_item page-item-174 page_item_has_children"><a href="/oauth2-servers/scope/" data-section="10">Scope</a> <ul class='children'> <li class="page_item page-item-177"><a href="/oauth2-servers/scope/defining-scopes/" data-section="10.1">Defining Scopes</a></li> <li class="page_item page-item-179"><a href="/oauth2-servers/scope/user-interface/" data-section="10.2">User Interface</a></li> <li class="page_item page-item-181"><a href="/oauth2-servers/scope/checkboxes/" data-section="10.3">Checkboxes</a></li> </ul> </li> <li class="page_item page-item-184 page_item_has_children"><a href="/oauth2-servers/redirect-uris/" data-section="11">Redirect URLs</a> <ul class='children'> <li class="page_item page-item-186"><a href="/oauth2-servers/redirect-uris/redirect-uri-registration/" data-section="11.1">Redirect URL Registration</a></li> <li class="page_item page-item-188"><a href="/oauth2-servers/redirect-uris/redirect-uris-native-apps/" data-section="11.2">Redirect URLs for Native Apps</a></li> <li class="page_item page-item-190"><a href="/oauth2-servers/redirect-uris/redirect-uri-validation/" data-section="11.3">Redirect URL Validation</a></li> </ul> </li> <li class="page_item page-item-194 page_item_has_children"><a href="/oauth2-servers/access-tokens/" data-section="12">Access Tokens</a> <ul class='children'> <li class="page_item page-item-196"><a href="/oauth2-servers/access-tokens/authorization-code-request/" data-section="12.1">Authorization Code Request</a></li> <li class="page_item page-item-198"><a href="/oauth2-servers/access-tokens/password-grant/" data-section="12.2">Password Grant</a></li> <li class="page_item page-item-200"><a href="/oauth2-servers/access-tokens/client-credentials/" data-section="12.3">Client Credentials</a></li> <li class="page_item page-item-202"><a href="/oauth2-servers/access-tokens/access-token-response/" data-section="12.4">Access Token Response</a></li> <li class="page_item page-item-204"><a href="/oauth2-servers/access-tokens/self-encoded-access-tokens/" data-section="12.5">Self-Encoded Access Tokens</a></li> <li class="page_item page-item-206"><a href="/oauth2-servers/access-tokens/access-token-lifetime/" data-section="12.6">Access Token Lifetime</a></li> <li class="page_item page-item-208"><a href="/oauth2-servers/access-tokens/refreshing-access-tokens/" data-section="12.7">Refreshing Access Tokens</a></li> </ul> </li> <li class="page_item page-item-210 page_item_has_children"><a href="/oauth2-servers/listing-authorizations/" data-section="13">Listing Authorizations</a> <ul class='children'> <li class="page_item page-item-212"><a href="/oauth2-servers/listing-authorizations/revoking-access/" data-section="13.1">Revoking Access</a></li> </ul> </li> <li class="page_item page-item-216"><a href="/oauth2-servers/the-resource-server/" data-section="14">The Resource Server</a></li> <li class="page_item page-item-608 page_item_has_children"><a href="/oauth2-servers/oauth-native-apps/" data-section="15">OAuth for Native Apps</a> <ul class='children'> <li class="page_item page-item-614"><a href="/oauth2-servers/oauth-native-apps/use-system-browser/" data-section="15.1">Use a System Browser</a></li> <li class="page_item page-item-620"><a href="/oauth2-servers/oauth-native-apps/redirect-urls-for-native-apps/" data-section="15.2">Redirect URLs for Native Apps</a></li> <li class="page_item page-item-626"><a href="/oauth2-servers/oauth-native-apps/pkce/" data-section="15.3">PKCE Extension</a></li> <li class="page_item page-item-627"><a href="/oauth2-servers/oauth-native-apps/checklist-server-support-native-apps/" data-section="15.4">Checklist for Server Support for Native Apps</a></li> </ul> </li> <li class="page_item page-item-640 page_item_has_children"><a href="/oauth2-servers/device-flow/" data-section="16">OAuth for Browserless and Input-Constrained Devices</a> <ul class='children'> <li class="page_item page-item-643"><a href="/oauth2-servers/device-flow/user-flow/" data-section="16.1">User Flow</a></li> <li class="page_item page-item-656"><a href="/oauth2-servers/device-flow/authorization-request/" data-section="16.2">Authorization Request</a></li> <li class="page_item page-item-660"><a href="/oauth2-servers/device-flow/token-request/" data-section="16.3">Token Request</a></li> <li class="page_item page-item-662"><a href="/oauth2-servers/device-flow/authorization-server-requirements/" data-section="16.4">Authorization Server Requirements</a></li> <li class="page_item page-item-666"><a href="/oauth2-servers/device-flow/security-considerations/" data-section="16.5">Security Considerations</a></li> </ul> </li> <li class="page_item page-item-668 page_item_has_children"><a href="/oauth2-servers/pkce/" data-section="17">Protecting Apps with PKCE</a> <ul class='children'> <li class="page_item page-item-670"><a href="/oauth2-servers/pkce/authorization-request/" data-section="17.1">Authorization Request</a></li> <li class="page_item page-item-673"><a href="/oauth2-servers/pkce/authorization-code-exchange/" data-section="17.2">Authorization Code Exchange</a></li> </ul> </li> <li class="page_item page-item-214"><a href="/oauth2-servers/token-introspection-endpoint/" data-section="18">Token Introspection Endpoint</a></li> <li class="page_item page-item-220"><a href="/oauth2-servers/creating-documentation/" data-section="19">Creating Documentation</a></li> <li class="page_item page-item-108"><a href="/oauth2-servers/definitions/" data-section="20">Terminology Reference</a></li> <li class="page_item page-item-136 page_item_has_children"><a href="/oauth2-servers/differences-between-oauth-1-2/" data-section="21">Differences Between OAuth 1 and 2</a> <ul class='children'> <li class="page_item page-item-225"><a href="/oauth2-servers/differences-between-oauth-1-2/authentication-and-signatures/" data-section="21.1">Authentication and Signatures</a></li> <li class="page_item page-item-227"><a href="/oauth2-servers/differences-between-oauth-1-2/user-experience-alternative-token-issuance-options/" data-section="21.2">User Experience and Alternative Token Issuance Options</a></li> <li class="page_item page-item-229"><a href="/oauth2-servers/differences-between-oauth-1-2/performance-at-scale/" data-section="21.3">Performance at Scale</a></li> <li class="page_item page-item-231"><a href="/oauth2-servers/differences-between-oauth-1-2/bearer-tokens/" data-section="21.4">Bearer Tokens</a></li> <li class="page_item page-item-233"><a href="/oauth2-servers/differences-between-oauth-1-2/short-lived-tokens-long-lived-authorizations/" data-section="21.5">Short-lived tokens with Long-lived authorizations</a></li> <li class="page_item page-item-235"><a href="/oauth2-servers/differences-between-oauth-1-2/separation-of-roles/" data-section="21.6">Separation of Roles</a></li> </ul> </li> <li class="page_item page-item-676 page_item_has_children"><a href="/oauth2-servers/openid-connect/" data-section="22">OpenID Connect</a> <ul class='children'> <li class="page_item page-item-678"><a href="/oauth2-servers/openid-connect/authorization-vs-authentication/" data-section="22.1">Authorization vs Authentication</a></li> <li class="page_item page-item-680"><a href="/oauth2-servers/openid-connect/building-an-authentication-framework/" data-section="22.2">Building an Authentication Framework</a></li> <li class="page_item page-item-682"><a href="/oauth2-servers/openid-connect/id-tokens/" data-section="22.3">ID Tokens</a></li> <li class="page_item page-item-684"><a href="/oauth2-servers/openid-connect/summary/" data-section="22.4">Summary</a></li> </ul> </li> <li class="page_item page-item-686 page_item_has_children"><a href="/oauth2-servers/indieauth/" data-section="23">IndieAuth</a> <ul class='children'> <li class="page_item page-item-738"><a href="/oauth2-servers/indieauth/discovery/" data-section="23.1">Discovery</a></li> <li class="page_item page-item-688"><a href="/oauth2-servers/indieauth/sign-in/" data-section="23.2">IndieAuth Sign-In Workflow</a></li> <li class="page_item page-item-690"><a href="/oauth2-servers/indieauth/authorization/" data-section="23.3">IndieAuth Authorization Workflow</a></li> </ul> </li> <li class="page_item page-item-693"><a href="/oauth2-servers/map-oauth-2-0-specs/" data-section="24">Map of OAuth 2.0 Specs</a></li> <li class="page_item page-item-697"><a href="/oauth2-servers/tools-and-libraries/" data-section="25">Tools and Libraries</a></li> <li class="page_item page-item-715"><a href="/oauth2-servers/appendix/">Appendix</a></li> </ul> </li> </ul>  </nav>   <a id="menu-icon-close" href="#"> <?xml version="1.0" encoding="UTF-8"?> <svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  <title>Close</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="OAuth---Table-of-Contents-Menu" transform="translate(-1292.000000, -30.000000)" fill-rule="nonzero" fill="#333333"> <g id="ToC-Menu-Open" transform="translate(993.000000, -16.000000)"> <g id="Close" transform="translate(299.000000, 46.000000)"> <path d="M15.9149259,8.53193792 L-1.05529018,8.53193792 C-1.56341203,8.53193792 -1.97626292,8.12026136 -1.97626292,7.61096518 L-1.97626292,7.24987497 C-1.97626292,6.74175311 -1.56458636,6.32890222 -1.05529018,6.32890222 L15.9161303,6.32890222 C16.4242522,6.32890222 16.8371031,6.74057879 16.8371031,7.24987497 L16.8371031,7.61096518 C16.8359266,8.12026136 16.4242522,8.53193792 15.914956,8.53193792 L15.9149259,8.53193792 Z" id="Shape" transform="translate(7.430420, 7.430420) rotate(-315.000000) translate(-7.430420, -7.430420) "></path> <path d="M15.9149259,8.53193792 L-1.05529018,8.53193792 C-1.56341203,8.53193792 -1.97626292,8.12026136 -1.97626292,7.61096518 L-1.97626292,7.24987497 C-1.97626292,6.74175311 -1.56458636,6.32890222 -1.05529018,6.32890222 L15.9161303,6.32890222 C16.4242522,6.32890222 16.8371031,6.74057879 16.8371031,7.24987497 L16.8371031,7.61096518 C16.8359266,8.12026136 16.4242522,8.53193792 15.914956,8.53193792 L15.9149259,8.53193792 Z" id="Shape-Copy" transform="translate(7.430420, 7.430420) scale(-1, 1) rotate(-315.000000) translate(-7.430420, -7.430420) "></path> </g> </g> </g> </g> </svg> </a> </div>  </header>  </div>  <div id="body" class="clearfix">  <div id="valprop"> <header class="valprop-content"> <h1 class="page-title"> Single-Page Apps </h1> </header> <span class="section-number">5</span> </div>   <div id="layout" class="pagewidth-narrow clearfix">  <div id="content" class="clearfix"> <div id="page-36" class="type-page">  <time datetime="2016-08-09"></time> <h1 class="page-title"> </h1>  <div class="page-content entry-content"> <p>Single-page apps (also known as browser-based apps) run entirely in the browser after loading the JavaScript and HTML source code from a web page. Since the entire source is available to the browser, they cannot maintain the confidentiality of a client secret, so a secret is not used for these apps. Because they can’t use a client secret, the best option is to use the PKCE extension to protect the authorization code in the redirect. This is similar to the solution for mobile apps which also can’t use a client secret.</p> <div class="aside" style="border: 1px #ccc solid; border-radius: 20px; padding: 20px;"> <h5>Deprecation Notice</h5> <p>A common historical pattern for single-page apps was to use the Implicit flow to receive an access token in the redirect without the intermediate authorization code exchange step. This has a number of security issues as described <a href="/oauth2-servers/single-page-apps/implicit-flow/">Implicit Flow</a> and should no longer be used. Please see <a href="https://oauth.net/2/browser-based-apps/" class="url">https://oauth.net/2/browser-based-apps/ for more details.</a></p> </div> <p>The diagram below illustrates an example where the user interacts with their browser, which in turn makes API requests directly to the service. After first downloading the Javascript and HTML source code from the client, the browser then makes direct API requests to the service. In this case, the app’s server never makes API requests to the service, since everything is handled directly in the browser.</p> <figure id="attachment_845" aria-describedby="caption-attachment-845" style="width: 662px" class="wp-caption aligncenter"><img class="wp-image-845 size-full" src="/wp-content/uploads/2018/07/user_browser_server.png" alt="" width="662" height="475" srcset="/wp-content/uploads/2018/07/user_browser_server.png 662w, /wp-content/uploads/2018/07/user_browser_server-300x215.png 300w" sizes="(max-width: 662px) 100vw, 662px" /><figcaption id="caption-attachment-845" class="wp-caption-text">The user’s browser communicates directly with the API server</figcaption></figure> <h2 id="authorization">Authorization</h2> <p>The authorization code is a temporary code that the client will exchange for an access token. The code itself is obtained from the authorization server where the user gets a chance to see what the information the client is requesting, and approve or deny the request.</p> <p>The first step of the web flow is to request authorization from the user. This is accomplished by creating an authorization request link for the user to click on.</p> <p>The authorization URL is usually in a format such as:</p> <pre class="brush: plain; title: ; notranslate" title="">https://authorization-server.com/oauth/authorize ?client_id=a17c21ed &response_type=code &state=5ca75bd30 &redirect_uri=https%3A%2F%2Fexample-app.com%2Fauth</pre> <p>After the user visits the authorization page, the service shows the user an explanation of the request, including application name, scope, etc. If the user clicks “approve”, the server will redirect back to the website, with an authorization code and the state value in the URL query string.</p> <h3>Authorization Grant Parameters</h3> <p>The following parameters are used to make the authorization request.</p> <h4><code>response_type</code></h4> <p><code>response_type</code> is set to <code>code</code> indicating that you want an authorization code as the response.</p> <h4><code>client_id</code></h4> <p>The <code>client_id</code> is the identifier for your app. You will have received a client_id when first registering your app with the service.</p> <h4><code>redirect_uri</code> (optional)</h4> <p>The <code>redirect_uri</code> is optional in the spec, but some services require it. This is the URL to which you want the user to be redirected after the authorization is complete. This must match the redirect URL that you have previously registered with the service.</p> <h4><code>scope</code> (optional)</h4> <p>Include one or more scope values to request additional levels of access. The values will depend on the particular service.</p> <h4><code>state</code> (recommended)</h4> <p>The <code>state</code> parameter serves two functions. When the user is redirected back to your app, whatever value you include as the state will also be included in the redirect. This gives your app a chance to persist data between the user being directed to the authorization server and back again, such as using the state parameter as a session key. This may be used to indicate what action in the app to perform after authorization is complete, for example, indicating which of your app’s pages to redirect to after authorization. This also serves as a CSRF protection mechanism.</p> <p>Note that the lack of using a client secret means that using the state parameter is even more important for single-page apps.</p> <h2 id="example">Example Flow</h2> <p>The following step-by-step example illustrates using the authorization grant type for single-page apps.</p> <h4>The app initiates the authorization request</h4> <p>The app initiates the flow by crafting a URL containing ID, and optionally scope and state. The app can put this into an <code><a href=""></code> tag.</p> <pre class="brush: plain; title: ; notranslate" title=""><a href="https://authorization-server.com/authorize?response_type=code &client_id=mRkZGFjM&state=TY2OTZhZGFk">Connect Your Account</a></pre> <h4>The user approves the request</h4> <p>Upon being directed to the auth server, the user sees the authorization request.</p> <figure id="attachment_510" aria-describedby="caption-attachment-510" style="width: 650px" class="wp-caption aligncenter"><img loading="lazy" class="wp-image-510 " src="/wp-content/uploads/2016/08/okta_oauth-diagrams_20170622-01-1.png" alt="" width="650" height="370" srcset="/wp-content/uploads/2016/08/okta_oauth-diagrams_20170622-01-1.png 752w, /wp-content/uploads/2016/08/okta_oauth-diagrams_20170622-01-1-300x171.png 300w" sizes="(max-width: 650px) 100vw, 650px" /><figcaption id="caption-attachment-510" class="wp-caption-text">Example Authorization Request</figcaption></figure> <p>After the user is taken to the service and sees the request, they will either allow or deny the request. If they allow the request, they will be redirected back to the redirect URL specified along with an authorization code in the query string. The app then needs to exchange this authorization code for an access token.</p> <pre class="brush: plain; title: ; notranslate" title="">https://example-app.com/cb?code=Yzk5ZDczMzRlNDEwY&state=TY2OTZhZGFk</pre> <p>If you include a “state” parameter in the initial authorization URL, the service will return it to you after the user authorizes your app. Your app should compare the state with the state it created in the initial request. This helps ensure that you only exchange authorization codes that you requested, preventing attackers from redirecting to your callback URL with arbitrary or stolen authorization codes.</p> <h4>Exchange the authorization code for an access token</h4> <p>To exchange the authorization code for an access token, the app makes a POST request to the service’s token endpoint. The request will have the following parameters.</p> <h5><code>grant_type</code> (required)</h5> <p>The <code>grant_type</code> parameter must be set to “<code>authorization_code</code>“.</p> <h5><code>code</code> (required)</h5> <p>This parameter is for the authorization code received from the authorization server which will be in the query string parameter “code” in this request.</p> <h5><code>redirect_uri</code> (possibly required)</h5> <p>If the redirect URL was included in the initial authorization request, it must be included in the token request as well, and must be identical. Some services support registering multiple redirect URLs, and some require the redirect URL to be specified on each request. Check the service’s documentation for the specifics.</p> <h5>Client Identification (required)</h5> <p>Despite the client secret not being used in this flow, the request requires sending the client ID to identify the application making the request. This means the client must include the client ID as a POST body parameter rather than using HTTP Basic Authentication like it can when including the client secret as well.</p> <pre class="brush: plain; title: ; notranslate" title="">POST /oauth/token HTTP/1.1 Host: authorization-endpoint.com grant_type=code &code=Yzk5ZDczMzRlNDEwY &redirect_uri=https://example-app.com/cb &client_id=mRkZGFjM</pre> <h2 id="implicit">Implicit Flow</h2> <p>Some services use the alternative Implicit Flow for single-page apps, rather than allow the app to use the Authorization Code flow with no secret.</p> <p>The Implicit Flow bypasses the code exchange step, and instead the access token is returned in the query string fragment to the client immediately.</p> <p>In practice, there are only very limited cases in which this is necessary. Several major implementations (<a href="https://www.ietf.org/mail-archive/web/oauth/current/msg16966.html" class="url">Keycloak</a>, <a href="https://www.ietf.org/mail-archive/web/oauth/current/msg16968.html" class="url">Deutsche Telekom</a>, <a href="https://www.ietf.org/mail-archive/web/oauth/current/msg16967.html" class="url">Smart Health IT</a>) have chosen to avoid the Implicit Flow completely and use the Authorization Code flow instead.</p> <p>In order for a single-page app to use the Authorization Code flow, it must be able to make a POST request to the authorization server. This means if the authorization server is on a different domain, the server will need to support the appropriate CORS headers. If supporting CORS headers is not an option, then the service may use the Implicit Flow instead.</p> <p>In any case, with both the Implicit Flow as well as the Authorization Code Flow with no secret, the server must require registration of the redirect URL in order to maintain the security of the flow.</p> <h2 id="security-considerations">Security Considerations</h2> <p>The only way the authorization code grant with no client secret can be secure is by using the “state” parameter and restricting the redirect URL to trusted clients. Since the secret is not used, there is no way to verify the identity of the client other than by using a registered redirect URL. This is why you need to pre-register your redirect URL with the OAuth 2.0 service.</p> <div id="themify_builder_content-36" data-postid="36" class="themify_builder_content themify_builder_content-36 themify_builder"> </div>    </div>  </div> </div>  <nav id="page"> <div class="alignleft"> <a href="/oauth2-servers/server-side-apps/user-experience/"><span>Previous Chapter</span>User Experience and Security Considerations</a> </div> <div class="alignright"> <a href="/oauth2-servers/single-page-apps/implicit-flow/"><span>Next Chapter</span>Implicit Flow for Single-Page Apps</a> </div> </nav> </div>  </div>  <div id="footerwrap" > <footer id="footer" class="pagewidth clearfix" itemscope="itemscope" itemtype="https://schema.org/WPFooter"> <div class="Row u-Flex u-Stretch"> <div class="no-hassle Column--6 Column--medium-12"> <h3>Want to implement OAuth 2.0 without the hassle?</h3> <p>We've built API access management as a service that is secure, scalable, and always on, so you can ship a more secure product, faster.</p> <a class="Button" href="http://developer.okta.com/signup" target="_blank" rel="noopener noreferrer">Secure your APIs</a> </div> <div class="brought-by Column--6 Column--medium-12"> <a href="https://developer.okta.com/" target="_blank"> OAuth.com is brought to you by the team at <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 88.8 35.82"><defs><style>.cls-1,.cls-2{fill:none;}.cls-1{clip-rule:evenodd;}.cls-3{clip-path:url(#clip-path);}.cls-4{clip-path:url(#clip-path-2);}.cls-5{fill:#c2c3c3;}.cls-6{clip-path:url(#clip-path-3);}.cls-7{clip-path:url(#clip-path-5);}.cls-8{clip-path:url(#clip-path-7);}</style><clipPath id="clip-path" transform="translate(5 4.91)"><path class="cls-1" d="M9.91,6.57A9.78,9.78,0,0,0,0,16.21a9.78,9.78,0,0,0,9.91,9.64,9.78,9.78,0,0,0,9.91-9.64A9.78,9.78,0,0,0,9.91,6.57M9.91,21a4.82,4.82,0,1,1,0-9.64,4.82,4.82,0,1,1,0,9.64"/></clipPath><clipPath id="clip-path-2" transform="translate(5 4.91)"><rect class="cls-2" x="-121" y="-359" width="1440" height="3536"/></clipPath><clipPath id="clip-path-3" transform="translate(5 4.91)"><path class="cls-1" d="M27.32,19.44a.88.88,0,0,1,1.5-.59c2.47,2.46,6.58,6.67,6.6,6.69a.65.65,0,0,0,.35.22,1.69,1.69,0,0,0,.42,0h4.47a.84.84,0,0,0,.67-1.36l-7.41-7.39-.39-.39c-.84-1-.75-1.36.21-2.35l5.89-6.36A.83.83,0,0,0,39,6.6h-4a1.43,1.43,0,0,0-.39,0,.83.83,0,0,0-.39.22l-5.27,5.52a.89.89,0,0,1-1.53-.58V.86a.78.78,0,0,0-.85-.77H23.16a.76.76,0,0,0-.86.7V25.05c0,.56.48.71.86.71h3.31a.79.79,0,0,0,.85-.73V19.44Z"/></clipPath><clipPath id="clip-path-5" transform="translate(5 4.91)"><path class="cls-1" d="M54.36,24.93,54,21.7a.79.79,0,0,0-.92-.68,5.08,5.08,0,0,1-.77.06,4.89,4.89,0,0,1-4.94-4.56c0-.09,0-.17,0-.26V12.33a.91.91,0,0,1,.92-.93h4.44a.8.8,0,0,0,.78-.83V7.51a.83.83,0,0,0-.74-.91H48.32a.89.89,0,0,1-.94-.87V.85a.79.79,0,0,0-.86-.76h-3.3a.74.74,0,0,0-.81.74s0,15.61,0,15.7a9.79,9.79,0,0,0,9.92,9.38,10.17,10.17,0,0,0,1.32-.09.82.82,0,0,0,.72-.89"/></clipPath><clipPath id="clip-path-7" transform="translate(5 4.91)"><path class="cls-1" d="M78.23,20.89c-2.81,0-3.23-1-3.23-4.64,0,0,0,0,0,0V7.42a.83.83,0,0,0-.86-.82H70.82a.85.85,0,0,0-.86.82v.41a10.08,10.08,0,0,0-4.89-1.26,9.78,9.78,0,0,0-9.91,9.64,9.78,9.78,0,0,0,9.91,9.64,10,10,0,0,0,6.44-2.31,5.4,5.4,0,0,0,4.77,2.31c.4,0,2.52.07,2.52-.89V21.53a.62.62,0,0,0-.57-.64M65.08,21a4.82,4.82,0,1,1,5-4.82,4.89,4.89,0,0,1-5,4.82"/></clipPath></defs><title>okta_logo</title><g class="cls-3"><g class="cls-4"><rect class="cls-5" y="6.48" width="29.82" height="29.28"/></g></g><g class="cls-6"><g class="cls-4"><rect class="cls-5" x="22.3" width="29.22" height="35.71"/></g></g><g class="cls-7"><g class="cls-4"><rect class="cls-5" x="42.4" width="21.96" height="35.82"/></g></g><g class="cls-8"><g class="cls-4"><rect class="cls-5" x="55.17" y="6.48" width="33.64" height="29.28"/></g></g></svg> </a> </div> </div> </footer>  </div>  </div>  <script type="application/ld+json">[{"@context":"https:\/\/schema.org","@type":"WebPage","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/www.oauth.com\/oauth2-servers\/single-page-apps\/"},"headline":"Single-Page Apps","datePublished":"2016-08-09T18:50:21-07:00","dateModified":"2016-08-09T18:50:21-07:00","description":""}]</script>  <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js?ver=3.0.9b' id='syntaxhighlighter-core-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushAS3.js?ver=3.0.9b' id='syntaxhighlighter-brush-as3-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushArduino.js?ver=3.0.9b' id='syntaxhighlighter-brush-arduino-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushBash.js?ver=3.0.9b' id='syntaxhighlighter-brush-bash-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushColdFusion.js?ver=3.0.9b' id='syntaxhighlighter-brush-coldfusion-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/third-party-brushes/shBrushClojure.js?ver=20090602' id='syntaxhighlighter-brush-clojure-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushCpp.js?ver=3.0.9b' id='syntaxhighlighter-brush-cpp-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushCSharp.js?ver=3.0.9b' id='syntaxhighlighter-brush-csharp-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushCss.js?ver=3.0.9b' id='syntaxhighlighter-brush-css-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushDelphi.js?ver=3.0.9b' id='syntaxhighlighter-brush-delphi-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushDiff.js?ver=3.0.9b' id='syntaxhighlighter-brush-diff-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushErlang.js?ver=3.0.9b' id='syntaxhighlighter-brush-erlang-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/third-party-brushes/shBrushFSharp.js?ver=20091003' id='syntaxhighlighter-brush-fsharp-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushGo.js?ver=3.0.9b' id='syntaxhighlighter-brush-go-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushGroovy.js?ver=3.0.9b' id='syntaxhighlighter-brush-groovy-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushHaskell.js?ver=3.0.9b' id='syntaxhighlighter-brush-haskell-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJava.js?ver=3.0.9b' id='syntaxhighlighter-brush-java-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJavaFX.js?ver=3.0.9b' id='syntaxhighlighter-brush-javafx-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJScript.js?ver=3.0.9b' id='syntaxhighlighter-brush-jscript-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/third-party-brushes/shBrushLatex.js?ver=20090613' id='syntaxhighlighter-brush-latex-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/third-party-brushes/shBrushMatlabKey.js?ver=20091209' id='syntaxhighlighter-brush-matlabkey-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/third-party-brushes/shBrushObjC.js?ver=20091207' id='syntaxhighlighter-brush-objc-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPerl.js?ver=3.0.9b' id='syntaxhighlighter-brush-perl-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPhp.js?ver=3.0.9b' id='syntaxhighlighter-brush-php-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPlain.js?ver=3.0.9b' id='syntaxhighlighter-brush-plain-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPowerShell.js?ver=3.0.9b' id='syntaxhighlighter-brush-powershell-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPython.js?ver=3.0.9b' id='syntaxhighlighter-brush-python-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/third-party-brushes/shBrushR.js?ver=20100919' id='syntaxhighlighter-brush-r-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushRuby.js?ver=3.0.9b' id='syntaxhighlighter-brush-ruby-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushScala.js?ver=3.0.9b' id='syntaxhighlighter-brush-scala-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushSql.js?ver=3.0.9b' id='syntaxhighlighter-brush-sql-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushSwift.js?ver=3.0.9b' id='syntaxhighlighter-brush-swift-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushVb.js?ver=3.0.9b' id='syntaxhighlighter-brush-vb-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushXml.js?ver=3.0.9b' id='syntaxhighlighter-brush-xml-js'></script> <script type='text/javascript' src='/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushYaml.js?ver=3.0.9b' id='syntaxhighlighter-brush-yaml-js'></script> <script type='text/javascript'> (function(){ var corecss = document.createElement('link'); var themecss = document.createElement('link'); var corecssurl = "/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0.9b"; if ( corecss.setAttribute ) { corecss.setAttribute( "rel", "stylesheet" ); corecss.setAttribute( "type", "text/css" ); corecss.setAttribute( "href", corecssurl ); } else { corecss.rel = "stylesheet"; corecss.href = corecssurl; } document.head.appendChild( corecss ); var themecssurl = "/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeMidnight.css?ver=3.0.9b"; if ( themecss.setAttribute ) { themecss.setAttribute( "rel", "stylesheet" ); themecss.setAttribute( "type", "text/css" ); themecss.setAttribute( "href", themecssurl ); } else { themecss.rel = "stylesheet"; themecss.href = themecssurl; } document.head.appendChild( themecss ); })(); SyntaxHighlighter.config.strings.expandSource = '+ expand source'; SyntaxHighlighter.config.strings.help = '?'; SyntaxHighlighter.config.strings.alert = 'SyntaxHighlighter\n\n'; SyntaxHighlighter.config.strings.noBrush = 'Can\'t find brush for: '; SyntaxHighlighter.config.strings.brushNotHtmlScript = 'Brush wasn\'t configured for html-script option: '; SyntaxHighlighter.defaults['gutter'] = false; SyntaxHighlighter.defaults['pad-line-numbers'] = false; SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all(); // Infinite scroll support if ( typeof( jQuery ) !== 'undefined' ) { jQuery( function( $ ) { $( document.body ).on( 'post-load', function() { SyntaxHighlighter.highlight(); } ); } ); } </script> <script type='text/javascript' id='themify-main-script-js-extra'> /* <![CDATA[ */ var themify_vars = {"version":"4.7.7","url":"https:\/\/www.oauth.com\/wp-content\/themes\/themify-ultra\/themify","wp":"6.0.3","map_key":null,"bing_map_key":null,"includesURL":"https:\/\/www.oauth.com\/wp-includes\/","isCached":"disable","commentUrl":"","minify":{"css":{"themify-icons":1,"lightbox":1,"main":1,"themify-builder-style":1},"js":{"backstretch.themify-version":1,"bigvideo":1,"themify.dropdown":1,"themify.mega-menu":1,"themify.builder.script":1,"themify.scroll-highlight":1,"themify-youtube-bg":1,"themify-ticks":1}},"media":{"css":{"wp-mediaelement":{"src":"https:\/\/www.oauth.com\/wp-includes\/js\/mediaelement\/wp-mediaelement.min.css","v":false},"mediaelement":{"src":"https:\/\/www.oauth.com\/wp-includes\/js\/mediaelement\/mediaelementplayer-legacy.min.css","v":"4.2.16"}},"_wpmejsSettings":"var _wpmejsSettings = {\"pluginPath\":\"\\\/wp-includes\\\/js\\\/mediaelement\\\/\",\"classPrefix\":\"mejs-\",\"stretching\":\"responsive\"};","js":{"mediaelement-core":{"src":"https:\/\/www.oauth.com\/wp-includes\/js\/mediaelement\/mediaelement-and-player.min.js","v":"4.2.16","extra":{"before":[false,"var mejsL10n = {\"language\":\"en\",\"strings\":{\"mejs.download-file\":\"Download File\",\"mejs.install-flash\":\"You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https:\\\/\\\/get.adobe.com\\\/flashplayer\\\/\",\"mejs.fullscreen\":\"Fullscreen\",\"mejs.play\":\"Play\",\"mejs.pause\":\"Pause\",\"mejs.time-slider\":\"Time Slider\",\"mejs.time-help-text\":\"Use Left\\\/Right Arrow keys to advance one second, Up\\\/Down arrows to advance ten seconds.\",\"mejs.live-broadcast\":\"Live Broadcast\",\"mejs.volume-help-text\":\"Use Up\\\/Down Arrow keys to increase or decrease volume.\",\"mejs.unmute\":\"Unmute\",\"mejs.mute\":\"Mute\",\"mejs.volume-slider\":\"Volume Slider\",\"mejs.video-player\":\"Video Player\",\"mejs.audio-player\":\"Audio Player\",\"mejs.captions-subtitles\":\"Captions\\\/Subtitles\",\"mejs.captions-chapters\":\"Chapters\",\"mejs.none\":\"None\",\"mejs.afrikaans\":\"Afrikaans\",\"mejs.albanian\":\"Albanian\",\"mejs.arabic\":\"Arabic\",\"mejs.belarusian\":\"Belarusian\",\"mejs.bulgarian\":\"Bulgarian\",\"mejs.catalan\":\"Catalan\",\"mejs.chinese\":\"Chinese\",\"mejs.chinese-simplified\":\"Chinese (Simplified)\",\"mejs.chinese-traditional\":\"Chinese (Traditional)\",\"mejs.croatian\":\"Croatian\",\"mejs.czech\":\"Czech\",\"mejs.danish\":\"Danish\",\"mejs.dutch\":\"Dutch\",\"mejs.english\":\"English\",\"mejs.estonian\":\"Estonian\",\"mejs.filipino\":\"Filipino\",\"mejs.finnish\":\"Finnish\",\"mejs.french\":\"French\",\"mejs.galician\":\"Galician\",\"mejs.german\":\"German\",\"mejs.greek\":\"Greek\",\"mejs.haitian-creole\":\"Haitian Creole\",\"mejs.hebrew\":\"Hebrew\",\"mejs.hindi\":\"Hindi\",\"mejs.hungarian\":\"Hungarian\",\"mejs.icelandic\":\"Icelandic\",\"mejs.indonesian\":\"Indonesian\",\"mejs.irish\":\"Irish\",\"mejs.italian\":\"Italian\",\"mejs.japanese\":\"Japanese\",\"mejs.korean\":\"Korean\",\"mejs.latvian\":\"Latvian\",\"mejs.lithuanian\":\"Lithuanian\",\"mejs.macedonian\":\"Macedonian\",\"mejs.malay\":\"Malay\",\"mejs.maltese\":\"Maltese\",\"mejs.norwegian\":\"Norwegian\",\"mejs.persian\":\"Persian\",\"mejs.polish\":\"Polish\",\"mejs.portuguese\":\"Portuguese\",\"mejs.romanian\":\"Romanian\",\"mejs.russian\":\"Russian\",\"mejs.serbian\":\"Serbian\",\"mejs.slovak\":\"Slovak\",\"mejs.slovenian\":\"Slovenian\",\"mejs.spanish\":\"Spanish\",\"mejs.swahili\":\"Swahili\",\"mejs.swedish\":\"Swedish\",\"mejs.tagalog\":\"Tagalog\",\"mejs.thai\":\"Thai\",\"mejs.turkish\":\"Turkish\",\"mejs.ukrainian\":\"Ukrainian\",\"mejs.vietnamese\":\"Vietnamese\",\"mejs.welsh\":\"Welsh\",\"mejs.yiddish\":\"Yiddish\"}};"]}},"mediaelement-migrate":{"src":"https:\/\/www.oauth.com\/wp-includes\/js\/mediaelement\/mediaelement-migrate.min.js","v":false,"extra":""}}},"scrollTo":null}; var tbLocalScript = {"ajaxurl":"https:\/\/www.oauth.com\/wp-admin\/admin-ajax.php","isAnimationActive":"1","isParallaxActive":"1","isScrollEffectActive":"1","isStickyScrollActive":"1","animationInviewSelectors":[".module.wow",".module_row.wow",".builder-posts-wrap > .post.wow"],"backgroundSlider":{"autoplay":5000},"animationOffset":"100","videoPoster":"https:\/\/www.oauth.com\/wp-content\/themes\/themify-ultra\/themify\/themify-builder\/img\/blank.png","backgroundVideoLoop":"yes","builder_url":"https:\/\/www.oauth.com\/wp-content\/themes\/themify-ultra\/themify\/themify-builder","framework_url":"https:\/\/www.oauth.com\/wp-content\/themes\/themify-ultra\/themify","version":"4.7.7","fullwidth_support":"","fullwidth_container":"body","loadScrollHighlight":"1","addons":[],"breakpoints":{"tablet_landscape":[769,"1024"],"tablet":[681,"768"],"mobile":"480"},"ticks":{"tick":30,"ajaxurl":"https:\/\/www.oauth.com\/wp-admin\/admin-ajax.php","postID":36},"cf_api_url":"https:\/\/www.oauth.com\/?tb_load_cf=","emailSub":"Check this out!"}; var themifyScript = {"lightbox":{"lightboxSelector":".themify_lightbox","lightboxOn":true,"lightboxContentImages":false,"lightboxContentImagesSelector":"","theme":"pp_default","social_tools":false,"allow_resize":true,"show_title":false,"overlay_gallery":false,"screenWidthNoLightbox":600,"deeplinking":false,"contentImagesAreas":"","gallerySelector":".gallery-icon > a","lightboxGalleryOn":true},"lightboxContext":"body"}; var tbScrollHighlight = {"fixedHeaderSelector":"#headerwrap.fixed-header","speed":"900","navigation":"#main-nav, .module-menu .ui.nav","scrollOffset":"-5","scroll":"internal"}; /* ]]> */ </script> <script type='text/javascript' defer="defer" src='/wp-content/themes/themify-ultra/themify/js/main.min.js?ver=4.7.7' id='themify-main-script-js'></script> <script type='text/javascript' defer="defer" src='/wp-content/themes/themify-ultra/themify/js/themify.sidemenu.min.js?ver=1.0.0' id='slide-nav-js'></script> <script type='text/javascript' id='theme-script-js-extra'> /* <![CDATA[ */ var themifyScript = {"themeURI":"https:\/\/www.oauth.com\/wp-content\/themes\/themify-ultra","lightbox":{"lightboxSelector":".themify_lightbox","lightboxOn":true,"lightboxContentImages":false,"lightboxContentImagesSelector":"","theme":"pp_default","social_tools":false,"allow_resize":true,"show_title":false,"overlay_gallery":false,"screenWidthNoLightbox":600,"deeplinking":false,"contentImagesAreas":"","gallerySelector":".gallery-icon > a","lightboxGalleryOn":true},"fixedHeader":"fixed-header","sticky_header":"","ajax_nonce":"f90b70fbbc","ajax_url":"https:\/\/www.oauth.com\/wp-admin\/admin-ajax.php","parallaxHeader":"1","pageLoaderEffect":"","infiniteEnable":"0","fullPageScroll":"","shop_masonry":"no","responsiveBreakpoints":{"tablet_landscape":"1024","tablet":"768","mobile":"480"}}; /* ]]> */ </script> <script type='text/javascript' defer="defer" src='/wp-content/themes/themify-ultra/js/themify.script.min.js?ver=1.0.0' id='theme-script-js'></script> <script type='text/javascript' src='/wp-content/themes/oauthdotcom/js/master.js?ver=5a2639f42501af84abfd82f346cc51eae7a90995' id='fabric-master-js'></script> <script type='text/javascript' src='/wp-content/themes/oauthdotcom/js/cookie.js?ver=02fc4fe91fdd37432e130857ad5ada2a84525a13' id='playground-cookie-js'></script> <script type='text/javascript' src='/wp-content/themes/oauthdotcom/js/crypto.js?ver=b1999063286ff48e2dfaeed2107d9f427c8506d8' id='playground-crypto-js'></script> <script type='text/javascript' src='/wp-content/themes/oauthdotcom/js/common.js?ver=149596cc0c6824a0e1eff9271ad09514046367b2' id='playground-common-js'></script> <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"7fe4a5104e","applicationID":"22011134","transactionName":"ZVEEZBAFDUpTABFfDlwbJ1MWDQxXHRMEUQQ=","queueTime":0,"applicationTime":418,"atts":"SRYHElgfHkQ=","errorBeacon":"bam.nr-data.net","agent":""}</script></body> </html>