Difference between revisions of "WISE-PaaS/Single Sign-On(SSO)"

From ESS-WIKI
Jump to: navigation, search
Line 64: Line 64:
  
 
TestOpenID.html : An example HTML login client for WISE-PaaSOpenID Connect
 
TestOpenID.html : An example HTML login client for WISE-PaaSOpenID Connect
−
<pre>&lt;html&gt; &lt;head&gt; &lt;title&gt;Customer View Page&lt;/title&gt; &lt;script src=&quot;https://openidserver.redirectme.net:8443/auth/js/keycloak.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body bgcolor=&quot;#E3F6CE&quot;&gt; &lt;p&gt;Goto: &lt;a href=&quot;/product-portal&quot;&gt;products&lt;/a&gt; | &lt;a href=&quot;#&quot; onclick=&quot;keycloak.logout()&quot;&gt;logout&lt;/a&gt; | &lt;a href=&quot;#&quot; onclick=&quot;keycloak.accountManagement()&quot;&gt;manage acct&lt;/a&gt;&lt;/p&gt; User &lt;b id=&quot;subject&quot;&gt;&lt;/b&gt; made this request. &lt;p&gt;&lt;b&gt;User details (from &lt;span id=&quot;profileType&quot;&gt;&lt;/span&gt;)&lt;/b&gt;&lt;/p&gt; &lt;p&gt;Username: &lt;span id=&quot;username&quot;&gt;&lt;/span&gt;&lt;/p&gt; &lt;p&gt;Email: &lt;span id=&quot;email&quot;&gt;&lt;/span&gt;&lt;/p&gt; &lt;p&gt;Full Name: &lt;span id=&quot;name&quot;&gt;&lt;/span&gt;&lt;/p&gt; &lt;p&gt;First: &lt;span id=&quot;givenName&quot;&gt;&lt;/span&gt;&lt;/p&gt; &lt;p&gt;Last: &lt;span id=&quot;familyName&quot;&gt;&lt;/span&gt;&lt;/p&gt; &lt;script&gt; var keycloak = Keycloak('openid/keycloak.json'); var loadData = function () { document.getElementById('subject').innerHTML = keycloak.subject; if (keycloak.idToken) { document.getElementById('profileType').innerHTML = 'IDToken'; document.getElementById('username').innerHTML = keycloak.idTokenParsed.preferred_username; document.getElementById('email').innerHTML = keycloak.idTokenParsed.email; document.getElementById('name').innerHTML = keycloak.idTokenParsed.name; document.getElementById('givenName').innerHTML = keycloak.idTokenParsed.given_name; document.getElementById('familyName').innerHTML = keycloak.idTokenParsed.family_name; } else { keycloak.loadUserProfile(function() { document.getElementById('profileType').innerHTML = 'Account Service'; document.getElementById('username').innerHTML = keycloak.profile.username; document.getElementById('email').innerHTML = keycloak.profile.email; document.getElementById('name').innerHTML = keycloak.profile.firstName + ' ' + keycloak.profile.lastName; document.getElementById('givenName').innerHTML = keycloak.profile.firstName; document.getElementById('familyName').innerHTML = keycloak.profile.lastName; }, function() { document.getElementById('profileType').innerHTML = 'Failed to retrieve user details. Please enable claims or account role'; }); } //loginjwt }; var loadFailure = function () { document.getElementById('customers').innerHTML = '&lt;b&gt;Failed to load data. Check console log&lt;/b&gt;'; }; var reloadData = function () { keycloak.updateToken(10) .success(loadData) .error(function() { document.getElementById('customers').innerHTML = '&lt;b&gt;Failed to load data. User is logged out.&lt;/b&gt;'; }); } //keycloak.login({ redirectUri: 'login-required' }); keycloak.init({ onLoad: 'login-required' }) .success(reloadData) .error(function(errorData) { document.getElementById('customers').innerHTML = '&lt;b&gt;Failed to load data. Error: ' + JSON.stringify(errorData) + '&lt;/b&gt;'; }); &lt;/script&gt; &lt;br&gt;&lt;br&gt; &lt;button onclick=&quot;reloadData()&quot;&gt;Reload data&lt;/button&gt; &lt;/body&gt; &lt;/html&gt;</pre>
+
<pre>&lt;html&gt;
 +
&lt;head&gt;
 +
&nbsp; &nbsp; &lt;title&gt;Customer View Page&lt;/title&gt;
 +
&nbsp; &nbsp; &lt;script src="https://openidserver.redirectme.net:8443/auth/js/keycloak.js"&gt;&lt;/script&gt;
 +
&lt;/head&gt;
 +
&lt;body bgcolor="#E3F6CE"&gt;
 +
 
 +
&lt;p&gt;Goto: &lt;a href="/product-portal"&gt;products&lt;/a&gt; | &lt;a href="#" onclick="keycloak.logout()"&gt;logout&lt;/a&gt; | &lt;a href="#" onclick="keycloak.accountManagement()"&gt;manage acct&lt;/a&gt;&lt;/p&gt;
 +
 
 +
User &lt;b id="subject"&gt;&lt;/b&gt; made this request.
 +
