2

我已经使用带有护照身份验证的 Loopback 构建了一个后端。它要求我首先访问http://localhost:3001/auth/github，它会重定向到 GitHub，它要么显示一个登录页面，要么重定向回我在端口 3001 上的应用程序。

现在我正在 :3000 上构建一个 ReactJS 前端。它应该向后端发送 AJAX 调用，并将身份验证令牌作为查询字符串参数附加。我已经向客户端添加了端口转发package.json，因此所有 AJAX 调用都得到了正确处理。

我想不通的是如何将身份验证令牌（作为 cookie 从 接收http://localhost:3001/auth/github/callback）到客户端。虽然我的 AJAX 调用被正确代理，但当我导航到 /auth/github 时，我仍然在 React 生成的页面上，并且我的 :3001 端点没有被命中。如果我去：3001/auth/github，我不会通过我的前端代码获取我的 auth_token cookie。

换句话说，我有两个问题： 1. 如何http://localhost:3001/auth/github从前端导航到我的后端认证页面（ ）？2. 如何将#1 中获取的cookie 传到我的前端，以便在后续查询中使用？

当我正在构建一个演示时，我只需要一个快速而肮脏的解决方案，但我愿意考虑其他想法，比如打开一个弹出窗口和/或一个 IFrame。

4

2 回答 2

3

如果您使用的是 Passport，那么您只需要阅读策略文档。我假设身份验证是通过 Oauth 完成的

以快递为例

路由.js

api.route('/auth/github')
    .get(PassportCtrl.auth);

  api.route('/auth/github/callback')
    .get(PassportCtrl.authCallback, PassportCtrl.redirect);

PassportCtrl.js

import passport from 'passport';

const auth = passport.authenticate('github', {
  scope : ['profile', 'email']
});

const authCallback = passport.authenticate('github');

const redirect = (req, res) => {
    res.redirect('/whereveryouwant');
}

const getAuthUser = (req, res) => {
  res.json({
    user : req.user
  })
}

const logOut = (req, res) => {
  req.logOut();

  res.redirect('/');
}

export default {
  auth,
  authCallback,
  redirect,
  getAuthUser,
  logOut
}

护照初始化

// adding cookie feature
app.use(cookieSession({
  maxAge : 30 * 24 * 60 * 60 * 100,
  keys : [process.env.COOKIE_SECRET]
}));

// initializing passport
app.use(passport.initialize());
app.use(passport.session());

我忘了，你必须代理

webpack.config.js

 devServer: {
    proxy: { // proxy URLs to backend development server
      '/auth/github': 'http://localhost:3001',
      '/api/**' : {
        'target' : 'http://localhost:3001'
      }
    },
    hot : true,
    contentBase: path.join(__dirname, "dist"),
    historyApiFallback : true,
    compress: true,
    port: 8080
  }

反应

import React from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';


class Header extends React.Component {
  renderContent () {
    const {auth} = this.props;
    switch (auth) {
      case null : return;
      case false : return (
        <li><a href='/auth/google'>Login with google</a></li>
      )
      default: return ([
        <li key={'logout'}><a href='/api/logout'>Log out</a></li>
      ])
    }
  }
  render () {
    const {auth} = this.props;
    return (
      <nav>
        <div className='nav-wrapper'>
          <Link className="left brand-logo" to={auth ? '/whereveryouwant' : '/'}>
            Your page Name
          </Link>
          <ul className='right'>
            {this.renderContent()}
          </ul>
        </div>
      </nav>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    auth : state.auth
  }
}

export default connect(mapStateToProps)(Header);
于 2018-05-28T14:43:56.003 回答
2

一些建议：

  1. 如何从前端导航到我的后端身份验证页面 ( http://localhost:3001/auth/github )？

在您的 React 客户端上使用代理（在 package.json 中）示例：

 {
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": {
    "/auth/github": {
      "target": "http://localhost:3001"
    },
    "/api/*": {
      "target": "http://localhost:3001"
    }
  },
  "dependencies": {
    "axios": "^0.16.2",
    "materialize-css": "^0.99.0",
    "react": "^16.0.0-alpha.13",
    "react-dom": "^16.0.0-alpha.13",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.1",
    "react-scripts": "1.0.10",
    "react-stripe-checkout": "^2.4.0",
    "redux": "^3.7.1",
    "redux-form": "^7.0.1",
    "redux-thunk": "^2.2.0"
  },
}

因此，当您从前面访问 api 时，您可以使用 '/auth/github' 直接引用它

  1. 如何将 #1 中获得的 cookie 获取到我的前端，以便在后续查询中使用？

我不确定 Loopback 后端，但是当我使用 Express 时，您可以使用护照中的 passport.session() 进行设置以获取会话 cookie

希望这可以帮助。

于 2018-05-28T14:54:04.950 回答