在OAuth2中使用JavaScript访问令牌

这是我以前试图获取的一些信息，但我从未找到问题的实际答案或解决方案。因此，希望有人能澄清，并为我指出正确的方向

我在底部把问题分为3个问题，所以如果它们可以用1,2,3来回答，这将使事情更容易理解，并帮助我解决这个问题

因此，基本上，我有一个使用CakePHP的OAuth2服务器设置，下面的JavaScript可以与之通信，以允许用户登录并获取访问令牌，然后使用该令牌向不同的端点发出各种请求以发送和接收数据

var access_token,
     refresh_token;

var App = {
    init: function() {
        $(document).ready(function(){
            Users.checkAuthenticated();
        });
    }(),
    splash: function() {
        var contentLogin = '<input id="Username" type="text"> <input id="Password" type="password"> <button id="login">Log in</button>';
        $('#app').html(contentLogin);
    },
    home: function() {  
        var contentHome = '<h1>Welcome</h1> <a id="logout">Log out</a>';
        $('#app').html(contentHome);
    }
};

var Users = {
    init: function(){
        $(document).ready(function() {
            $('#login').live('click', function(e){
                e.preventDefault();
                Users.login();
            }); 
            $('#logout').live('click', function(e){
                e.preventDefault();
                Users.logout();
            });
        });
    }(),

    // Check that if user is logged in (has an access token)

    checkAuthenticated: function() {
        access_token = window.localStorage.getItem('access_token');
        if( access_token == null ) {
            Users.logout();
        }
        else {
            Users.checkTokenValid(access_token);
        }
    },

    // Check the token is still valid on the server for access (also get User info)

    checkTokenValid: function(access_token){

        $.ajax({
            type: 'GET',
            url: 'http://domain.com/api/oauth/userinfo',
            data: {
                access_token: access_token
            },
            dataType: 'json',
            success: function(data) {

                console.log('success');

                console.log(data);

                if( data.error ) {
                    refresh_token = window.localStorage.getItem('refresh_token');
                     if( refresh_token == null ) {
                         Users.logout();
                     } else {
                         Users.refreshToken(refresh_token);
                    }
                } else {
                    App.home();
                }
            },
            error: function(a,b,c) {

                console.log('error');

                console.log(a);

                refresh_token = window.localStorage.getItem('refresh_token');
                if( refresh_token == null ) {
                     Users.logout();
                 } else {
                     Users.refreshToken(refresh_token);
                }
            }
        });

    },

    // Request a new access token using the refresh token

    refreshToken: function(refresh_token){

        $.ajax({
            type: 'GET',
            url: 'http://domain.com/api/oauth/token',
            data: {
                grant_type: 'refresh_token',
                refresh_token: refresh_token,
                client_id: 'NTEzN2FjNzZlYzU4ZGM2'
            },
            dataType: 'json',
            success: function(data) {
                if( data.error ) {
                    alert(data.error);
                } else {
                    window.localStorage.setItem('access_token', data.access_token);
                    window.localStorage.setItem('refresh_token', data.refresh_token);
                    access_token = window.localStorage.getItem('access_token');
                    refresh_token = window.localStorage.getItem('refresh_token');
                    App.home();
                }
            },
            error: function(a,b,c) {
                console.log(a,b,c);
                Users.logout();
            }
        });

    },

    // send login credentials and store tokens in localStorage and in variables

    login: function() {
        $.ajax({
            type: 'GET',
            url: 'http://domain.com/api/oauth/token',
            data: {
                grant_type: 'password',
                username: $('#Username').val(),
                password: $('#Password').val(),
                client_id: 'NTEzN2FjNzZlYzU4ZGM2'
            },
            dataType: 'json',
            success: function(data) {
                if( data.error ) {
                    alert(data.error);
                } else {
                    window.localStorage.setItem('access_token', data.access_token);
                    window.localStorage.setItem('refresh_token', data.refresh_token);
                    access_token = window.localStorage.getItem('access_token');
                    refresh_token = window.localStorage.getItem('refresh_token');
                    App.home();
                }
            },
            error: function(a,b,c) {
                console.log(a,b,c);
            }
        });
    },

    // Clear the localStorage and token variables and load the login (splash page)

    logout: function() {
        localStorage.removeItem('access_token');
        localStorage.removeItem('refresh_token');
        access_token = window.localStorage.getItem('access_token');
        refresh_token = window.localStorage.getItem('refresh_token');
        App.splash();
    }
};

