Tags Posts tagged with "主人推荐 MASTER PICKS"


Although this Articles simply collects and gathers links for all front-end developer’s or designer’s reference, but it’s really important to introduce or remind us about ‘Wireframing’.

• What's Wireframes and why is it important

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

网站的线框 ,也被称作页面蓝图或页面原理图,是展现网站页面的结构的可视化指导。
Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea.

The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.


The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.In other words, it focuses on what a screen does, not what it looks like.

Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers and other roles with expertise in interaction design, information architecture and user research.

线框可以是白板上的铅笔画或草图,或者可以通过广泛的免费或商业软件等应用程序制作生成。 线框通常由业务分析师,用户体验设计师,开发人员,视觉设计师和其他在交互设计,信息架构和用户研究方面具有专长的人员创建。


Wireframes focus on:

The range of functions available
The relative priorities of the information and functions
The rules for displaying certain kinds of information
The effect of different scenarios on the display
The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website.
Wireframes help establish functionality, and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work—like flowcharts or site maps—and screen designs.”
Within the process of building a website, wireframing is where thinking becomes tangible


UI/UX Design

why is it important?

• The Future of Wireframes

Time to re-assess and understand how to make good use of Wireframes:

• Wireframing Is Not a Religion

Wireframing is an important design method, a digital design board, you can amend or wipe out anytime

• Five Commandments for Wireframing

Paul Boag is a fan of Wireframing, he believes that it is one necessity part of design

• 20 Steps to Better Wireframing

Possibly the biggest mistake in any development project is failure to plan.

Some Resources and Round-Ups
• Tools

Opensource: http://pencil.evolus.vn/Default.html

COTS: viso, etc.

• I Love Wireframing
• Wireframe Showcase
• Standard Screen Patterns for Web Interface Design


• 50 Free UI and Web Design Wireframing Kits and Resources

这篇文章关注一些线框工具和独立的应用程序,包括一些你可以用来制作自己线框图的一些工具:线框工具集,浏览器窗口,表单元素,网格,Mac OS X元素和手机元素,你可以在任何图形编辑器中使用他们,PS,AI,甚至纸笔工具。

• A Collection of Printable Sketch Templates and Sketch Books for Wireframing


• A Collection of Printable Web Browser Sketching and Wireframe Templates


• Useful(Offline) Utensils and Tookits for Designers


Free Wireframing Kits, UI Design Kits, PDFs and Resources – Smashing Magazine_files

signalr error

chat room version 1.0 functionality demonstration by gif:

chat room by LIU YUE
chat room by LIU YUE


(all the domains below are fictional)

Now I have a web site website.com, an Oauth2 server oauth.com, and an API server/Resource server api.com,access restricted through oauth only, now I am asked to create an online chatting room for website.com, which will be embedded in website.com using iframe, assume domain is chatroom.com.

General workflow will be: user log on website.com through oauth.com, on oauth successfully website.com pass access_token to chatroom.com, then last step, chatroom use access_token to retrieve user info from API.com, this process is also considered as logon chatroom.

My colleague suggests me to use signalr, compare to super socket, it’s much more easy to draw UI because UI for such an online chatting room is very complicated, another advantage of signalr is that it supports long-polling, means those browsers not supporting websocket will also works fine, while the disadvantage is I need to maintain my own ‘sessions’, signalr or most web sockets do not support session feature by default.( why? answer in my blog ‘About Session‘ )

2.Business Modeling

– Domain Modeling ( use case driven approach,the task of discovering ‘objects’ that represent those business entities and concepts)

User(name,online status)


Conversation Room — chat group (name, creator,members,status)

Message — Private Message, Group Message

Recently chat list


when user successfully connected with server,If he doesn’t have nickname yet, required to update user info through api.com.

after checking nickname, he will be auto assigned to one of the lobbies(system setting channels);

user can switch channels, can check users online status and add friends,

start private conversation with friends,

create chat group with selected friends,manage chat group, invite friend, kick out member.

system will keep track of users’ recently chat records,

missed messages will push to user as soon as he get online.

4.Analysis & Design


MVC for presentation layer

SignalR for communication layer

Mongodb for db layer


user persistence: session

security: form authentication




signalr reconnect?

rejoin room ? missed message push?

session lost handling? token expired handling?

fallback handling,go back to client side, ask for new token ?

performance enhancement?

code refactor?



Show Loading tips before enter/switch room and disable page event



1.signalR life cycle

SignalR connection OnConnected OnReConnected OnDisconnected

Transport connection

negotiate –> connect –> start–> send….—> reconnect

