YellowfinのRESTAPIで保存済みのRefreshTokenを使用してLoginTokenを発行する(HTMLでJavaScript使用)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223443/6861d393-e7a3-2bca-9cf8-11743022defd.png)


#ログイントークンを取得するまでの流れ
既存のアプリにYellowfinを埋め込んで利用する際は、リフレッシュトークンをアプリ内で保持し、それを使用して短時間有効なアクセストークンを発行する流れが多いと思います。今回はリフレッシュトークン取得→アクセストークン取得→シングルサインオンでダッシュボード表示といった流れをコードで解説していきます。
最後には埋め込みでダッシュボード表示ではなくログイン後のページへの遷移方法についても記載しています。

#早速ですがサンプルコードです
ここではリフレッシュトークンを取得するところからコードで記載しているので、POSTMANなどであらかじめリフレッシュトークンを取得している場合にはvar securityTokenに取得済みのトークンを代入してxhr2を宣言しているところから参考にしてください。
ポイントとしては、レスポンスの値のsecurityTokenの意味が3つのAPIでそれぞれ違うため混乱しがちなところです。
このコードはサンプルなので、実際に実装する時は認証周りをサーバーサイドの言語で実装してください！JavaScriptだとログインパスワードが見えてしまいます。。


```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でログインしてそのままログイン後のページに遷移させる場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223443/4fa49fd7-f268-bbc2-07c8-96b6ef82ec3e.png)

ログイントークンを取得した後にonloadの中でURLを指定してJavaScriptで遷移させるだけです。
ここではxhr3.onloadの中身のみ変更します。

```JavaScript: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);

```