Xamarin Alliance Challenge Part 4 & 5

Today I finished the Xamarin Challenge part #4 and #5. In the rest of this post you can see what the two new challenges are about and how I completed them. In case you missed the first three parts or you are just curious what I am talking about here, take a look a few lines below, there you can find a link to that first post.

Fast forward:

Xamarin Challenge #4

In the fourth challenge we have to integrate authentication in our app. So we will continue with the Azure Mobile App from challenge #3.

First I configured authentication in the Azure Mobile App. In the mobile app, from the previous challenge, I selected “Authentication” under “Settings”.

Xamarin Challenge 4 Authentication Azure Mobile App

I was going with “Microsoft” as authentication provider.

Xamarin Challenge 4 Authentication Provider Setup

To get the “Client Id” and the “Client Secret” I followed this guide.

Xamarin Challenge 4 Authentication Provider Microsoft

Basically all it takes is a login to the application registration site from Microsoft. There you hit add, select a name, copy the id and generate / copy the password. Very important: Don’t forget to click “Add Platform”, select “Web” and enter a callback url.

Xamarin Challenge 4 Authentication Callback Url

Back in Azure enter password and id in the given fields (“Application Id” == “Client Id”).

Next I added, as the guidance mentioned, an interface for the authentication in my app.

Xamarin Challenge 4 Authentication Code Interface

Then I added the following code to the App.cs file.

Xamarin Challenge 4 Authentication Code App

To complete the challenge I needed to provide the user with an opportunity to login. As in the challenge description, I added a button for this purpose.

Xamarin Challenge 4 Authentication Login Button C#

Xamarin Challenge 4 Authentication Login Button XAML

I also added the code from the provided “How to configure your App Service application to use Microsoft Account login” guide, to setup the actual login, with the provider we selected earlier.

Xamarin Challenge 4 Authentication with Microsoft

If I now open my app, it looks like this.

Xamarin Challenge 4 Authentication App Login

After entering the credentials, one has to accept the permission the app needs (unfortunately in german).

Xamarin Challenge 4 Authentication App Authorization

If everything worked out, the user is logged in.

Xamarin Challenge 4 Authentication App Login completedXamarin Challenge 4 Authentication App Authorization

 

And challenge #4 is completed!

Xamarin Alliance Badge Challenge 4

Xamarin Challenge #5

The last part of the Xamarin Challenge, part #5, wants us to receive our credit – the diploma.

Targets:

The Azure Blog Storage account was already set up by the Xamarin Challenge team, so the first thing I did, was to add the Azure Storage NuGet package.

Xamarin Challenge 5 Blob Storage NuGet Package

Next I created a new mobile service client for the provided blob storage backend.

Xamarin Challenge 5 Blob Storage Setup Client

Then I created a new button on my frontpage, to retrieve data from the blob storage. I also added an Image element and a new Label for the GUID that I would need later on to receive the diploma.

Xamarin Challenge 5 Blob Storage XAML

To retrieve the image and the GUID I added a new clicked event on the button I created above.

Xamarin Challenge 5 Code

This snippet sets the image and also adds the GUID to the label. Now the app looked like in the picture below and I finished part #5 as well.

Xamarin Challenge 5 Final Result

The last thing to do is to fill out this survey, provide a screenshot, the GUID and wait for the diploma.

Xamarin Challenge 5

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *