OpenID Connect Session Management Demo

Spec

Supported :
http://openid.bitbucket.org/openid-connect-session-1_0.html
Not Supported yet :
discovery of OP iframe URL and logout URL

URLs

OP : https://openidconnect.info/
OP Logout URL : https://openidconnect.info/connect/logout
RP : http://www8322u.sakura.ne.jp/php-connect-sm/

Step 1. Visit the RP

Click to "Authentication" link and start flow.

Step 2. Sign in to the OP

Choose the Fake Account.

Step 3. Authorization

Step 4. Start to check OP Session Status

The RP checks a session of OP every three seconds.

Step 5. Sign-out at OP

Open the new window and visit OP, and click to "Logout" button.

Step 6. Session synchronization

The RP receives a change of the status and notifies own user.

Extra step : RP initiated Logout

If the user logout of RP, it is sent to OP logout URL.

At OP logout URL, OP displays a confirmation screen to user and lets user logout.

Sample Code : OP iframe URL

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>OpenID Connect Sandbox</title>
        <script src="https://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/sha256.js"></script>
        <script language="JavaScript" type="text/javascript">
            window.addEventListener("message",receiveMessage, false);
            function receiveMessage(e){
                var origin = "http://www8322u.sakura.ne.jp"; // origin from client_id
                if ( e.origin !== origin ) {
                    return;
                }

                var stat;
                var client_id = "77596671429810a5f9fcaf7404216f70f29cd40c"; // from ID Token
                var salt = getSaltFromData(e.data); // from e.data
                var opss = getOpssFromCookie(); // from Cookie or use API access
                var ss = CryptoJS.SHA256(client_id + origin + opss + salt) + "." + salt;  
                if (e.data == ss) {
                    stat = 'unchanged';
                } else {
                    stat = 'changed';
                }
                e.source.postMessage(stat, e.origin);
            };

            function getSaltFromData(data){
                var salt = "";
                var split_data = data.split(".");
                if(split_data.length == 2){
                    salt = split_data[1];
                }
                return salt;
            }

            function getOpssFromCookie(){
                var theName = "OPS=";
                var theCookie = document.cookie+";";
                var start = theCookie.indexOf(theName);
                if (start != -1)
                {
                    var end = theCookie.indexOf(";",start); //　データを抜きだす
                    return unescape(theCookie.substring(start+theName.length,end));
                }
                return "";
            }
        </script>
    </head>
    <body>
    This is OpenID Connect Session Management op_iframe URL.
    </body>
</html>

client_id, origin : from ID Token
salt : from data
opss : from Cookie

Sample Code : RP iframe URL

<html>
    <head>
        <title>OpenID Connect Session Management Sample RP : RP iframe</title>
        <script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/sha256.js"></script>
        <script language="JavaScript" type="text/javascript">
            var stat = "unchanged";
            var client_id = "77596671429810a5f9fcaf7404216f70f29cd40c";
            var origin = "http://www8322u.sakura.ne.jp";
            var opss = "c1a43afe7e07935514d13a730fe6739a6e8b80344601fad8c429ee58b25b45f3";
            var salt = "6dc1ed929c268f433a9fe00a8e1afdf56be8a4ec";
            var mes = CryptoJS.SHA256(client_id + origin + opss + salt) + "." + salt;
            var targetOrigin  = "https://openidconnect.info";

            function check_session()
            {
                var win = window.parent.document.getElementById("op").contentWindow;
                win.postMessage( mes, targetOrigin);
            }

            function setTimer()
            {
                window.parent.document.getElementById('notice').innerHTML = "Checking OP Session Status.";
                check_session();
                timerID = setInterval("check_session()",3*1000);
            }

            window.addEventListener("message", receiveMessage, false);

            function receiveMessage(e)
            {
                if (e.origin !== targetOrigin ) {return;}
                stat = e.data;
                noticeToParentWindow(stat);
            }

            function noticeToParentWindow(stat){
                if (stat == "changed") {
                    window.parent.document.getElementById('notice').innerHTML = "You are logged out at openidconnect.info.";
                }else{
                    window.parent.document.getElementById('notice').innerHTML = "";
                }
            }
        </script>
    </head>
    <body onload="setTimer()">
This is rp_iframe
    </body>
</html>

ritou/gist:3149557