ログイントークンを取得するまでの流れ
既存のアプリにYellowfinを埋め込んで利用する際は、リフレッシュトークンをアプリ内で保持し、それを使用して短時間有効なアクセストークンを発行する流れが多いと思います。今回はリフレッシュトークン取得→アクセストークン取得→シングルサインオンでダッシュボード表示といった流れをコードで解説していきます。
最後には埋め込みでダッシュボード表示ではなくログイン後のページへの遷移方法についても記載しています。
早速ですがサンプルコードです
ここではリフレッシュトークンを取得するところからコードで記載しているので、POSTMANなどであらかじめリフレッシュトークンを取得している場合にはvar securityTokenに取得済みのトークンを代入してxhr2を宣言しているところから参考にしてください。
ポイントとしては、レスポンスの値のsecurityTokenの意味が3つのAPIでそれぞれ違うため混乱しがちなところです。
このコードはサンプルなので、実際に実装する時は認証周りをサーバーサイドの言語で実装してください！JavaScriptだとログインパスワードが見えてしまいます。。
embed.html
<html>
<body>
<meta charset="utf-8" />
<p><font size="3" color = "blue">ダッシュボードの埋め込み</font></p>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="dashboard"></div>
<script>
var authUserId = 'TEST002@yellowfin.bi';
var authUserPass = 'dammy';
var adminId = 'admin@yellowfin.com.au';
var adminPassword = 'test';
var body = {
"userName": adminId,
"password": adminPassword
};
var body2 = {
"signOnUser":{
"userName": authUserId,
"password": authUserPass
},
"noPassword": true
};
//encode to JSON
var json_text = JSON.stringify(body);
var json_text2 = JSON.stringify(body2);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8940/api/refresh-tokens');
xhr.responseType = 'json';
xhr.setRequestHeader('Authorization', 'YELLOWFIN ts=' + new Date().getTime() + ', nonce=123');
xhr.setRequestHeader('Accept', 'application/vnd.yellowfin.api-v1.2+json');
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onload = () => {
var securityToken = xhr.response.securityToken;
var xhr2 = new XMLHttpRequest();
xhr2.open('POST', 'http://localhost:8940/api/access-tokens');
xhr2.responseType = 'json';
xhr2.setRequestHeader('Authorization', 'YELLOWFIN ts=' + new Date().getTime() + ', nonce=123, token=' + securityToken);
xhr2.setRequestHeader('Accept', 'application/vnd.yellowfin.api-v1.2+json');
xhr2.onload = () => {
var accessToken = xhr2.response.securityToken;
var xhr3 = new XMLHttpRequest();
xhr3.open('POST', 'http://localhost:8940/api/login-tokens');
xhr3.responseType = 'json';
xhr3.setRequestHeader('Authorization', 'YELLOWFIN ts=' + new Date().getTime() + ', nonce=123, token=' + accessToken);
xhr3.setRequestHeader('Accept', 'application/vnd.yellowfin.api-v1.2+json');
xhr3.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr3.onload = () => {
var loginToken = xhr3.response.securityToken;
let url = 'http://localhost:8940/JsAPI/v3?token=' + loginToken;
let tp = 'text/javascript';
let sc = document.createElement('script');
sc.src = url;
sc.type = tp;
document.body.appendChild(sc);
setTimeout(function () {
yellowfin.showLoginPrompt = false;
yellowfin.init().then(() => {
yellowfin.loadDashboard({
dashboardUUID: '571493b1-1945-4a49-abe2-86df376f51e9',
element: document.querySelector('div#dashboard')
});
});
}, 1000);
};
xhr3.send(json_text2);
};
xhr2.send();
};
xhr.send(json_text);
</script>
</body>
</html>
SSOでログインしてそのままログイン後のページに遷移させる場合
ログイントークンを取得した後にonloadの中でURLを指定してJavaScriptで遷移させるだけです。
ここではxhr3.onloadの中身のみ変更します。
href.js
xhr3.onload = () => {
var loginToken = xhr.response.securityToken;
let url = 'http://localhost:8940/logon.i4?LoginWebserviceId=' + loginToken;
window.location.href = url;
};
xhr3.send(json_text2);