Snapchat登录工具包错误：缺少PKCE参数

Question

我正在尝试使用他们的登录工具包从我的应用程序登录Snapchat。

此代码（我更改了clientId）：

onSnapChat() {
    const state = `c25hcGNoYXR0ZXN0`;
    const redirectUri = `https://us-central1-library.cloudfunctions.net/redirectSnapchat`;
    const clientId = `45fad898-162e-48e0-8e4e-135adbc42716`;
    const scopeList = ['https://auth.snapchat.com/oauth2/api/user.display_name'];
    const scope = scopeList.join(' ');
    const loginQS = {
        client_id: clientId,
        redirect_uri: redirectUri,
        response_type: 'code',
        scope: scope,
        state: state
    };

    const stringifyLoginQS = qs.stringify(loginQS);
    const SNAP_ACCOUNTS_LOGIN_URL = 'https://accounts.snapchat.com/accounts/oauth2/auth';
    window.open(SNAP_ACCOUNTS_LOGIN_URL + '?' + stringifyLoginQS, '_blank');
}

生成此url:https://accounts.snapchat.com/accounts/oauth2/auth?client_id=45fad898-162e-48e0-8e4e-135adbc42716

返回此错误：{“错误”：“无效的请求”，“错误描述”：“缺少PKCE参数”。}

注：1。重定向uri与Snapchat 2中列出的重定向uri匹配。我正在使用开发环境OAUTH2客户机ID 3。重定向uri指向Firebase云函数。它永远不会被击中。

有什么建议吗？

谢谢你r

Answer 1

虽然将静态字符串作为state和code\u challenge进行传递可以很好地工作，但它的全部意义在于，您可以确定重定向到应用程序的消息确实来自snapchat，而不是攻击者。攻击者很容易看到您每次都使用相同的静态代码，并在其虚假请求中使用该代码。相反，您应该尝试每次生成一个唯一的代码（服务器端），并在特定的时间限制内安全地存储它。然后，当您收到对firebase函数的传入请求时，您可以验证代码是否与存储的内容匹配。这样你就知道它来自snapchat。

Answer 2

基于Jon Hanley的评论，对代码的以下修改应该有效，这与LoginQS的添加（code_challenge和code_challenge_method）相同，为我修复了相同的PCKE问题。

试试这个修改过的代码；事实上，我确实为code_质询和状态键传递了state变量，没有问题：

onSnapChat() {
    const state = `c25hcGNoYXR0ZXN0`;
    const redirectUri = `https://us-central1-library.cloudfunctions.net/redirectSnapchat`;
    const clientId = `45fad898-162e-48e0-8e4e-135adbc42716`;
    const scopeList = ['https://auth.snapchat.com/oauth2/api/user.display_name'];
    const scope = scopeList.join(' ');
    const loginQS = {
        client_id: clientId,
        redirect_uri: redirectUri,
        code_challenge: state,
        code_challenge_method: "S256",
        response_type: 'code',
        scope: scope,
        state: state
    };

    const stringifyLoginQS = qs.stringify(loginQS);
    const SNAP_ACCOUNTS_LOGIN_URL = 'https://accounts.snapchat.com/accounts/oauth2/auth';
    window.open(SNAP_ACCOUNTS_LOGIN_URL + '?' + stringifyLoginQS, '_blank');
}