&lt;p&gt;&lt;b&gt;User details (from &lt;span id="profileType"&gt;&lt;/span&gt;)&lt;/b&gt;&lt;/p&gt;
 +
&lt;p&gt;Username: &lt;span id="username"&gt;&lt;/span&gt;&lt;/p&gt;
 +
&lt;p&gt;Email: &lt;span id="email"&gt;&lt;/span&gt;&lt;/p&gt;
 +
&lt;p&gt;Full Name: &lt;span id="name"&gt;&lt;/span&gt;&lt;/p&gt;
 +
&lt;p&gt;First: &lt;span id="givenName"&gt;&lt;/span&gt;&lt;/p&gt;
 +
&lt;p&gt;Last: &lt;span id="familyName"&gt;&lt;/span&gt;&lt;/p&gt;
 +
 
 +
&lt;script&gt;
 +
&nbsp; &nbsp; var keycloak = Keycloak('openid/keycloak.json');
 +
&nbsp; &nbsp; var loadData = function () {
 +
&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('subject').innerHTML = keycloak.subject;
 +
&nbsp; &nbsp; &nbsp; &nbsp; if (keycloak.idToken) {
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('profileType').innerHTML = 'IDToken';
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('username').innerHTML = keycloak.idTokenParsed.preferred_username;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('email').innerHTML = keycloak.idTokenParsed.email;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('name').innerHTML = keycloak.idTokenParsed.name;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('givenName').innerHTML = keycloak.idTokenParsed.given_name;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('familyName').innerHTML = keycloak.idTokenParsed.family_name;
 +
&nbsp; &nbsp; &nbsp; &nbsp; } else {
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keycloak.loadUserProfile(function() {
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('profileType').innerHTML = 'Account Service';
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('username').innerHTML = keycloak.profile.username;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('email').innerHTML = keycloak.profile.email;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('name').innerHTML = keycloak.profile.firstName + ' ' + keycloak.profile.lastName;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('givenName').innerHTML = keycloak.profile.firstName;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('familyName').innerHTML = keycloak.profile.lastName;
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, function() {
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('profileType').innerHTML = 'Failed to retrieve user details. Please enable claims or account role';
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });
 +
&nbsp; &nbsp; &nbsp; &nbsp; }
 +
&nbsp; &nbsp; &nbsp; &nbsp; //loginjwt
 +
&nbsp; &nbsp; };
 +
&nbsp; &nbsp; var loadFailure = function () {
 +
&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('customers').innerHTML = '&lt;b&gt;Failed to load data. &nbsp;Check console log&lt;/b&gt;';
 +
&nbsp; &nbsp; };
 +
&nbsp; &nbsp; var reloadData = function () {
 +
&nbsp; &nbsp; &nbsp; &nbsp; keycloak.updateToken(10)
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .success(loadData)
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .error(function() {
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('customers').innerHTML = '&lt;b&gt;Failed to load data. &nbsp;User is logged out.&lt;/b&gt;';
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });
 +
&nbsp; &nbsp; }
 +
&nbsp; &nbsp; //keycloak.login({ redirectUri: &nbsp;'login-required' });
 +
&nbsp; &nbsp; keycloak.init({ onLoad: 'login-required' })
 +
&nbsp; &nbsp; &nbsp; &nbsp; .success(reloadData)
 +
&nbsp; &nbsp; &nbsp; &nbsp; .error(function(errorData) {
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('customers').innerHTML = '&lt;b&gt;Failed to load data. Error: ' + JSON.stringify(errorData) + '&lt;/b&gt;';
 +
&nbsp; &nbsp; &nbsp; &nbsp; });
 +
&lt;/script&gt;
 +
 
 +
&lt;br&gt;&lt;br&gt;
 +
&lt;button onclick="reloadData()"&gt;Reload data&lt;/button&gt;
 +
&lt;/body&gt;
 +
&lt;/html&gt;</pre>

Revision as of 06:48, 10 January 2017

WISE-PaaS/OpenID is part of Advantech WISE-PaaS cloud solution and  plays an important role in the interoperability of Internet identity. It provides a central login mechanism.

WISE-PaaS/OpenID Connect utilizes Keycloak which is an open source identity and access management for modern applications and services.


Features Overview

Single-Sign On : Login once to multiple applications

Standard Protocols : OpenID Connect, OAuth 2.0 and SAML 2.0

Centralized Management : For admins and users

Adapters : Secure applications and services easily

High Performance : Lightweight, fast and scalable

Clustering : For scalability and availability

Themes : Customize look and feel

Extensible : Customize through code

Password Policies : Customize password policies


Implementation

Apply a manager account for OpenID Central Server

Please sen a request to <a href="WISE-Paas%2FOpenID%20Connect%20service%20manager">WISE-Paas/OpenID Connect service manager</a> by E-mail. And provide the following information

  • Service name : [RMM] as your realm.
  • Client name : [RMMClient] a client definition for a app to login in.
  • User registration : [True/False] Enable/Disable user registeration.
  • Administrator account : [RMMAdmin] Use this account to manage this realm. The default password is same as account name. Change password after first login.

Setting your service on OpenID server

Open the <a href="https://openidserver.redirectme.net:8443/auth/admin/" alt="https://openidserver.redirectme.net:8443/auth/admin/" title="https://openidserver.redirectme.net:8443/auth/admin/">https://openidserver.redirectme.net:8443/auth/admin/</a> and login with applied administrator account to config your realm before implement your client app.

  • (Essential) Public key : OpenID server generate a unique key for client app identification. Copy the public key to json setting file include in the client app .
  • (Essential) Valid Redirect URIs & Web Origins : Provide valid uri pattern for your client app. OpenID server would redirect to your client page while a successful login or logout. Your client page must be publicly accessible.
  • (Optional) User registration : 

Implement client codes

....

Sample code

OpenID.json : Replace realm, realm-public-key, client-id, resource according to realm setting 

{
  "realm": "RMM",
  "realm-public-key":"MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAgXyx5rl6laDJKt5vvz1lNYsrDgNHZKetagmr81IyvTuYpWQFwJwnai5pNQxfa6jgFBPiOg+pwD7jAfCgQghqWZFWVqPkL+Wt1PXEAXkg54yz9+oCrahsHZPoaQyWhTyf8StBqFUZurA7HkfRqPFINge5xo0jlkjVTcGUUTD/4HzEXc9tYdI1wqv9Ymd+eWG/uhYMu67DvzdNg/aIgxp5U7kYWZiyApjZH4ymP7fEWyFSSRSM/IwWKuW1Lc22w2nEU4RozZ5WF7QoOsjGB7ya62wwJN9UC+v+AgtUDy0VDkiDWruSz9pFQhTyWS1ITh9qoZerJdhu47eHPNKhoGVJpwIDAQAB",
  "auth-server-url": "https://openidserver.redirectme.net:8443/auth",
  "ssl-required": "all requests",
  "client-id": "RMMClient",
  "public-client": true,
  "resource":"RMMClient"
}

TestOpenID.html : An example HTML login client for WISE-PaaSOpenID Connect 

<html>
<head>
    <title>Customer View Page</title>
    <script src="https://openidserver.redirectme.net:8443/auth/js/keycloak.js"></script>
</head>
<body bgcolor="#E3F6CE">

<p>Goto: <a href="/product-portal">products</a> | <a href="#" onclick="keycloak.logout()">logout</a> | <a href="#" onclick="keycloak.accountManagement()">manage acct</a></p>

User <b id="subject"></b> made this request.
<p><b>User details (from <span id="profileType"></span>)</b></p>
<p>Username: <span id="username"></span></p>
<p>Email: <span id="email"></span></p>
<p>Full Name: <span id="name"></span></p>
<p>First: <span id="givenName"></span></p>
<p>Last: <span id="familyName"></span></p>

<script>
    var keycloak = Keycloak('openid/keycloak.json');
    var loadData = function () {
        document.getElementById('subject').innerHTML = keycloak.subject;
        if (keycloak.idToken) {
            document.getElementById('profileType').innerHTML = 'IDToken';
            document.getElementById('username').innerHTML = keycloak.idTokenParsed.preferred_username;
            document.getElementById('email').innerHTML = keycloak.idTokenParsed.email;
            document.getElementById('name').innerHTML = keycloak.idTokenParsed.name;
            document.getElementById('givenName').innerHTML = keycloak.idTokenParsed.given_name;
            document.getElementById('familyName').innerHTML = keycloak.idTokenParsed.family_name;
        } else {
            keycloak.loadUserProfile(function() {
                document.getElementById('profileType').innerHTML = 'Account Service';
                document.getElementById('username').innerHTML = keycloak.profile.username;
                document.getElementById('email').innerHTML = keycloak.profile.email;
                document.getElementById('name').innerHTML = keycloak.profile.firstName + ' ' + keycloak.profile.lastName;
                document.getElementById('givenName').innerHTML = keycloak.profile.firstName;
                document.getElementById('familyName').innerHTML = keycloak.profile.lastName;
            }, function() {
                document.getElementById('profileType').innerHTML = 'Failed to retrieve user details. Please enable claims or account role';
            });
        }
        //loginjwt
    };
    var loadFailure = function () {
        document.getElementById('customers').innerHTML = '<b>Failed to load data.  Check console log</b>';
    };
    var reloadData = function () {
        keycloak.updateToken(10)
                .success(loadData)
                .error(function() {
                    document.getElementById('customers').innerHTML = '<b>Failed to load data.  User is logged out.</b>';
                });
    }
    //keycloak.login({ redirectUri:  'login-required' });
    keycloak.init({ onLoad: 'login-required' })
        .success(reloadData)
        .error(function(errorData) {
            document.getElementById('customers').innerHTML = '<b>Failed to load data. Error: ' + JSON.stringify(errorData) + '</b>';
        });
</script>

<br><br>
<button onclick="reloadData()">Reload data</button>
</body>
</html>
Retrieved from "https://ess-wiki.advantech.com.tw/wiki/index.php?title=WISE-PaaS/Single_Sign-On(SSO)&oldid=4957"