(reconnect every 5s,on 30s throw hub error:

Error: Couldn’t reconnect within the configured timeout of 30000 ms, disconnecting. {source: “TimeoutException”, stack: (…), message: “Couldn’t reconnect within the configured timeout of 30000 ms, disconnecting.”}

Error: The client has been inactive since Wed May 13 2015 15:27:25 GMT+0800 (China Standard Time) and it has exceeded the inactivity timeout of 50000 ms. Stopping the connection. {source: “TimeoutException”, stack: (…), message: “The client has been inactive since Wed May 13 2015…ity timeout of 50000 ms. Stopping the connection.”}

), then abort (check network)
Object{connecting:0, connected:1, reconnecting:2, disconnected:4}
error: connect before call

solution: block user before connected,e.g. using overlap loading.

2. send failed error

ChatHub.Send failed:
chatroom.js:351 Error: Error: Send failed.
at Object.r._.error (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:4512)
at i.l (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:34125)
at Object.<anonymous> (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:35652)
at Object.<anonymous> (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:11987)
at Object.n.event.dispatch (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:8066)
at Object.r.handle (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:4774)
at Object.n.event.trigger (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:7167)
at n.fn.extend.triggerHandler (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:15006)
at s (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:18319)
at Object.u.ajax.success (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:18593)
chatroom.js:118 SignalR error: Error: Send failed.
chatroom.js:662 ChatHub.Send failed:
chatroom.js:663 Error: Connection was disconnected before invocation result was received.
at Object.r._.error (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:4512)
at i.l (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:34125)
at f (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:32687)
at Object.<anonymous> (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:35854)
at Object.<anonymous> (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:12085)
at Object.n.event.dispatch (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:8066)
at Object.r.handle (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:4774)
at Object.n.event.trigger (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:7167)
at n.fn.extend.triggerHandler (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:15006)
at Object.r.fn.r.stop (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:13160)

reason:another asynchronous call still in processing, may cause dead lock


queue before send calling, using Jquery.defferred Promise




signalr error


Finally!!! Let’s meet the murderer !!!

[InvalidOperationException]: An asynchronous module or handler completed while an asynchronous operation was still pending.

Regarding “fire and forget”:
I personally never use this phrase for async void methods. For one thing, the error handling semantics most certainly do not fit in with the phrase “fire and forget”; I half-jokingly refer to async void methods as “fire and crash”. A true async “fire and forget” method would be an async Task method where you ignore the returned Task rather than waiting for it.
That said, in ASP.NET you almost never want to return early from requests (which is what “fire and forget” implies). This answer is already too long, but I have a description of the problems on my blog, along with some code to support ASP.NET “fire and forget” if it’s truly necessary.


3.query in MongoDB using C# Driver




4.httpcontext session/cookie is null with IE

You can try the following code by adding in Global.asax file

protected void Application_BeginRequest(object sender, EventArgs e)
HttpContext.Current.Response.AddHeader(“p3p”, “CP=\”CAO PSA OUR\””);
The problem lies with a W3C standard called Platform for Privacy Preferences or P3P. This will allow Internet Explorer to accept your cookie. You will need to send the header on every page that sets a cookie.

5.Page refresh, SignalR disconnect and connect again and assign new connectionID, but how to maintain state(First Connection Time and current conversation state)


solution: Maitain your own SessionList, OnDisconnected mark check session state, if previous online=true, set online=false and remove connectionID from , else remove session, when OnConnected check session, if find user in session and previous online=false, set it true, and add new connectionID

6.Configuration Management

release maintenance




Using ajaxSetup beforeSend for Basic Auth is breaking SignalR connection


Understanding and Handling Connection Lifetime Events in SignalR






Emoticons (Verify Code e4d6) 聊天表情源码 提取码 e4d6

7.Continuous Integration

another system which is the back end system need to interact with chatroom, e.g. from back end system, admin can ‘push’ messages to all clients connected with chatroom,

back end system was implemented using .net c# technology,

issues: I am using Form Authenticate with ChatHub which is the only hub I have so far. JS Clients connect to it after authentication.

solution: add one more hub to interact with .net client, this new hub need also keep reference of ChatHub to notify all JS Clients connected to it.




errors encountered:

signalr Unexpected character encountered while parsing value: <. Path ”, line 2, position 1.

reason: failed to connect to the hub, check whether you called the correct path or is there any authentication requires towards your hub.

b.further more, I was asked to make the ‘push’ message be periodic, so I decided to use timer, soon I found the issue, I cannot do async operations inside a timer(threading timer)

solution in my the other blog Code Snippets Series – C#



websocket_frames[box title=”SignalR Message Format”]

— http://blogs.microsoft.co.il/applisec/2014/03/12/signalr-message-format/

