基于.NET MAUI的社交登录示例求助

Google 认证示例 #

前端（JavaScript） #

先在Google开发者平台创建项目并获取客户端ID，再用Google Sign-In SDK实现前端登录：

// 加载Google SDK
window.gapi.load('auth2', function() {
  window.gapi.auth2.init({
    client_id: '你的Google客户端ID'
  }).then(function(auth2) {
    // 绑定登录按钮点击事件
    document.getElementById('google-login-btn').addEventListener('click', function() {
      auth2.signIn().then(function(googleUser) {
        // 获取用户信息与ID Token
        const profile = googleUser.getBasicProfile();
        const idToken = googleUser.getAuthResponse().id_token;
        
        // 将ID Token发送到后端验证
        fetch('/api/google-auth', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id_token: idToken })
        }).then(res => res.json())
          .then(data => {
            if (data.success) {
              console.log('登录成功');
              // 后续处理：跳转首页、存储用户信息等
            }
          });
      });
    });
  });
});

后端（Node.js/Express） #

使用google-auth-library验证前端传来的ID Token：

const { OAuth2Client } = require('google-auth-library');
const client = new OAuth2Client('你的Google客户端ID');

app.post('/api/google-auth', async (req, res) => {
  const { id_token } = req.body;
  try {
    const ticket = await client.verifyIdToken({
      idToken: id_token,
      audience: '你的Google客户端ID'
    });
    const payload = ticket.getPayload();
    const userId = payload['sub'];
    
    // 此处可根据payload中的用户信息，在本地数据库创建/匹配用户
    res.json({ success: true, user: { id: userId, name: payload.name, email: payload.email } });
  } catch (err) {
    res.json({ success: false, message: '认证失败' });
  }
});

Facebook 认证示例 #

前端（JavaScript） #

在Facebook开发者平台创建应用并获取应用ID，使用Facebook Login SDK：

// 初始化Facebook SDK
window.fbAsyncInit = function() {
  FB.init({
    appId      : '你的Facebook应用ID',
    cookie     : true,
    xfbml      : true,
    version    : 'v18.0'
  });
  
  FB.AppEvents.logPageView();   
};

// 加载SDK脚本
(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// 绑定登录按钮点击事件
document.getElementById('facebook-login-btn').addEventListener('click', function() {
  FB.login(function(response) {
    if (response.authResponse) {
      const accessToken = response.authResponse.accessToken;
      
      // 将Access Token发送到后端验证
      fetch('/api/facebook-auth', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ access_token: accessToken })
      }).then(res => res.json())
        .then(data => {
          if (data.success) {
            console.log('登录成功');
          }
        });
    } else {
      console.log('用户取消登录或授权失败');
    }
  }, { scope: 'public_profile,email' });
});

后端（Node.js/Express） #

调用Facebook Graph API验证Access Token：

const axios = require('axios');

app.post('/api/facebook-auth', async (req, res) => {
  const { access_token } = req.body;
  try {
    const response = await axios.get(`https://graph.facebook.com/me?fields=id,name,email&access_token=${access_token}`);
    const userData = response.data;
    
    // 根据返回的用户信息，在本地数据库创建/匹配用户
    res.json({ success: true, user: { id: userData.id, name: userData.name, email: userData.email } });
  } catch (err) {
    res.json({ success: false, message: '认证失败' });
  }
});

注意事项：

• 替换代码中的你的Google客户端ID和你的Facebook应用ID为实际在对应开发者平台获取的凭证
• 必须通过后端验证用户身份，不能仅依赖前端返回的信息，防止伪造请求
• 可根据自身使用的后端框架（如Java、Python等）调整后端代码逻辑

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