JSFiddle - React, Tailwind, and code Playground

by timothy_shee

HTML

<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></script>
<div id="content">
     <h1>Implementing Google Oauth in JSFiddle</h1>

    <p>Doing demos with Google oauth logins isn't always easy. Trying to implement the Google API Client library for javascript will work only if the user is already logged in with a Google account. If so the “immediate” = true parameter will work. Otherwise you will run into several different issues involving cross scripting limitation and sandboxing.</p>
    <p>Here I put together a short example on how to implement Google OAuth via Javascript specifically for JSFiddles. Feel free to fork it for your own demos and if you like put a link back to this.</p>
    <a href="http://www.hackviking.com/development/implementing-google-oauth-in-jsfiddle/" target="_blank">Article about this demo...</a><br/>
    <div id="login"> <a id="btnGoogleOAuth" class="btn btn-primary" href="#" target="_blank" role="button">
            <i class="fa fa-google-plus"></i> Login with Google</a>

    </div>
    <div id="redirect"> <a id="btnSwitchToSSL" class="btn btn-danger" href="#" target="_blank" role="button">
            <i class="fa fa-exclamation-triangle"></i> Switch to HTTPS</a>

        <p class="text-danger">Token response from Google can be handled over HTTP but is a security issue so please swithc to HTTPS!</p>
    </div>
    <div id="demo">
        <div class="panel panel-default">
            <div class="panel-heading">
                 <h3 class="panel-title">Demo result - user info from Google</h3>
            </div>
            <div class="panel-body">
                <div>
                    <img id="user_pic"> <a id="user_name" href="#" target="_blank"></a>
                    
                </div>
                <div id="raw_data"></div>
            </div>
        </div>
    </div>
</div>
<nav...

CSS

#content {
    text-align: center;
}
#content p {
    padding: 0 25px 0 25px;
}
#demo {
    display: none;
}
#raw_data {
    text-align: left;
}
#demo img {
    height: 64px;
    width: 64px;
    border-radius: 50%;
}
.panel {
    margin: 0 25px;
}

/** Tag line style **/
.navbar-inverse {
    height: 50px;
    margin: 50px 0px 50px;
}
.brand-img {
    border-radius: 50%;
    position: relative;
    top: -37px;
    height: 128px;
    width: 128px;
}
@media (max-width: 768px) {
    .navbar-header {
        float: left;
        padding-left: 25px;
    }
    .navbar ul {
        float: right;
        display: inline-flex;
    }
}

JavaScript

// Set basic variables
var oAuthEndPoint = "https://accounts.google.com/o/oauth2/auth";
var oAuthClientID = "702841265150-iaravt3jmu0c67k892pivj9kgkb8dbco.apps.googleusercontent.com";
var oAuthScope = "https://www.googleapis.com/auth/userinfo.profile";

// Check if page is secure
if (IsSecure()) {
    // Check url for token
    if (GetURLParameter("access_token") != undefined) {
        // Make request if token is avalible
        LoadUserInfo(GetURLParameter("access_token"), GetURLParameter("expires_in"));
    }
}

// Checks if the page is secured
// If it is it will show the login button
// If not it will show the button for switching to https
function IsSecure() {
    var retval = false;

    if (location.protocol === 'https:') {
        retval = true;
        // Set the login href
        $("#btnGoogleOAuth").attr("href", GetOAuthURL());

        // Show demo and hide redirect
        $("#login").show();
        $("#redirect").hide();
    } else {
        // Build the redirect link
        var a = document.createElement('a');
        a.href = document.referrer;
        $("#btnSwitchToSSL").attr("href", ['https://', a.host, a.pathname].join('\n'));
        a = '';

        // Hide demo and show redirect
        $("#login").hide();
        $("#redirect").show();
    }

    return retval;
}

// Function for building the oauth url for the authentication link
function GetOAuthURL() {
    // Get the referrer (URL of the JSFiddle)
    var a = document.createElement('a');
    a.href = document.referrer;

    // Replace the jsfiddle.net with the fiddle.jshell.net domain
    var redirect_uri = ['https://fiddle.jshell.net', a.pathname].join('');
    a = '';

    // URL Encode parameters
    var redirect_uri = encodeURIComponent(redirect_uri); // Get current URL
    var client_id = encodeURIComponent(oAuthClientID);
    var scope = encodeURIComponent(oAuthScope);

    // Build the actuall url
    var oauth_url = oAuthEndPoint + "?client_id=" + client_id +...