node.js - 如何直接从 angular component.html 调用节点 api

问题描述

我想在我的 MEAN 堆栈应用程序中实现 google OAuthentication。

我使用'npm install passport-google-oauth20'. 在后端

当我使用 EJS 模板点击 api 时，身份验证工作正常。

这是我的代码：

应用程序.js

const express = require('express');
const cookieSession = require('cookie-session');
const passport = require('passport');
const authRoutes = require('./routes/auth-routes');
const profileRoutes = require('./routes/profile-routes');
const passportSetup = require('./config/passport-setup');
const mongoose = require('mongoose');
const keys = require('./config/keys');

const app = express();

// set view engine
app.set('view engine', 'ejs');

// set up session cookies
app.use(cookieSession({
    maxAge: 24 * 60 * 60 * 1000,
    keys: [keys.session.cookieKey]
}));

// initialize passport
app.use(passport.initialize());
app.use(passport.session());


// connect to mongodb
mongoose.connect(keys.mongodb.dbURI, () => {
    console.log('connected to mongodb');
});

// set up routes
app.use('/auth', authRoutes);
app.use('/profile', profileRoutes);

// create home route
app.get('/', (req, res) => {
    res.render('home', { user: req.user });
});

app.listen(4000, () => {
    console.log('app now listening for requests on port 4000');
});

登录.ejs

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Login</title>
    </head>
    <body>
        <nav>
            <ul>
                <% if (user) { %>
                <li><a href="/auth/logout">Log out</a></li>
                <% } else { %>
                <li><a href="/auth/login">Login</a></li>
                <% } %>
                <li><a href="/">Homepage</a></li>
                <li><a href="/profile">Profile</a></li>
            </ul>
        </nav>
        <header>
            <h1>Login using...</h1>
        </header>
        <main>
            <a class="google-btn" href="/auth/google">Google+</a>
        </main>
    </body>
</html>

auth-routes.js

const router = require('express').Router();
const passport = require('passport');

// auth login
router.get('/login', (req, res) => {
    res.render('login', { user: req.user });
});

// auth logout
router.get('/logout', (req, res) => {
    req.logout();
    res.redirect('/');
});

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

// callback route for google to redirect to
// hand control to passport to use code to grab profile info
router.get('/google/redirect', passport.authenticate('google'), (req, res) => {
    // res.send(req.user);
    res.redirect('/profile');
});

module.exports = router;

护照-setup.js

const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const keys = require('./keys');
const User = require('../models/user-model');

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

passport.deserializeUser((id, done) => {
    User.findById(id).then((user) => {
        done(null, user);
    });
});

passport.use(
    new GoogleStrategy({
        // options for google strategy
        clientID: keys.google.clientID,
        clientSecret: keys.google.clientSecret,
        callbackURL: '/auth/google/redirect'
    }, (accessToken, refreshToken, profile, done) => {
        // check if user already exists in our own db
        User.findOne({googleId: profile.id}).then((currentUser) => {
            if(currentUser){
                // already have this user
                console.log('user is: ', currentUser);
                done(null, currentUser);
            } else {
                // if not, create user in our db
                new User({
                    googleId: profile.id,
                    username: profile.displayName,
                    thumbnail: profile._json.image.url
                }).save().then((newUser) => {
                    console.log('created new user: ', newUser);
                    done(null, newUser);
                });
            }
        });
    })
);

在这里我的代码工作正常，因为我直接从 login.ejs 调用 api

<a class="google-btn" href="/auth/google">Google+</a>

但我的问题是如何直接从 Angular 5 调用 Node api（即“/auth/google”）。或者是否有任何其他方法可以使用 Angular 5+ 调用 google oauth。

提前致谢。

标签： node.jsangulargoogle-oauthmean-stackgoogle-api-nodejs-client

node.js - 如何直接从 angular component.html 调用节点 api

问题描述

解决方案

推荐阅读