User Login

[RedayY]

The Goal here is to use MongoDB and create a way for users to login and register.

[kaidatavis]

Good to see you started on this. Have you finished the testing for the node/edge creation yet? Please do that first.

[RedayY]

Research Update: -Methods such as PHP usage for mongo or node js (also discussed in gitter) are not really Ideal ways to offer a login solution inside of the Sense map Chrome Extension. -Google via their Access API a way to login and register using a google account. https://developer.chrome.com/apps/app_identity -Google Access works with JavaScript and I can imagine it fitting very well into Sensemap. -RestAPI offers usage of MongoDB in a Chrome Extension (MongoDB driver)

[RedayY]

Update: Currently Working on a minor prototype.

Questions and Thoughts:

Do we have a remote MongoDB DB ? Do we want to use Google Access ?

[shahzaibkhan]

@RedayY here you go: https://developer.chrome.com/apps/app_identity this doc should help you setup signin for chrome extension

[kaidatavis]

Good to see the discussions! Google Access API seems the most promising way. Let's try and see if we can get it to work.

[kaidatavis]

@RedayY and @shahzaibkhan, since you are both on the backend team, I will leave it to you two to decide how to best work together. You can work on the same thing together (for example both look into the Access API), divide the work (for example one implements the other tests), or try both and see which works better.

[RedayY]

@kaimdx Do we have a remote MongoDB DB ?

[kaidatavis]

Yes, it is hosted on the bigdata.mdx.ac.uk. I don't know the access details. @phongvis probably knows more about this.

[kaidatavis]

@RedayY @shahzaibkhan the link in your post is for 'chrome app' development, which is different from 'chrome extension' development. Actually, chrome app will be deprecated soon. The link to the chrome.identity documentation for extension is here: https://developer.chrome.com/extensions/app_identity. Luckily the two seem to be the same in this case, but they can be quite different.

[kaidatavis]

To get the 'OAuth2 client ID', you will need to access to the 'Google APIs Console'. I am not sure if this has to be the one used to registered the extension in the chrome shop. If this is the case, @phongvis will have the access as he added the extension to chrome store.

[kaidatavis]

Also, there are to different types of user login in chrome. One is for the browser and you can see this from the chrome setting menu:

The other is for google services, such as gmail and calendar

Even though it is both me in the two screenshot, the two logins are different. If I sign-in in the browser but not google service, I won't be able access my gmail etc. I am not sure if this affects chrome.identity, which I suspect is the google service login.

[kaidatavis]

As mentioned in my email, we will follow the 'behaviour --> test --> code' routine, so let's start with the behaviour. Shahzaib already started a wiki page for this https://github.com/Vis4Sense/SenseMapExtension/wiki/Behaviour:-Backend, but we need to focus on the user behaviour and avoid implementation details. Below are the comments I sent to Shahzaib earlier and you can use this as an example: https://github.com/Vis4Sense/SenseMapExtension/wiki/Behaviour%3A-Browser-Window

1) Cover the process of different possibilities. For example, for user login, it should be something like:

• SenseMap will ask user to log in when it is installed (or first run).
• User should have the option to not log in, and s/he should to be made aware that no progress will be saved in this case.
• If user chooses not to log in, there should be an option to log in later if s/he changes mind.
• If user chooses to log in, there will be an confirmation (and visual indication?) that s/he is logged in and no other action is required.

Of course this will evolve as development progress, for example what happens when there is no internet connection or lose connection after started? what about logging off?

2) Does not include any implementation details. For example, 'Generate Unique ID based on the email address’ will not be part of the description, as it is part of the implementation and not directly related to user behaviour.

[RedayY]

@kaimdx @phongvis 'OAuth2 client ID' Could one of you give me a hand with this ? I think this has to be done by any of you, as it requires me to have a project on chrome to request this.

[RedayY]

^ in regards of logging in with different sources not just google this also will be helpful https://developers.google.com/identity/protocols/OpenIDConnect

[RedayY]

Get your OAuth2 client ID

You need to register your app in the Google APIs Console to get the client ID:

• Login to the Google APIs Console using the same Google account used to upload your app to the Chrome Web Store.
• Create a new project by expanding the drop-down menu in the top-left corner and selecting the Create... menu item.
• Once created and named, go to the "Services" navigation menu item and turn on any Google services your app needs.
• Go to the "API Access" navigation menu item and click on the Create an OAuth 2.0 client ID... blue button.
• Enter the requested branding information, select the Installed application type.
• Select Chrome Application and enter your application ID (same ID displayed in the apps and extensions management page).

[kaidatavis]

@kaimdx @phongvis 'OAuth2 client ID' Could one of you give me a hand with this ? I think this has to be done by any of you, as it requires me to have a project on chrome to request this.

@phongvis can you help Reday with this, as you added SenseMap to the Chrome store?

[kaidatavis]

in regards of logging in with different sources not just google this also will be helpful https://developers.google.com/identity/protocols/OpenIDConnect

I assume this will work with any website that follow this standard.

So chrome.identity api can be used to access OAuth 2.0?

[RedayY]

in regards of logging in with different sources not just google this also will be helpful https://developers.google.com/identity/protocols/OpenIDConnect I assume this will work with any website that follow this standard.

So chrome.identity api can be used to access OAuth2.0

Yea it uses OAuth2.0, we can also use OAuth 2.0 to add different ways besides google to login. For now I am working on getting Google Login working, as soon as I got the information from phong :)

[RedayY]

I updated the Wiki too btw

[phongvis]

I created several of them before. Can you try this one and let me know if it works:

