using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;
using System.Net.Http;
using System.Net.Http.Headers;

namespace AzureBotService.DirectLine.GetToken
{
    public static class AzureBotServiceDirectLineGetToken
    {
        [FunctionName("AzureBotServiceDirectLineGetToken")]

        public static async Task<IActionResult> Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req, ILogger log)
        {
            AzureBotService abs = new AzureBotService();
            var response = await abs.GetToken();

            return new OkObjectResult(response.Token);
        }
    }
    public class AzureBotService
    {
        private string directLineEndpoint = "https://directline.botframework.com/v3/directline/tokens/generate";
        public async Task<IGetTokenResponse> GetToken()
        {
            var client = new HttpClient();
            client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", "DirevtLineのシークレットキーを指定");
            var response = await client.PostAsync(directLineEndpoint, null);
            var responseResult = response.Content.ReadAsStringAsync().Result;
            var responseResultDeserialized = JsonConvert.DeserializeObject<IGetTokenResponse>(responseResult);
            return responseResultDeserialized;
        }
    }
    public class IGetTokenResponse
    {
        /// 会話のID
        public string ConversationId { get; set; }

        /// トークン
        public string Token { get; set; }

        /// 有効時間（秒数）
        [JsonProperty("expires_in")]
        public int ExpiresIn { get; set; }
    }
}

<template>
  <div class="chatbot-wrapper">
    <h1>Git の Chatbot</h1>
    <iframe
      :src="`https://webchat.botframework.com/embed/chatbot-git-bot?t=${token}`"
    >
    </iframe>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import axios from 'axios'

export default Vue.extend({
  async asyncData() {
    /// Token取得
    const { data } = await axios.get(
      'https://directline-gettoken.azurewebsites.net/api/AzureBotServiceDirectLineGetToken'
    )
    return {
      token: data,
    }
  },
})
</script>

<style scoped>
.chatbot-wrapper {
  padding: 10px;
}
.chatbot-wrapper > h1 {
  color: #3a3a3a;
}
.chatbot-wrapper > iframe {
  width: 500px;
  height: 600px;
}
</style>