在Predix App Stater中完成用户鉴权

在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 StarterPredix UAA 服务, 我们可以很快的搭建一个安全的前端应用。

你可以访问Predix Web App Starter Github仓库来查看每一步的代码。

流程

完成UAA配置后,我们会得到UAA的以下信息:

  • URL
  • clientId
  • secret
  • username/password (credentials)

在之后的设置中我们会用到这些字段。

设置鉴权
  1. 安装好Predix Web App Starter,并在本地运行。
  2. App启动以后,当我们访问http://localhost:5000/secure的时候,你会看到提示当前页面无法访问。
  3. 在server目录下,打开localConfig.json并找到以下字段:
    • uaaURL
    • base64ClientCredential
    • loginBase64ClientCredential
  4. 把这些字段替换为:

    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=="
      ...
验证鉴权
  1. localConfig.json配置完成后,我们的应用会自动重启来使配置生效。如果没有自动重启,请在终端中输入rs。
  2. 这个应用默认对所有的路由都要求用户登录访问。当你访问http://localhost:5000的时候,会被重定向到UAA的登录页面,登录成功之后,会返回到http://localhost:500的页面。
  3. 当你点击右上角的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'))
);
  1. 删除 ‘/’ 路由中的passport中间件, 这样Express就不会默认保护所有路由。修改之后的代码:

    app.use('/', express.static(path.join(__dirname, process.env['base-dir'] ? process.env['base-dir'] : '../public')));
  2. 应用自动重新启动后,你可以不用登录久访问http://localhost:5000/#/about

  3. 访问/secure路由,页面会提示Unauthorized而不是找不到页面。这是因为这个路由已经被定义为一个受保护的路由,而你当前还没有登录。
  4. 访问/login路由,你会被重定向到UAA登录页面。
  5. 输入用户名密码成功登录后,会被重定向到/#/rmd,并成功显示数据。
  6. 再次访问/secure路由,此时页面会显示This is a sample secure route。这是因为此时我们已经在登录状态,访问已经被授权了。
  7. 再次访问/logout,此时我们的session又被结束。
  8. 再次访问/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.

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读