Messages are serialized as JSON objects and contain metadata about the handlers and the connection as well as payload (i.e. the data to transfer) The following information is included in the messages:

– Hubs (H): Handlers (i.e methods) on the server as well as on the clients are grouped in “Hubs”.
– Method (M): The name of the Handler that will process the message.
– Groups: Clients can be grouped on the servers in “groups” for pub-sub implementation.
– Arguments (A): The actual content to be passed to the hander on the client or on the server.
– Cursor (C): Represents a position in the message stream.
– Index (I): The Id of the handler or Callback.
Hub Message Format

Hub Request format (“send” request)


Hubs messages format (server to client)

– {“C”:”messageId value”, “M”:[{“H”:”HubName”,”M”:”HandlerName”,”A”: [“argument list as json”]}]}

– {“C”:”messageId value”, “G”: [“groupName”],”g”: [“groupName”],”T”:1,
“M”:[{“H”:”HubName”,”M”:”HandlerName”,”A”: [“argument list as json”]}]}

Hub Payloads format (“send” request or inside “M” element of Hub message)

– {“H”:”HubName”,”M”:”HandlerName”,”A”: [argument list as json],                                    “S”:{state as json},”I”:index}
– {“H”:”HubName”,”M”:”HandlerName”,”A”: [argument list as json],”I”:index}
Hub Response examples (“send” response)
– {“I”:”0″,”R”:{“return object as json}}
– {“I”: 0} -> no result
– {“I”: 0, “S”:{“x”:1},”R”:1} –> result
– {“I”: 0, “E”:”This is an error”} –> error
– {“I”: 0, “E”:”This is an error”, “T”: “Some stack trace here”} -> error + stack
The following is a complete list of the messages elements:
Hub Messages:

C – Cursor
M – Messages
T – Timeout (only if true) value is 1
D – Disconnect (only if true) value is 1
R – All Groups (Client groups should be reset to match this list exactly)
G – Groups added
g – Groups removed

Hub payload:

I – Callback Operation index
H – Hub name
M – method name
A – arguments
S – state (if not null)

Hub Method return value:

I – Operation index
R – Result
S – State
E – Error
T – stack trace
D – Error Data

The cursor mechanism
As described above the message contains a cursor for identifying the location in the stream. A cursor represents where a particular client is in an infinite stream of messages. If the client disconnects and then reconnects, it asks the OI streaming API for any messages that arrived after the client’s cursor value. The same thing happens when a connection uses long polling. After a long poll request completes, the client opens a new connection and asks for messages that arrived after the cursor.

To find more information download the signalR source code from github. To find the message format just search for json serialization attributes (by searching for “M” for example).





High Performance Search using MongoDB and ASP.NET MVC


Storing Custom Data in Forms Authentication Tickets

form authentication timeout not working

Authentication with SignalR and OAuth Bearer Token

Set Context User Principal for Customized Authentication in SignalR


Real-time User Notification and Session Management with SignalR


jQuery plugin to style emoticons with pure CSS3 properties (no images)

Open sourcing Twitter emoji for everyone


纯JS+MVC 打造Web实时聊天室


relevant question:

How to do forms authentication with SignalR (separate domains)?

SignalR 2.0 in VS2012 registration and Dependency Injection

Passing and verifying the OWIN Bearer token in Query String in WebAPI

Web API / OWIN, SignalR & Authorization

Unable to Identify User Context in SignalR hub decorated with “Authorize” attribute

Context.User is Null on [Authorized] SignalRHub Task OnDisconnected

Integrating SignalR with existing Authorization

How do I authorize access to ServiceStack resources using OAuth2 access tokens via DotNetOpenAuth?

JSON Web Token in ASP.NET Web API 2 using Owin


【打破砂鍋系列】SignalR傳輸方式剖析 http://blog.darkthread.net/post-2013-12-03-inside-signalr-transport.aspx

A chatroom for all! http://blogs.msdn.com/b/cdndevs/archive/2014/09/04/node-js-tutorial-series-a-chatroom-for-all-part-1-introduction-to-node.aspx


0 2348
大话西游 第三部 通天泪

King of Comedy:Laugh till you cry

stephen chow
He started off as a temporary actor, before becoming a successful and popular comedy actor over the course of a decade.Now his films have a strong influence on Chinese young generations,his films always make you reflect on your own life,then you know it,and feel it, he is king of comedy in many people’s heart.
Now let’s review his filmography:

