User Authentication with Wt

This week, Dr. Shawn gave me a briefing on my new project. It seems quite a hefty task for me, but I hope I can finish it in time. FYI, I am working on a some sort of online project manager with user identification. The first thing I started working on is using the built-in GoogleService and FacebookService under Wt/Auth Class.

Trying out the OAuth Example in Wt

In short, the authentication services did not work. After pressing the logo in the example, a popup window prompts asking for login. After logging in, the page redirects and nothing else happens. There were several problems with it:-

1. authenticated() signal was not sent
   • This signal was supposed to trigger after successful login by the user. Instead, nothing happened. Further into the problem, the authenticated signal is emitted after by attaching an InternalPathChanged() signal to the WApplication. The InternalPathChanged() signal should have been emitted when it redirects to the preset redirection-endpoint in wt_config.xml. Again, there is another problem, the redirection occurs in the Popup window created by the Google/Facebook Service, as a result, the path changed signal was not emitted.
2. Outdated-ness
   • I suspect the underlying problem is the Popup window being used. Maybe it used to work, but the last update to the OAuthService library was a few years ago. Since the library was created, there were many changes to the APIs used by Google and Facebook, although the concept is the same which is sending requests to various endpoints, some code updates were needed on the OAuthService library.

In the end, I created my own user authentication service which is based on the OAuthService library. However, I will keep the popup window method as a future enhancement after I finish the basic framework of the project.

Previously, I’ve been using id_token to get the user ID. There is another endpoint https://www.googleapis.com/plus/v1/people/me which gives the user profile information, including name, email and UID. The UID acts as an identification method and will be used to create a temporary folder storing important data for that user.

Creating the UI using Wt

Wt provides many libraries to build amazing interfaces. For the main UI, I am using WGridLayout to create a few boxes. I learned that for every page, it is best to have only one WContainerWidget for the root() container. We can populate the container with a WGridLayout using setLayout(). In turn, each box of the WGridLayout can be populated using addWidget(). addWidget() for WGridLayout can be used to add WWidgets. For me, I used addWidget() to add WContainerWidgets, which can be used to build various other things.

Wt::WContainerWidget *w = this->root();

Wt::WGridLayout *layout = new Wt::WGridLayout();

layout->addWidget(boardDisplay(), 0, 0, 0,2); // we can add a number of other widgets to the layout

Wt::WWidget *boardDisplay() {

Wt::WContainerWidget *w = new Wt::WContainerWidget();
w->setStyleClass(“container”);
Wt::WText *board = new Wt::WText(“Board Display”);
w->addWidget(board);
return w;
}

w->setLayout(layout);

I really admire the creator of Wt coming up with such an extensive library. However, I do hope that the Wt community is larger and there were more working examples displaying the power of Wt.