nicosabena/Lock-with-extra-button.html

## Lock-with-extra-button.html
<!--
This example how you can add an extra button to Lock to directly
force an authentication with an enterprise connection (instead of relying
on Lock's home realm discovery with the email domain).

Warning: This is provided "as-is". It relies on Lock's current DOM structure, which
might change in future versions without previous warning and break this solution.

If you want buttons for your enterprise connections, a better idea is to
use the "New" Universal Login experience instead, which provides these
buttons natively as an option.

-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sign In with Auth0</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>

  <!--[if IE 8]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
  <![endif]-->

  <!--[if lte IE 9]>
  <script src="https://cdn.auth0.com/js/base64.js"></script>
  <script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
  <![endif]-->

  <script src="https://cdn.auth0.com/js/lock/11.20/lock.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
  <script src="https://cdn.auth0.com/js/auth0/9.12/auth0.min.js"></script>

  <script>
    // Decode utf8 characters properly
    var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
    config.extraParams = config.extraParams || {};
    var connection = config.connection;
    var prompt = config.prompt;
    var languageDictionary;
    var language;

    if (config.dict && config.dict.signin && config.dict.signin.title) {
      languageDictionary = { title: config.dict.signin.title };
    } else if (typeof config.dict === 'string') {
      language = config.dict;
    }
    var loginHint = config.extraParams.login_hint;
    var colors = config.colors || {};

    // Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: 'YOUR_CUSTOM_DOMAIN'
      },
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageDictionary: languageDictionary,
      theme: {
        //logo:            'YOUR LOGO HERE',
        primaryColor:    colors.primary ? colors.primary : 'green'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false,
      // uncomment if you want small buttons for social providers
      // socialButtonStyle: 'small'
    });

    if(colors.page_background) {
      var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
                  colors.page_background +
                ' }';
      var style = document.createElement('style');

      style.appendChild(document.createTextNode(css));

      document.body.appendChild(style);
    }

    // construct an instance of Auth0.js' WebAuth
    // for sending the user to the connection from the
    // button
    var params = Object.assign({
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: 'YOUR_CUSTOM_DOMAIN'
      },
      domain: config.auth0Domain,
      clientID: config.clientID,
      redirectUri: config.callbackURL,
      responseType: 'code'
    }, config.internalOptions);

    var webAuth = new auth0.WebAuth(params);

    function authenticateWithConnection(connectionName) {
        webAuth.authorize({connection: connectionName});
    }

    function addNewButtons() {

      var button = $('<a title="Log in with a Microsoft work or school account" class="auth0-lock-social-button auth0-lock-social-big-button" data-provider="windowslive" type="button"><div class="auth0-lock-social-button-icon"></div><div class="auth0-lock-social-button-text">Log in with Microsoft work/school account</div></a>')
        .click(() => {
          // put the actual connection here
          authenticateWithConnection('azuread-connection');
        });
      var buttonContainer = $('<div class="auth0-lock-social-buttons-container"></div>');

      buttonContainer.append(button);

      $('.auth0-lock-tabs-container').after(
        buttonContainer,
        '<div class="auth0-lock-pane-separator"></div>',
        '<p><span>or</span></p>');
    }

    lock.on('signin ready', addNewButtons);
    lock.on('signup ready', addNewButtons);

    lock.show();
  </script>
</body>
</html>
	<!--
	This example how you can add an extra button to Lock to directly
	force an authentication with an enterprise connection (instead of relying
	on Lock's home realm discovery with the email domain).

	Warning: This is provided "as-is". It relies on Lock's current DOM structure, which
	might change in future versions without previous warning and break this solution.

	If you want buttons for your enterprise connections, a better idea is to
	use the "New" Universal Login experience instead, which provides these
	buttons natively as an option.

	-->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Sign In with Auth0</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	</head>
	<body>

	<!--[if IE 8]>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
	<![endif]-->

	<!--[if lte IE 9]>
	<script src="https://cdn.auth0.com/js/base64.js"></script>
	<script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
	<![endif]-->

	<script src="https://cdn.auth0.com/js/lock/11.20/lock.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
	<script src="https://cdn.auth0.com/js/auth0/9.12/auth0.min.js"></script>

	<script>
	// Decode utf8 characters properly
	var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
	config.extraParams = config.extraParams \|\| {};
	var connection = config.connection;
	var prompt = config.prompt;
	var languageDictionary;
	var language;

	if (config.dict && config.dict.signin && config.dict.signin.title) {
	languageDictionary = { title: config.dict.signin.title };
	} else if (typeof config.dict === 'string') {
	language = config.dict;
	}
	var loginHint = config.extraParams.login_hint;
	var colors = config.colors \|\| {};

	// Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
	var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
	auth: {
	redirectUrl: config.callbackURL,
	responseType: (config.internalOptions \|\| {}).response_type \|\|
	(config.callbackOnLocationHash ? 'token' : 'code'),
	params: config.internalOptions
	},
	configurationBaseUrl: config.clientConfigurationBaseUrl,
	overrides: {
	__tenant: config.auth0Tenant,
	__token_issuer: 'YOUR_CUSTOM_DOMAIN'
	},
	assetsUrl: config.assetsUrl,
	allowedConnections: connection ? [connection] : null,
	rememberLastLogin: !prompt,
	language: language,
	languageDictionary: languageDictionary,
	theme: {
	//logo: 'YOUR LOGO HERE',
	primaryColor: colors.primary ? colors.primary : 'green'
	},
	prefill: loginHint ? { email: loginHint, username: loginHint } : null,
	closable: false,
	defaultADUsernameFromEmailPrefix: false,
	// uncomment if you want small buttons for social providers
	// socialButtonStyle: 'small'
	});

	if(colors.page_background) {
	var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
	colors.page_background +
	' }';
	var style = document.createElement('style');

	style.appendChild(document.createTextNode(css));

	document.body.appendChild(style);
	}

	// construct an instance of Auth0.js' WebAuth
	// for sending the user to the connection from the
	// button
	var params = Object.assign({
	overrides: {
	__tenant: config.auth0Tenant,
	__token_issuer: 'YOUR_CUSTOM_DOMAIN'
	},
	domain: config.auth0Domain,
	clientID: config.clientID,
	redirectUri: config.callbackURL,
	responseType: 'code'
	}, config.internalOptions);

	var webAuth = new auth0.WebAuth(params);

	function authenticateWithConnection(connectionName) {
	webAuth.authorize({connection: connectionName});
	}

	function addNewButtons() {

	var button = $('<a title="Log in with a Microsoft work or school account" class="auth0-lock-social-button auth0-lock-social-big-button" data-provider="windowslive" type="button"><div class="auth0-lock-social-button-icon"></div><div class="auth0-lock-social-button-text">Log in with Microsoft work/school account</div></a>')
	.click(() => {
	// put the actual connection here
	authenticateWithConnection('azuread-connection');
	});
	var buttonContainer = $('<div class="auth0-lock-social-buttons-container"></div>');

	buttonContainer.append(button);

	$('.auth0-lock-tabs-container').after(
	buttonContainer,
	'<div class="auth0-lock-pane-separator"></div>',
	'<p><span>or</span></p>');
	}

	lock.on('signin ready', addNewButtons);
	lock.on('signup ready', addNewButtons);

	lock.show();
	</script>
	</body>
	</html>