iFrame을 통해 웹 애플리케이션에서 Wyn 호스팅

Wyn Enterprise는 협업형 셀프 서비스 리포팅 및 분석을 제공하는 보안 강화형 엔터프라이즈 BI 소프트웨어입니다. Wyn은 엔드유저가 애드혹 대시보드와 리포트를 직접 디자인하고 활용할 수 있도록 지원하며, 동시에 IT 팀이 해당 기능을 기업 시스템에 직접 임베드할 수 있게 합니다.

이 글에서는 Wyn Enterprise를 ASP.NET Core 애플리케이션에 통합하는 방법을 살펴봅니다. Wyn 자체는 독립 실행형 애플리케이션이지만, 때때로 기업 내부 애플리케이션에 임베드해야 할 필요가 있습니다.

ASP.NET Core 앱에 Wyn Enterprise 통합 단계

• API 호출을 통해 Wyn 서버에서 인증 토큰 발급
• 이 토큰으로 Wyn 포털 URL 구성
• 구성된 URL을 iFrame 소스로 지정

Step 1: ASP.NET Core 앱 생성

Razor Pages 기반의 ASP.NET Core Web 앱을 생성합니다 (MVC도 사용 가능). 이미 앱이 있다면 이 단계를 건너뛸 수 있습니다.

앱 생성 방법은 Razor Pages 튜토리얼 을 참고하세요.

샘플 다운로드

Step 2: UI 생성

사용자가 Wyn URL, 사용자명, 비밀번호를 입력할 수 있는 UI를 생성합니다.

 <form method="post">
  <div class="align-content-center">
    <div class="centerAlign">
      <label>Wyn Url</label>
      <input type="text" size="70" asp-for="User.WynUrl" />
    </div>
    <div class="centerAlign">
      <label>Username</label>
      <input type="text" size="70" asp-for="User.Username" />
    </div>
    <div class="centerAlign">
      <label>Password</label>
      <input type="password" size="70" asp-for="User.Password" />
    </div>
    <div class="centerAlignButton">
      <button id="btnLogin" type="submit">Login</button>
    </div>
  </div>
</form> 

Step 3: 토큰 요청 및 Wyn URL 구성

 var request = new HttpRequestMessage(HttpMethod.Post, User.WynUrl.TrimEnd('/') + "/connect/token");
Dictionary<string,string> body = new Dictionary<string,string>();
body.Add("grant_type","password");
body.Add("username", User.Username);
body.Add("password", User.Password);
body.Add("client_id","integration");
body.Add("client_secret","eunGKas3Pqd6FMwx9eUpdS7xmz");
request.Content = new FormUrlEncodedContent(body);
request.Content.Headers.ContentType = new MediaTypeHeaderValue("application/x-www-form-urlencoded");
var client = _clientFactory.CreateClient();
var response = await client.SendAsync(request);
if(response.IsSuccessStatusCode){
  var res = await response.Content.ReadAsAsync<Token>();
  User.WynUrl = User.WynUrl.TrimEnd('/') + "/integration/?token=" + res.Access_Token;
  return RedirectToPage("/WynPortal", new { url = User.WynUrl, username = User.Username });
}else{
  Console.Write(response.ReasonPhrase);
  return Page();
} 

Step 4: Wyn Portal iFrame 임베드

 <iframe id="wynframe"
  src="@Model.User.WynUrl"
  height="800"
  width="1200"
  frameborder="0"
  marginwidth="0">
</iframe> 

 // WynPortal.cshtml.cs
[BindProperty]
public WynUser User { get; set; }
public IActionResult OnGet(string url, string username){
    User = new WynUser();
    User.WynUrl = url;
    User.Username = username;
    return Page();
}