Forem: Experts Inside

Automated Pi-Hole setup in Azure

Kai Boschung — Thu, 14 May 2020 07:42:44 +0000

The whole concept behind Pi-Hole got me hooked: A DNS sinkhole that blocks traffic I don't want (trackers, malware, etc.). And this can be done for the whole network if you set the upstream DNS server on your router to the Pi-Hole instance. So, no add blocker needed anymore.

Disclaimer: I was not able to get it working... I got the same error discussed in this thread. So, if any skilled linuxer can fix it. I'd be glad!

The instance is quickly set up in Azure thanks to this article:

Pi-hole in Azure Container Instances

Ganessh Kumar ・ May 1 ・ 2 min read

#docker #azure #containers #pihole

I went a little further and extended the script to replace yaml placeholders via PowerShell. Line 30 to 45 shows how the replacement is done.

The whole gist including the yaml input file is available here.

More posts on my blog: https://engineerer.ch/

How do I rename a SharePoint Online site using PowerShell?

Patrick Lamber — Tue, 21 Jan 2020 12:48:18 +0000

A SharePoint Online administrator can change the SharePoint Online site address. The interesting part of this feature is that in many situations Microsoft already considered how to limit the impact of such a change. Nevertheless, you should have a look into the effects of changing a site address before performing any operation.

I created a sample script that shows you how to use PowerShell to perform a site change.

## Install the SharePoint Online Management Module if required
## Install-Module -Name Microsoft.Online.SharePoint.PowerShell 
## More info under https://www.nubo.eu/Connect-to-SharePoint-Online-using-PowerShell/

## parameters start
$tenant = "yourTenantName"
$sourceAlias = "aliasOfYourSource"
$targetAlias = "aliasOfYourTarget"
## parameters end

# Connect to SPO and perform the site rename
Connect-SPOService "https://$tenant-admin.sharepoint.com"
$oldUrl = "https://$tenant.sharepoint.com/sites/$sourceAlias"
$newUrl = "https://$tenant.sharepoint.com/sites/$targetAlias"

# Perform the site rename
Start-SPOSiteRename -Identity $oldUrl -NewSiteUrl $newUrl

# The process might take a while depending the size of the site. You can check the status using this command
Get-SPOSiteRenameState -Identity $oldUrl

# By using the standard parameters of Start-SPOSiteRename, a successful site rename will provision  After a successfull site rename a new site with the template 'RedirectSite#0' is created

$site = Get-SPOSite $oldUrl
$site.Template

From the script, you can see that the operations are triggered by using the Start-SPOSiteRename command. This will queue a rename job that will be executed in the background. The command Get-SPOSiteRenameState will return you the current status of the job. Once the job is marked as completed, you will have two sites in your tenant. You will have the site with the new URL and contents and a new site using the Template Redirect#0. This site will ensure that all requests pointing to the old URL will be redirected to the new URL. This site also ensures that nobody is able to request a new site with the old URL.

In case you want to free up the old name, delete the site collection that has been created for redirection.

Using PowerShell and Azure Cognitive Services to convert text to speech

Tom Torggler — Sat, 18 Jan 2020 16:54:24 +0000

A few days ago I had to record some voice prompts for a customer service call queue that I was configuring in one of our Microsoft Teams enterprise voice projects. Something like "Thank you for calling X, please hold..." I figured it would be nice to have Azure's artificial-intelligence-powered speech service convert my text input to an audio file. Turns out it's easier than I thought it would be.

Azure Cognitive Speech Service

First of all we need an Azure Subscription where we can deploy our Speech Services instance. If you don't have an Azure subscription, you can sign up for a trial account using the links below. If you already have a subscription, you can easily create a free Speech Services account using the following commands from Azure Cloud Shell:

az group create -n devto-speech -l WestEurope
az cognitiveservices account create -n devto-speech -g devto-speech --kind SpeechServices --sku F0 -l WestEurope --yes

Now the account was created and we can start using it right away. To authenticate our calls from PowerShell, we need an API key, again we can use Azure Cloud Shell to retrieve the key:

az cognitiveservices account keys list -n devto-speech -g devto-speech

PowerShell and REST API

The speech service provides a very well documented API that can easily be called using PowerShell's native Invoke-RestMethod command. The code is already documented on Microsoft Docs (see link below), I wrapped it into a module and uploaded it to the PowerShell gallery.

You can install the module using the following command, it works on Windows PowerShell and PowerShell 7.

Install-Module PSSpeech

Before we can call any of the speech service's API endpoints, we have to use the API key to get a token and store it in a variable for later use. The function in the following example calls the /issueToken endpoint:

Get-SpeechToken -Key <yourapikey> | Save-SpeechToken

Now we should have a token and be able to get a list of available voices using Get-SpeechVoicesList | Format-Table. Note that the function has a parameter -Token that accepts a token as retrieved by Get-SpeechToken. If that parameter is omitted, it checks the value of the variable that's created by Save-SpeechToken.

And finally we can convert some input text to speech using one of the voices from the list:

Convert-TextToSpeech -Voice en-US-JessaNeural -Text "Hi Tom, I'm Jessa from Azure!" -Path jessa.mp3
Convert-TextToSpeech -Voice en-GB-HarryNeural -Text "Hi Tom, I'm Harry from Azure!" -Path harry.mp3

You can find a lot of information about the speech service in the links below, be sure to check out the SSML structure to see how you can customize the voices, introduce pauses to the audio file, and many other things.

You can find the code for the module in my GitHub, please let me know if you find it useful and feel free to submit a pull request with your optimizations :)

Tom

How do I authenticate against Azure AD using React, MSAL.JS and ASP.NET Core 3.0?

