Question

我已经创建了快速应用和create-react-app。在react app上，我更改文件/src/App.js：

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
            className="App-link"
            href="http://localhost:3000/auth/google"
            target="_blank"
            rel="noopener noreferrer"
        >
          Login google
        </a>
      </header>
    </div>
  );
}

export default App;

然后，我在后端编写了一些用于Google身份验证的代码。

在这里我初始化ressport。我将users数组用作数据库。

const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth2');

const users = [];

passport.serializeUser((user, done) => {
    console.log('serialize user. id = ', user.id);
    done(null, user.id);
});

passport.deserializeUser((id, done) => {
    console.log('deseri
    req.session = null;alize user. id = ', id);
    const user = users.find(u => u.id === id);
    done(null, user);
});

passport.use(
    new GoogleStrategy({
        callbackURL: '/auth/google/redirect',
        clientID: 'xxx',
        clientSecret: 'xxx'
    }, (accessToken, refreshToken, profile, done) => {
        const user = {
            id: profile.id,
            username: profile.displayName
        };

        if (users.find(u => u.id === user.id)) {
            console.log('user exist');
            done(null, user);
        } else {
            console.log('user is new');
            users.push(user);
            done(null, user);
        }
    })
);

这是我的路线。

router.get('/auth/google', passport.authenticate('google', {
    scope: ['profile']
}));

router.get('/auth/google/redirect',
    passport.authenticate('google'),
    (req, res) => {
        res.send(`Hi, ${req.user.username}`);
    }
);

好。这是工作。我在浏览器中转到http://localhost:9005。然后，我单击Login。选择我的Google帐户。并重定向到http://localhost:3000，在那里我看到Hello, Aleksandr。但是问题是端口3000。我的React应用位于9005端口上。我希望用户在身份验证后保留在我的网站上。请帮助我。

谷歌认证后重定向到客户端

0 个答案: