6

我正在尝试使用他们的登录工具包从我的应用程序登录到 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

返回此错误： {"error":"invalid_request","error_description":"Missing PKCE parameters."}

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

有什么建议么？

谢谢你，r

4

2 回答 2

4

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

试试这个修改过的代码；事实上，我确实为 code_challenge 和 state 键传递了 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');
}
于 2019-06-07T03:53:45.393 回答
1

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

于 2020-03-28T09:31:45.130 回答