个人中心
gpt4 book ai didi

angularjs - 来自重定向的快速 Passport 身份验证空白页

转载 作者：太空宇宙 更新时间：2023-11-03 22:36:17 26 4
gpt4 key购买 nike

我使用带有 Facebook 策略的 Passport 进行身份验证。我在客户端使用 angular，在服务器端使用 express。
当用户单击使用 Facebook 登录并成功通过身份验证时，我将重定向回主页。但是当我返回时，我总是得到空白页。刷新后，页面又好了。

这是我的实现:

facebook.js:

'use strict';
var passport = require('passport'),
    url = require('url'),
    FacebookStrategy = require('passport-facebook').Strategy,
    config = require('../config'),
    user = require('../../app/user/user.server.controller');

module.exports = function() {
    // Use the Passport's Facebook strategy
    passport.use(new FacebookStrategy({
            clientID: config.facebook.clientID,
            clientSecret: config.facebook.clientSecret,
            callbackURL: config.facebook.callbackURL,
            profileFields: ['id', 'displayName', 'email'],
            passReqToCallback: true
        },
        function(req, accessToken, refreshToken, profile, done) {
            // Set the user's provider data and include tokens
            var providerData = profile._json;
            providerData.accessToken = accessToken;
            providerData.refreshToken = refreshToken;

            var providerUserProfile = {
                username: profile.displayName,
                email: profile.email,
                provider: 'facebook',
                providerId: profile.id,
                providerData: providerData
            };

            // Save the user OAuth profile
            user.saveOAuthUserProfile(req, providerUserProfile, done);
        }
    ));
};

配置/passport.js 
'use strict';
var passport = require('passport'),
    mongoose = require('mongoose');

module.exports = function() {
    var User = mongoose.model('User');

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

    passport.deserializeUser(function(id, done) {
        User.findOne({
            _id: id
        }, '-password -salt', function(err, user) {
            done(err, user);
        });
    });

    require('./strategies/local.js')();
    require('./strategies/twitter.js')();
    require('./strategies/facebook.js')();
    require('./strategies/google.js')();

};

user.server.route.js 
// Invoke 'strict' JavaScript mode
'use strict';

// Load the module dependencies
var user = require('./user.server.controller'),
    passport = require('passport');

// Define the routes module' method
module.exports = function(app) {
    // Set up the 'signup' routes
    app.route('/signup')
        .get(user.renderSignup)
        .post(user.signup);

    // Set up the 'signin' routes
    app.route('/signin')
        .get(user.renderSignin)
        .post(passport.authenticate('local', {
            successRedirect: '/',
            failureRedirect: '/signin',
            failureFlash: true
        }));

    // Set up the Facebook OAuth routes
    app.get('/oauth/facebook', passport.authenticate('facebook', {
        failureRedirect: '/signin'
    }));
    app.get('/oauth/facebook/callback', passport.authenticate('facebook', {
        failureRedirect: '/signin',
        successRedirect: '/'
    }));

    // Set up the Twitter OAuth routes
    app.get('/oauth/twitter', passport.authenticate('twitter', {
        failureRedirect: '/signin'
    }));
    app.get('/oauth/twitter/callback', passport.authenticate('twitter', {
        failureRedirect: '/signin',
        successRedirect: '/'
    }));

    // Set up the Google OAuth routes
    app.get('/oauth/google', passport.authenticate('google', {
        scope: [
            'https://www.googleapis.com/auth/userinfo.profile',
            'https://www.googleapis.com/auth/userinfo.email'
        ],
        failureRedirect: '/signin'
    }));
    app.get('/oauth/google/callback', passport.authenticate('google', {
        failureRedirect: '/signin',
        successRedirect: '/'
    }));

    // Set up the 'signout' route
    app.get('/signout', user.signout);
};

索引.ejs 
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
    <title><%= title %></title>


</head>
<body>


<section ng-view></section>


<script type="text/javascript">
    window.user = <%- user || 'null' %>;
</script>


<script type="text/javascript" src="/public/lib/angular/angular.js"></script>
<script type="text/javascript" src="/public/lib/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/public/lib/angular-resource/angular-resource.js"></script>

<script type="text/javascript" src="/public/article/article.client.module.js"></script>
<script type="text/javascript" src="/public/article/article.client.controller.js"></script>
<script type="text/javascript" src="/public/article/article.client.route.js"></script>
<script type="text/javascript" src="/public/article/article.client.resource.js"></script>

<script type="text/javascript" src="/public/projectTemplate/projectTemplate.client.module.js"></script>
<script type="text/javascript" src="/public/projectTemplate/projectTemplate.client.controller.js"></script>
<script type="text/javascript" src="/public/projectTemplate/projectTemplate.client.route.js"></script>
<script type="text/javascript" src="/public/projectTemplate/projectTemplate.client.resource.js"></script>
<script type="text/javascript" src="/public/projectTemplate/taskTemplate.client.resource.js"></script>


<script type="text/javascript" src="/public/index/index.client.module.js"></script>
<script type="text/javascript" src="/public/index/index.client.route.js"></script>
<script type="text/javascript" src="/public/index/index.client.controller.js"></script>


<script type="text/javascript" src="/public/user/user.client.module.js"></script>
<script type="text/javascript" src="/public/user/authentication.client.service.js"></script>



<script type="text/javascript" src="/public/application.js"></script>


</body>
</html>

index.client.view.html: 
<section ng-controller="IndexController">

    <div data-ng-show="!authentication.user">
        <a href="/signup">Signup</a>
        <a href="/signin">Signin</a>
    </div>
    <div data-ng-show="authentication.user">
        <h1>Hello <span data-ng-bind="authentication.user.fullName"></span></h1>
        <a href="/signout">Signout</a>
        <ul>
            <li><a href="/#!/article">List Articles</a></li>
            <li><a href="/#!/article/create">Create an Article</a></li>
        </ul>

        <ul>
            <li><a href="/#!/projectTemplate">List Project Templates</a></li>
            <li><a href="/#!/projectTemplate/create">Create a Project Template</a></li>
        </ul>


    </div>



</section>

编辑:
我正在使用本书的示例代码:

https://www.packtpub.com/books/content/support/17478

你可以在这里下载代码。选择最后一章。它在 Facebook 策略上有一些错误，您可以注释掉电子邮件字段(引用我上面的代码)

它具有相同的白屏行为。我尝试过 chrome 和 safari。

最佳答案

方法一:
您成功重定向到主页 - 似乎是“/”，但您没有提到主页路线。
在您的主页 route 。您可以通过 console.log('page hit') 查看重定向时页面是否从服务器呈现

方法 2:Facebook 将 # 附加到 auth 回调 url。如果您使用的 Angular 路由可能会被解释为您未定义的路由并且不会加载任何页面

关于angularjs - 来自重定向的快速 Passport 身份验证空白页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28133478/

26 4 0
文章推荐： node.js - Estimote 贴纸 + Node.js + Raspberry-Pi
文章推荐： node.js - 在本地服务器上复制heroku/node.js内存泄漏以进行调试
文章推荐： node.js - 通过nodejs使用twitter token 执行http请求
文章推荐： c# - 如何从 SslCredentials 和 token 字符串创建 CallCredentials
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com