Relay Server to simplify Twitch configuration (#405)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/workflows/TagzAppTwitchRelay.yml

@@ -0,0 +1,51 @@
+name: Build and deploy .NET Core application to Function App TagzAppTwitchRelay
+on:
+  push:
+    branches: [main]
+    paths: ["src/TagzApp.TwitchRelay/**"]
+env:
+  AZURE_FUNCTIONAPP_NAME: TagzAppTwitchRelay
+  AZURE_FUNCTIONAPP_PACKAGE_PATH: TagzApp.TwitchRelay/published
+  CONFIGURATION: Release
+  DOTNET_CORE_VERSION: 8.0.x
+  WORKING_DIRECTORY: src/TagzApp.TwitchRelay
+  DOTNET_CORE_VERSION_INPROC: 6.0.x
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - name: Setup .NET SDK
+      uses: actions/setup-dotnet@v3
+      with:
+        dotnet-version: ${{ env.DOTNET_CORE_VERSION }}
+    - name: Setup .NET Core (for inproc extensions)
+      uses: actions/setup-dotnet@v1
+      with:
+        dotnet-version: ${{ env.DOTNET_CORE_VERSION_INPROC }}
+    - name: Restore
+      run: dotnet restore "${{ env.WORKING_DIRECTORY }}"
+    - name: Build
+      run: dotnet build "${{ env.WORKING_DIRECTORY }}" --configuration ${{ env.CONFIGURATION }} --no-restore
+    - name: Publish
+      run: dotnet publish "${{ env.WORKING_DIRECTORY }}" --configuration ${{ env.CONFIGURATION }} --no-build --output "${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}"
+    - name: Publish Artifacts
+      uses: actions/upload-artifact@v3
+      with:
+        name: functionapp
+        path: ${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+    - name: Download artifact from build job
+      uses: actions/download-artifact@v3
+      with:
+        name: functionapp
+        path: ${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}
+    - name: Deploy to Azure Function App
+      uses: Azure/functions-action@v1
+      with:
+        app-name: ${{ env.AZURE_FUNCTIONAPP_NAME }}
+        publish-profile: ${{ secrets.TagzAppTwitchRelay_2EC9 }}
+        package: ${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}

.github/workflows/dotnet.yml

@@ -41,9 +41,9 @@ jobs:
       - name: Restore dependencies
         run: dotnet restore
       - name: Build
-        run: dotnet build --no-restore
+        run: dotnet build TagzApp.Blazor --no-restore
       - name: Unit Test
-        run: dotnet test --no-build --verbosity normal
+        run: dotnet test --verbosity normal
         working-directory: ./src/TagzApp.UnitTest
 
   #playwright:

scripts/startTwitchRelay

@@ -0,0 +1,3 @@
+#!/bin/bash
+cd ../src/TagzApp.TwitchRelay
+func start --cors http://localhost:5000 --port 7082 --csharp

src/Directory.Build.props

@@ -1,8 +1,8 @@
 <Project>
 
-	<ItemGroup>
+	<!-- <ItemGroup>
 		<Using Include="TagzApp.Common" />
 		<Using Include="TagzApp.Common.Models" />
-	</ItemGroup>
+	</ItemGroup> -->
 
 </Project>

src/TagzApp.Blazor.Client/Components/Admin/TwitchChat.Config.Ui.razor

@@ -1,31 +1,47 @@
 @using System.ComponentModel.DataAnnotations
+@inject HttpClient Http
+@inject NavigationManager NavMgr
+@inject IConfiguration Config
+
 <UiProviderConfig ProviderName="TwitchChat" Health="@Health" ProviderIconCssClass="bi-twitch">
 
 	<EditForm Model="Model" OnValidSubmit="SaveConfig">
 		<AntiforgeryToken />
 		<ValidationSummary />
+
+		<div class="alert-primary" style="padding: 4px;">
+			<p>To configure the Twitch chat provider you will connect to a custom relay server managed by the TagzApp team. 
+			You will log into Twitch and your TagzApp installation will be updated with the appropriate configuration for
+				your login to access Twitch.
+			</p>
+			<p>None of your personal data or credentials are stored on the relay server.</p>
+		</div>
+
 		<dl>
-			<dt><label for="ClientId">Client Id:</label></dt>
-			<dd>
-				<InputText name="ClientId" @bind-Value="Model.ClientId" placeholder="Twitch Client Id" />
-				<ValidationMessage For="() => Model.ClientId" class="text-danger" />
-			</dd>
-			<dt><label for="ClientSecret">Client Secret:</label></dt>
-			<dd>
-				<InputText type="password" name="ClientSecret" @bind-Value="Model.ClientSecret" placeholder="Twitch Client Secret" />
-				<ValidationMessage For="() => Model.ClientSecret" class="text-danger" />
-			</dd>
 			<dt><label for="ChatBotName">Chat Bot Name:</label></dt>
 			<dd>
-				<InputText name="ChatBotName" @bind-Value="Model.ChatBotName" placeholder="Twitch Chat Bot Name" />
-				<ValidationMessage For="() => Model.ChatBotName" class="text-danger" />
+				@if (string.IsNullOrEmpty(Model.ChatBotName) && !string.IsNullOrEmpty(LoginUrl))
+				{
+					<span>Not connected to Twitch</span> <a href="@LoginUrl" target="_blank">Click to login to Twitch</a>
+				}
+				else if (string.IsNullOrEmpty(Model.ChatBotName) && string.IsNullOrEmpty(LoginUrl))
+				{
+					<span class="alert-danger">Unable to connect to Twitch</span>
+				}
+				else
+				{
+					<span>@Model.ChatBotName (Connected)</span> 
+
+					@if (string.IsNullOrEmpty(LoginUrl))
+					{
+						<span class="alert-danger" style="margin-left: 2em;">Unable to connect to Twitch</span>
+					}
+					else {
+						<a href="@LoginUrl" target="_blank" style="margin-left: 2em;">Click to change Twitch accounts</a>
+					}
+				}
 			</dd>
-			<dt><label for="OAuthToken">OAuth Token:</label></dt>
-			<dd>
-				<InputText type="password" name="OAuthToken" @bind-Value="Model.OAuthToken" placeholder="Twitch OAuth Token" />
-				<ValidationMessage For="() => Model.OAuthToken" class="text-danger" />
-			</dd>
-			<dt><label for="ChannelName">Channel Name:</label></dt>
+ 			<dt><label for="ChannelName">Channel Name:</label></dt>
 			<dd>
 				<InputText name="ChannelName" @bind-Value="Model.ChannelName" placeholder="Twitch Channel Name" />
 				<ValidationMessage For="() => Model.ChannelName" class="text-danger" />
@@ -49,18 +65,37 @@
 
 	public (SocialMediaStatus Status, string Message) Health { get; set; } = (SocialMediaStatus.Unknown, string.Empty);
 
+	public string LoginUrl { get; set; } = "";
 
 	public ViewModel Model { get; set; } = new();
 
+	protected override async Task OnInitializedAsync()
+	{
+
+		// Twitch Relay URI
+		var twitchRelayUri = new Uri(new Uri(Config["TwitchRelayUri"]), "/api/GetLoginUrl");
+
+		try
+		{
+			var returnToUri = new Uri(new Uri(NavMgr.BaseUri), "/Admin/TwitchRelay");
+			var result = await Http.GetAsync($"{twitchRelayUri}?returnto={returnToUri}");
+			LoginUrl = await result.Content.ReadAsStringAsync();
+		} catch
+		{
+			LoginUrl = string.Empty;
+		}
+
+		await base.OnInitializedAsync();
+	}
+
+
 	protected override async Task OnParametersSetAsync()
 	{
 
 		var providerConfiguration = await Provider.GetConfiguration(ConfigureTagzAppFactory.Current);
 
 		Model = new ViewModel
-			{
-				ClientId = providerConfiguration.GetConfigurationByKey("ClientId"),
-				ClientSecret = providerConfiguration.GetConfigurationByKey("ClientSecret"),
+		{
 				ChatBotName = providerConfiguration.GetConfigurationByKey("ChatBotName"),
 				OAuthToken = providerConfiguration.GetConfigurationByKey("OAuthToken"),
 				ChannelName = providerConfiguration.GetConfigurationByKey("ChannelName"),
@@ -78,8 +113,6 @@
 
 		var providerConfiguration = await Provider.GetConfiguration(ConfigureTagzAppFactory.Current);
 
-		providerConfiguration.SetConfigurationByKey("ClientId", Model.ClientId);
-		providerConfiguration.SetConfigurationByKey("ClientSecret", Model.ClientSecret);
 		providerConfiguration.SetConfigurationByKey("ChatBotName", Model.ChatBotName);
 		providerConfiguration.SetConfigurationByKey("OAuthToken", Model.OAuthToken);
 		providerConfiguration.SetConfigurationByKey("ChannelName", Model.ChannelName);
@@ -94,12 +127,6 @@
 
 		// add properties for each of the fields you want to edit
 
-		[Required]
-		public string ClientId { get; set; }
-
-		[Required]
-		public string ClientSecret { get; set; }
-
 		[Required]
 		public string ChatBotName { get; set; } = string.Empty;
 

src/TagzApp.Blazor.Client/Program.cs

@@ -4,6 +4,8 @@
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 
+builder.Services.AddScoped<HttpClient>();
+
 builder.Services.AddAuthorizationCore();
 builder.Services.AddCascadingAuthenticationState();
 builder.Services.AddSingleton<AuthenticationStateProvider, PersistentAuthenticationStateProvider>();

src/TagzApp.Blazor.Client/TagzApp.Blazor.Client.csproj

@@ -14,6 +14,11 @@
     <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="8.0.0" />
   </ItemGroup>
 
+	<ItemGroup>
+		<Using Include="TagzApp.Common" />
+		<Using Include="TagzApp.Common.Models" />
+	</ItemGroup>
+
   <ItemGroup>
     <ProjectReference Include="..\TagzApp.Common\TagzApp.Common.csproj" />
     <ProjectReference Include="..\TagzApp.Components\TagzApp.Components.csproj" />

src/TagzApp.Blazor/Components/Admin/Pages/ModalCustomization.razor

@@ -1,5 +1,5 @@
 @page "/admin/modalcustomization"
-
+@attribute [Authorize(Policy=RolesAndPolicies.Policy.AdminRoleOnly)]
 @using System.ComponentModel.DataAnnotations
 @using Microsoft.AspNetCore.Authorization
 @using System.Drawing
@@ -111,14 +111,16 @@
 	[CascadingParameter]
 	private HttpContext HttpContext { get; set; } = default!;
 
-	protected override Task OnInitializedAsync()
+	protected override Task OnParametersSetAsync()
 	{
+/*
 		var user = HttpContext.User;
 		if (!user.IsInRole("Admin"))
 		{
 			NavigationManager.NavigateTo("/");
 		}
-		return base.OnInitializedAsync();
+*/
+		return base.OnParametersSetAsync();
 	}
 
 	async Task SaveChanges()

src/TagzApp.Blazor/Components/Admin/Pages/Providers.razor

@@ -1,4 +1,5 @@
 @page "/admin/providers"
+@attribute [Authorize(Roles = RolesAndPolicies.Role.Admin)]
 @rendermode InteractiveServer
 @using System.Reflection
 @layout Admin.Shared.AdminLayout

src/TagzApp.Blazor/Components/Admin/Pages/TwitchRelayReceive.razor

@@ -0,0 +1,52 @@
+@page "/Admin/TwitchRelay"
+@inject IMessagingService messagingService
+
+@if (TwitchProvider is null) {
+	<div class="alert alert-danger" role="alert">Unable to connect to the Twitch Chat provider</div>
+}
+else 
+{
+	<div class="alert alert-primary" role="alert">
+ 		Connecting TwitchChat with bot name @User
+	</div>
+}
+
+@code {
+
+[Parameter, SupplyParameterFromQuery(Name="access_token")]
+public string Access_Token { get; set; }
+
+[Parameter, SupplyParameterFromQuery(Name="user")]
+public string User { get; set; }
+
+private ISocialMediaProvider TwitchProvider { get; set; }
+
+private IProviderConfiguration Configuration { get; set; }
+
+protected override async Task OnInitializedAsync()
+{
+
+	// Get the Twitch provider and then its configuration
+	TwitchProvider = messagingService.Providers.FirstOrDefault(p => p.Id == "TWITCH");
+  if (TwitchProvider is null) return;	
+
+	Configuration = await TwitchProvider.GetConfiguration(ConfigureTagzAppFactory.Current);
+
+	await base.OnInitializedAsync();
+}
+
+protected override async Task OnParametersSetAsync()
+{
+
+	if (TwitchProvider is null) return;
+
+	// Update the Twitch configuration with the AccessToken and chat bot name returned
+	Configuration.SetConfigurationByKey("ChatBotName", User);
+	Configuration.SetConfigurationByKey("OAuthToken", Access_Token);
+
+	await TwitchProvider.SaveConfiguration(ConfigureTagzAppFactory.Current, Configuration);
+
+}
+
+
+}

src/TagzApp.Blazor/Components/_Imports.razor

@@ -1,5 +1,6 @@
 @using System.Net.Http
 @using System.Net.Http.Json
+@using Microsoft.AspNetCore.Authorization
 @using Microsoft.AspNetCore.Components.Authorization
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Routing

src/TagzApp.Blazor/Service_Extensions.cs

@@ -83,7 +83,7 @@ public static async Task<IServiceCollection> AddTagzAppSecurity(this IServiceCol
 		{
 			config.AddPolicy(RolesAndPolicies.Policy.AdminRoleOnly, policy => { policy.RequireRole(RolesAndPolicies.Role.Admin); });
 			config.AddPolicy(RolesAndPolicies.Policy.Moderator,
-							policy => { policy.RequireAuthenticatedUser(); });
+							policy => { policy.RequireRole(RolesAndPolicies.Role.Moderator, RolesAndPolicies.Role.Admin); });
 		});
 
 		return services;

src/TagzApp.Blazor/TagzApp.Blazor.csproj

@@ -14,6 +14,11 @@
 		</PropertyGroup>
 	</Target>
 
+	<ItemGroup>
+		<Using Include="TagzApp.Common" />
+		<Using Include="TagzApp.Common.Models" />
+	</ItemGroup>
+
 	<ItemGroup>
 		<Content Remove="Components\FirstStartRouting.razor" />
 	</ItemGroup>

src/TagzApp.Blazor/appsettings.Development.json

@@ -4,11 +4,14 @@
 		"AppConfigProvider": "Postgres",
 		"AppConfigConnection": "Server=localhost;Port=5432;Database=postgres;User Id=tagz;Password=tagz;"
 	},
+	// When debugging and working locally with TwitchRelay, use a local instance. 
+	// Comment this out to use the production instance
+	"TwitchRelayUri": "http://localhost:7082",
 	"Logging": {
 		"LogLevel": {
 			"Default": "Information",
 			"Microsoft.AspNetCore": "Warning"
 		}
 	},
 	"DetailedErrors": true
-}
+}

src/TagzApp.Blazor/appsettings.json

@@ -5,6 +5,7 @@
       "Microsoft.AspNetCore": "Warning"
     }
   },
+	"TwitchRelayUri": "https://twitchrelay.tagzapp.net",
 	"AllowedHosts": "*"
 
-}
+}

src/TagzApp.Common/TagzApp.Common.csproj

@@ -10,6 +10,11 @@
 		<InternalsVisibleTo Include="TagzApp.UnitTest" />
 	</ItemGroup>
 
+	<ItemGroup>
+		<Using Include="TagzApp.Common" />
+		<Using Include="TagzApp.Common.Models" />
+	</ItemGroup>
+
 	<ItemGroup>
 	  <PackageReference Include="Dapper" Version="2.1.24" />
 	  <PackageReference Include="Microsoft.Data.Sqlite.Core" Version="8.0.0" />

src/TagzApp.Communication/TagzApp.Communication.csproj

@@ -6,6 +6,11 @@
     <Nullable>enable</Nullable>
   </PropertyGroup>
 
+	<ItemGroup>
+		<Using Include="TagzApp.Common" />
+		<Using Include="TagzApp.Common.Models" />
+	</ItemGroup>
+
   <ItemGroup>
     <PackageReference Include="Ensure.That" Version="11.0.0-p3" />
     <PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="8.0.0" />