Node.js 在VueJS应用程序中集成OAuth时需要帮助

我有一个前端VueJS应用程序在端口8080上运行，一个NodeJS服务器在端口3000上运行。现在，我需要集成一个辅助应用程序，我需要从VueJS应用程序中单击按钮访问该应用程序的API。我当前的服务器架构如下，我需要知道我是否需要为授权服务器创建一个新服务器，或者我可以与端口3000集成

如果需要创建新的服务器授权服务器，如何添加它？设置是什么。我面临的问题是，我尝试将授权服务器与端口3000的后端服务器集成，我可以使用资源服务器，但是我只能通过重定向url调用

add

API调用，如下所示（

OAuth.js

）：

---

但是当我尝试从前端VueJS调用API调用时，没有调用API调用。它只会触发上面代码中显示的重定向URL。如果添加了新服务器（授权服务器），那么应如何从前端使用API调用，以及是否对新服务器（授权服务器）进行了任何配置更改。我是这个领域的新手，如果对我的问题缺乏了解，请告诉我，我会尽力澄清。

从架构上讲，你应该：

• 1个OAuth服务器
• 1前端
• 2个API
• 1个OAuth客户端（如果您的两个API都将从您的OAuth服务器接受令牌，很可能）

前端是OAuth客户端

因此，您的VueJS客户端应该：

从OAuth服务器获取令牌

调用API 1

在按钮处理程序（或其他）中，调用API 2

两个API都应该验证向其提供的令牌

下面是一个示例（sansouth服务器和sansapi），它显示了客户端/前端的工作方式。是有更多信息的人

公共客户样本
公共客户样本
启动OAuth流
调用API 1
调用API 2
{{info}}
const authorized endpoint=”https://localhost:8443/dev/oauth/authorize";
常量标记端点=”https://localhost:8443/dev/oauth/token";
const clientId=“public\u client”；
var访问令牌；
if（window.location.search&&window.location.search.length>0）{
var args=新的URLSearchParams（window.location.search）；
var代码=args.get（“代码”）；
if（代码）{
var xhr=new XMLHttpRequest（）；
xhr.onload=函数（）{
var响应=xhr.response；
var消息；
如果（xhr.status==200）{
var access_token=response.access_token；
axios.defaults.headers.common[“Authorization”]=“Bearer”+访问令牌；
message=“访问令牌：”+Access\u令牌；
}
否则{
message=“Error:“+response.Error\u description+”（“+response.Error+”）；
}
document.getElementById（“结果”）.innerHTML=消息；
};
xhr.responseType='json'；
xhr.open（“POST”，tokenpoint，true）；
setRequestHeader（'Content-type'，'application/x-www-form-urlencoded'）；
xhr.send（新的URLSearchParams）({
客户id:clientId，
代码验证程序：window.sessionStorage.getItem（“代码验证程序”），
授权类型：“授权代码”，
重定向_uri:location.href.replace（location.search“”），
代码：代码
}));
}
}
document.getElementById（“startButton”）.onclick=function（）{
var codeVerifier=GeneratorDomainString（64）；
生成反挑战（codeVerifier）。然后（函数（codeChallenge）{
sessionStorage.setItem（“code_verifier”，codeVerifier）；
var redirectUri=window.location.href.split（“？”）[0]；
var args=新的URLSearchParams({
响应类型：“代码”，
客户id:clientId，
代码挑战方法：“S256”，
代码挑战：编码挑战，
重定向uri:redirectUri
});
window.location=authorizeEndpoint+“/？”+args；
});
}
异步函数generateCodeChallenge（代码验证程序）{
var digest=await crypto.minute.digest（“SHA-256”，
新的TextEncoder（）.encode（codeVerifier））；
返回btoa（String.fromCharCode（…新Uint8Array（摘要）））
.replace（//=/g'）。replace（//\+/g'，-'）。replace（//\//g'，-'））
}
函数生成器域字符串（长度）{
var text=“”；
var-mablue=“ABCDEFGHIJKLMNOPQRSTUVXYZABCDFGHIJKLMNOPQRSTUVXYZ0123456789”；
对于（变量i=0；i（this.info=response））；
},
callApi2:函数（事件）{
日志（“调用API 2”）；
axios
.get（'https://httpbin.org/headers')
。然后（response=>（this.info=response））；
}
}
});

这确实解决了我一半的问题。另一半还不清楚，那就是集成授权服务器

router.get('/oauth', async (req: Request, res: Response)=>{
    oAuthSession = new OAuth(config.oauthRequestTokenUri, config.oauthAccessTokenUri, config.clientKey, config.clientSecret,
        config.oAuthVersion, config.authorizeCallbackUri, config.oAuthSignatureMethod, config.oAuthNonceSize, config.oAuthCustomHeaders);

      ......

}


    router.get('/callback', async (req: Request, res: Response)=>{
        tokens.verifier = req.query.oauth_verifier;
    
        l('----- Callback - Verifier Received -----');
        l(JSON.stringify(tokens, null, 2));
    
        l('----- Requesting Access Token and Secret -----');
    
        oAuthSession.getOAuthAccessToken(tokens.requestToken, tokens.requestTokenSecret, tokens.verifier, function (error, token, secret, results) {
            tokens.accessToken = token;
            tokens.accessTokenSecret = secret;
    
            l('----- Access Token and Secret Received -----');
            l('StatusCode => ' + results.statusCode);
            l(JSON.stringify(tokens, null, 2));
    
            oAuthSession.get(config.platformBaseUri, tokens.accessToken, tokens.accessTokenSecret, function (error, responseData, result) {
              l('StatusCode => ' + result.statusCode);
    
    
              l('----- Ready to do OAuth authenticated calls now-----');
              res.redirect(`http://localhost:3000/auth/add?accessToken=${tokens.accessToken}&accessTokenSecret=${tokens.accessTokenSecret}`)
              res.end();