OAuth协议与url hash
如果我们使用auth0
或者okta
等第三方提供的IDaas
,那么就要设置一下callback url。
通常,有一个参数是response_mode
,默认是query
,所以通常是忽略的,但如果你用vuejs,Reactjs或者Angular等构建的SPA,通常用到router
的hash
mode,那么这个时候就会导致报错,因为单纯的静态页面,url #
后面的部分会被忽略,我目前还没搞明白到底是被浏览器忽略,还是auth0的服务器,还是其他什么地方忽略掉了。总之就总是不能执行这个带#
的callback。(2018年11月23日更新:应该是auth0的服务器不认这个带#
的callback url)
如果实在想用这个#
,也可以的,但要配置一下:
https://developer.okta.com/docs/api/resources/oidc
我配置了,就是response_mode: 'fragment'
,然后不好使。我高度怀疑是需要一个server才能生效的。总之,只有history mode
才生效。
好,那就用history
模式呗。
但我的小app,用的就是netlify的服务,纯静态页面hosting而已,没有服务器,应该是没有,那这就导致另一个问题,如果你直接访问某个页面,会报错,404。
Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.
说白了,需要一个服务器,才能使得oauth工作,也同时直接访问某个url不报错。至于是否能在netlify上搞成功,还在继续研究。
2018年11月23日日更新 :
新增了一个配置,Netlify就全部OK了,就是增加了一个fallback redirection,就是在public
目录下,增加了一个_redirects
文件,里面添加一行即可:
/* /index.html 200
但具体啥原理,我还没明白。