Logging to your website with GitHub – part 1

Today I would like to cover the first step to take when you’re planning to add logging with third party service (especially with GitHub in my case). What we’ll do now is the working sample of logging on localhost application. Moving that functionality public will be the topic for following post.

Introduction

You surely saw many times an option to ‘log with Facebook’ on many websites you’ve visited:

This is surely the most often choice of the globally targetted website, but… my site is not one of those. CodeMate is meant to be created for programmers. For programmers who shares their work = code. So what I decided is that there will be only GitHub logging (at least at this point) to my product. This should be sufficient and convenient for the vast majority of its users.

Where to start

Such logging with third party services is delivered thanks to OAuth protocol. I knew there must be an exisiting library to use in .NET for this purpose. I launched uncle google and found this pretty library which brings the desired functionality right to you. And – not only GitHub – there’s a plenty of various connectors (which I haven’t seen in use on any site yet, to be honest) like Spotify, Vimeo, VisualStudio and many more.

When you download/pull the repo you’ll see there is showcase app which you can use to see if the library actually works. And that’s what I did. This is how solution looks like (set Mvc.Client as startup project) :

When you launch it (F5) you’ll see the option to log in with three different services:

But when you use GitHub (or any other) the app fails.

Why? We lack some information. We need to provide the app with our valid ClientID and SecretID. But what is it? Where do I get it from?

Registering the product

Each app which uses third party service for logging purposes must be properly registered in this service. I guess this is for situations when you bring any suspicious or massive traffic, the owner knows who to pursue 😉

Let’s do it then! Go to your GitHub, navigate to your Settings and click OAuth applications. Register your application now:

and provide the form with data:

As I read in code – the authorization callback for GitHub is ‘signin-github’ so that’s what I put in: my app home website address with extension codemateapp.azurewebsites.net/signin-github

Now you’ll be given with your codes (don’t share them anywhere!).

And now we can put them in our code (Startup.cs class). I removed the remaining logging approaches as far as we won’t use them:

As you can see the scope we request here is only the user email – but we don’t need anything else since this is proof of concept really at this point. Let’s run the application again!

<Fingers crossed>

Doesn’t work. What is wrong? Our product on GitHub is badly registered. Locally, when we hit F5 we run IIS Express and get the local address of the website which is not our target URL. Let’s check what port your application was run on and replicate this data to GitHub application details. Mine is: http://localhost:54540/

We need to update application details now:

and try again:

It looks like working! I’ll log in with my test GitHub account…

We’re getting closer 🙂

Success! It works! We can log with external GitHub account now! (At least on localhost 🙂 )

Results

Let’s see how it looks on both sides in Github. CodeMate has gained new user from an admin point of view:

And codinghappiness-test user has one active integration:

Cool stuff!

Summary

With the usage of external systems/apps/libraries etc. we can do quite a big thing in relatively short amount of time. Recently I heard such statement that everything that could have been coded is already coded. Originally, a similar sentence was purportedly said by Charles about patents. But no matter if it was said or not – I believe that vast majority of components we can come up with has been already produced – now that’s us, who can cleverly put some of these components into a product that sells.

That’s what I aim to do here: I want to create a system for scheduling stranger programmers to code in pairs. And I want to use as much existing components as I can – today with logging, later on with calendar, styles, logging etc. That’s how we progress as a human race I guess 🙂 I’ll leave you with this heavy yet tremendous observation of mine. Thanks for reading!