Archive for the ‘ Web Development ’ Category

Copying Build Artifacts for Visual Studio MSBuild

Lately, I’ve been working to integrate a client-side build process to a project at work.  The idea is that I would like to be able to transpile my TypeScript files through webpack and include them in my published solution.

I added my webpack build command to the pre-build commands section in my web project and thought that I would be good to go. Nope.

I ran into a road block.  Build artifacts (like my output folder that webpack puts all of the transpiled files into) don’t automatically get pushed out on publish of the web project.

After a long while testing out ideas to no avail, I finally found a solution.

If you add this target near the end of your web.csproj file, it’ll add your output directory to your published solution. (note: TypeScriptCompiledToJS was my output directory that I wished to get pushed to the published output.  You could change that in this solution to whatever name you need.)

<Target Name=”CopyTypeScript”>
<Message Text=”Copy Typescript Files” Importance=”high” />
<ItemGroup>
<_CustomFiles Include=”$(ProjectDir)\TypeScriptCompiledToJS\**\*” />
<FilesForPackagingFromProject Include=”%(_CustomFiles.Identity)”>
<DestinationRelativePath>TypeScriptCompiledToJS\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
</FilesForPackagingFromProject>
</ItemGroup>
</Target>
<PropertyGroup>
<PipelineCollectFilesPhaseDependsOn>
CopyTypeScript;
$(PipelineCollectFilesPhaseDependsOn);
</PipelineCollectFilesPhaseDependsOn>
</PropertyGroup>

Advertisements

How To Use the PayPal API with Certificate Authentication

I have struggled to find good documentation for authenticating with paypal via a certificate. I have found a few blog posts, but none of these had definitive answers on how to implement it. I’m going to be explaining how to get things setup on Windows with .NET code. However, most of the content in here will be useful for any platform, with some minor tweaks.

Convert cert_key_pem.txt to p12

Using OpenSSL, convert to the key you received from PayPal to pkcs12 format. Keep track of the password that you choose for later reference.

openssl pkcs12 -export -in cert_key_pem.txt -out cert_key.p12

Install p12

Note: I’m going to install it via command line and give permissions to “NETWORK SERVICE” so that IIS can access the certificate.  This will probably be different for OSX and Linux and also may vary depending on your programming language of choice for communicating with paypal.

First, change directories to where you saved your .p12 file.

Then you can either, try installing the cert from the directory you saved the .p12 in. Note: if you don’t have WinHttpCertCfg installed, you can get it here. It comes preinstalled on Windows Server, but if you’re testing on your developer machine, you’ll need to download it.

Make sure you are running your command prompt/powershell as an administrator during this step:

“C:\Program Files (x86)\Windows Resource Kits\Tools\WinHttpCertCfg” -i cert_key.p12 -p P@ssw0rd -c LOCAL_MACHINE\my -a “NETWORK SERVICE”

Or, if that gives you issues, you can change directories to “C:\Program Files (x86)\Windows Resource Kits\Tools\” so that you can run WinHttpCertCfg.exe in its folder.

.\winhttpcertcfg -i C:/path/to/key/cert_key.p12 -p P@ssw0rd -c LOCAL_MACHINE\my -a “NETWORK SERVICE”

At this point, you should get a message indicating that you’re certificate was imported.

If you’re not programming in C# for .NET, you can ignore the rest of this section. At this point, you’re certificate is installed and ready for use.

The Code

Where you are creating your HttpWebRequest, you can add your certificate information onto the request like:

var request = (HttpWebRequest) WebRequest.Create(WebConfigurationManager.AppSettings[“PayPalDataUrl”]);
var certPath = GetCertificatePath();
var certPassword = GetCertificatePassword();

var cert = new X509Certificate2(certPath, certPassword, X509KeyStorageFlags.MachineKeySet);

request.ClientCertificates.Add(cert);

This will add the certificate to be used as authentication and you would add the rest of the request like you would with signature authentication.

At this point, you should be ready to use this certificate to authenticate your paypal express checkout order with paypal.

I plan to improve this document as I remember snags that I went through to get this working for my site. If you have any questions, or feedback, I will gladly like to hear it.

How to get Twitter Bootstrap Modals working in Internet Explorer 7

Many of you out there have been tasked with getting a website running in Internet Explorer 7 or earlier.  It can very difficult depending on the web technologies that you are using.  In personal projects, I have decided to never support legacy internet explorer versions because it’s not worth it to me.  However, if you work at a large company, this could mean A LOT of money lost from potential clients or customers.  without further ado, let’s talk about Twitter Bootstrap Modals.

Twitter Bootstrap Modals

Twitter Bootstrap Modals are very nice to deal with, unless you need to support IE6 or IE7.  For the project I’m currently working on, I needed to get them to work in IE7 (I’m lucky to not have to support IE6.. phew..).  For some reason, the default functionality when you test them in IE7 is that the backdrop appears in front of your modal.  If you click on your modal (which is seen but clearly behind the backdrop), your modal is dismissed as though you clicked away from the modal.

The fix is simple.  In a script at the bottom of your page, you need to append your modals to the end of the body.  I’m not exactly sure why this works, but it does.  My theory, without looking much into the code, is that the backdrop is appended at the end of the body on load and is hidden by default and that since it’s at the end of the DOM, IE7 believes that it should be in the very front of all of your content (dispite z-index, which for some reason, it does not obey).

The Fix

Here is the fix that you should add after your document is ready:

$(".modal").appendTo($("body"));

Update:

If you are depending on the form that the modal is contained in, you may want to do something like this to ensure that the click of your submit button propagates to submit the correct form:

Note: I’m using $.each for brevity, I would not use $.each in the end product if you are using a lot of javascript on load.

var modals = $(".modals"),
    form,
    submitButtons;

$.each(modals, function(i, modal) {
    form = modal.closest("form");
    submitButtons = modal.find("input[type='submit']");

    if(form && submitButtons.length) {
        (function(localForm) {
            $.each(submitButtons, function(i, button) {
                button.on("click", function() {
                    localForm.submit();
                });
            });
        })(form);
    }

    modal.appendTo(body);
});

Hope this helps you get your modals working

Note: I’m not sure if this will work in IE6, but it’s worth a try.

%d bloggers like this: