node.js - 通过IBM app-id向React应用程序添加用户授权和身份验证

Question

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

IBM 网站上的文档显示了一个保护 Node 应用程序的示例，其中前端也在 Node 应用程序上。这些是文档: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 应用程序上编写身份验证代码。可以在前端实现吗？

Answer 1

是的，所以您可以让后端与 App ID 对话，从而获取 token 。获得 token 后，您可以实现基于 cookie+ session 的方法来维护前端和后端之间的某些 session 。

有关更多信息，请查看此博文: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

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