ASP.NET FREAK

On the client side, we use this method to.DataURL(). The method will method returns a data URI containing a representation of the image.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


<script>
var c = document.getElementById("myCanvas");
console.log(c.toDataURL())
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

Your browser does not support the HTML5 canvas tag.</canvas>

var c = document.getElementById("myCanvas");

console.log(c.toDataURL())

</script>

</body>

</html>

The data URI will look something like this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAACnklEQVR4Xu3VsRHAMAzEsHj/pTOBXbB9pFchyLycz0eAwFXgsCFA4C4gEK+DwENAIJ4HAYF4AwSagD9IczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpE4Af1gABlH0hlGgAAAABJRU5ErkJggg==

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAACnklEQVR4Xu3VsRHAMAzEsHj/pTOBXbB9pFchyLycz0eAwFXgsCFA4C4gEK+DwENAIJ4HAYF4AwSagD9IczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpE4Af1gABlH0hlGgAAAABJRU5ErkJggg==

Now, we can “post” the data URI to our asp.net controller. When the controller received the data, we can save it to the server using the following snippet.

var decodeURL = WebUtility.UrlDecode(dataURI);
var base64Data = decodeURL.Split(',');

string localFileName = "filename.png";
string filePath = Path.Combine(_hostingEnvironment.WebRootPath + "\\Temp\\", localFileName);

using (FileStream fs = new FileStream(filePath, FileMode.Create))
{
   using (BinaryWriter bw = new BinaryWriter(fs))
   {
      byte[] data = Convert.FromBase64String(base64Data[1]);
      bw.Write(data);
                   
   }
          
}

var decodeURL = WebUtility.UrlDecode(dataURI);

var base64Data = decodeURL.Split(',');

string localFileName = "filename.png";

string filePath = Path.Combine(_hostingEnvironment.WebRootPath + "\\Temp\\", localFileName);

using (FileStream fs = new FileStream(filePath, FileMode.Create))

{

using (BinaryWriter bw = new BinaryWriter(fs))

{

byte[] data = Convert.FromBase64String(base64Data[1]);

bw.Write(data);

}

First, we need to “decode” the data URI. If you notice value of data URI, it contains the mediatype and the encode type, data:image/png;base64. We are not interested in this data so we do a split and retrieve only the base64 data.

Lastly, we open up a filestream object and use binarywriter to convert the base64 data to byte array.

That’s it! Happy coding!

Firebase Cloud Messaging (FCM) is the new push notification services from Google. In this post, I will show how to integrate FCM in a PhoneGap project and send push notification to devices using ASP.NET core.

Setting Up FireBase

First and foremost, we need to create an android app in Firebase. Login to https://console.firebase.google.com with your google account.

Select “Add Firebase to your Android App”
Fill up the fields in the text fields. Take note that the android package name has to be the same as your Phonegap package name.
The next step is where you will find the google-services.json file. Download this file to your computer. We need this file to register our app with Firebase and in return, we will have a device token.
Continue with the rest of the steps.
As we are sending push notifications from our server, we will require a server API and a sender ID. It’s extremely straightforward. Just click “Settings” from the app and click on “Cloud Messaging Tab”
Note down the values for Server key and SenderID.

So far, we have a file named google-services.json, Server key and SenderID and we are ready to dive into PhoneGap and ASP.NET.

Setting PhoneGap

Before we continue, I will like to point that the following steps are tested on Android using Cordova cli 7.0.1, Cordova android 6.2.3 and Android SDK 25.

Setting Phonegap for push notification is such a breeze, kudos to author of cordova-plugin-fcm (https://github.com/fechanique/cordova-plugin-fcm). The instructions for setting up fcm in PhoneGap can be found at the github page. In short,

copy your google-services.json to your root project.
run

cordova plugin add cordova-plugin-fcm

1

cordova plugin add cordova-plugin-fcm

Now you can get your token by implementing the code below.

//FCMPlugin.onTokenRefresh( onTokenRefreshCallback(token) );
//Note that this callback will be fired everytime a new token is generated, including the first time.
FCMPlugin.onTokenRefresh(function(token){
    alert( token );
    //Send this token to your server
});

//FCMPlugin.onTokenRefresh( onTokenRefreshCallback(token) );

//Note that this callback will be fired everytime a new token is generated, including the first time.

FCMPlugin.onTokenRefresh(function(token){

alert( token );

//Send this token to your server

});

The token should be sent and store in the server. I highly recommend to use onTokenRefresh method, this method will return a token every time a new token is generated.

Before we can build our phonegap project, we need to ensure that Google Service is installed in our android SDK as shown below:

Now, we ready to run

cordova build android

1	cordova build android

Sending notification to FCM from ASP.NET

Replace applicationID and senderId with the Server Key and SenderId respectively from FireBase console.

The deviceId will be the token generated from onTokenRefresh method.

public async Task<bool> SendPushNotification()
        {
            var applicationID = "xxx";
            var senderId = "xxx";
            var deviceId = "xxxx"

            using (var client = new HttpClient())
            {
                //do something with http client
                client.BaseAddress = new Uri("https://fcm.googleapis.com");
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
                client.DefaultRequestHeaders.TryAddWithoutValidation("Authorization", $"key={applicationID}");
                client.DefaultRequestHeaders.TryAddWithoutValidation("Sender", $"id={senderId}");

               
                var data = new
                {
                    to = deviceId,
                    notification = new
                    {
                        body = "This is the message Body",
                        title = "This is the title of Message",
                        icon = "myicon"
                    },
                    priority = "high"

                };

                var json = JsonConvert.SerializeObject(data);
                var httpContent = new StringContent(json, Encoding.UTF8, "application/json");

                var result = await client.PostAsync("/fcm/send", httpContent);
            }
            return true;
        }

public async Task<bool> SendPushNotification()

{

var applicationID = "xxx";

var senderId = "xxx";

var deviceId = "xxxx"

using (var client = new HttpClient())

{

//do something with http client

client.BaseAddress = new Uri("https://fcm.googleapis.com");

client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

client.DefaultRequestHeaders.TryAddWithoutValidation("Authorization", $"key={applicationID}");

client.DefaultRequestHeaders.TryAddWithoutValidation("Sender", $"id={senderId}");

var data = new

{

to = deviceId,

notification = new

{

body = "This is the message Body",

title = "This is the title of Message",

icon = "myicon"

priority = "high"

};

var json = JsonConvert.SerializeObject(data);

var httpContent = new StringContent(json, Encoding.UTF8, "application/json");

var result = await client.PostAsync("/fcm/send", httpContent);

}

return true;

}

And we are done!

Posts

Upload HTML5 canvas to server using ASP.NET Core

Firebase Cloud Messaging in PhoneGap and ASP.NET core