Friday, March 6, 2015

Generate an OAuth 2.0 Bearer Token with OWIN in ASP.NET

Create a new web application:




Install the following NuGet packages:


Namely these are:
  • Microsoft.Owin
  • Microsoft.Owin.Host.SystemWeb
  • Microsoft.Owin.Security.OAuth
  • Microsoft ASP.NET Identity Owin


Create a index HTML page:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

Create the index JavaScript file:

var loginData = 'grant_type=password&username=test.test@mail.com&password=test123';

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        alert(xmlhttp.responseText);
    }
}
xmlhttp.open("POST", "/token", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(loginData);


Add the OWIN startup class:


using System;
using System.Security.Claims;
using Microsoft.Owin;
using Microsoft.Owin.Security.OAuth;
using OAuth20;
using Owin;

[assembly: OwinStartup(typeof(Startup))]

namespace OAuth20
{
    public class Startup
    {
        public static OAuthAuthorizationServerOptions OAuthOptions { get; private set; }

        public void Configuration(IAppBuilder app)
        {
            OAuthOptions = new OAuthAuthorizationServerOptions()
            {
                TokenEndpointPath = new PathString("/token"),
                Provider = new OAuthAuthorizationServerProvider()
                {
                    OnValidateClientAuthentication = async (context) =>
                    {
                        context.Validated();
                    },
                    OnGrantResourceOwnerCredentials = async (context) =>
                    {
                        if (context.UserName == "test.test@mail.com" && context.Password == "test123")
                        {
                            ClaimsIdentity oAuthIdentity = new ClaimsIdentity(context.Options.AuthenticationType);
                            context.Validated(oAuthIdentity);
                        }
                    }
                },
                AllowInsecureHttp = true,
                AccessTokenExpireTimeSpan = TimeSpan.FromDays(1)
            };

            app.UseOAuthBearerTokens(OAuthOptions);
        }
    }
}


Run your project. The token should be displayed in the pop-up.

Sunday, October 19, 2014

Horror Movies

If you are a fan of horror movies, or just like a genuine scare sometimes, these horror movies might be for you. And you probably have not seen all of them yet.

The Children
A grounded horror movie about some children getting mad and murdering their relatives.


















Pontypool

A small intimate play of a zombie movie, with a unique twist on the source of the infection.


















John dies at the end
Not so much scary, but more of a mindfuck. It's from the creator of Phantasm.


















You're next
A brutal home intruder flick which turns a 180 degrees in the middle.


















Splinter
Can be classified as a zombie movie, even when it's none of the usual.




















Oculus
Very creepy, with mirrors and stuff.


















Also check out FlickTrip, a movie related web application I made for finding more movies of the same creative people behind a specifc movie.

Wednesday, February 26, 2014

Intel Crosswalk installation, setup, and first deployment to Android device

This is a short step by step instruction on how to install Intels Crosswalk, and start your first application with it. If you just want to use Crosswalk without installing it, check out Intels XDK.

Some steps in this article are already covered in this article. I will reference to it as article1 in some parts.

Introduction

Crosswalk (https://crosswalk-project.org/) is a runtime for HTML/CSS/JavaScript on mobile devices (currently just Android and Tizen), and an open source project (https://github.com/crosswalk-project/).
It provides a wide range of features (http://software.intel.com/en-us/html5/articles/crosswalk-application-runtime), and appears to have its own rendering engine called Blink, which provides a serious performance boost on Android devices running version 4.4 (KitKat).

Installation


  • To begin download the Crosswalk release from here: https://crosswalk-project.org/#documentation/downloads.
    Choose the version your mobile device supports (if you do not know, download both and try it).  
  • Unzip the archive until you have a folder structure where two template folders exist in your crosswalk directory, like crosswalk-4.32.76.3-arm\xwalk_app_template.
  • Download and install Python (http://www.python.org/downloads/).
    • Add it to your PATH environment variable, like C:\Python27 (See article1 how to edit the variable).
  • Install the Java Development Kit (see article1).
    • Add the bin folder of the JDK to your PATH variable.
  • Install Apache Ant and the Android SDK as described in article1.
    • Make sure, the path to the installed SDK does not contain any spaces, since I ran into problems, using something like C:\Android Developer Kit.
    • Add this paths to the PATH variable (source):
      • Main folder (like C:\android-sdk).
      • SDK-Tools (like (C:\android-sdk\sdk\tools).
      • SDK-Platform-Tools (like C:\android-sdk\sdk\platform-tools).
  • Close and reopen your Windows Command Prompt (if open) to have the PATH take effect, or restart your computer if unsure.

Application


  • Create a folder and the files as described on Crosswalks official site: https://crosswalk-project.org/#documentation/getting_started/build_an_application.
  • Optional: Copy your source files into this folder, and name your main page index.html.
  • Build, install, and run your application with this commands executed from the xwalk_app_template folder per Windows Command Prompt (the :
    • Build: python make_apk.py --manifest=~/xwalk-simple/manifest.json
      The ~/xwalk-simple/ in this means, it expects your source folder to be C:\Users\<User>\xwalk-simple. Edit it to match your folder path, if it differs (again, it should not contain spaces).
      This command creates a file called simple_arm.apk (or simple_x86.apk) in this folder.
      (If you want to set the orientation of your application, add the parameter --orientation to the command, e.g. --orientation=landscape. This might work only in version 5.34.96.0 and above.)
    • Installation: adb install -r simple_arm.apk
      This installs the apk file created by the build command on your virual or real device. 
    • If you have not changed the name property in the manifest file, you should find your application with the name simple on your device, and can run it.

Saturday, February 15, 2014

PhoneGap installation and setup of Android SDK to create native applications from HTML/CSS/JavaScript

Since the (mobile) platforms a developer can target for his application today are so diverse, the best solution for some might be to find a common denominator to start with.

Having the ability to bring an application without any or with little changes to nearly any platform by using HTML, CSS and JavaScript, as long as the target platform has a web browser installed, is something to consider here.
When targeting mobile devices, often just an extension/change of the user inputs are required, for example using touch events.

The real bummer in this regard has been, that mobile applications often do not work that well in a browser in real life. Some downfalls can be:

  • No fullscreen
  • No access to native APIs like accelerometer etc.
  • No start icon on homescreen
  • No download via store

Luckily some smart people try to fill exactly this gap, and have developed solutions to build native applications, which negate all this downfalls, from plain HTML, CSS, and JavaScript. 
There are CocoonJS and PhoneGap for example, the latter we discuss in this article, since it is free to use, and you can use it to build native applications on your own on your home computer, or in the cloud (which might cost). CocoonJS on the other hand just allows to build applications in the cloud.

For PhoneGap there are a bunch of steps you have to perform, before you can build the first application with it, which we discuss in detail here.

At first, make sure, that you have a computer system, which is capable for compiling native applications for your target device, even when using something like PhoneGap. The reason behind this is, that PhoneGap creates a native app, embedding a WebView (on Android), which practically opens your HTML page locally, and this makes for the requirement of the respective SDK sources.
In short this means, that you have to have a Windows computer to build applications for Android or Windows Phone. If you want to target iOS, you need a Macintosh computer.

If you want to target a device you have no build computer for, or you do not want to install all the stuff required for building on your computer, you can use the cloud build services of PhoneGap or CocoonJS.
You simply upload your sources to their service, and they build and provide the native installation files for download.


So, let's start.
(In the following you might use Cordova instead of PhoneGap, as PhoneGap builds on it, and they should share the same functionality.)

We'll use the Android SDK and a Windows computer in this example, to target Android devices. If you want to target iOS devices, hopefully most of the steps you can adapt to your Macintosh environment.

What you will need are these applications, which you can install right away:
  • PhoneGap http://phonegap.com/
  • Android SDK http://developer.android.com/sdk/index.html
    The Android SDK to work well with PhoneGap, needs to have some information added to the PATH environment variable. You can access it by navigating to your Control Center/System/Extended System Settings/Environmentvariables...
    There you have to edit the Uservariable PATH, and add this (where <SDK Folder> has to be replaced by the installation folder name you have chosen on your computer): C:\Program Files\<SDK Folder>\sdk\platform-tools;C:\Program Files\<SDK Folder>\sdk\tools;
If you edit an environment variable, remember to close and reopen your Windows Command Prompt afterwards (if open), to take effect (if in doubt, restart your computer).

You also have to install some further stuff:

  • Java Development Kit and Java Runtime Environment
    http://www.oracle.com/technetwork/java/javase/downloads/index.html
    Create a new environment variable with the Name JAVA_HOME, and add the following information to it: C:\Program Files\Java\<JDK Folder>
  • NodeJS http://nodejs.org/
    You have to edit the PATH environment variable again, and add this information: C:\Users\<User>\AppData\Roaming\npm;
  • PhoneGap Command Line Interface
    Install it via NodeJS Node Package Modules, using this command from Windows Command Prompt (which is described here: http://docs.phonegap.com/en/3.0.0/guide_cli_index.md.html): npm install -g phonegap
  • Apache Ant
    You install it via the NodeJS Node Package Modules, using this command from Windows Command Prompt (which is described here: https://www.npmjs.org/package/ant): npm install ant
    Create a new environment variable with the Name ANT_HOME, and add this information: C:\Program Files (x86)\<Apache Ant Folder>
  • Git http://git-scm.com/

When you have installed everything, you should restart your computer to be sure that all changes take effect. Now, if you have a web page you want to deploy to your Android device, perform as follows:

  1. Open up the Windows Command Prompt (by typing cmd into the Windows Execute/Search Bar).
  2. In the Command Prompt navigate to a folder you want your sources to be stored.
  3. Type in phonegap create <Folder name>, where <Folder name> is the name of the folder PhoneGap should create for you in the current folder.
  4. Navigate to the folder www in that newly created folder.
  5. Now copy your sources, the HTML, Javascript, and CSS, into the respective subfolders. Your HTML file should reside directly in www, your JavaScript files in js, and your CSS files in css.
    You might have to edit the paths to your ressources in your files accordingly.
  6. Now, from the folder www, type in phonegap run android to build and run your application directly on your virtual device or phone.
    Alternatively you can just build your application by typing phonegap build android, or just install/run it on your virtual device/phone with phonegap install android.


That's it, you should have deployed your first application created with plain HTML, CSS, and JavaScript, and the help of PhoneGap, to make a native application, to your Android device.


Possible Issues, which might occur:

In the current implementation of the WebView in Android 4.4. KitKat, there is a bug, which makes applications which are using the HTML5 canvas, behave extremly slow. Further information about the status of this bug can be found on the official developer pages of Chromium: https://code.google.com/p/chromium/issues/detail?id=315111

If you have trouble deploying to your Android device (as I had with the new Nexus 5), check if the device has a small yellow exclamation mark next to it in the Windows device manager. If so, update the driver with the one coming with the Android SDK, usually located at C:\Program Files\<SDK Folder>\sdk\extras\google\usb_driver.

If you want to use the native APIs of your phone, like accelerometer for example, you have to install each plugin additionaly. For example, to use the accelerometer, navigate to the folder www in your applications folder, and execute by Command Prompt: phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git.
Further details are explained here: http://docs.phonegap.com/en/3.0.0/guide_cli_index.md.html



Please let me know, if something is not working, if I forgot something, or if something just needs further explanation. I will update the article accordingly.