如何获得提示，要求用户在登录时输入其帐户详细信息？

Posted 2023-01-14

我正在实现允许用户使用Passport.js和mongoose在GitHub上注册和登录的功能。但是每次我尝试注册时，它都会使用默认的浏览器帐户并使用该帐户进行注册，而我想创建一个提示，要求用户输入他的GitHub ID和密码，以便他可以选择自己想要的帐户。这个怎么做？这是我的下面的代码...

passport.use(new GitHubStrategy(
    clientID: process.env.GITHUB_CLIENT_ID,
    clientSecret: process.env.GITHUB_CLIENT_SECRET,
    callbackURL: "http://localhost:3000/auth/github/callback"
  ,
  function(accessToken, refreshToken, profile, cb) 
    User.findOrCreate( githubId: profile.id , function (err, user) 
      return cb(err, user);
    );
  
));

app.get("/auth/github",
  passport.authenticate("github"));

app.get("/auth/github/callback",
  passport.authenticate("github",  failureRedirect: "/login" ),
  function(req, res) 
    res.redirect("/callback");
  );

答案

根据Github Oauth documentation，可以在Github Oauth2身份验证页面中建议要连接的帐户：

GET https://github.com/login/oauth/authorize

您具有login字段：

| Name  | Type    | Description |
|-------|---------|-------------|
| login | string  | Suggests a specific account to use for signing in and authorizing the app.

但是此字段未在passport-github中设置参数。您将需要覆盖来自OAuth2Strategy.prototype.authorizationParams存储库passport-oauth2的here：

/**
 * Return extra parameters to be included in the authorization request.
 *
 * Some OAuth 2.0 providers allow additional, non-standard parameters to be
 * included when requesting authorization.  Since these parameters are not
 * standardized by the OAuth 2.0 specification, OAuth 2.0-based authentication
 * strategies can overrride this function in order to populate these parameters
 * as required by the provider.
 *
 * @param Object options
 * @return Object
 * @api protected
 */
OAuth2Strategy.prototype.authorizationParams = function(options) 
  return ;
;

实现将是：

GitHubStrategy.prototype.authorizationParams = function(options) 
  return options || ;
;

并且在authenticate函数中传递自动化参数：

passport.authenticate('github', 
    login: req.body.login
)

这是一个覆盖authorizationParams并将login字段设置为来自input的值的完整示例：

var app = require('express')(),
    passport = require('passport'),
    GitHubStrategy = require('passport-github').Strategy,
    mongoose = require('mongoose'),
    github = require('octonode'),
    bodyParser = require('body-parser'),
    session = require('express-session');

var config = 
    clientID: 'YOUR_CLIENT_ID',
    clientSecret: 'YOUR_CLIENT_SECRET',
    callbackURL: 'http://localhost:8080/auth/github/callback'
;

var db = mongoose.connect("mongodb://localhost:27017/testDB", 
    useNewUrlParser: true,
    useUnifiedTopology: true
);

var userSchema = new mongoose.Schema(
    id:  type: String, unique: true ,
    access_token: String,
    refresh_token: String,
    name: String
,  collection: "user" );

var User = mongoose.model('User', userSchema);

GitHubStrategy.prototype.authorizationParams = function(options) 
  return options || ;
;

passport.serializeUser(function(user, done) 
    done(null, user.id);
);

passport.deserializeUser(function(id, done) 
    User.findOne( "id": id , function(err, user) 
        done(err, user);
    );
);

passport.use(new GitHubStrategy(
        clientID: config.clientID,
        clientSecret: config.clientSecret,
        callbackURL: config.callbackURL
    ,
    function(accessToken, refreshToken, profile, done) 

        process.nextTick(function() 

            User.findOne( id: profile.id , function(err, res) 
                if (err)
                    return done(err);
                if (res) 
                    console.log("user exists");
                    return done(null, res);
                 else 
                    console.log("insert user");
                    var user = new User(
                        id: profile.id,
                        access_token: accessToken,
                        refresh_token: refreshToken
                    );
                    user.save(function(err) 
                        if (err)
                            return done(err);
                        return done(null, user);
                    );
                
            )
        );
    
));

function userLogged(req, res, next) 
    if (req.isAuthenticated())
        return next();
    res.redirect('/login');


app.use(session( secret: 'somesecret' ));
app.use(passport.initialize());
app.use(passport.session());
app.use(bodyParser.urlencoded( extended: true ));

app.get('/auth/github/callback',
    passport.authenticate('github', 
        successRedirect: '/profile',
        failureRedirect: '/',
        scope: ['user']
    ));

app.get('/login', function(req, res)
    res.send(`
        <html>
        <body>
            <form action="/login" method="post">
                <span>Enter your preferred Github login</span>
                <input name="login" type="text" value=""/>
                <input type="submit" value="Connect"/>
            </form>
        </body>
        </html>
    `)
);

app.post('/login', function(req, res, next)
    if (!req.body.login)
        return res.sendStatus(400);
    
    passport.authenticate('github', 
        login: req.body.login
    )(req,res,next);
);

app.get('/profile', userLogged, function(req, res) 

    var client = github.client(req.user.access_token);

    var ghme = client.me();

    ghme.repos((err, repos) => 
        if (err) 
            console.log(err);
            res.json(
                status: "error"
            );
         else 
            console.log(repos);
            res.json(
                status: "ok",
                data: repos
            );
        
    );
);

app.listen(8080)

console.log('go to http://localhost:8080/login')

您可以找到要点here

上面的示例提示用户：

并且在Github身份验证页面中，身份验证页面顶部提示使用首选帐户登录：