Year English Title Chinese title Role Award & Nomination
1982 Demi-Gods and Semi-Devils (TV series) 天龍八部 Actor
1982 The Legend of Master So (TV series) 蘇乞兒 Actor
1982 The Emissary (TV series) 獵鷹 Actor
1983 The Old Miao Myth (TV series) 老洞 Actor
1983 The Legend of the Condor Heroes (TV series) 射鵰英雄傳 Actor
1988 Final Justice 霹靂先鋒 Actor Golden Horse Award for Best Supporting ActorNominated—Hong Kong Film Award for Best Supporting Actor

Nominated—Hong Kong Film Award for Best New Performer

1988 Faithfully Yours 最佳女婿 Actor
1988 My Father’s Son (1988 film) 華麗轉身 Actor
1988 He Who Chases After the Wind 捕風漢子 Actor
1988 The Justice of Life (TV series) 他來自江湖 Actor
1988 Dragon Fight 龍在天涯 Actor
1989 The Final Combat (TV series) 蓋世豪俠 Actor
1989 Just Heroes 義膽群英 Actor
1989 Thunder Cops II 流氓差婆 Actor
1990 Love Is Love 望夫成龍 Actor
1990 My Hero 一本漫畫闖天涯 Actor
1990 Lung Fung Restaurant 龍鳳茶樓 Actor
1990 Unmatchable Match, TheThe Unmatchable Match 风雨同路 Actor
1990 Curry and Pepper 咖喱辣椒 Actor
1990 Sleazy Dizzy 小偷阿星 Actor
1990 Look Out, Officer! 師兄撞鬼 Actor
1990 All for the Winner 賭聖 Actor Nominated—Hong Kong Film Award for Best Actor
1990 When Fortune Smiles 無敵幸運星 Actor
1990 Triad Story 江湖最後一個大佬 Actor
1990 Legend of the Dragon 龍的傳人 Actor
1991 God of Gamblers II 賭俠 Actor
1991 Top Bet, TheThe Top Bet 賭霸 Actor
1991 Fist of Fury 1991 新精武門1991 Actor
1991 Fight Back to School 逃學威龍 Actor Nominated—Hong Kong Film Award for Best Actor
1991 God of Gamblers III: Back to Shanghai 賭俠2之上海灘賭聖 Actor
1991 Magnificent Scoundrels, TheThe Magnificent Scoundrels 情聖 Actor
1991 Banquet, TheThe Banquet 豪門夜宴 Actor
1991 Crazy Safari 非洲和尚 Narrator
1991 Tricky Brains 整蠱專家 Actor
1992 Fist of Fury 1991 II 漫畫威龍 Actor
1992 All’s Well, Ends Well 家有囍事 Actor
1992 Fight Back to School II 逃學威龍2 Actor
1992 Justice, My Foot! 審死官 Actor Asia Pacific Film Festival for Best ActorNominated—Golden Horse Award for Best Actor

Nominated—Hong Kong Film Award for Best Actor

1992 Royal Tramp 鹿鼎記 Actor
1992 Royal Tramp II 鹿鼎記2神龍教 Actor
1992 King of Beggars 武狀元蘇乞兒 Actor
1992 The Thief of Time 群星會 Actor
1993 Fight Back to School III 逃學威龍3之龍過雞年 Actor
1993 Flirting Scholar 唐伯虎點秋香 Director, Actor
1993 Mad Monk, TheThe Mad Monk 濟公 Actor
1994 Love on Delivery 破壞之王 Director, Actor
1994 Hail the Judge 九品芝麻官 Actor
1994 From Beijing with Love 國產凌 凌漆 Director, Screenwriter, Actor Nominated—Hong Kong Film Award for Best Actor
1995 A Chinese Odyssey Part One: Pandora’s Box 西遊記第壹佰零壹回之月光寶盒 Actor
1995 A Chinese Odyssey Part Two: Cinderella 西遊記大結局之仙履奇緣 Actor Nominated—Hong Kong Film Award for Best Actor
1995 Out of the Dark 回魂夜 Actor
1995 Sixty Million Dollar Man 百變星君 Actor
1996 Forbidden City Cop 大內密探零零發 Director, Screenwriter, Actor
1996 God of Cookery, TheThe God of Cookery 食神 Producer, Director, Screenwriter, Actor
1997 All’s Well, Ends Well 1997 97家有囍事 Actor
1997 Lawyer Lawyer 算死草 Actor
1998 Lucky Guy, TheThe Lucky Guy 行運一條龍 Actor
1999 King of Comedy 喜劇之王 Director, Screenwriter, Actor
1999 Gorgeous 玻璃樽 Actor
1999 Tricky Master, TheThe Tricky Master 千王之王2000 Actor
2001 Shaolin Soccer 少林足球 Producer, Director, Screenwriter, Actor Blue Ribbon Award for Best Foreign Language FilmHong Kong Film Award for Best Film

