在Predix App Stater中完成用户鉴权
作者: 虞路易,前端开发工程师,GE数字集团
在本章中会介绍如何在Predix App Starter中启用基于Predix UAA服务的用户鉴权。同时在本地和云端运行我们的app。
前置准备
完成UAA的配置
环境
确保本机已经安装了
你可以通过 node -v
来确认Node.js已经安装。
你也可以通过脚本来自动安装开发环境
这个脚本会安装node, npm 还有 bower
在Mac OSX 上,请在终端里执行
bash <( curl https://raw.githubusercontent.com/PredixDev/local-setup/master/setup-mac.sh ) --cf --git --nodejs
在Windows上,请在终端里用Administrator权限执行
@powershell -Command "(new-object net.webclient).DownloadFile('https://raw.githubusercontent.com/PredixDev/guided-tutorials/master/simple-html-page.bat','%TEMP%\simple-html-page.bat')" && "%TEMP%\simple-html-page.bat" /cf /git /nodejs
介绍
多数工业网络应用会对用户进行鉴权来保证敏感信息的安全访问。通过Predix Web App Starter和Predix UAA 服务, 我们可以很快的搭建一个安全的前端应用。
你可以访问Predix Web App Starter Github仓库来查看每一步的代码。
流程
完成UAA配置后,我们会得到UAA的以下信息:
- URL
- clientId
- secret
- username/password (credentials)
在之后的设置中我们会用到这些字段。
设置鉴权
- 安装好Predix Web App Starter,并在本地运行。
- App启动以后,当我们访问http://localhost:5000/secure的时候,你会看到提示当前页面无法访问。
- 在server目录下,打开localConfig.json并找到以下字段:
- uaaURL
- base64ClientCredential
- loginBase64ClientCredential
把这些字段替换为:
uaaURL
替换为从UAA获得的URL
base64ClientCredential
这是一个由’:’通过Base64编码而成的字符串。其中clientId是我们设置的可以访问后端微服务的client ID。secret是其对应的密码。
在Mac或者Unix环境下,你可以执行以下命令(记得把clientId和secret替换为你从UAA获取的相应字段):echo -n clientId:secret | base64
在Windows环境下,你可以通过certutil来生成对应的base64ClientCredential
loginBase64ClientCredential
这是一个由’:’通过Base64编码而成的字符串。其中clientId是我们设置的来验证用户登录的client ID。secret是其对应的密码。
以下是一个完成配置的server/localConfig.json的例子:
... "uaaURL": "https://162665f2-e477-488a-93d1-bb33ccb3d568.predix-uaa.run.aws-usw02-pr.ice.predix.io", "base64ClientCredential": "YXBwX2NsaWVudF9pZDpzZWNyZXQ=", "loginBase64ClientCredential": "bG9naW5fY2xpZW50X2lkOnNlY3JldA==" ...
验证鉴权
- localConfig.json配置完成后,我们的应用会自动重启来使配置生效。如果没有自动重启,请在终端中输入rs。
- 这个应用默认对所有的路由都要求用户登录访问。当你访问http://localhost:5000的时候,会被重定向到UAA的登录页面,登录成功之后,会返回到http://localhost:500的页面。
- 当你点击右上角的Sign Out的时候,会跳转到/logout路由,并清楚你的session再重定向回你的应用。因为应用的所有路由都需要登录访问,你回再次被重定向到UAA的登录页面。
仅保护特定的路由
有时候,只有一部分路由需要登录后访问,为了实现这个功能,我们需要修改server/app.js的以下代码
//Use this route to make the entire app secure. This forces login for any path in the entire app.
app.use('/', passport.authenticate('main', {
noredirect: false //Don't redirect a user to the authentication page, just show an error
}),
express.static(path.join(__dirname, process.env['base-dir'] ? process.env['base-dir'] : '../public'))
);
删除 ‘/’ 路由中的passport中间件, 这样Express就不会默认保护所有路由。修改之后的代码:
app.use('/', express.static(path.join(__dirname, process.env['base-dir'] ? process.env['base-dir'] : '../public')));
应用自动重新启动后,你可以不用登录久访问http://localhost:5000/#/about了
- 访问/secure路由,页面会提示Unauthorized而不是找不到页面。这是因为这个路由已经被定义为一个受保护的路由,而你当前还没有登录。
- 访问/login路由,你会被重定向到UAA登录页面。
- 输入用户名密码成功登录后,会被重定向到/#/rmd,并成功显示数据。
- 再次访问/secure路由,此时页面会显示This is a sample secure route。这是因为此时我们已经在登录状态,访问已经被授权了。
- 再次访问/logout,此时我们的session又被结束。
- 再次访问/secure路由,我们再次看到了Unauthorized。
部署到云端
通过之前的步骤,我们完成了怎么在本地环境对应用配置用户鉴权。最后,我们要把应用部署到云端。
我们首先要配置根目录下的manifest.yml, 取消sevices下面的注释,启用UAA service:
services
- 你的UAA service实例的名字
在这个文件下,还需要配置clientId和base64ClientCredential,和刚才在localConfig.json里配置的一样。
env:
base64ClientCredential: YXBwX2NsaWVudF9pZDpzZWNyZXQ=
loginBase64ClientCredential: bG9naW5fY2xpZW50X2lkOnNlY3JldA==
最后在终端输入
gulp dist
来把这些配置文件打包到最后要部署发布的应用中。
之后再像正常部署应用一样把应用部署到Predix的云端。再在云端应用的url中重复上述步骤来验证用户鉴权已经生效.
如需更多支持或者帮助,请访问 https://www.predix.io/community.