jquery-cordova-oauth2

jQuery plugin for doing Oauth2 login in a Cordova App

This jquery plugin can be used to perform Oauth2 login in Cordova app, it uses Cordova In-App-Browser Plugin to perform Oauth2 login flow and returns access_token or error in callback, along with actual response from the Oauth2 service.

Features

Supports Oauth2 authorization code grant flow (server explicit)
Supports Oauth2 implicit grant flow (client implicit)

[Implicit grant is recomended for Cordova apps since it does not require app to store client_secret]

Usage

    $.oauth2({
        auth_url: '',           // required
        response_type: '',      // required  - "code"/"token"
        token_url: '',          // required for response_type ="code"
        logout_url: '',         // recommended if available
        client_id: '',          // required
        client_secret: '',      // required for response_type ="code"
        redirect_uri: '',       // required - any dummy url http://www.yourcompany.com
        other_params: {}         // optional params object for scope, state, ...
    }, function(token, response){
        // do something with token or response
    }, function(error, response){
        // do something with error object
    });

Example Oauth2 Calls:

1) Facebook Oauth2 (Implicit grant): Notice that token_url and client_secret is not required for Implicit grant and logout_url is not specified since facebook does not not have a logout url. Facebook also required a special display parameter to be passed in the URL, this is specified in the other_params. The first callback function will return the access_token which can be passed to another function to save and make other API calls. The second callback function handle any errors.

    $.oauth2({
        auth_url: 'https://www.facebook.com/dialog/oauth',
        response_type: 'token',
        client_id: 'CLIENT-ID-FROM-FACEBOOK',
        redirect_uri: 'http://www.yourwebsite.com/redirect',
        other_params: {scope: 'basic_info', display: 'popup'}
    }, function(token, response){
        makeAPICalls(token);
    }, function(error, response){
        alert(error);
    });

2) Google Oauth2 (Implicit grant): Notice that token_url and client_secret is not required for Implicit grant and logout_url is specified, this will make sure that Google logout is called before showing Google login option.

    $.oauth2({
        auth_url: 'https://accounts.google.com/o/oauth2/auth',
        response_type: 'token',
        logout_url: 'https://accounts.google.com/logout',
        client_id: 'CLIENT-ID-FROM-GOOGLE',
        redirect_uri: 'http://www.yourwebsite.com/redirect',
        other_params: {scope: 'profile'}
    }, function(token, response){
        makeAPICalls(token);
    }, function(error, response){
        alert(error);
    });

3) LinkedIn Oauth2 (Authorization code grant): This example show how to make LinkedIn Oauth2 call, notice the scope parameter is sepcified in the other_params option as an object, linkedIn also requires state parameter, this is also specified in the other_params.

WARNING: Authorization code grant is not recomended for Cordova apps since the client_secret is exposed in the code and anyone can unpack an Adroid APK for example and get your client_secret. Always check if the service supports Implicit grant type of Oauth2 and use it instead of authorization code grant for your Cordova app.

    $.oauth2({
        auth_url: 'https://www.linkedin.com/uas/oauth2/authorization',
        response_type: 'code',
        token_url: 'https://www.linkedin.com/uas/oauth2/accessToken',
        client_id: 'CLIENT-ID-FROM-LINKEDIN',
        client_secret: 'CLIENT-SECRET-FROM-LINKEDIN',
        redirect_uri: 'http://www.yourwebsite.com/redirect',
        other_params: {scope: 'r_basicprofile', state: 'somethingrandom1234'}
    }, function(token, response){
        makeAPICalls(token);
    }, function(error, response){
        alert(error);
    });

How to build app and test?

1. Build App using Intel XDK:

Download this repo.
Download and install Intel XDK.
Open Intel XDK > New Project > Import and point to this folder.
Open index.html in editor and update Oauth2 options (client_id, client_secret, ...) for the service you want to test.
Add In-App-Browser Cordova plugin from the project settings.
Test in the Intel XDK Emulator.
Build your Cordova app by going to Build tab in Intel XDK.
Install App on device.

2. Build App using Phonegap build:

Download this repo.
Open index.html in any editor and update Oauth2 options (client_id, client_secret, ...) for the service you want to test.
Zip files index.html, cordova.oauth2.js and config.xml.
Upload the zip in http://build.phonegap.com to build Cordova App.
Install App on device.

3. Build App using Cordova CLI:

Download this repo.
Follow intructions to build app using Cordova CLI
Add In-App-Browser Cordova plugin
Install App on device.

Services Tested

These Oauth2 services have been tested with this plugin sucessfully:

Google
Facebook
Instagram
Foursquare
LinkedIn

here is example code

* Let me know if any service is not working, feel free to send any pull-request for improvements.

License

leandroramosdev/jquery-cordova-oauth2

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages