Объединение аутентификации паспорта на основе NodeJS и интерфейса ReactJS - PullRequest
Новая
       20

Объединение аутентификации паспорта на основе NodeJS и интерфейса ReactJS

0 голосов
/ 28 мая 2018

Я создал бэкэнд, используя Loopback с паспортной аутентификацией.Это требует, чтобы я сначала посетил http://localhost:3001/auth/github,, который перенаправляет на GitHub, который либо отображает страницу входа, либо перенаправляет обратно в мое приложение через порт 3001.

Теперь я создаю интерфейс ReactJS на:3000.Предполагается отправлять AJAX-вызовы на сервер, добавляя токен auth в качестве параметра строки запроса.Я добавил переадресацию портов на package.json клиента, поэтому все вызовы AJAX обрабатываются правильно.

Я не могу понять, как получить токен аутентификации (полученный в виде файла cookie от http://localhost:3001/auth/github/callback)на стороне клиента.Хотя мои AJAX-вызовы проксируются правильно, когда я перехожу к / auth / github, я все еще на странице, сгенерированной React, и моя конечная точка: 3001 не попадает.Если я зайду по адресу: 3001 / auth / github, я не получу свой файл cookie auth_token по коду моего интерфейса.

Другими словами, у меня есть две проблемы: 1. Как перейти на страницу авторизации моего бэкэнда (http://localhost:3001/auth/github) из внешнего интерфейса?2. Как получить cookie, полученный в # 1, на мой веб-интерфейс, чтобы его можно было использовать в последующих запросах?

Поскольку я создаю демонстрацию, мне нужно только быстрое и грязное решение, которое просто работает, но я готов рассмотреть другие идеи, такие как открытие всплывающего окна и / или IFrame.

Ответы [ 2 ]

0 голосов
/ 28 мая 2018

Некоторые предложения по работе с ним:

  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'

Как получить cookie, полученный в # 1, на мой веб-интерфейс, чтобы его можно было использовать в последующих запросах?

Я не уверен насчет бэкэнда Loopback, но когда я использовал Express,вы можете установить с помощью passport.session () из паспорта, чтобы получить cookie сессии

надеюсь, это поможет.

0 голосов
/ 28 мая 2018

если вы используете Passport, вам просто нужно прочитать документацию по стратегии.Я предполагаю, что аутентификация выполняется через Oauth

Пример с экспрессом

Routes.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
}

passport init

// 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);
...