Authentication Redirection Loop with Angular Application and Azure Active Directory

Authentication Redirection Loop with Angular Application and Azure Active Directory

Recently we ran in to some difficulty with an Angular application that was being retrofitted into a different environment. During the initial development the Angular application had been pushed to Azure for testing. However, the final resting place for the application was on a on-premises sever. Whilst the switch was relatively painless, with the only major change being to a persistent file storage instead of blob storage, we also had to shift from our development Azure AD tenant (the Angular application, and the associated services, uses Azure AD to authenticate and authorize users), to the client’s Azure AD tenant. This shift required creating two new application registrations within the client’s Azure AD tenant.

Unfortunately after creating the new registrations, and updating the Angular application (and the corresponding services), any attempt to log in with valid credentials resulted in a continual loop between the Angular application and the Azure AD login prompt. In this case we were only using Azure AD to authenticate users and other than controlling access to the application services there weren’t any other permissions that users would have to agree to.

In the past I’ve posted about how administrators have to grant permission to users within their tenant to access an application (see https://nicksnettravels.builttoroam.com/post/2017/01/24/Admin-Consent-for-Permissions-in-Azure-Active-Directory.aspx). Usually there is an Azure AD login error when users attempt to sign in. In this case, for some reason we either missed the error message or it was being obscured by the automatic redirection between the Angular application and the Azure AD login prompt.

We did end up finding the solution, thanks to the Azure AD team at Microsoft, who quickly identified the error in our Fiddler trace. The critical request/response was:

Request

GET https://login.microsoftonline.com/<tenantid>/oauth2/authorize?response_type=token&client_id=<clientid>&resource=<resourceid>&redirect_uri=<uri>&prompt=none&login_hint=admin


Response

HTTP/1.1 302 Found
Location: <uri>
<html><head><title>Object moved</title></head><body>
<h2>Object moved to <a href=”<uri>/#error=interaction_required&amp;error_description=AADSTS65001%3a+The+user+or+administrator+has+not+consented+to+use+the+application+with+ID+%27.+Send+an+interactive+authorization+request+for+this+user+and+resource

The important part is that the error indicates that either the user or administrator has not consented to use of the application, and that there should be an interactive authorization request. This is a little cryptic but going back to my previous post we can simply add “prompt=admin_consent” to the login request – assuming an administrator logs in, they can then grant access to the application to all users in the tenant.

There is actually a much easier way for single tenant applications, which this is. Instead of waiting for an administrator to log in, permission can be granted via the Azure portal:

– Select the Directory where the application is registered (drop down in top right cornert of the Azure portal where the signed in user is listed)

– Select Azure Active Directory from the sidebar menu

– Select App Registrations

– Select the application registration you want to grant access to

– From All settings, click on the Required Permissions link

– Click “Grant Permissions”

image

This will give all users access to the application. If you have multiple registrations (eg one for the web site and one for the corresponding services), don’t forget to grant permission to both registrations.

Again, big thanks to the team at Microsoft for pointing us to the solution

Styling the MediaPlayerElement and MediaTransportControls in a Universal Windows Platform (UWP) Application

Styling the MediaPlayerElement and MediaTransportControls in a Universal Windows Platform (UWP) Application

In my previous post, Building Media Applications for the Universal Windows Platform (UWP) using the MediaPlayerElement, I covered the basics of building a UWP media application using the MediaPlayerElement. Towards the end of the post I showed how you can override some of the built in behaviour but I was yet to show you how you can adjust the visual style of the player or the controls. In this post I’ll do just that, I’ll show you where to find the built in styles and how to start customizing them, including some gotchas that you should be aware of.

Ok, let’s get started by looking for the built in styles. Whilst Microsoft now do a good job of documenting the built in styles online (for example the styles and templates for the MediaTransportControls element is defined at https://msdn.microsoft.com/en-us/library/windows/apps/mt414180.aspx), there is nothing like looking at what ships in the platform. For this we go to generic.xaml, typically located at C:Program Files (x86)Windows Kits10DesignTimeCommonConfigurationNeutralUAP10.0.16299.0Generic – Note that this may vary based on which platform SDK you have installed. Inside generic.xaml I’m going to locate the Style for the MediaPlayerElement:

<Style TargetType=”MediaPlayerElement”>
     <Setter Property=”HorizontalAlignment” Value=”Stretch” />
     <Setter Property=”VerticalAlignment” Value=”Stretch” />
     <Setter Property=”IsTabStop” Value=”False” />
     <Setter Property=”Template”>
         <Setter.Value>
             <ControlTemplate TargetType=”MediaPlayerElement”>
                 <Grid x_Name=”LayoutRoot”>
                     <Border Background=”Transparent” />
                     <Image  x_Name=”PosterImage”
                         Visibility=”Collapsed”
                         Source=”{TemplateBinding PosterSource}”
                         Stretch=”{TemplateBinding Stretch}” />
                     <MediaPlayerPresenter x_Name=”MediaPlayerPresenter”
                         IsFullWindow=”{TemplateBinding IsFullWindow}”
                         Stretch=”{TemplateBinding Stretch}”
                         MediaPlayer=”{TemplateBinding MediaPlayer}” />
                     <ContentPresenter     x_Name=”TransportControlsPresenter”
                         Visibility=”{TemplateBinding AreTransportControlsEnabled}” />
                     <Grid x_Name=”TimedTextSourcePresenter” />
                 </Grid>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
</Style>

As you can see, the Style for the MediaPlayerElement is made up of a few different components:

  • MediaPlayerPresenter – this is where the actual video content will be displayed
  • ContentPresenter – this is where the player controls will be displayed
  • “TimedTextSourcePresenter” – this is where the closed captions will be presented

Let’s make a subtle change here by adding another Grid immediately after the TimedTextSourcePresenter with a semi-transparent Pink colour and a TextBlock to indicate that this is a customized player.

<Page.Resources>
     <Style TargetType=”MediaPlayerElement”>
         <Setter Property=”HorizontalAlignment”
                 Value=”Stretch” />
         <Setter Property=”VerticalAlignment”
                 Value=”Stretch” />
         <Setter Property=”IsTabStop”
                 Value=”False” />
         <Setter Property=”Template”>
             <Setter.Value>
                 <ControlTemplate TargetType=”MediaPlayerElement”>
                     <Grid x_Name=”LayoutRoot”>
                         <Border Background=”Transparent” />
                         <Image  x_Name=”PosterImage”
                                 Visibility=”Collapsed”
                                 Source=”{TemplateBinding PosterSource}”
                                 Stretch=”{TemplateBinding Stretch}” />
                         <MediaPlayerPresenter x_Name=”MediaPlayerPresenter”
                                                 IsFullWindow=”{TemplateBinding IsFullWindow}”
                                                 Stretch=”{TemplateBinding Stretch}”
                                                 MediaPlayer=”{TemplateBinding MediaPlayer}” />
                         <ContentPresenter     x_Name=”TransportControlsPresenter”
                                                 Visibility=”{TemplateBinding AreTransportControlsEnabled}” />
                         <Grid x_Name=”TimedTextSourcePresenter” />
                        <Grid Background=”Pink”
                                 IsHitTestVisible=”False”
                                 Opacity=”0.4″>
                             <TextBlock Foreground=”Black”
                                         Text=”Custom Player” HorizontalAlignment=”Left” VerticalAlignment=”Bottom” Margin=”50,5,5,5″/>
                         </Grid>

                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
<Page.Resources>

You’ll notice that I’ve added this Style into the Resources dictionary for the page and that it’s an implicit style (ie I haven’t assigned it a Key) which means that any MediaPlayerElement on this page will pick up this style. You can of course set this Style either directly on the MediaPlayerElement itself or even define it in an application level resource dictionary.

image

Note also that the IsHitTestVisible attribute is set on the Grid, otherwise it will block user input to the player controls as the grid sits over the top of the other elements within the MediaPlayerElement control template.

If you recall from my previous post I intercepted the behaviour that steps the video back and forward so that I could customize this behaviour. Of course, this means that the step forward/backward icons aren’t accurate, since I’m not longer stepping back by 10seconds and forward by 30seconds. In order to override the icons on these buttons, I need to override the Style for the MediaTransportControls. Again the default Style can be found in generic.xaml – it’s really long, so I’m not going to copy the whole thing in here. Here’s a cut down version of the Style showing the changes to the FontIcon for the SkipBackwardButton and SkipForwardButton.

<Page.Resources>
     <Style TargetType=”MediaTransportControls”>
     …
         <Setter Property=”Template”>
             <Setter.Value>
                 <ControlTemplate TargetType=”MediaTransportControls”>
                     <Grid x_Name=”RootGrid”
                             Background=”Transparent”>
             …   
             <AppBarButton x_Name=’SkipBackwardButton’
                          Style='{StaticResource AppBarButtonStyle}’
                          MediaTransportControlsHelper.DropoutOrder=’5′
                          Visibility=’Collapsed’>
                           <AppBarButton.Icon>
                         
  <!–<FontIcon Glyph=”&#xED3C;” />–>
                            <FontIcon Glyph=”&#xF100;”
                                      FontFamily=”FontAwesome” />

                           </AppBarButton.Icon>
                         </AppBarButton>
                         …
                         <AppBarButton x_Name=’SkipForwardButton’
                          Style='{StaticResource AppBarButtonStyle}’
                          MediaTransportControlsHelper.DropoutOrder=’5′
                          Visibility=’Collapsed’>
                           <AppBarButton.Icon>
                         
  <!–<FontIcon Glyph=”&#xED3D;” />–>
                            <FontIcon Glyph=”&#xF101;”
                                      FontFamily=”FontAwesome” />
                           </AppBarButton.Icon>

                         </AppBarButton>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
</Page.Resources>

You might be wondering where I got the new hex code for the FontAwesome font. Rather than go online and having to hunt down hex values for the different characters within a font, if you open Word and go to Insert, Symbol, you can then select the Font and select the character you want. In the lower right corner it states what the Character code is. Remember that you need to make sure the font exists on the computer you’re going to run the application on, so you may want to consider including the font within your application if you pick a non-standard font.

image

Ok, so running the application now, we can see the updated skip backward and skip forward buttons:

image

Unfortunately, here lies a major bug in the implementation of the MediaPlayerElement – if you press the full screen button, you’ll see that the Style for the MediaTransportControls has reverted back to the built in style.

image

This happens because when the video runs in full screen, the MediaTransportControls are being hosted in a separate visual tree to the main part of the application – you can see this if you look at the Live Visual Tree.

image

So, the question is how to handle this? Well the good news is that it’s surprisingly simple. What’s happening is that as the MediaTransportControls are being attached to a different visual tree, they’re not able to resolve the Style defined within the scope of the page. Moving the custom Style for the MediaTransportControls to an application level resource fixes this issue.

<Application
     x_Class=”PlayerSample.App”
     http://schemas.microsoft.com/winfx/2006/xaml/presentation"”>http://schemas.microsoft.com/winfx/2006/xaml/presentation”
     http://schemas.microsoft.com/winfx/2006/xaml"”>http://schemas.microsoft.com/winfx/2006/xaml”
     RequestedTheme=”Light”>
     <Application.Resources>
         <Style TargetType=”MediaTransportControls”>
         …
         </Style>
     </Application.Resources>
</Application>

The documentation online at https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/custom-transport-controls indicates that you should use an explicit style – two things a) this doesn’t fix the full screen issue; you must define the Style at an application level regardless of whether you make it an explicit or implicit style and b) you can make the choice yourself whether to use an implcit or explicit style, depending on whether you want multiple different player styles (ie where an explicit style makes sense).