Patrick Lamber — Thu, 09 Jan 2020 12:30:35 +0000

This post is also located here.

Microsoft is evolving the Azure Active Directory (v1.0) endpoints into the new Microsoft identity platform (v2.0). You should give it a try and consider a move to this new platform. This article if you are interested to understand more and identify the main reasons for performing the switch.

From a software development perspective, you used ADAL (Azure Active Directory Library) to help you get authenticated against the old Azure Active Directory (v1.0) services. If you want to integrate your application with the Microsoft identity platform (v2.0), you can use MSAL (Microsoft Authentication Library) instead. An overview of MSAL is given here.

The scenario

I wanted to implement both, an ASP.NET Core project to act as an API backend, and a standard CRA React project to act as a UI, but with the convenience of hosting both in a single app project that can be built and published as a single unit.
The authentication has to be handled on the client-side forcing the user to authenticate once accessing any page. Once authenticated, I wanted to provide simple user information about the logged-in user using Microsoft Graph.

You can find the results of this project in this GitHub. I used the existing React project template with ASP.NET Core as a foundation for my project.

What is the website doing?

The users are immediately forced to authenticate themselves once accessing the website. MSAL.JS is used to handle the whole authentication flow. For this, an Azure AD application was registered on the target tenant.

Once authenticated, the user sees basic information about him/her on the upper-right corner. This information is coming from the authentication token provided by Azure AD. If you just want to authenticate the user using Azure AD, we are already done.

I also added a section that shows how to get the basic information about the user using Microsoft Graph. This is handled by the page Get Graph data and the Microsoft Graph JavaScript libraries included in the project.

At this stage, there is no further interaction with ASP.NET Core. I am not consuming any secured API on our back-end. This will be handled in a future post.

How do I get started?

fork/clone this GitHub repository
open the project under MSAL-Authenticationsamples/AAD-React-AspNetCore

If you just want to test it without additional hassle, just run the project. I already configured a multi-tenant application in my test tenant that allows you to authenticate against Azure AD.

Follow the steps below if you want to have your dedicated Azure AD application.

I want to use my dedicated Azure AD application

If you want to use your dedicated Azure AD application, follow these basic steps. You need to ensure that you are properly configuring a new application in Azure AD. Once configured, you need to change the configuration of the application in the code.

Register your app

Go to the App Registration in Azure AD
Press New registration
Specify a name and choose the desired account types (Single tenant, Multitenant) and then press Register
Copy the Application (client) ID (yourClientID) and Directory (tenant) ID (yourTenantID)
Go to Authentication
- Under Redirect URIs create two entries: https://localhost:44321/signin-oidc, https://localhost:44366/
- Under Implicit grant select Access tokens and ID tokens

Change the configuration in Visual Studio to use your created application

Go under ClientApp -> src -> msal -> MsalConfig.js
- Replace the clientId value with yourClientID
- In case you configured a single tenant application, replace common in the authority value with youTenantID

Key aspects in the code

The app is using the React project template with ASP.NET Core as a basis. I just removed the unnecessary Weather controllers and added some minor things.

Install the required client-side libraries

I used NPM to install the necessary client-side libraries. msal is used to get MSAL.JS while @microsoft/microsoft-graph-client is used for the Microsoft Graph integration part.

In package.json you should find these entries.

"@microsoft/microsoft-graph-client": "^2.0.0",
"msal": "^1.2.0",

Forcing the authentication in React

One of my requirements was to force the authentication whenever a user is accessing a page. To implement this, I found it convenient to use the React Higher-Order Component pattern to encapsulate the MSAL.JS authentication logic. The MsalAuthProvider.js is responsible for this part. The authentication is handled by the logic below. If a user is not authenticated, authenticate him/her using the Azure AD settings in our config.

async componentWillMount() {
    msalAuth.handleRedirectCallback(() => {
        let userAccount = msalAuth.getAccount();

        this.setState({
            isAuthenticated: true,
            user: userAccount
        });
    }, (authErr, accountState) => {  // on fail
        console.log(authErr);

        this.setState({
            hasError: true,
            errorMessage: authErr.errorMessage
        });
    });

    if (msalAuth.isCallback(window.location.hash)) {
        this.setState({
            auth: {
                renewIframe: true
            }
        });
        return;
    }

    let userAccount = msalAuth.getAccount();
    if (!userAccount) {
        msalAuth.loginRedirect({});
        return;
    } else {
        this.setState({
            isAuthenticated: true,
            user: userAccount
        });
    }
}

This function is used in the App.js file to wire-up the authentication and associate it with the main React app using the High-Order Component pattern.

class RootApp extends Component {
    render() {
        return (
            <Layout {...this.props} >
                <Route exact path='/' component={Home} />
                <Route exact path='/graph-data' component={GraphData} />
            </Layout>
        );
    }
}
export const App = withAuth(RootApp);

The GraphData.js file is handling the creation of the Graph client and the retrieval of the graph information of the user. You can find under GraphService.js the part of the code which is requesting a new token for the Graph request.

const accessTokenRequest = {
    scopes: ["user.read"]
}
var accessToken = null;
try {
    accessToken = await msalAuth.acquireTokenSilent(accessTokenRequest);
}
catch (error) {
    console.log("AquireTokenSilent failure");
    accessToken = await msalAuth.acquireTokenPopup(accessTokenRequest);
}

if (accessToken) {
    var user = await getUserDetails(accessToken);

Go and change the MsalConfig.js if you want to manipulate the authentication settings for MSAL.JS. You can find the configuration options of MSAL.JS under this link.

Summarizing

With this GitHub project I am showing you how to authenticate against Azure AD using React and ASP.NET core. I will improve the current code and provide more samples on that repository.

Happy coding.