测试Snapchat API的Login Kit OAuth流程遇错误请求协助

我正在学习Snapchat API，跟着官方Web教程探索Login Kit功能，但遇到了问题：使用Laravel框架实现时，跳转至Snapchat登录页后仅显示“Something Went Wrong”，无法继续。我使用尚未审核的应用测试以先熟悉流程，尝试了Laravel代码构建登录链接（使用测试环境的公开/保密OAuth Client ID），也尝试了JavaScript实现的OAuth流程，但均出现相同错误页面。我已向支持团队反馈但未收到回复，希望获得技术建议。

排查方向 #

• Client ID类型匹配：公开Client ID仅适用于前端JS流程，保密Client ID仅适用于后端Laravel流程，不可混用。检查代码中是否为对应流程使用了正确类型的ID。
• Redirect URI完全一致：确认Snap开发者后台配置的redirect_uri与代码中的值完全匹配，包括HTTPS协议、域名、路径，大小写也必须一致，测试环境请勿使用example.com，替换为实际测试域名。
• Scope权限验证：Laravel代码使用了带完整URL的Scope格式，JS代码使用短格式，两种格式均支持，但需确认Snap开发者后台是否为你的应用开放了这些权限。未审核应用默认权限有限，前往后台核对权限列表。
• State参数格式修正：Laravel代码中用Crypt::encryptString加密了state参数，但Snapchat要求state为未加密的随机字符串，加密后的内容可能不符合要求，尝试直接使用Str::random(10)作为state值。
• 浏览器控制台查错：使用JS流程时，打开浏览器开发者工具的Console面板，查看SDK加载错误或OAuth请求的具体报错信息，可能会得到更明确的提示。
• 测试账号权限：确保用于测试的Snapchat账号已添加至开发者后台的测试账号列表，未审核应用仅允许指定测试账号登录，普通账号会触发报错。

我使用的代码 #

Laravel代码 #

$state = Crypt::encryptString(Str::random(10));

$url = 'https://accounts.snapchat.com/accounts/oauth2/auth?'.http_build_query([
    'client_id' => '<insert my staging Public / Confidential OAuth Client ID>',
    'redirect_uri' => 'https://example.com/snapchat/callback',
    'response_type' => 'code',
    'scope' => 'https://auth.snapchat.com/oauth2/api/user.display_name https://auth.snapchat.com/oauth2/api/user.bitmoji.avatar https://auth.snapchat.com/oauth2/api/user.external_id',
    'state' => $state
]);

JavaScript代码 #

<body>
     <div id="display_name"></div>
    <img id="bitmoji" />
    <div id="external_id"></div>
    <hr />
    <div id="my-login-button-target"></div>
</body>

<script>
      window.snapKitInit = function () {
        var loginButtonIconId = "my-login-button-target";
        // Mount Login Button
        snap.loginkit.mountButton(loginButtonIconId, {
          clientId: "<insert my staging Public / Confidential OAuth Client ID>",
          redirectURI: "https://example.com/snapchat/callback",
          scopeList: [
            "user.display_name",
            "user.bitmoji.avatar",
            "user.external_id",
          ],
          handleResponseCallback: function () {
            snap.loginkit.fetchUserInfo().then(
              function (result) {
                console.log("User info:", result.data.me);
                document.getElementById("display_name").innerHTML =
                  result.data.me.displayName;
                document.getElementById("bitmoji").src =
                  result.data.me.bitmoji.avatar;
                document.getElementById("external_id").innerHTML =
                  result.data.me.externalId;
              },
              function (err) {
                console.log(err); // Error
              }
            );
          },
        });
      };

      // Load the SDK asynchronously
      (function (d, s, id) {
        var js,
          sjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://sdk.snapkit.com/js/v1/login.js";
        sjs.parentNode.insertBefore(js, sjs);
      })(document, "script", "loginkit-sdk");
</script>

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