正在查看: 2016年07月日志归档(第 1 页 / 共 2 篇)

最近遇到的一些坑集合

Angular

异步获取到的数据,在视图上使用自定义filter时,控制台总是报错 input undefined ,这是因为filter会在anagular的第一次消息循环时尝试运行,异步数据尚未加载进来,尝试绑定时数据固然不存在。所以要做判断。

public class SimpleAuthorizationServerProvider : OAuthAuthorizationServerProvider{ 
public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
        {
            context.OwinContext.Response.Headers["Access-Control-Allow-Origin"] = "*";
   //....

}
}

CORS

基于web api的应用常常使用基于token的验证方式进行api的访问管理。一般步骤是:

(1)用户输入用户名和密码,提交到web api host.

(2)web api host验证后,返回token给Client, Client使用Cookie存储下来。

(3)后续Client继续是用token访问web api, web api做验证。

这个方法比较简单可行, 资源服务器和验证服务器部署在一个进程里。但是最大的问题是,token过期后如何刷新的问题。简单的方法是把token的过期时间设置的比较长,如一个 月,但不够安全,不符合token的设置本意,所以需要用refresh token的验证机制。简单地说就是,web api host验证后返回两个token,一个是基本的access token,另一个是refresh token。access token过期后,可以用refresh token换取一个新的access token。这里遇到一个cors的问题。即使在web api 的config里加了如下语句:

public static void EnableCors(HttpConfiguration config)
        {
            var cors = new EnableCorsAttribute("*", "*", "*");
            config.EnableCors(cors);
        }

也不行,原因是oauth server的获取access token,不直接经过web api。所以要对oauth server的响应头添加allow-origin。具体如下:

public class SimpleAuthorizationServerProvider : OAuthAuthorizationServerProvider
{
        public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
        {
            context.OwinContext.Response.Headers["Access-Control-Allow-Origin"] = "*";
           //....
       }
}

但是,依然有问题。因为浏览器会发出预检请求(preflight ),api host不能正确应答,以前的cors配置风格不支持预检请求,故需要:

public partial class Startup
{
    public void Configuration(IAppBuilder app)
    {
        app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
   }
}

问题即可解决。参考地址:

http://stackoverflow.com/questions/24989769/cors-is-not-working-in-web-api-with-owin-authentication

http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/

Bootstrap:弹性搜索框

<form action="" method="get" class="form-horizontal">
        <div class="input-group search-input-group">
           <input type="hidden" name="scope" value="1">
             <input name="key" autocomplete="off" type="text" class="form-control" placeholder="输入要搜索的内容关键字" >
              <span class="input-group-addon">
                        <button type="submit">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>  
                    </span>
        </div>
      </form>

 

对应的CSS:

.search-input-group .input-group-addon{
    background: white !important; 
}
.search-input-group .form-control{
    border-right:0; 
    box-shadow:0 0 0; 
    border-color:#ccc;
}
.search-input-group{
    width: 40%;
}
.search-input-group button{
    border:0;
    background:transparent;
}
.search-input-group input:focus + button{
    z-index:3;
}
.search-input-group input{
    -webkit-transition: width  0.2s ease-in-out;
    -moz-transition:width  0.2s ease-in-out;
    -o-transition: width  0.2s ease-in-out;
    transition: width  0.2s ease-in-out;
}
.search-input-group input:focus{
    width: 500px;
}

若想把搜索图标放到输入框的前面,bootstrap其实是不支持的,需要自己定制一下。可以试试以下链接:

http://bootsnipp.com/snippets/featured/support-glyph-and-fa-icon-inside-input