如何在反应前端显示 Google 护照 oAuth 同意屏幕，而不是使用快速视图模板

Question

我在后端使用 express，在前端使用 React。我想显示这样的屏幕：

在快递中，我有这个设置：

配置/passport-setup.js

const passport = require("passport")
const GoogleStrategy = require("passport-google-oauth20").Strategy
const User = require("../models/User")

passport.use(
  new GoogleStrategy(
    {
      clientID: process.env.clientID,
      clientSecret: process.env.clientSecret,
      callbackURL: "/auth/google/redirect",
    },
    (accessToken, refreshToken, profile, done) => {
      // passport callback function
      // console.log("passport callback function fired")


      // check if the user exists
      User.findOne({ googleID: profile.id }).then((currentUser) => {
        if (!currentUser) {
          // if the user doesn't exist, create a new user
          new User({
            username: profile.displayName,
            googleID: profile.id,
          })
            .save()
            .then((newUser) => {
              console.log(`New user created- ${newUser}`)
            })
        }

        if (currentUser) {
          console.log(`The current user is- ${currentUser}`)
        }
      })
    }
  )
)

app.js（处理后端路由器）

const authRouter = require("./routes/auth")
const passportSetup = require("./config/passport-setup")

路线/auth.js

const express = require("express")
const passport = require("passport")
const router = express.Router()


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

// callback route for google to redirect to
router.get("/google/redirect", passport.authenticate("google"), (req, res) => {
    res.json({ message: "redirected "})
})

module.exports = router

我正在YouTube 上关注NetNija 的教程，他正在使用 ejs 模板。但我正在使用反应。我有一个NavBar带有链接的组件，并且App.js我有路由。

导航栏.js

 <Link to="/auth/google">
   <Button>Login with Google</Button>
 </Link>

应用程序.js

import React, { Component } from "react"
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
import HomePage from "../components/HomePage"
import oAuthPage from "../containers/oAuthPage"

class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route path="/auth/google" component={oAuthPage} />
          </Switch>
        </Router>
      </div>
    )
  }
}

export default App

现在，oAuthPage只是显示一个 h1 标签（我正在测试它是否有效），但我想从护照中显示该视图。

总之，我想要的是：

• 用户单击“使用 Google 登录”按钮，被重定向到同意屏幕（我已链接的图像）。路线是/auth/google。

• 在同意屏幕中，当用户选择帐户时，它会被重定向到路由/auth/google/redirect，然后从那里触发回调函数，然后从谷歌检索用户配置文件。

• 使用来自谷歌的信息，我可以使用displayNameand在数据库中创建用户googleID，并将用户存储在数据库中。

根据我的理解，当我点击按钮时，一个请求被发送到/auth/googleapi，它向前端发送一个响应。该响应包括同意屏幕？我无法弄清楚。这里需要一些帮助。

Answer 1

最初我遇到了同样的问题，但我找到了解决方法。由于 google 有自己的同意屏幕，当您调用 url /auth/google时，该屏幕将打开，因此您无法对此 URL 发出获取请求。所以可以做的是使用锚标记来进行这样的重定向。（在 Navbar.js 中进行此更改。不使用 Link，而是使用锚标记）

<a class="google-link" href="http://localhost:5000/auth/google">
      <Button> Continue with Google </Button> 
</a>

在后端，在回调路由上使用res.redirect('youre_url')重定向回 UI，如下所示。

router.get('/google/redirect', passport.authenticate('google'), (req,res) => {
    if(req.user) {
        res.redirect(`http://localhost:3000/`);
    }
    else {
        res.redirect(`http://localhost:3000/login`);
    }
})

另请注意，您不能使用res.json()因为 google 回调具有不同的来源。