Client ID 863635378390-j7mi19t67vigdc4393us6r9cbm7mr49d.apps.googleusercontent.com Client secret fqodH_Wgus5LiO5YPreL1HbE

[RedayY]

Will do thank you :)

[RedayY]

Update:

• Updated Code with a fully functional working sample. Please see rebuild-login-reday
• Still semi WiP.
• Created Branch for Rebuild Login

Here is a youtube video explaining everything: https://youtu.be/d-54zYIe8l0

Still need to do the following:

• Update Behaviours (add further functionality)
• Add small bits of code for other providers
• Implement in History Map (once approved)
• Combine work with Rest API

[RedayY]

For Anyone late night/morning reading this by any chance Video is Uploading.

[RedayY]

https://github.com/Vis4Sense/SenseMapExtension/tree/rebuild-Login

[RedayY]

Update:

• Prepared for Implementation in Sensemap as well as MongoDB
• Revamped Login

Don't be afraid to try it out :)

[kaidatavis]

That's great progress! I can run the login branch locally and it seems to work fine as you showed in the video, which is quite helpful.

[kaidatavis]

I will go through the 'behaviour' wiki for the login later today, so you can start creating some tests.

[kaidatavis]

There were two file reference errors, which I fixed in my commit. Also, I got the following error when tried to log in:

[RedayY]

Hmmm did you change the reference Uri ?

[RedayY]

This error only appears when the redirect Uri mismatches from the one we used in the chrome API developer console

[kaidatavis]

I didn't change any URL. Actually which URL in which is file?

Sent from my Samsung SM-G920F using FastHub

[RedayY]

Sorry for the late reply I am looking into this right now

[RedayY]

Right So I just Synced the Branch and tested the login, it is working as intended.

Are you sure you're using rebuild-Login ?

rebuild-Reday has an outdated version of the login. The latest and working one is in rebuild-Login

[kaidatavis]

I made a screencast for the error: https://streamable.com/2otio

[RedayY]

Hmmm could you kindly check the following file :" initHelloOauth.js " in \SenseMapExtension\tests\Reday\dummylogin

to match like this

It is strange that it said that the Redirect URL is unreachable, as if the sensemap extension would have a diffrent ID on your Installation

[RedayY]

Actually I just noticed in your video, the ID of the extension is different on my end than on yours

[RedayY]

for me the link on sensemap is lajblbdkejaddpihfeeihnicfkmiojem and yours seems to be starting with gekhbinh

[RedayY]

This is why the Redirect URL not reachable. because the extension is looking for https://lajblbdkejaddpihfeeihnicfkmiojem.chromiumapp.org/tests/Reday/dummylogin/index.html, where yours would actually be something like https://gekhbinh*somethingsomething.chromiumapp.org/tests/Reday/dummylogin/index.html

[RedayY]

Would you mind trying to remove SenseMap from chrome and reloading it from the branch to see if the id changed ?

[kaidatavis]

I think it is the same. See the screenshot of the same file on my laptop. I committed my local version into your branch, so you can see my version of the code in the latest commit and the changes (diff) here: https://github.com/Vis4Sense/SenseMapExtension/commit/d360f630d788e51959926525eee34d41d3cde2c2.

[RedayY]

Yea I found the Issue. On chrome://extensions/ under Sensemap I have a diffrent ID than you. So In the specification it is looking for https://lajblbdkejaddpihfeeihnicfkmiojem.chromiumapp.org/tests/Reday/dummylogin/index.html/ and if it cannot find it, it wont reach the Authentification Page.

[kaidatavis]

Can you use a relative path such as '/tests/Reday/dummylogin/index.html' rather than a full URL 'https://lajblbdkejaddpihfeeihnicfkmiojem.chromiumapp.org/tests/Reday/dummylogin/index.html'? This loads the index.html file locally rather than online.

[RedayY]

Unfortunately, we need to configure the Authentication Page URL in the Google Developer API console. On there it Only allows links and not paths.

[RedayY]

Do you know why your version of Sensemap has a diffrent ID ?

[kaidatavis]

Probably because the extension is loaded from the source code, so google just assign an ID on the fly.

[RedayY]

So is that also the case with Extensions on the web store ?

[kaidatavis]

I have updated the login behaviour wikipage, please follow the latest version for the testing and code.

[RedayY]

Update:

• Updated Code to add following features:
  • Added Login to run on Load of Sensemap ( Please Note : Since Chrome generates unique APP ID per client. Login may or may not work for you. Rest assured please let me know if you would like to try the login, I will add an URL for the white list under the Google Developer API, only thing I would need for that is your APP ID, see posts above )
  • If you have logged in before; It stores your Account on the Login API for an easy one click login.
  • Testing Specification Document changed and added to test for a Login Object.

[RedayY]

Update:

• Changed SenseMap Login Behavior, Logout on Window Closure to allow a smoother login.
• Added Fake Server Testing Specification Document
• Removed Unused Code and Documents on my end
• Created a wiki page and a Video Tutorial on How to setup Oauth with Hello.js and G+ Social API in a local enviroment

Note: If you want to try login sent me your SenseMap Chrome Extension Local ID, so I can enable Login.

Status:

• Waiting on new version of serverside code to try pushing a User Object into the DB

[RedayY]

Update:

• Added the WiP "Control Panel Sample" Please take a look and leave some feedback, Design Improvements and such. Personally I think there is room for improvement especially the "User Information Area"

• @kaimdx I made the login link allready working for you, if you're trying this just make sure to change the initOauth redirect uri to following link :

https://gekbinhnlmhidijgdccmnakheaeplado.chromiumapp.org/src/html/popup.html

Note: If you want to try login sent me your SenseMap Chrome Extension Local ID, so I can enable Login.