Display of SeamlessAccess Login Button
Including the component library
You will need to reference the SeamlessAccess component library before you can use it. For the Standard implementation, you will always reference through a CDN.
<head>
<!-- Include the SeamlessAccess Sign in Button & Discovery Service -->
<script src="https://service.seamlessaccess.org/thiss.js"></script>
</head>
Rendering the button
Include a <div> container that is identified with an id tag where you want the button to appear on your HTML page:
<body>
<!-- Location for the SeamlessAccess login button -->
<div id='putMyLoginButtonHere'></div>
</body>
And to display the button into this container, invoke the DiscoveryComponent.render function as a handler for the onload event on the window. This action will cause the button to initialize as soon as the window has finished loading. (NOTE: while it is possible to initialize the button component earlier, the behavior can be unpredictable and is not recommended.)
<script>
window.onload = function() {
// Render the SeamlessAccess button
thiss.DiscoveryComponent.render({
loginInitiatorURL: 'https://sp.example.com/Shibboleth.sso/Login?target=https://sp.example.com/',
}, '#putMyLoginButtonHere');
};
</script>
The render function in this code, takes two parameters:
The
loginInitiatorURL:- See the next section, “Integration of Login Button with your SAML SP”, for more detailsThe location where to render the button - here you will use the id tag that you used for your html
<div>container, formatted using CSS selector styling in quotes.
Content-Security-Policy considerations
If your website publishes a Content-Security-Policy you will need to make provision for the components served from the service.seamlessaccess.org CDN (or from your domain if you deploy your own version of thiss) by merging the following into your existing CSP:
The 'unsafe-inline' is required for the above DiscoveryComponent.render example, but could be removed if the onload function was included e.g. from a file.
