Handling Symphony Rest API OAuth v2.0 Login

3kynox commented 8 years ago

Hello !

I'm trying to get satellizer to work with my actual configuration :

node 5.3.0
npm 3.3.12
bower 1.7.1
yo 1.5.1
ng-admin 0.9.1
Symfony 2.8.0 with FOSRESTBundle & FOSOAuthBundle (for Backend, working & functionnal)
OAuth GRANT_TYPE : CLIENT_CREDENTIALS

I already catch some REST responses from Symfony with ng-admin & RestAngular (auth by token) :

// main.js (main controller)

'use strict';

/**
 * @ngdoc function
 * @name wwwApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the wwwApp
 */
angular.module('wwwApp', ['ng-admin'])
  .controller('MainCtrl', function ($scope, $auth) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  })
  .config(function(RestangularProvider) {
      RestangularProvider.setDefaultRequestParams({'access_token': 'my_valid_token'});
  })
  .config(['NgAdminConfigurationProvider', function(NgAdminConfigurationProvider) {
    var nga = NgAdminConfigurationProvider;
    var admin = nga.application('Angular Client Api')
        .baseApiUrl('http://courtier-web-symfony-rest-api/CRM/app_dev.php/api/');

    var dossier = nga.entity('dossiers');
    dossier.listView().fields([
       nga.field('id'),
       nga.field('libelle'),
       nga.field('creation_date'),
       nga.field('modification_date')
    ]);

    var contact = nga.entity('contacts');
    contact.listView().fields([
        nga.field('id'),
        nga.field('nom'),
        nga.field('prenom')
    ]);

    admin.addEntity(contact).addEntity(dossier);

    nga.configure(admin);
}]);

Here is what the index.html looks like :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bower_components/ng-admin/build/ng-admin.min.css" />
    <link rel="stylesheet" href="styles/main.css">
  </head>
  <body ng-app="wwwApp">
    <div class="container-fluid">
    <div ng-include="'views/main.html'" ng-controller="MainCtrl"></div>
    <div ui-view></div>
    <button ng-click="authenticate('symfony_rest_api')">Sign in with Symfony Rest API</button>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
    <script src="bower_components/ng-admin/build/ng-admin.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
  </body>
</html>

Following installation, I then did a _bower install satellizer_, imported script _bower_components/satellizer/satellizer.min.js_ in my index.html and then back to main.js... :

// ...
angular.module('wwwApp', ['ng-admin', 'satellizer']) // added 'satellizer'
.controller('MainCtrl', function ($scope, $auth) {
    $scope.authenticate = function(provider) { // added this following docs
        $auth.authenticate(provider);
    };

    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  })
//...

.config(function($authProvider) { // configured my symfony rest api access
        $authProvider.oauth2({
            name: 'symfony_rest_api',
            url: '/oauth/v2/auth',
            clientId: '9_20t3roxl0hb4ocgs8w4s4sk0cgc40ks8cwc840sskc40ccwk8w',
            redirectUri: window.location.origin,
            authorizationEndpoint: 'http://courtier-web-symfony-rest-api/CRM/app_dev.php'
        });
    })

// I commented below RestangularProvider as it will be no more used
// ... and I let the ng-admin config part

I finally added the button in main.html

"button ng-click="authenticate('symfony_rest_api')">Sign in with Symfony Rest API</button"

And my question is :

Popup shows, login is done, allow button is pressed, the window is closed, my mouse animates quickly :

... and nothing more... localStorage is empty, sessionStorage also, nothing related to any access_token on page headers, ng-admin can't load my REST resources (403 forbidden). What do I have missed please ?

Thanks for help in advance.

Regards.

3kynox commented 8 years ago

Anybody here ?

sahat commented 8 years ago

@3KyNoX Popup will close if it satisfies the following.

Query param error in which case the entire promise is rejected, so you will have to use .catch() to see what was the error.
Any other query param or hash value is present, e.g. #access_token= or ?code=.

So to start add some console.log messages to help you with debugging.

$auth.authenticate(provider)
  .then(function() {
    console.log('You have successfully signed in!');
  })
  .catch(function(error) {
    if (error.error) {
      // Popup error - invalid redirect_uri, pressed cancel button, etc.
      console.error(error.error);
    } else if (error.data) {
      // HTTP response error from server
      console.error(error.data.message, error.status);
    } else {
     console.error(error);
    }
  });

sahat / satellizer

Handling Symphony Rest API OAuth v2.0 Login #693