带Velo扩展的Wix站点实现Xbox/Microsoft登录及Azure用户同步方案咨询

一、Xbox/Microsoft登录功能可行，实现方式如下 #

1. Microsoft登录（基于Azure Entra ID） #

• Azure端配置
  • 在Azure门户创建**单页应用(SPA)**类型的应用注册，设置重定向URI为你的Wix站点回调地址（例如https://your-wix-site.com/_velo/api/auth-callback）
  • 启用ID令牌、访问令牌颁发权限，添加User.Read等Microsoft Graph必要权限
• Wix Velo实现
  • 前端发起授权跳转：

    const authEndpoint = "https://login.microsoftonline.com/{你的租户ID}/oauth2/v2.0/authorize";
    const params = new URLSearchParams({
      client_id: "你的Azure应用客户端ID",
      response_type: "id_token token",
      redirect_uri: "https://your-wix-site.com/_velo/api/auth-callback",
      scope: "openid profile User.Read",
      nonce: Math.random().toString(36).substring(2, 15),
      state: Math.random().toString(36).substring(2, 15)
    });
    window.location.href = `${authEndpoint}?${params.toString()}`;
    

  • 后端API（auth-callback.jsw）处理回调：

    import { createMember, login, getMemberByEmail } from 'wix-users-backend';
    import jwt from 'jsonwebtoken'; // 需在Wix后台安装jwt npm包
    
    export async function getAuthCallback(request) {
      const idToken = request.query.id_token;
      // 验证ID令牌合法性
      const decodedToken = jwt.verify(idToken, "你的Azure应用公钥", {
        issuer: "https://login.microsoftonline.com/{你的租户ID}/v2.0",
        audience: "你的Azure应用客户端ID"
      });
      // 关联或创建Wix用户
      const existingUser = await getMemberByEmail(decodedToken.email);
      if (!existingUser) {
        await createMember({
          email: decodedToken.email,
          firstName: decodedToken.given_name,
          lastName: decodedToken.family_name
        });
      }
      // 登录用户并跳转至会员页
      const sessionToken = await login(decodedToken.email);
      return {
        status: 302,
        headers: { Location: `/member-page?sessionToken=${sessionToken}` }
      };
    }
    

  • 前端通过wix-usersAPI获取登录状态及用户信息

2. Xbox登录实现 #

Xbox登录依托Microsoft账户体系，需结合Xbox开发者权限：

• 在Azure应用注册中添加XboxLive.signin权限（需Xbox开发者身份验证）
• 调整授权请求的scope为openid profile XboxLive.signin
• 拿到访问令牌后，调用Xbox Live API获取玩家信息并同步至Wix用户字段：

  // 后端示例：获取Xbox玩家信息并更新Wix用户
  import { updateMember } from 'wix-users-backend';
  
  export async function syncXboxProfile(email, accessToken) {
    const xboxRes = await fetch("https://xbl-api.xboxlive.com/users/me/profile/settings", {
      headers: { Authorization: `Bearer ${accessToken}` }
    });
    const xboxProfile = await xboxRes.json();
    await updateMember(email, {
      customFields: { xboxGamertag: xboxProfile.gamertag }
    });
  }
  

二、数据关联与Azure Entra ID同步方案 #

若登录集成受限，可通过Wix Webhooks+Azure Functions实现用户数据同步：

• Wix侧配置
  • 在Wix开发者后台启用Member Created、Member Updated等Webhook事件，设置回调URL为Azure Function端点
• Azure侧实现
  • 创建Azure Function接收Wix用户数据，通过Microsoft Graph API在Entra ID中创建/更新用户：

    const graphClient = require("@microsoft/microsoft-graph-client");
    const { ClientCredentialAuthenticationProvider } = require("@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials");
    const { DefaultAzureCredential } = require("@azure/identity");
    
    module.exports = async function (context, req) {
      const wixMember = req.body.data;
      // 初始化Graph客户端
      const credential = new DefaultAzureCredential();
      const authProvider = new ClientCredentialAuthenticationProvider(credential, {
        scopes: ["https://graph.microsoft.com/.default"]
      });
      const client = graphClient.Client.initWithMiddleware({ authProvider });
      // 检查用户是否存在
      const existingUser = await client.api(`/users?$filter=mail eq '${wixMember.email}'`).get();
      if (!existingUser.value.length) {
        // 创建新用户
        await client.api("/users").post({
          accountEnabled: true,
          displayName: `${wixMember.firstName} ${wixMember.lastName}`,
          mailNickname: wixMember.email.split('@')[0],
          userPrincipalName: wixMember.email,
          passwordProfile: {
            forceChangePasswordNextSignIn: true,
            password: "TempPass_123" // 生成临时密码，后续通知用户修改
          }
        });
      } else {
        // 更新用户信息
        await client.api(`/users/${existingUser.value[0].id}`).patch({
          displayName: `${wixMember.firstName} ${wixMember.lastName}`
        });
      }
      context.res = { status: 200 };
    };
    

• 注意事项：确保Azure Function拥有User.ReadWrite.All的Graph权限，处理邮箱重复等数据冲突场景

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