CINXE.COM

Google Account Linking Demo

<!DOCTYPE html> <html> <head> <title>Google Account Linking Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="/appconfig.js"></script> <link rel="stylesheet" href="/static/index_style.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="/mdl/all_styles-bundle.css"> <script defer src="/mdl/mdl_all_js_compiled.js"></script> <script src="https://apis.google.com/js/platform.js"></script> </head> <body> <div class="demo-card mdl-shadow--2dp"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Google Account Linking Demo</h2> </div> <div class="mdl-card__supporting-text"> <ol class="demo-steps"> <li> Select the Google account you wish to use: <div class="g-signin2" data-theme="dark" data-prompt="select_account"></div> <div class="demo-sign-in-status" id="sign-in-status"></div> <div class="demo-error" id="error-signin"></div> <li> Enter your service ID and a comma-separated list of scopes to start the demo: <form id="account-link-form" action="/app" method="GET"> <input type="hidden" name="login_hint" id="login-hint"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" name="service_id" id="serviceId" autocapitalize="off"> <label class="mdl-textfield__label" for="service_id">Service ID</label> </div> <div class="demo-error" id="error-service-id"></div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" name="scope" id="scope" autocapitalize="off"> <label class="mdl-textfield__label" for="scope">Scopes (space separated)</label> </div> <div class="mdl-textfield mdl-js-textfield"> <li>Select flow to run:</li> <input type="radio" id="flow_STREAMLINED" name="flow" value="STREAMLINED"> <label for="flow_STREAMLINED">STREAMLINED</label><br> <input type="radio" id="flow_WEB_OAUTH" name="flow" value="WEB_OAUTH" checked> <label for="flow_WEB_OAUTH">WEB_OAUTH</label><br> </div> <div class="mdl-textfield mdl-js-textfiled"> <li>Select Data Usage Notice to display:</li> <input type="radio" id="id_INFO_WITH_CONSENT" name="data_usage_notice" value="INFO_WITH_CONSENT"> <label for="id_INFO_WITH_CONSENT">Linking Info with Capability Consent</label><br> <input type="radio" id="id_LINKING_INFO" name="data_usage_notice" value="LINKING_INFO"> <label for="id_LINKING_INFO">Only Linking Info</label><br> <input type="radio" id="id_CAPABILITY_CONSENT" name="data_usage_notice" value="CAPABILITY_CONSENT"> <label for="id_CAPABILITY_CONSENT">Only Capability Consent</label><br> <input type="radio" id="id_NO_DATA_USAGE_NOTICE" name="data_usage_notice" value="NO_DATA_USAGE_NOTICE" checked> <label for="id_NO_DATA_USAGE_NOTICE">No Data Usage Notice</label><br> </div> <div class="demo-error" id="error-scopes"></div> <div> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit"> Start Demo </button> <button class="mdl-button mdl-js-button mdl-button--colored" type="button" id="unlink-button"> Unlink my accounts </button> </div> </form> </ol> </div> </div> <div id="toast" class="mdl-js-snackbar mdl-snackbar"> <div class="mdl-snackbar__text"></div> <button class="mdl-snackbar__action" type="button"></button> </div> <script src="/js/js_bin.js"></script> <script> setup(); </script> </body> </html>