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');
}

生成以下网址： https://accounts.snapchat.com/accounts/oauth2/auth?client_id=45fad898-162e-48e0-8e4e-135adbc42716&redirect_uri=https%3A%2F%2Fus-central1-library-titleix.cloudfunctions.net%2FredirectSnapchat&response_type=code&scope=https%3A%2F%2Fauth.snapchat.com%2Foauth2%2Fapi%2Fuser.display_name&state=c25hcGNoYXR0ZXN0

哪个返回此错误： {“错误”：“ invalid_request”，“错误说明”：“缺少PKCE参数。”}

注意： 1. redirect_uri与Snapchat列入白名单的重定向uri匹配 2.我正在使用开发环境OAUTH2 CLIENT ID 3.重定向uri是Firebase云功能。它永远不会受到打击。

有什么建议吗？

谢谢你， r

Answer 1

基于Jon Hanley的注释，应该对您的代码进行以下修改，这与LoginQS的添加相同（对code_challenge和code_challenge_method的修改），为我解决了同一PCKE问题。

尝试修改后的代码；实际上，我确实传递了code_challenge和状态键的状态变量，没有任何问题：

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');
}

Answer 2

尽管将静态字符串作为state和code_challenge传递可以很好地工作，但它的全部目的是让您可以肯定地知道，重定向到您的应用程序确实来自手套而不是攻击者。攻击者很容易看到您每次都使用相同的静态代码，并在其伪造请求中使用该静态代码。相反，您应该尝试每次（服务器端）生成唯一的代码，并在特定时间限制内安全地存储它。然后，当您收到对Firebase函数的传入请求时，可以验证代码是否与您存储的代码匹配。这样，您就知道它来自手套。

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

2 个答案: