1

我有一个基本的前端应用程序，我希望能够让用户注册和登录。我决定为此使用的服务是 IBM 的 AppID。我的应用程序流程是这样的：前端应用程序（React）通过 axios 向节点服务器发出 get/post 请求。然后服务器从 mongo 数据库中检索数据。我希望用户单击 react 应用程序上的登录按钮，然后将他们重定向到 AppID 上的登录表单，一旦通过身份验证，用户就会被重定向到另一个页面，该页面之前因未经授权而受到保护。

IBM 网站上的文档显示了它们保护节点应用程序的示例，其中前端也在节点应用程序上。这些是文档：https ://cloud.ibm.com/docs/services/appid?topic=appid-web-apps#web-apps

const mongoose = require("mongoose");
const express = require("express");
let cors = require("cors");
const bodyParser = require("body-parser");
const logger = require("morgan");

const API_PORT = 5100;
const app = express();
app.use(cors());

//bodyParser, parses the request body to be a readable json format.
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(logger("dev"));

app.use(
  session({
    secret: "xxxxx",
    resave: true,
    saveUninitialized: true
  })
);

app.use(passport.initialize());
app.use(passport.session());
passport.serializeUser((user, cb) => cb(null, user));
passport.deserializeUser((user, cb) => cb(null, user));

passport.use(
  new WebAppStrategy({
    clientId: "ca5d4ajsnfjsandew-e-f-w-rg--94e1681c6821",
    tenantId: "61982sedfysehfnscd-sfvs-dsf-sfds-464c7fbc",
    secret: "MmY3ZDJhNGQtfshbdfksndlsdjfjsbjdfjsdjhfbskYWRj",
    name: "TEA-web-app",
    oAuthServerUrl:
      "https://us-south.appid.cloud.ibm.com/oauth/v4/619820bahfbsef2-5931-4748-ba39-1cc4fsd464c7fbc",
    profilesUrl: "https://us-south.appid.cloud.ibm.com",
    discoveryEndpoint:
      "https://us-south.appid.cloud.ibmdds.com/oauth/v4/619820b2-5931ffd-4748-ba39-1cc4464c7fbc/.well-known/openid-configuration",
    redirectUri: "http://localhost:3000/dashboard"
  })
);

app.use(passport.authenticate(WebAppStrategy.STRATEGY_NAME));

//link to mongoDB database
const dbRoute =
  "mongodb+srv://username:password@cluster0-zjqhi.mongodb.net/TEA?retryWrites=true&w=majority";

//connect backend with mongoose database.
mongoose.connect(dbRoute, { useNewUrlParser: true });

let db = mongoose.connection;

//Prompt when connected to database.
db.once("open", () => console.log("connection with database made"));

//check if connection made was successful.
db.on("error", console.error.bind(console, "MongoDB connection error: "));

const userRouter = require("./routes/users");
const dataRouter = require("./routes/data");

app.use("/users", userRouter);
app.use("/data", dataRouter);

// launch our backend into a port
app.listen(API_PORT, () => console.log(`LISTENING ON PORT ${API_PORT}`));

这是我编写的服务器端代码，我不确定我是否应该在服务器端执行此操作，或者我是否应该在我的 React 应用程序上编写用于身份验证的代码。可以在前端做吗？

4

1 回答 1

1

是的，因此您可以让后端与 App ID 对话，从而获得令牌。获得令牌后，您可以实施基于 cookie+会话的方法来维护前端和后端之间的某些会话。

有关更多信息，请查看此博客文章：https ://www.ibm.com/cloud/blog/securing-angularnode-js-applications-using-app-id 。该博客特别有一个示例，该示例与 Angular 前端和 Node 后端一起使用，并实现了 cookie+session 方法。但是，同样的原则也适用于 React。

博客示例代码：https ://github.com/ibm-cloud-security/appid-sample-code-snippets/tree/master/angular-node-sample

重要提示：我注意到在您的代码片段中，您secret在此处以纯文本形式发布了 App ID。我强烈建议您删除这些凭据并从 App ID 获取一对新凭据。现在任何拥有您clientId并且secret可以冒充您的应用程序的人。

于 2019-08-13T19:39:53.007 回答