使用纯 Javascript 或 JQuery 的 Google OAuth 2 访问令牌答案

【问题标题】：Google OAuth 2 Access Token using pure Javascript or JQuery使用纯 Javascript 或 JQuery 的 Google OAuth 2 访问令牌
【发布时间】：2019-11-09 20:14:57
【问题描述】：

我正在测试 Google OAuth 2.0。我有我的客户 ID、客户密码和验证码。现在我想获得一个访问和刷新令牌。

但是，我可以通过 PHP 做到这一点。但是在使用 Javascript 时出现 Invalid Grant 错误。

    <!DOCTYPE html>
    <html>
    <head>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    </head>

    <body>
        <a href='#' onClick='getAccessToken();'> Get your Access Token </a>
        <pre id="response"> </pre>

        <script>
            function getAccessToken() {

                $.ajax({
                    type: 'POST',
                    url: "https://accounts.google.com/o/oauth2/token",
                    contentType: 'application/x-www-form-urlencoded',
                    dataType: 'json',
                    data: {
                        client_id: 'MY CLIENT ID',
                        client_secret: 'MY SECRET',
                        code: 'MY AUTH CODE',
                        redirect_uri: 'http://localhost:8888/google-api.html',
                        grant_type: 'authorization_code'
                    },

                    success: function (data) {
                        $('#response').html(data);
                    },
                    error: function (e) {
                        $('#response').html(e.responseText);
                    }
                });

            }
        </script>

    </body>
    </html>

基本上我正在尝试将下面的 PHP Curl POST 请求转换为 Ajax

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL,"https://accounts.google.com/o/oauth2/token");
    curl_setopt($ch, CURLOPT_POST, TRUE);
    curl_setopt($ch, CURLOPT_HTTPHEADER, [ 'Content-Type: application/x-www-form-urlencoded']);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query([
        'code'          => $code,
        'client_id'     => $client_id,
        'client_secret' => $client_secret,
        'redirect_uri'  => $redirect_uri,
        'grant_type'    => 'authorization_code',
    ]));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);
    curl_close ($ch);

注意：堆栈溢出中的类似问题有很多观点，但仍未得到解答。天才开发人员请提供您的意见。我也被困了三天。

【问题讨论】：

我认为您的 Javascript 请求有效。那么如何通过重新授权范围来使用新代码呢？当代码无法使用时，会发生此类错误。该代码只能使用一次。请注意这一点。还有，把$('#response').html(data);修改成$('#response').html(JSON.stringify(data, null, " "));怎么样？但我不确定有关您的情况的详细信息。因此，如果这不是直接的解决方案，我深表歉意。
我尝试创建新的客户端、密码和身份验证代码，但没有成功。你自己试过吗？它适用于你的情况吗？我认为有一些问题，因为 ajax 不适用于重定向。但不确定。
感谢您的回复。在我通过在您的脚本请求中设置变量client_id、client_secret、code 和redirect_uri 确认脚本有效后，我对此进行了评论。但我很抱歉我的评论对你的情况没有用。例如，使用fetch 代替ajax 怎么样？
@Tanaike 非常感谢。您在 2 分钟内解决了我的问题。它在3天后起作用。我缺少的是那个愚蠢的 html(JSON.stringify(data, null, " ")); 。当我第一次点击时，它没有显示结果，我在不知不觉中跳过了它，并且授权代码变得无效。
感谢您的回复。很高兴您的问题得到解决。

标签： javascript ajax google-api google-oauth google-api-client

【解决方案1】：

感谢@Tankaike。这个问题在 StackOverflow 被问了 3-4 次，没有人认真回答。

初学者！！！需要注意的一点：Auth Code 只能工作一次 :) 要获取新的访问令牌，请使用您从第一个响应中获得的刷新令牌

        $.ajax({
            type: 'POST',
            url: "https://accounts.google.com/o/oauth2/token",
            contentType: 'application/x-www-form-urlencoded; charset=utf-8',
            crossDomain:true,
            cache : true, 
            dataType: 'json',
            data: {
                client_id: client_id,
                client_secret: client_secret,
                code: code,
                redirect_uri: redirect_uri,
                grant_type: grant_type,
            },

            success: function (data) {
                $('#response').html(JSON.stringify(data, null, " "));;
            },
            error: function (e) {
                $('#response').html(e.responseText);
            }
        });

【讨论】：