javascript - 如何在 react 前端显示 Google Passport oAuth 同意屏幕，而不是使用快速 View 模板

Question

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

在 express 中，我有这个设置:

配置/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

我关注 NetNija's tutorial在 YouTube 上，他正在使用 ejs 模板。但我正在使用 react 。我有一个 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 标签(我正在测试它是否工作)，但我想从 Passport 显示该 View 。

总之，我想要:

用户点击用谷歌登录按钮，被重定向到同意屏幕(我链接的图像)。路线是/auth/google .

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

使用来自 google 的信息，我可以使用 displayName 在数据库中创建用户和 googleID ，并将用户存储在数据库中。

据我了解，当我单击按钮时，会向 /auth/google 发送请求。向前端发送响应的 api。该响应包括同意屏幕？我无法弄清楚。在这里需要一些帮助。

Answer 1

最初我遇到了同样的问题，但我找到了解决方法。
由于 google 有自己的同意屏幕，当您调用 url 时将打开它/auth/google ，您无法为此网址发出提取请求。
所以可以做的是使用 anchor 标记来进行这样的重定向。 (在 Navbar.js 中进行此更改。不要使用链接，而是使用 anchor 标记)

<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() 因为谷歌回调有不同的来源。