Skip to content

Instantly share code, notes, and snippets.

@alex-deaconu

alex-deaconu/index.html

Created January 22, 2018 17:55
Show Gist options
  • Save alex-deaconu/544cdf6d37423b5f92ad72245958a97b to your computer and use it in GitHub Desktop.
Save alex-deaconu/544cdf6d37423b5f92ad72245958a97b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html ng-app="risevision.apps" itemscope itemtype="http://schema.org/WebApplication" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head lang="en">
<base href="/">
<meta name="fragment" content="!">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="https://s3.amazonaws.com/Rise-Images/favicons/rv_favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="https://s3.amazonaws.com/Rise-Images/favicons/rv_favicon.ico" type="image/x-icon">
<title itemprop='name'>Rise Vision</title>
<link rel="stylesheet" type="text/css" href="https://apps.risevision.com/css/ea.min.css">
</head>
<body>
<div ng-controller="TestController">
<div class="app-launcher-login">
<div class="container">
<div class="panel">
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="rise-logo"><img src="https://s3.amazonaws.com/Rise-Images/Website/rise-logo.svg"></div>
</div>
<div class="col-sm-6 col-xs-12">
<div>
<h1 class="u_remove-top">Sign In</h1>
<p class="lead text-muted">to your Rise Vision account</p>
<!-- GOOGLE API -->
<div class="col-xs-12 col-md-8">
<button class="btn btn-google-auth btn-hg" id="sign-in-google-link" ng-click="authenticateRedirect()" ng-if="!isSignedIn">
<span>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg">
Sign in with Google
</span>
</button>
<div class="panel-body bg-warning u_margin-sm-top">
<p class="u_remove-bottom">
<span><strong>Signed In Status: </strong>{{isSignedIn ? "Yes" : "No"}}</span>
</p>
</div>
<br>
<p class="text-muted u_margin-md-top" ng-if="isSignedIn">
<a id="sign-in-link" href="" ng-click="signOut()">Sign Out</a>
</p>
</div>
</div>
</div><!--col-->
</div><!--row-->
</div><!--panel-->
</div><!--container-->
</div><!--app-launcher-login-->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script type="text/javascript">
var gapiLoadingStatus = null;
var handleClientJSLoad = function () {
gapiLoadingStatus = "loaded";
console.debug("ClientJS is loaded.");
//Ready: create a generic event
var evt = document.createEvent("Events");
//Aim: initialize it to be the event we want
evt.initEvent("gapi.loaded", true, true);
//FIRE!
window.dispatchEvent(evt);
};
angular.module("risevision.apps", ["ui.router"])
.value("CLIENT_ID", "CLIENT_ID.apps.googleusercontent.com")
.value("OAUTH2_SCOPES", "https://www.googleapis.com/auth/userinfo.email")
.config(["$urlRouterProvider", "$stateProvider", "$locationProvider",
function storeRouteConfig($urlRouterProvider, $stateProvider,
$locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise("/");
}
])
.factory("getBaseDomain", ["$log", "$location",
function ($log, $location) {
var _looksLikeIp = function (addr) {
if (/^([0-9])+\.([0-9])+\.([0-9])+\.([0-9])+$/.test(addr)) {
return (true);
}
return (false);
};
return function () {
var result;
if (!result) {
var hostname = $location.host();
if (_looksLikeIp(hostname)) {
result = hostname;
} else {
var parts = hostname.split(".");
if (parts.length > 1) {
// Somehow, cookies don't persist if we set the domain to appspot.com.
// It requires a sub-domain to be set, ie. rva-test.appspot.com.
if (parts[parts.length - 2] === "appspot") {
result = parts.slice(parts.length - 3).join(".");
} else {
result = parts.slice(parts.length - 2).join(".");
}
} else {
//localhost
result = hostname;
}
}
$log.debug("baseDomain", result);
}
return result;
};
}
])
.factory("gapiLoader", ["$q", "$window",
function ($q, $window) {
var deferred = $q.defer();
return function () {
var gapiLoaded;
if ($window.gapiLoadingStatus === "loaded") {
deferred.resolve($window.gapi);
} else if (!$window.gapiLoadingStatus) {
$window.gapiLoadingStatus = "loading";
var src = $window.gapiSrc ||
"//apis.google.com/js/api.js?onload=handleClientJSLoad";
var fileref = document.createElement("script");
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", src);
if (typeof fileref !== "undefined") {
document.getElementsByTagName("body")[0].appendChild(fileref);
}
gapiLoaded = function () {
deferred.resolve($window.gapi);
$window.removeEventListener("gapi.loaded", gapiLoaded, false);
};
$window.addEventListener("gapi.loaded", gapiLoaded, false);
}
return deferred.promise;
};
}
])
.factory("auth2APILoader", ["$q", "gapiLoader", "$log", "CLIENT_ID",
function ($q, gapiLoader, $log, CLIENT_ID) {
return function () {
var deferred = $q.defer();
gapiLoader().then(function (gApi) {
if (gApi.auth2 && gApi.auth2.getAuthInstance()) {
//already loaded. return right away
deferred.resolve(gApi.auth2);
} else {
gApi.load("auth2", function () {
if (gApi.auth2) {
gApi.auth2.init({
client_id: CLIENT_ID,
scope: "profile"
}).then(function () {
$log.debug("auth2 API Loaded");
deferred.resolve(gApi.auth2);
}, function () {
var errMsg = "auth2 GoogleAuth Init Failed";
$log.error(errMsg);
deferred.reject(errMsg);
});
} else {
var errMsg = "auth2 API Load Failed";
$log.error(errMsg);
deferred.reject(errMsg);
}
});
}
});
return deferred.promise;
};
}
])
.factory("clientAPILoader", ["$q", "gapiLoader", "$log",
function ($q, gapiLoader, $log) {
return function () {
var deferred = $q.defer();
gapiLoader().then(function (gApi) {
if (gApi.client) {
//already loaded. return right away
deferred.resolve(gApi);
} else {
gApi.load("client", function () {
if (gApi.client) {
$log.debug("client API Loaded");
deferred.resolve(gApi);
} else {
var errMsg = "client API Load Failed";
$log.error(errMsg);
deferred.reject(errMsg);
}
});
}
});
return deferred.promise;
};
}
])
.factory("googleAuthFactory", ["$q", "$window", "$log", "$location",
"gapiLoader", "auth2APILoader", "getBaseDomain",
"CLIENT_ID", "OAUTH2_SCOPES",
function ($q, $window, $log, $location,
gapiLoader, auth2APILoader, getBaseDomain,
CLIENT_ID, OAUTH2_SCOPES) {
var factory = {};
factory.authorize = function () {
var deferred = $q.defer();
auth2APILoader()
.then(function (auth2) {
var authResult = auth2.getAuthInstance() &&
auth2.getAuthInstance().isSignedIn.get();
$log.debug("authResult", authResult);
if (authResult) {
deferred.resolve(authResult);
} else {
deferred.reject("failed to authorize user");
}
})
.then(null, deferred.reject); //auth2APILoader
return deferred.promise;
};
factory.authenticateRedirect = function () {
var loc = $window.location.origin + "/";
var opts = {
client_id: CLIENT_ID,
scope: OAUTH2_SCOPES,
response_type: "token",
prompt: "select_account",
cookie_policy: $location.protocol() + "://" +
getBaseDomain(),
ux_mode: "redirect",
redirect_uri: loc
};
var deferred = $q.defer();
auth2APILoader()
.then(function (auth2) {
return auth2.getAuthInstance().signIn(opts);
});
// returns a promise that never get fulfilled since we are redirecting
// to that google oauth2 page
return deferred.promise;
};
factory.signOut = function (signOutGoogle) {
return gapiLoader().then(function (gApi) {
if (signOutGoogle) {
$window.logoutFrame.location =
"https://accounts.google.com/Logout";
}
if (gApi.auth2) {
gApi.auth2.getAuthInstance().signOut();
}
$log.debug("User is signed out.");
});
};
return factory;
}
])
.controller("TestController", ["$scope", "googleAuthFactory",
function ($scope, googleAuthFactory) {
$scope.isSignedIn = false;
_authorize = function () {
googleAuthFactory.authorize().then(function() {
$scope.isSignedIn = true;
}, function() {
$scope.isSignedIn = false;
});
};
_authorize();
$scope.authenticateRedirect = function () {
googleAuthFactory.authenticateRedirect();
};
$scope.signOut = function () {
googleAuthFactory.signOut().then(function() {
_authorize();
})
};
}
]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment