我们在Office Excel加载项中实现了Office js Helpers进行身份验证。但是由于刷新令牌功能,出于以下原因,不得不迁移其他OAUTH库。
1)支持本地服务器2)实现刷新令牌/静默令牌
因此,我们尝试使用oidc-client通过displaydialogasync用OAUTH库之一将Office js Helpers替换为OAUTH库之一,但它收到消息“ jsonMessage”且未获得任何令牌,因此请确认实现。
auth.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Office JavaScript API -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.debug.js"></script>
</head>
<body>
</body>
<!-- <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script> -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.debug.js"></script>
<script src="/dist/auth.js"></script>
<script>
Office.initialize = function () {
showLogin();
// Office.context.ui.messageParent("jsonMessage");
console.log('first')
};
</script>
</html>
auth.ts
import { User, UserManager, UserManagerSettings } from 'oidc-client';
import { environment } from 'src/environments/environment';
export { User };
export class AuthService {
userManager: UserManager;
constructor() {
const settings = {
authority: "https://qa-xxxxxxxx.com/xxxx/",
client_id: "https://qa-xxxxxxxx.com/xxxx/",
redirect_uri: "https://localhost:3000/taskpane.html",
// silent_redirect_uri: `${environment.clientRoot}assets/silent-callback.html`,
// post_logout_redirect_uri: `${environment.clientRoot}`,
response_type: 'id_token token',
scope: "openid read:investments read:profiles read:portfolios"
};
this.userManager = new UserManager(settings);
}
public getUser(): Promise<User> {
return this.userManager.getUser();
}
public login(): Promise<void> {
return this.userManager.signinRedirect();
}
public renewToken(): Promise<User> {
return this.userManager.signinSilent();
}
public logout(): Promise<void> {
return this.userManager.signoutRedirect();
}
}
taskpane.ts
if (localStorage.getItem('accessToken') == null) {
if (OfficeHelpers.Authenticator.isAuthDialog())
return;
var dialog: any;
var url: any;
url = environment.AuthUrl;
let loginDialog: Office.Dialog;
const loginpopup = function () {
Office.context.ui.displayDialogAsync(
url,
{height: 40, width: 30},
(result) => {
if (result.status === Office.AsyncResultStatus.Failed) {
// displayError(`${result.error.code} ${result.error.message}`);
}
else {
loginDialog = result.value;
loginDialog.addEventHandler(Office.EventType.DialogMessageReceived, processLoginMessage);
// loginDialog.addEventHandler(Office.EventType.DialogEventReceived, processLoginDialogEvent);
}
}
);
function processLoginMessage(arg: any) {
if (arg != "jsonMessage") {
$(".loader").show();
var test = JSON.parse(arg.message).value.split("#")[1].split("&")[1].split("=");
let accessToken = test[1];
localStorage.setItem('accessToken', accessToken);
OfficeRuntime.storage.setItem('accessCustomToken', accessToken)
.then((result) => {
console.log(result);
}, (error) => {
console.log('Store error: ');
console.log(error);
});
loadProfiles();
$('#lstPrfId').show();
$("#lblprf").show();
dialog.close();
};
}
我对oidc-client
本身一无所知,但您可以在Auth with the Dialog API上找到有关将Office Dialog API与OAuth库一起使用的一些一般性指导。
Office Helpers仅对Azure AD,Google,Facebook,Dropbox和Microsoft帐户具有内置支持。由于使用的是自己的身份验证服务器,因此需要修改帮助程序以添加自定义端点。 (例如,参见帮助程序文件endpoint.manager.ts。)但这将是毫无意义的复杂性。我真的建议您完全不要使用帮助器。
我无法从您的代码中分辨出environment.AuthUrl
的值,所以我无法分辨您要传递给displayDialogAsync
的URL。我假设它是auth.html。如果不是,那么事情就搞砸了。
似乎您正在使用auth.html加载auth.js,但是auth.ts仅定义了内容。然后auth.html调用showLogin
,但是该方法不在您使用auth.html加载的任何库中。
似乎您在auth.html中两次加载了office.js。
您已将重定向URL设置为taskpane.html。我不知道oidc-client`的工作原理,但是几乎可以肯定这是错误的。如果auth代码在auth.html中运行,则您希望auth.html作为重定向URL。