CODEWITHSUNDEEP
angularjscordovaauthenticationionic-framework
noor
noor

Reputation: 681

Ionic LinkedIn cordova authentication bad redirect

I am trying to login using LinkedIn. I manage to get the accesstoken but for a split second before redirecting to the page I tell it to, i see this error

HTTP Error 404.0 - Not Found The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

and this is the link

http://localhost:80/callback?code=****&state=WQ7IIHGw

while Ionic works on my localhost:8100, I have set the the Authorized rediect URLS to http://localhost/callback in the linked in developer page

Also, when I set the linked in redirect URL to anything but the localhost/call back i get this error

Invalid redirect_uri. This value must match a URL registered with the API Key.

Upvotes: 1

Views: 735

Answers (1)

pbaranski
pbaranski

Reputation: 24962

Follow/verify this steps:

Setup LinkedIn account developer options: https://www.linkedin.com/developer/apps/
After adding application go to its settings:

  1. In Authentication Keys you will get Client ID and Client Secret
  2. In Authorized Redirect URLs you must put: http://localhost/callback since it will be used by $cordovaOauth
  3. Save/update account settings

Setup Ionic app:

  1. Install cordovaOauth bower install ng-cordova-oauth -S

  2. Add <script src="lib/ng-cordova-oauth/dist/ng-cordova-oauth.js"></script> to index.html and 'ngCordovaOauth'to apps.js

  3. Add $cordovaOauth to controller dependency

  4. Add function to controller (only Client ID and Client Secret need to be replaced by the data from LinkedIn dev account):

      $scope.linkedInLoginIonic = function () {
        var linkedinUriApi = "https://api.linkedin.com/v1/people/~:(email-address,first-name)?format=json&oauth2_access_token=";
        $cordovaOauth.linkedin("Client ID", "Client Secret", ['r_basicprofile', 'r_emailaddress'])
            .then(function (success) {
                    // Here you will get the access_token
                    console.log('Granted access to linkedin');
                    console.log(JSON.stringify(success));
                    // In request below my default header is disabled - otherwise Linkedin API will reject request
                    $http(
                        {method: 'GET',
                            url: linkedinUriApi + success.access_token,
                            headers: {Authorization: undefined}
                        }).then(function (response) {
                        console.log(response);
                    }, function (error) {
                        console.log(error);
                        console.log('Ionic LinkedIn API request after successful login failed');
                    });
                },
                function (error) {
                    console.log(error);
                });
    };

Tips:

  • request can be done only through device or emulator - in web browser you will get in console: Cannot authenticate via a web browser
  • if you have default headers then disable it when requesting LinkedIn API (after authentication go well)
  • if request after successful authentication fail check if scopes matches for all:
    • API request: here we ask for address and first-name in https://api.linkedin.com/v1/people/~:(email-address,first-name)?
    • scope set when authenticating, see in example $cordovaOauth part ['r_basicprofile', 'r_emailaddress']
    • scope set in LinkedIn developer account
    • do final API request with minimal scope (i.e. only email)
  • remember to debug emulator/device request so you will see where the problem is in your request/headers comparing it to values specified in https://developer.linkedin.com/docs/oauth2

Upvotes: 3

Related Questions