Hong Kong Film Award for Best Director

Hong Kong Film Award for Best Actor

Hong Kong Film Award for Best New Director

Nominated—Hong Kong Film Award for Best Screenplay

2004 Kung Fu Hustle 功夫 Producer, Director, Screenwriter, Actor, Composer Amsterdam Fantastic Film Festival for Silver Scream AwardBoston Society of Film Critics Award for Best Foreign Language Film

Broadcast Film Critics Association Award for Best Foreign Language Film

Florida Film Critics Circle Award for Best Foreign Language Film

Golden Horse Award for Best Feature Film

Golden Horse Award for Best Director

Hong Kong Film Award for Best Film

Las Vegas Film Critics Society Award for Best Foreign Language Film

Phoenix Film Critics Society Award for Best Foreign Language Film

Nominated—BAFTA Award for Best Film Not in the English Language

Nominated—Golden Globe Award for Best Foreign Language Film

Nominated—Hong Kong Film Award for Best Director

Nominated—Hong Kong Film Award for Best Actor

Nominated—Hong Kong Film Award for Best Screenplay

Nominated—Hundred Flowers Award for Best Film

Nominated—Hundred Flowers Award for Best Director

Nominated—Hundred Flowers Award for Best Actor

Nominated—Hundred Flowers Award for Best Film

Nominated—MTV Movie Awards for Best Fight

Nominated—Online Film Critics Society for Best Foreign Language Film

Nominated—Satellite Award for Outstanding Motion Picture, Comedy or Musical

Nominated—Southeastern Film Critics Association for Best Foreign Language Film

2008 CJ7 長江七號 Producer, Director, Screenwriter, Actor Nominated—Hong Kong Film Award for Best FilmNominated—Hong Kong Film Award for Best Supporting Actor

Nominated—Hundred Flowers Award for Best Director

2008 Shaolin Girl 少林少女 Producer
2009 Dragonball Evolution 七龍珠 Producer
2009 Jump 跳出去 Producer, Screenwriter(original story)
2010 CJ7: The Cartoon 長江7號愛地球 Producer, Screenwriter(characters)
2013 Journey to the West: Conquering the Demons 西遊·降魔篇 Producer, Director, Screenwriter, Action Choreography Nominated—Golden Horse Award for Best Original ScreenplayNominated—Golden Horse Award for Best Action Choreography
TBD Mermaid[16] 美人魚 Director
TBD A Chinese Odyssey Part 3 [大话西游第三部:通天泪] 大话西游 第三部 通天泪chinese-odyssey-part-3-2 Director
TBD Journey to the West: Conquering the Demons PART 2 [西游降魔篇第二部] Director

laugh till you cry-best stephen chow comedies lols

Top 20 Stephen Chow Movies

the ocean cleanup
the ocean cleanup









从全球来看,美国每年要花至少$13亿用于包括渔业,航运,旅游和海岸线的清洁。美国西海岸花费每年约合$5亿清理自己的海滩。从海滩清除杂物的费用平均为US $1,500和高达US $25,000吨



随着研究Boyan Slat再也坐不住了!


失败并没有困扰Boyan Slat,使命感召唤着这个1994年出生的年轻人。


终于,在19岁时,Boyan Slat提出“巨型漏斗”装置概念用以拦截和清理海洋白色污染。这一守株待兔的设备凭借洋流运动运转,因此可以节省昂贵的燃料费用,也可避免燃料污染。Boyan在网站上解释称:“与其浪费燃料追着垃圾跑,不如让垃圾自己跑进我们的装置里。”











在6个月的修改和测试后,Boyan将“The Ocean Cleanup”项目提交至非盈利民间机构TedXDelft,该机构一直致力于支持和推动令世界更加美好的项目计划。同年,该计划还荣获荷兰代尔夫特科技大学的“最佳工具设计奖”。


2013年2月他放弃了自己的航空航天工程的学习,转而开创了The Ocean Cleanup。










Boyan Slat被评为全球最有前途的20个年轻企业家之一(Intel EYE50),并且获得联合国最高环境保护奖的荣誉,2015年,挪威国王陛下授予Boyan青年企业家奖,The Ocean Cleanup也被伦敦设计博物馆认可为年度最佳设计。








——Boyan Slat

Source: 19岁 他开始拯救地球 如今他改变了人类的历史

