基于Loopback实现Facebook登录的跨端适配问题求助

Got it, let's tackle this Facebook login setup between your NextJS (Express-based) frontend and Loopback API—since they're separate apps, we need to adjust the standard Passport flow to work cross-domain. Here's a step-by-step breakdown tailored to your architecture:

First, we'll set up Loopback to accept and validate the Facebook access token sent from your frontend, then map it to your app's user model.

• Install required packages:

  npm install loopback-component-passport passport-facebook passport-facebook-token
  

• Create a Passport configuration file (e.g., server/facebook-passport.js) to define the token validation strategy:

  const loopbackPassport = require('loopback-component-passport');
  const FacebookTokenStrategy = require('passport-facebook-token');
  
  module.exports = function(app) {
    const facebookConfig = {
      clientID: 'YOUR_FACEBOOK_APP_ID',
      clientSecret: 'YOUR_FACEBOOK_APP_SECRET',
      strategy: FacebookTokenStrategy,
      verifyFunction: function(accessToken, refreshToken, profile, done) {
        // Validate the token with Facebook's Graph API (optional but recommended)
        const request = require('request');
        request.get(`https://graph.facebook.com/me?access_token=${accessToken}&fields=id,name,email`, (err, res, body) => {
          if (err || res.statusCode !== 200) {
            return done(err || new Error('Invalid Facebook access token'));
          }
          const fbUser = JSON.parse(body);
  
          // Find or create a user in your Loopback User model
          app.models.User.findOne({ where: { email: fbUser.email } }, (err, user) => {
            if (err) return done(err);
            if (user) {
              // Update user with latest Facebook data if needed
              return done(null, user);
            } else {
              // Create new user from Facebook profile
              app.models.User.create({
                name: fbUser.name,
                email: fbUser.email,
                facebookId: fbUser.id,
                // Add any other required fields for your User model
              }, (err, newUser) => done(err, newUser));
            }
          });
        });
      }
    };
  
    loopbackPassport.configureProvider('facebook-token', facebookConfig, app);
  };
  

• Register this config in server/server.js by adding:

  require('./facebook-passport')(app);
  

• Add a custom remote method to your User model (e.g., common/models/user.js) to expose a login endpoint:

  module.exports = function(User) {
    User.facebookLogin = function(accessToken, cb) {
      const passport = User.app.passport;
      // Trigger the Facebook token authentication flow
      passport.authenticate('facebook-token', (err, user, info) => {
        if (err) return cb(err);
        if (!user) return cb(new Error('Invalid or expired Facebook token'));
        
        // Generate a Loopback access token for the authenticated user
        User.createAccessToken({
          userId: user.id,
          ttl: 86400 // 24-hour expiration
        }, (err, token) => {
          if (err) return cb(err);
          cb(null, {
            user: user,
            loopbackAccessToken: token.id
          });
        });
      })({ query: { access_token: accessToken } }, {}, cb);
    };
  
    // Define the remote method's API endpoint
    User.remoteMethod('facebookLogin', {
      accepts: [{ arg: 'accessToken', type: 'string', required: true }],
      returns: { arg: 'result', type: 'object', root: true },
      http: { verb: 'post', path: '/facebook-login' }
    });
  };
  

Your frontend will handle the Facebook login UI, retrieve the access token, and send it to Loopback.

• Install a Facebook login helper (or use the raw SDK):

  npm install react-facebook-login
  

• Create a login button component:

  import FacebookLogin from 'react-facebook-login';
  import { useRouter } from 'next/router';
  
  const FacebookLoginButton = () => {
    const router = useRouter();
  
    const handleFacebookResponse = (response) => {
      if (response.accessToken) {
        // Send token to Loopback API
        fetch('https://your-loopback-api-url.com/api/users/facebook-login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ accessToken: response.accessToken })
        })
        .then(res => res.json())
        .then(data => {
          // Store Loopback token in localStorage/cookies for future requests
          localStorage.setItem('loopbackToken', data.loopbackAccessToken);
          // Redirect to authenticated page
          router.push('/dashboard');
        })
        .catch(err => console.error('Login failed:', err));
      }
    };
  
    return (
      <FacebookLogin
        appId="YOUR_FACEBOOK_APP_ID"
        fields="name,email"
        callback={handleFacebookResponse}
        textButton="Login with Facebook"
      />
    );
  };
  
  export default FacebookLoginButton;
  

• Configure your Facebook App:

  • Add your frontend domain (www.myapp.com) to Valid OAuth Redirect URIs in the Facebook Developer Dashboard
  • Enable "Client OAuth Login" and "Web OAuth Login" under Settings > Advanced

Since your frontend and API are cross-domain, update server/config.json to allow requests from your frontend:

"cors": {
  "origin": "https://www.myapp.com",
  "credentials": true,
  "maxAge": 86400
}

(Use "*" for development, but restrict to your production domain.)

1. Click the Facebook login button on your NextJS app and grant permissions
2. Frontend retrieves the Facebook access token and sends it to Loopback's /api/users/facebook-login endpoint
3. Loopback validates the token, finds/creates a user, and returns a Loopback access token
4. Frontend stores the token and uses it for authenticated API requests (add Authorization: Bearer <loopbackToken> to headers)

内容的提问来源于stack exchange，提问作者bellpiapple