var访问\u令牌，
刷新令牌；
变量应用={
init:function（）{
$（文档）.ready（函数（）{
Users.checkAuthenticated（）；
});
}(),
splash:function（）{
var contentLogin='登录'；
$（'#app'）.html（contentLogin）；
},
home:function（）{
var contentHome='欢迎注销'；
$（'#app'）.html（contentHome）；
}
};
变量用户={
init:function（）{
$（文档）.ready（函数（）{
$（'#login'）.live（'click'，函数（e）{
e、 预防默认值（）；
Users.login（）；
}); 
$（“#注销”）.live（'click'，函数（e）{
e、 预防默认值（）；
Users.logout（）；
});
});
}(),
//检查用户是否已登录（具有访问令牌）
checkAuthenticated:function（）{
access_-token=window.localStorage.getItem（'access_-token'）；
if（访问令牌==null）{
Users.logout（）；
}
否则{
Users.checkTokenValid（访问令牌）；
}
},
//检查令牌在服务器上是否仍然有效以进行访问（同时获取用户信息）
checkTokenValid:函数（访问令牌）{
$.ajax({
键入：“GET”，
网址：'http://domain.com/api/oauth/userinfo',
数据：{
访问令牌：访问令牌
},
数据类型：“json”，
成功：功能（数据）{
console.log（'success'）；
控制台日志（数据）；
if（data.error）{
refresh_-token=window.localStorage.getItem（'refresh_-token'）；
if（刷新\u标记==null）{
Users.logout（）；
}否则{
Users.refreshToken（刷新令牌）；
}
}否则{
App.home（）；
}
},
错误：函数（a、b、c）{
console.log（'error'）；
控制台日志（a）；
refresh_-token=window.localStorage.getItem（'refresh_-token'）；
if（刷新\u标记==null）{
Users.logout（）；
}否则{
Users.refreshToken（刷新令牌）；
}
}
});
},
//使用刷新令牌请求新的访问令牌
刷新令牌：函数（刷新令牌）{
$.ajax({
键入：“GET”，
网址：'http://domain.com/api/oauth/token',
数据：{
授予类型：“刷新令牌”，
刷新令牌：刷新令牌，
客户id:'NTEZN2FJNZLLYZU4ZGM2'
},
数据类型：“json”，
成功：功能（数据）{
if（data.error）{
警报（数据错误）；
}否则{
window.localStorage.setItem（'access\u token'，data.access\u token）；
window.localStorage.setItem（'refresh\u-token'，data.refresh\u-token）；
access_-token=window.localStorage.getItem（'access_-token'）；
refresh_-token=window.localStorage.getItem（'refresh_-token'）；
App.home（）；
}
},
错误：函数（a、b、c）{
控制台日志（a、b、c）；
Users.logout（）；
}
});
},
//发送登录凭据并将令牌存储在localStorage和变量中
登录：函数（）{
$.ajax({
键入：“GET”，
网址：'http://domain.com/api/oauth/token',
数据：{
授予类型：“密码”，
用户名：$（'#用户名'）.val（），
密码：$（'#password'）.val（），
客户id:'NTEZN2FJNZLLYZU4ZGM2'
},
数据类型：“json”，
成功：功能（数据）{
if（data.error）{
警报（数据错误）；
}否则{
window.localStorage.setItem（'access\u token'，data.access\u token）；
window.localStorage.setItem（'refresh\u-token'，data.refresh\u-token）；
access_-token=window.localStorage.getItem（'access_-token'）；
refresh_-token=window.localStorage.getItem（'refresh_-token'）；
App.home（）；
}
},
错误：函数（a、b、c）{
控制台日志（a、b、c）；
}
});
},
//清除localStorage和token变量并加载登录（启动页面）
注销：函数（）{
localStorage.removietem（'access_token'）；
removietem（'refresh_token'）；
access_-token=window.localStorage.getItem（'access_-token'）；
refresh_-token=window.localStorage.getItem（'refresh_-token'）；
App.splash（）；
}
};

希望这些代码都有意义。。。但简而言之，它会向API发送用户名和密码，然后API会发回access_令牌和refresh_令牌，然后我使用HTML5中的localStorage存储它们。刷新令牌用于在访问令牌不再工作时获取新的访问令牌，因此用户无需继续登录即可获得无缝体验（除非他们实际