I created a prototype to ask the permission from User for accessing their Google Calendar by using ASP.NET WebForms.
Here is my code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="GoogleSignInDemo.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="Resources/jquery.js" ></script>
</head>
<body>
<div class="g-signin2" data-theme="dark" onclick="onSignInCalendar()"></div>
<script>
function onSignInCalendar() {
var auth2 = gapi.auth2.getAuthInstance();
var options = new gapi.auth2.SigninOptionsBuilder(
{ 'scope': 'email https://www.googleapis.com/auth/calendar' });
googleUser = auth2.currentUser.get();
googleUser.grant(options).then(
function (success) {
console.log(JSON.stringify({ message: "success", value: success }));
var accessToken = success.Zi.access_token;
var idToken = success.Zi.id_token;
},
function (fail) {
alert(JSON.stringify({ message: "fail", value: fail }));
});
}
</script>
</body>
</html>
It works fine. However, the response from google only contain access_token and id_token. I can't find refresh_token in there.
Any knows how to get it?
Related
What I'm trying to achieve: Firebase email and password based authentication (user register) using Knockout.js in a game environment.
Issue: While retrieving and writing to the database works, I'm facing difficulties implementing user registration. The response returns following error: "This browser is not supported".
What are the requirements in order to perform an authentication process, issues might arise due to not using a regular browser but a game built-in one.
Edit: html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<noloc><title>UberBar</title></noloc>
<link href="bundle://boot/boot.css" rel="stylesheet" type="text/css" />
<link href="uberbar.css" rel="stylesheet" type="text/css" />
<script src="https://www.gstatic.com/firebasejs/5.0.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "*************************************",
authDomain: "**************.firebaseapp.com",
databaseURL: "https://**********.firebaseio.com",
projectId: "**************",
storageBucket: "****************.appspot.com",
messagingSenderId: "**********"
};
firebase.initializeApp(config);
</script>
<script src="bundle://boot/boot.js" type="text/javascript"></script>
<script src="coui://ui/main/shared/js/jabber.js" type="text/javascript"></script>
<script src="coui://ui/main/shared/js/leaderboard_utility.js" type="text/javascript"></script>
<script src="uberbar.js" type="text/javascript"></script>
</head>
<body data-bind="click: hideContextMenu">
<div id="social-wrapper">
<!-- ko if: (model.showUberBar()) -->
<div id="uberbar_watermark">
<loc>Offline</loc>
</div>
<!-- /ko -->
<!-- ko if: (model.showUberBar() && model.hasJabber()) -->
<!-- ko if: showUserDetails -->
<!-- File continues here... -->
Edit: js
var model;
var handlers;
$(document).ready(function () {
function PaChatModel() {
var self = this;
self.setColor = ko.observable(false);
self.setVisibility = ko.observable(false);
self.verificationStatus = ko.observable();
var chat_auth_status = 0;
self.verificationStatus('PA Community Chat (Authentication Required)');
self.awaitPermissionClose = function() {
self.verificationStatus('PA Community Chat (Authentication Required)');
self.setVisibility(false);
chat_auth_status = 0;
}
self.chatVerificationStatus = function() {
switch(chat_auth_status) {
case 0:
self.verificationStatus('Authentication in progress: Awaiting permission...');
self.setVisibility(true);
chat_auth_status = 1;
break;
}
}
}
PaChatModel();
function AwaitPermissionSubmit() {
var self = this;
self.mailValue = ko.observable();
self.pswValue = ko.observable();
self.awaitPermissionError = ko.observable();
var firebaseRef = firebase.database().ref();
self.awaitPermissionSubmitBtn = function() {
console.log(self.pswValue().length);
if(!validateEmail(self.mailValue()) && self.pswValue().length < 8) {
self.awaitPermissionError("Wrong E-Mail and Password format");
} else if(self.pswValue().length < 8) {
self.awaitPermissionError("Password must be at least 8 characters long");
} else if(!validateEmail(self.mailValue())) {
self.awaitPermissionError("Invalid E-Mail format");
}
else {
firebase.auth().createUserWithEmailAndPassword(self.mailValue(), self.pswValue()).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode == 'auth/weak-password') {
self.awaitPermissionError("The password is too weak.");
} else {
self.awaitPermissionError(errorMessage);
}
console.log(error);
// [END_EXCLUDE]
});
}
}
}
function validateEmail(email) {
var type = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return type.test(email);
}
AwaitPermissionSubmit();
I am trying to bind the id property value for a div using angularjs directive
I want a div container where id of the container will be passed as the parameter from the directive
<!DOCTYPE html>
<html lang="en" ng-app="directivesModule">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<h3>zendynamix Map Directive</h3>
<zd-map map-id="indexmap" ></zd-map>
<script src="scripts/angular.js"></script>
<script>
(function() {
var zdMap = function() {
var template = '<div id="{{scope.mapId}}" > abd</div>'
function link(scope, elem, attrs) {
console.log("**********************"+scope.mapId)
}
return {
scope: {
mapId:'#'
},
link: link,
template: template
};
};
angular.module('directivesModule', [])
.directive('zdMap', zdMap);
}());
</script>
</body>
</html>
but when i see inspect the element in bowser i am getting empty id value
please say how to go about it i need to bind the value of directive parameter to the template
You should not use the scope in the template outside of link function.
(function() {
var zdMap = function() {
var template = '<div id="{{mapId}}" > abd</div>'
function link(scope, elem, attrs) {
console.log("**********************"+scope.mapId)
}
return {
scope: {
mapId:'#'
},
link: link,
template: template
};
};
angular.module('directivesModule', [])
.directive('zdMap', zdMap);
}());
<!DOCTYPE html>
<html lang="en" ng-app="directivesModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<h3>zendynamix Map Directive</h3>
<zd-map map-id="indexmap" ></zd-map>
</body>
</html>
Please run the above snippet and check the id
Since you're using angular 1.5+ might I suggest using .component rather than .directive
(function() {
var zdMap = function() {
var template = '<div id="{{$ctrl.mapId}}" > abd</div>'
function controller() {console.log(this.mapId)}
return {
bindings: { // HERE !!
mapId:'#'
},
controller: controller
template: template
};
};
angular.module('componentModule', [])
.component('zdMap', zdMap); // here!!!!
}());
HTML:
<!DOCTYPE html>
<html lang="en" ng-app="componentModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<h3>zendynamix Map Directive</h3>
<zd-map map-id="indexmap" ></zd-map>
</body>
</html>
I'm about ASP net coupled with angularjs.
I have a main layout and 2 content pages
I want to spend my globals variables in page1 to page2.
I use a provider to pass the variable.
here's my problem: I just can not get a variable in my page2.
my layout page :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Mon application ASP.NET</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body ng-app="MainApp">
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/angular.js"></script>
<script src="~/MyScripts/MainApp.js"></script>
<script src="~/MyScripts/Page1Ctrl.js"></script>
<script src="~/MyScripts/Page2Ctrl.js"></script>
<script src="~/MyScripts/GlobalParam.js"></script>
</body>
</html>
my page 1:
#{
ViewBag.Title = "¨Page1";
}
<h2>#ViewBag.Title.</h2>
<h3>#ViewBag.Message</h3>
<div ng-controller="Page1Ctrl">
<p><a class="btn btn-default" ng-click="passVariable('5')">Pass variable (5) to Page2 with provider</a></p>
</div>
My page 2 :
#{
ViewBag.Title = "¨Page2";
}
<h2>#ViewBag.Title.</h2>
<h3>#ViewBag.Message</h3>
<div ng-controller="Page2Ctrl">
<label>received value : {{reveiveValue}}</label>
</div>
my main APP :
var MainApp = angular.module('MainApp',
[
'Page1App',
'Page2App',
'GlobalParam'
]);
My pageCtrl1:
'use strict';
var Page1App = angular.module('Page1App', ['GlobalParam'])
Page1App.controller('Page1Ctrl', function ($scope, $window, Param) {
$scope.passVariable = function (val) {
$scope.shared = val;
$window.location.href = '/Home/Page2';
}
})
My pageCtrl2 :
'use strict';
var Page2App = angular.module('Page2App', ['GlobalParam'])
Page2App.controller('Page2Ctrl', function ($scope, Param) {
$scope.reveiveValue = Param.value;
})
My service :
angular.module('GlobalParam', [])
.provider('Param', [function () {
this.$get = ['$http', '$q',
function ($http, $q) {
return {
value:0
};
}];
}])
thank you for your help
Here you are doing a server side redirect:
$window.location.href = '/Home/Page2';
which obviously will perform a roundtrip to the server and a full page reload. This will kill any javascript/angular stuff you might have done. So if you want to pass some variable during a server side redirect you can use query string parameters:
$scope.passVariable = function (val) {
$window.location.href = '/Home/Page2?myVariable=' + encodeURIComponent(val);
}
and in your target view you can render this variable using the server side Razor template:
<label>received value : #Request["myVariable"]</label>
And if you wanted to retrieve the value of this server side variable on the client you may create some global variable in your template:
<script>
window.myVariable = #Html.Raw(Json.Encode(Request["myVariable"]));
</script>
And then use window.myVariable where needed in your scripts.
If on the other hand you want to have a SPA application then you should not be doing any server side redirects. You may consider in this case using angular ui router which allows you to pass variables during client side redirects (redirects that modify only the fragment portion of the url - #).
I did a little test.
why I'm always redirected to the server?
Main HTML :
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MainApp</title>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/MyScripts/MainApp.js"></script>
<script src="~/MyScripts/Page1Ctrl.js"></script>
<script src="~/MyScripts/Page2Ctrl.js"></script>
<script src="~/MyScripts/GlobalParam.js"></script>
</head>
<body ng-app="MainApp">
<ul class="nav navbar-nav">
<li>Page1</li>
<li>Page2</li>
</ul>
<div>
<div ng-view></div>
</div>
</body>
</html>
MainApp.js
var MainApp = angular.module('MainApp', ["ngRoute"]);
MainApp.factory("ShareData", function () {
return { value: 0 }
});
//Defining Routing
MainApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/Page1',
{
templateUrl: 'Home/Page1',
controller: 'Page1Ctrl'
});
$routeProvider.when('/Page2',
{
templateUrl: 'Home/Page2',
controller: 'Page2Ctrl'
});
// $locationProvider.html5Mode(true);
//$locationProvider.html5Mode(true).hashPrefix('!')
}]);
Controlleur ASP :
public class HomeController : Controller {
public ActionResult MainApp() {
return View();
}
public ActionResult Page1() {
return View();
}
public ActionResult Page2() {
return View();
}
}
I am trying to implement manifest for one page. i don't have any idea how to implement the manifest, using below reference i implemented. but its not working.
http://www.codemag.com/Article/1112051.
My doubt: In local after implementing manifest even if visual studio not in debug mode, after refresh the page it should show the page right? here its not showing.
Please help how to implement manifest in mvc.
Here is the my code:
Home Controller:
public ActionResult Index()
{
Response.Cache.SetCacheability(
System.Web.HttpCacheability.NoCache);
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
return View();
}
public ActionResult Manifest()
{
Response.ContentType = "text/cache-manifest";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.Cache.SetCacheability(
System.Web.HttpCacheability.NoCache);
return View();
}
Index.cshtml:
<html manifest="#Url.Action("Manifest", "Home")">
<head>
<title></title>
<link href="~/Content/kendo/2014.2.903/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.903/kendo.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.903/kendo.dataviz.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.903/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="~/Scripts/kendo/2014.2.903/jquery.min.js"></script>
<script src="~/Scripts/kendo/2014.2.903/kendo.angular.min.js"></script>
<script src="~/Scripts/kendo/2014.2.903/kendo.all.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div id="grid"></div>
<button type="button" id="btnOfflineMode">Offline</button>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "Name" },
{ field: "Age" },
{ field: "NewCol" }
],
dataSource: [
{ Name: "John Doe", Age: 33 }
],
batch: true,
}).on('focus', function (e) {
var offset = $(this).offset();
var textarea = $("<textarea>");
textarea.css({
position: 'absolute',
opacity: 0,
top: offset.top,
left: offset.left,
border: 'none',
width: $(this).width(),
height: $(this).height()
})
.appendTo('body')
.on('paste', function () {
setTimeout(function () {
var value = $.trim(textarea.val());
var grid = $("#grid").data("kendoGrid");
var rows = value.split('\n');
var data = [];
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split('\t');
grid.dataSource.add({
Name: cells[0],
Age: cells[1],
NewCol: cells[2]
});
}
});
}).on('blur', function () {
});
setTimeout(function () {
textarea.focus();
});
});
$("#grid").attr("tabindex", -1).focus();
</script>
</body>
</html>
Manifest.cshtml:
CACHE MANIFEST
# version 1
CACHE:
/
/Content/kendo/2014.2.903/kendo.common.min.css
/Content/kendo/2014.2.903/kendo.default.min.css
/Content/kendo/2014.2.903/kendo.dataviz.min.css
/Content/kendo/2014.2.903/kendo.dataviz.default.min.css
/Scripts/kendo/2014.2.903/jquery.min.js
/Scripts/kendo/2014.2.903/kendo.all.min.js
/scripts/modernizr-2.6.2.js
FALLBACK:
/events /events.htm
NETWORK:
*
#{
Layout = null;
}
events.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Events</title>
<link rel="Stylesheet" href="/Content/style.css"
type="text/css" />
</head>
<body>
<section>
<h1>Events</h1>
<p>
The event listings are only available when
you are connected to the internet.
</p>
<div id="version">Version 1</div>
</section>
</body>
</html>
Try to create file site.maifest in the root folder of your site. And reference it in your html.
Like this
<html manifest="site.manifest">
Looks that it will be better to create your _Layout.cshtml logic and place common markup there.
I create an example where everything works good. Here it is on GitHub
I am trying to fetch wcf service from jquery. I have written below code but getting error.
jquery code:
function LoadAutoComplete(method, param) {
firstIncrement = pageSize + 1;
$.ajax({
type: "POST",
url: "Services/Popup.svc/" + method,
dataType: "json",
contentType: "application/json; charset=utf-8",
data: params,
processdata: true,
success: function (data) {
if (data.PopupData != null) {
alert(data);
}
else {
//response = null;
//return response;
}
},
error: function (result) { alert("Error"); }
});
}
function LoadTest(id) {
var prm = "<%= this.Sequence %>";
var params = '"sequence":' + prm;
method = "GetNotes";
LoadAutoComplete(method,params);
}
.aspx page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="JS/Popup.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
LoadAutoComplete("GetNotes","<%= this.Sequence %>");
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
GetNotes is my method name which i have written in Business logic.
Error: Microsoft JScript runtime error: '$' is undefined
You need to include jQuery, add the following script tag above the others:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>