Ionic 3集成Facebook登录对接Spring后端技术求助

Got it, let’s walk through exactly how to build your Ionic app with Facebook-only login, fetching friends who use the app, and setting up the backend API—since you said existing answers didn’t cover your specific scenario, I’ll focus on the latest tools and your exact requirements.

First, since you’re on the latest Ionic version, we’ll use Capacitor (Ionic’s default runtime) instead of Cordova. Here’s the step-by-step:

• Install the Capacitor Facebook Login plugin:

  npm install @capacitor/facebook-login
  npx cap sync
  

• Configure Facebook Developer Platform:
  1. Create a new Facebook App (or use an existing one) and add iOS/Android platforms.
  2. Grab your App ID and App Secret—you’ll need these for both frontend and backend.
  3. Set up OAuth redirect URIs: For iOS, use fb{YOUR_APP_ID}://authorize; for Android, add your app’s package name and hash key.
• Implement Login in Ionic:
  Remove any other login/signup UI components—only keep your Facebook login button. Add this code to your login component:

  import { FacebookLogin } from '@capacitor/facebook-login';
  import { HttpClient } from '@angular/common/http';
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.page.html',
    styleUrls: ['./login.page.scss'],
  })
  export class LoginPage {
    constructor(private http: HttpClient) {}
  
    async loginWithFacebook() {
      try {
        // Request necessary permissions: public_profile for basic user data, user_friends for app-using friends
        const loginResult = await FacebookLogin.login({
          permissions: ['public_profile', 'email', 'user_friends']
        });
  
        if (loginResult.accessToken) {
          const accessToken = loginResult.accessToken.token;
          // Verify token with your backend first (critical for security)
          this.http.post('/api/verify-fb-token', { accessToken }).subscribe({
            next: (res: any) => {
              if (res.success) {
                // Fetch friends after successful verification
                this.fetchAppFriends(accessToken);
                // Navigate to your app's main screen
              }
            },
            error: (err) => console.error('Token verification failed:', err)
          });
        }
      } catch (error) {
        console.error('Facebook login failed:', error);
      }
    }
  }
  

Facebook’s Graph API v18+ (latest as of now) restricts the user_friends permission to only return friends who have authorized your app—perfect for your use case. Add this method to your login component:

async fetchAppFriends(accessToken: string) {
  try {
    const response = await fetch(`https://graph.facebook.com/v18.0/me/friends?access_token=${accessToken}&fields=id,name,picture`);
    const friendData = await response.json();
    const appUsingFriends = friendData.data; // This is exactly the list you need

    // Optionally send this list to your backend for storage
    this.http.post('/api/save-friends', { userId: res.user.id, friends: appUsingFriends }).subscribe({
      next: () => console.log('Friends saved to backend'),
      error: (err) => console.error('Failed to save friends:', err)
    });
  } catch (error) {
    console.error('Failed to fetch friends:', error);
  }
}

Important: You’ll need to submit your app for Facebook review to use the user_friends permission in production. Clearly explain your use case (showing users their friends who use the app) to get approval faster.

Your backend needs two core functions: verifying Facebook’s access token (to prevent fake logins) and storing user/friend data. Here’s a minimal implementation:

First, install dependencies:

npm install express axios cors mongoose

Then create your server file (server.js):

const express = require('express');
const axios = require('axios');
const cors = require('cors');
const mongoose = require('mongoose');

const app = express();
const PORT = 3000;
const FB_APP_ID = 'YOUR_FACEBOOK_APP_ID';
const FB_APP_SECRET = 'YOUR_FACEBOOK_APP_SECRET';

// Connect to MongoDB (replace with your DB URI)
mongoose.connect('mongodb://localhost:27017/ionic-fb-app')
  .then(() => console.log('Connected to DB'))
  .catch(err => console.error('DB connection error:', err));

// User schema (only stores FB data since no other auth methods)
const userSchema = new mongoose.Schema({
  fbId: { type: String, unique: true, required: true },
  name: String,
  email: String,
  friends: [{ id: String, name: String, picture: String }]
});
const User = mongoose.model('User', userSchema);

// Middleware
app.use(cors());
app.use(express.json());

// Verify Facebook access token
app.post('/api/verify-fb-token', async (req, res) => {
  const { accessToken } = req.body;
  try {
    // Validate token with Facebook's debug endpoint
    const verificationRes = await axios.get('https://graph.facebook.com/debug_token', {
      params: {
        input_token: accessToken,
        access_token: `${FB_APP_ID}|${FB_APP_SECRET}`
      }
    });

    if (!verificationRes.data.data.is_valid) {
      return res.status(401).json({ success: false, message: 'Invalid token' });
    }

    // Fetch user's basic info
    const userRes = await axios.get('https://graph.facebook.com/v18.0/me', {
      params: {
        access_token: accessToken,
        fields: 'id,name,email'
      }
    });

    // Create or update user in DB
    await User.findOneAndUpdate(
      { fbId: userRes.data.id },
      userRes.data,
      { upsert: true, new: true }
    );

    res.json({ success: true, user: userRes.data });
  } catch (error) {
    res.status(500).json({ success: false, message: 'Token verification failed' });
  }
});

// Save user's friend list
app.post('/api/save-friends', async (req, res) => {
  const { userId, friends } = req.body;
  try {
    await User.findOneAndUpdate(
      { fbId: userId },
      { $set: { friends: friends } }
    );
    res.json({ success: true });
  } catch (error) {
    res.status(500).json({ success: false, message: 'Failed to save friends' });
  }
});

app.listen(PORT, () => console.log(`Backend running on http://localhost:${PORT}`));

• Test First with Facebook Test Users: Use Facebook’s Test Users feature to test login and friend fetching without needing app review. You can create test users who are friends with each other to simulate the production flow.
• Keep Plugins Updated: Run npm update @capacitor/facebook-login regularly to ensure compatibility with the latest Ionic/Capacitor versions.
• Privacy Compliance: Make sure your app’s privacy policy clearly states how you use Facebook data (user info and friend lists) to comply with Facebook’s policies and global regulations like GDPR.

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