Start by Example of Communication through RSA
 Client/Hacker1: HI
 Server/Hacker2: Hi,I am server,( server send digital certificate)
 Client: (Action:Validate the certificate and got the public key[2048Bits],confirmed and then send random string *** to Server,Hacker2 failed)
 //Hacker1: (Action: send a simple string to server like 123456)
 Server: (Action: Calculated hash of the string,encrypt with private key, send message to Client/Hacker1)
 Client: (Action: decrypt message with public key and equal to hash(***), confirmed, Hacker1 failed)
 {ok, let's communicate with my Symmetric-key algorithm.}
 (Send the algorithm and key encrypt with public key)
 Server: <Symmetric-key&algorithm>{Ok,what I can do for you}
 Client: <Symmetric-key&algorithm>{I wanna check my bank balance}
Browser connects to a web server (website) secured with SSL (https). Browser requests that the server identify itself.
Server sends a copy of its SSL Certificate, including the server’s public key.
Browser checks the certificate root against a list of trusted CAs and that the certificate is unexpired, unrevoked, and that its common name is valid for the website that it is connecting to. If the browser trusts the certificate, it creates, encrypts, and sends back a symmetric session key using the server’s public key.
Server decrypts the symmetric session key using its private key and sends back an acknowledgement encrypted with the session key to start the encrypted session.
Server and Browser now encrypt all transmitted data with the session key.

OAUTH2 flow

oauth2What Is SSL (Secure Sockets Layer) and What Are SSL Certificates?



1.install certificates
open visual studio developer command prompt, and run command

makecert.exe -sr LocalMachine -ss My -a sha1 -n CN=AuthSrv -sky exchange -pe
makecert.exe -sr LocalMachine -ss My -a sha1 -n CN=ResSrv -sky exchange -pe


here this two digital certification is not for https or SSL, is only for OAuth2 token encryption,

for https https://sg.godaddy.com/help/request-an-ssl-certificate-562

relation between Oauth2 and https:

Security considerations

The OAuth2 protocol does not guarantee confidentiality and integrity of communications. That means you must protect HTTP communications using an additional layer. One possible solution is the usage of SSL/TLS (HTTPS) to encrypt the communication channel from the client to the server.

The first version of OAuth (OAuth1) supported an authentication mechanism based on the HMAC algorithm to guarantee confidentiality and integrity; OAuth2 does not (although a Draft proposal exists to support MAC tokens). The lack of message hashing is the primary concern raised regarding the security of OAuth2, and the one most developers complain about (e.g. this blog post by Eran Hammer, the ex-lead of the OAuth specifications).

In a nutshell, always use HTTPS for OAuth2, as it’s the only way to guarantee message confidentiality and integrity with this protocol!


2.grant full control of certificates to iis_iusrs

then right click, select All Tasks/Manage Private Keys/Add/Advanced/Find Now,select IIS_IUSRS(if you can not find,look up and confirm your Locations, make sure it’s under your own PC)

Be aware, this is to demonstrate oauth2 on iis, in practice, Auth Server holds Auth Key pair(public&private key)+ResSrv(public key), Res Server holds Res Key pair(public&private key)+AuthSrv(public key), that’s

make it RSA, but actually this two server don’t communicate with each other directly, Client will request access token from Auth Server, and then send request to Resource Server,Resource Server decrypt user info by authsrv public key.


assumption : user agent(browser), client web site cl.com and Client app, oauth server web site srv.com, api web site: api.com,in this scenario,api web site is actually the resource server

user visit client site and  oauth login on srv.com, client site server can get access api site to retrieve data

oauth server code:

[CustomizeAuthorize, HttpGet]
[HttpHeader(“X-Frame-Options”, “SAMEORIGIN”)]
public ActionResult Index(){//Authorize Page 授权页面
var pendingRequest = AuthorizationServer.ReadAuthorizationRequest(); //generate Code
pendingRequest.ExtraData[“User”] = this.User.Identity.Name;

if (((OAuthServerHost)this.authorizationServer.AuthorizationServerServices).CanBeAutoApproved(pendingRequest))
var approval = this.authorizationServer.PrepareApproveAuthorizationRequest(pendingRequest, this.User.Identity.Name);
var response = this.authorizationServer.Channel.PrepareResponse(approval);
return response.AsActionResult();

var client = DB.Instance.GetClient(pendingRequest.ClientIdentifier);
var model = new OAuthViewModel
AppKey = pendingRequest.ClientIdentifier,
AppName = client.Name,
Scope = pendingRequest.Scope,
ResponseType = pendingRequest.ResponseType == EndUserAuthorizationResponseType.AccessToken ? “token” : “code”,
Redirect = pendingRequest.Callback.AbsoluteUri,
State = pendingRequest.ClientState

return View(model);
[CustomAuthorize, HttpPost]
public ActionResult Index(bool approve)
var pendingRequest = this.authorizationServer.ReadAuthorizationRequest(); //will use Code and models

IProtocolMessage responseMessage = null;
if (approve)
DB.Instance.AddAuthorization(new ClientAuthorization
ClientIdentifier = pendingRequest.ClientIdentifier,
Scope = pendingRequest.Scope,
OpenId = this.User.Identity.Name,
IssueDate = DateTime.UtcNow

responseMessage = this.authorizationServer.PrepareApproveAuthorizationRequest(pendingRequest, this.User.Identity.Name, pendingRequest.Scope); // change response to 302 redirect,redirect url is in pendingRequest
responseMessage = this.authorizationServer.PrepareRejectAuthorizationRequest(pendingRequest);

var response = this.authorizationServer.Channel.PrepareResponse(responseMessage);
return response.AsActionResult();
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult Token()
return this.authorizationServer.HandleTokenRequest(this.Request).AsActionResult();
CustomizeAuthorize.class :AuthorizeAttribute
override bool AuthorizeCore(HttpContextBase httpContext){
//check HttpContext.Request.IsAuthenticated
//sometimes can check session also(set identity if session exists)
override void HandleUnauthorizedRequest(AuthorizationContext filterContext)

according to The OAuth 2.0 Authorization Framework

Authorization Grant ………………………………….8
1.3.1. Authorization Code …………………………….8
1.3.2. Implicit ……………………………………..8
1.3.3. Resource Owner Password Credentials ……………..9
1.3.4. Client Credentials …………………………….9

Type 1: Authorization Code:

client Code:

private readonly WebServerClient client;
private readonly static AuthorizationServerDescription authServerDesc = new AuthorizationServerDescription()
TokenEndpoint = new Uri(TOKEN_ENDPOINT),
AuthorizationEndpoint = new Uri(AUTHZ_ENDPOINT),
ProtocolVersion = ProtocolVersion.V20
client = new WebServerClient(authServerDesc, clientId);
public ActionResult Index()
client.RequestUserAuthorization(new[] { “” }, new Uri(Url.Action(“login”, “home”, null, this.Request.Url.Scheme)));

return new EmptyResult();

public async Task Login()
client.ClientCredentialApplicator = ClientCredentialApplicator.PostParameter(clientSecret);
var authorization = client.ProcessUserAuthorization();//wait for token generated by oauthServer
if (authorization != null)
if (authorization.AccessTokenExpirationUtc.HasValue)
client.RefreshAuthorization(authorization, TimeSpan.FromSeconds(30));

string token = authorization.AccessToken;

string scope = “user_name,nick_name,avatar_url”;

using (var httpClient = new ApiHttpClient(token))
var content = new StringContent(JsonConvert.SerializeObject(new { user_scope = scope }), Encoding.UTF8, “application/json”);

//// setting for https only
//System.Net.ServicePointManager.ServerCertificateValidationCallback += (sender, certificate, chain, errors) => true;

var apiResponse = await httpClient.PostAsync(ApiEndPoint, content);
if (apiResponse.IsSuccessStatusCode)
return new WrapperHttpResponseMessageResult(apiResponse);

return Content(“call api failed”);

return Content(“authorize failed”);

public class ApiHttpClient : HttpClient
public ApiHttpClient(string accessToken)
: base(new ApiMessageHandler(accessToken))
{ }

class ApiMessageHandler : MessageProcessingHandler
string accessToken;
public ApiMessageHandler(string accessToken)
: base(new HttpClientHandler())
this.accessToken = accessToken;

protected override HttpRequestMessage ProcessRequest(HttpRequestMessage request, CancellationToken cancellationToken)
request.Headers.Authorization = new AuthenticationHeaderValue(“Bearer”, this.accessToken);
return request;

protected override HttpResponseMessage ProcessResponse(HttpResponseMessage response, CancellationToken cancellationToken)
return response;

Request capturing analysis



run CustomizeAuthorize, if not login yet(AuthorizeCore) will kick to (HandleUnauthorizedRequest)

at this point, you need to log return url for later redirection after successfully login.

then post to login, success then redirect to customizeReturnUrl,
run CustomizeAuthorize again,then enter action Index continue previous request


first time will show Authorization Page(render with

@using (Html.BeginForm())
@Html.Hidden("client_id", this.Model.AppKey)
@Html.Hidden("redirect_uri", this.Model.Redirect)
@Html.Hidden("state", this.Model.State)
@Html.Hidden("scope", DotNetOpenAuth.OAuth2.OAuthUtilities.JoinScopes(this.Model.Scope))
@Html.Hidden("response_type", this.Model.ResponseType)
@Html.Hidden("approve", true)


) , when you click button ‘Authorize Now’,will post data back to oauth2/index?approve=true,after this redirect to original url:
now, client side start to post Client Secrect
client.ClientCredentialApplicator = ClientCredentialApplicator.PostParameter(clientSecret);
var authorization = client.ProcessUserAuthorization();[server side will check secrect and create token]



Way 2: Client Credentials: app level oauth

public async Task AppClient()
var token = await GetToken();

string result = String.Empty;
using (var apiHttpClient = new ApiHttpClient(token))
//// setting for https only
//System.Net.ServicePointManager.ServerCertificateValidationCallback += (sender, certificate, chain, errors) => true;

var content = new StringContent(“{\”param_key\”:\”param_value\”}”, Encoding.UTF8, “application/json”);
var apiResponse = apiHttpClient.PostAsync(APIEndPoint, content).Result;
if (apiResponse.IsSuccessStatusCode)
result = apiResponse.Content.ReadAsStringAsync().Result;
return Content(result);

return Content(“failed: ” + apiResponse.StatusCode.ToString());
private async Task GetToken()
using (var httpClient = new OAuthHttpClient(clientId, clientSecret))
var content = new FormUrlEncodedContent(new Dictionary<string, string>
{“grant_type”, “client_credentials”}

var response = await httpClient.PostAsync(TOKEN_ENDPOINT, content);
var responseContent = await response.Content.ReadAsStringAsync();
if (response.StatusCode == System.Net.HttpStatusCode.OK)
return JObject.Parse(responseContent)[“access_token”].ToString();

return responseContent.ToString();

Case Study:

oauth2 server implementation interactive with third party oauth login



The OAuth 2.0 Authorization Framework
Pro ASP.NET Web API Security.pdf
ASP.NET Identity

Decouple OWIN Authorization Server from Resource Server

Security and cryptography
IIS中的SSL Certificate 证书配置
Real World OAuth using ASP.NET MVC
ASP.NET MVC 中实现真实世界中的 OAuth 身份认证
用DotNetOpenAuth实现基于OAuth 2.0的web api授权
Asp.Net MVC 4 Web API 中的安全认证-使用OAuth
[OAuth]基于DotNetOpenAuth实现Client Credentials Grant



OAuth 2.0 (without Signatures) is Bad for the Web


PRO#1:Search Appearance – Structured Data Missing:author

Error: At least one field must be set for Hcard.
Error: Missing required field “name (fn)”.

Fixed: Step by Step


structured data missing author
structured data missing author

live data test



done! perfect!
请注意 我们是用实时数据测试,所以回到webmaster之后你会看到错误还没有消失,请耐心等谷歌收录更新正确的数据,大概要几天时间



0 1644




请看诺基亚的员工在做的趣事 http://www.thingsee.com/



张艺辉:国内9成P2P平台都是采用资金池模式-银行频道-和讯网 http://bank.hexun.com/2014-05-15/164821938.html


众筹 crowfunding

众筹出现的领域很多,比如国外比较多的一种玩法是kickstarter,把你的创意变为产品,让感兴趣的人投钱进来帮你一起实现某个小众产品或者很大的创想,诺基亚的员工都已经在上面开工了,上面有提到,他们在做一种物联网的设备,感兴趣的可以点去看看 Thingsee One: The Smart Developer Device
我想说的是中国的玩法,今天刚发现一种这样的玩法,一个叫做大可乐的手机做了这样一件事情,他们实际是跟京东众筹合作,他们为所谓的“梦想合伙人”提供每年一次的免费换机服务(实际上如果手机不坏的情况下,很少人愿意这么频繁换机,而且换机之后个人的数据也是一笔可以利用进行用户分析的“财富”),然后里面当然没有少了必要的抽奖活动,幸运儿可以获取1元购机,可以点去看看 大可乐一次众筹 终身免费换新








热部署 内容分发cdn cms feed

1.这篇是广告软文,可以参考 走向“持续部署” http://kb.cnblogs.com/page/157115/





三.Common function or Special Function



Session Cookie 心跳 跨域 安全(去flash)seo sitemap


common-js-fun(popup, ajax call, validation)


写自己的ASP.NET MVC框架 http://www.cnblogs.com/fish-li/archive/2012/02/12/2348395.html

寻找导师 成为导师 http://www.aqee.net/developer-resolutions-for-2013/

淘宝为啥需要顶尖开发者 http://www.oschina.net/question/28_76941

如何走出海量数据及访问量压力困境 http://kb.cnblogs.com/page/73734/

程序员开发大型应用程序的技巧 http://kb.cnblogs.com/page/139972/



0 1479
Although this Articles simply collects and gathers links for all front-end developer's or designer's reference, but it's really important to introduce or remind us...