authentification sociale en angular 1.pptx

36
Authentification sociale avec Angular 1 3ième Webday ESGI - Paris - 28/04/2016

Upload: mickael-rolo

Post on 21-Mar-2017

308 views

Category:

Internet


3 download

TRANSCRIPT

Page 1: Authentification sociale en angular 1.pptx

Authentification sociale avec Angular 13ième Webday ESGI - Paris - 28/04/2016

Page 2: Authentification sociale en angular 1.pptx

Présentation

Mickaël ROLODevelop’hackeur chez Darkmira

[email protected]

Expert Zend Framework 2

2

Page 3: Authentification sociale en angular 1.pptx

Une panoplie de réseaux sociaux

• Plus de 1 milliard de sites internet dans le monde

•68% des internautes sont actifs sur les réseaux sociaux en 2015

•Facebook, Twitter, Google+,Github, Instagram, LinkedIN, Viadeo, Twitch… des réseaux sociaux en masse !

3

Page 4: Authentification sociale en angular 1.pptx

Comment gérer simplement la connexion des différents réseaux sociaux sur une application

Angular ?

4

Page 5: Authentification sociale en angular 1.pptx

Sommaire

• Chemin d’une connexion avec un réseau social

•Satellizer : configurer les connexions en un seul endroit

• Connexion côté backend

•Echanges connectés entre backend et frontend

5

Page 6: Authentification sociale en angular 1.pptx

Chemin de connexion

6

Page 7: Authentification sociale en angular 1.pptx

Des connexions Cross Domain

Appli frontend sur un serveur A(Angular)

http://frontend.com

Appli backend sur un serveur F

(ZF2)http://backend.com

• Cross Domain : venant de noms de domaine différents

Chemin de connexion > Satellizer > Backend > Echanges

Que se passe-t-il si je clique sur un de ces logos ?

7

Page 8: Authentification sociale en angular 1.pptx

Que se passe-t-il si je clique ?

Utilisateur

Appli frontend sur un serveur A(Angular)

Clique sur logo Facebook

Voici mon id d’app facebookPeux tu authentifier cet internaute ?

Qui es-tu et autorises tu cette appli à accéder à tes infos ?

1

2

3

5Voici son id et un code pour demander des infos

Login mp et accepter4

Appli backend sur un serveur B

(ZF2)

7

Voici le code et ma clé secrète (fournie par facebook), qui est l’utilisateur derrière cet id utilisateur ?

8

Il s’agit de …..

JWT

6

On le connaît ?

9

Chemin de connexion > Satellizer > Backend > Echanges

8

Page 9: Authentification sociale en angular 1.pptx

Un JWT ?

• Json Web Token : « passeport » de l’utilisateur

Appli frontend sur un serveur A(Angular)

http://frontend.com

Appli backend sur un serveur C

(php Zf2)http://backend.com

Appli backend sur un serveur F

(NodeJS)

JWTJWT

JWT

Chemin de connexion > Satellizer > Backend > Echanges

9

Page 10: Authentification sociale en angular 1.pptx

JWT : une structure définie

{ "alg" : "HS256", "typ" : "JWT, "iss" : http://backend.com, "aud" : http://frontend.com, "iat" : strtotime("now"), //date de création du token "exp" : 5000+ strtotime("now"), //temps de validité du token "sub" : "description of the token", "nbf" : strtotime("now") + $this->nbf,//invalide avant cette date 'context' : $context //infos diverses (utilisateur par exemple)}

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIiLCJhdWQiOiIiLCJpYXQiOjE0NjE2NzU4MzMsImV4cCI6MTQ2MjAwODIzMywic3ViIjoiZGVzY3JpcHRpb24gb2YgdGhlIHRva2VuIiwibmJmIjoxNDYxNjc1ODMzLCJjb250ZXh0Ijp7InNDbGllbnROYW1lIjoic3VwZXJhdXRvIiwic0NmYUxpYmVsbGUiOiIiLCJzUm9sZSI6IndlYnNpdGUifX0.N3YxMuXn_RsvfJHq3a64oZQgG5c3M3r2mzNzdiR47TE

Chemin de connexion > Satellizer > Backend > Echanges

• RFC 7519 : Json Web Token

•Crypté en base 64 en 3 parties

10

Page 11: Authentification sociale en angular 1.pptx

Déclarer notre app sur Facebook

•https://developpers.facebook.com•Ajouter votre appli en tant que site web

Chemin de connexion > Satellizer > Backend > Echanges

11

Page 12: Authentification sociale en angular 1.pptx

Déclarer notre app sur Facebook

•Paramètres > ajouter une plateforme > site web

•Puis indiquer nom de domaine et ip serveur (Avancé)

Chemin de connexion > Satellizer > Backend > Echanges

12

Page 13: Authentification sociale en angular 1.pptx

•Examen des app > Rendre frontend publique

Déclarer notre app sur Facebook

•La procédure est similaire sur les autres•ATTENTION : certaines n’acceptent pas “.localhost”

Chemin de connexion > Satellizer > Backend > Echanges

13

Page 14: Authentification sociale en angular 1.pptx

Satellizer

Chemin de connexion > Satellizer > Backend > Echanges

14

Page 15: Authentification sociale en angular 1.pptx

Satellizer, on centralise !

• Réseaux sociaux similaires mais pas identiques !• Centralise et uniformise l’authentification•https://github.com/sahat/satellizer

Chemin de connexion > Satellizer > Backend > Echanges

15

Page 16: Authentification sociale en angular 1.pptx

Satelizer, simple à installer

Index : importer satellizer

angular.module('defaultApp', [ //Angular modules … 'satellizer',

// My Modules ‘userModule’ ….

 

 

1

<script src="bower_components/satellizer/satellizer.min.js"></scrip>

2 Ajouter Satellizer à l’app

16

Chemin de connexion > Satellizer > Backend > Echanges

Page 17: Authentification sociale en angular 1.pptx

Satellizer, simple à configurer

3

angular.module('userModule').config(['$authProvider',function ($authProvider) { $authProvider.facebook( clientId: ‘public key', //name: 'facebook', url: appConfig.server + 'user/facebook', //http:/backend.com/user/facebook //authorizationEndpoint: 'https://www.facebook.com/v2.5/dialog/oauth', //redirectUri: window.location.origin + '/', //requiredUrlParams: ['display', 'scope'], //scope: ['email'], //scopeDelimiter: ',', //display: 'popup', //type: '2.0', //popupOptions: { width: 580, height: 400 }); }

Configurer Satellizer

17

Chemin de connexion > Satellizer > Backend > Echanges

Page 18: Authentification sociale en angular 1.pptx

3 Configurer Satellizer

$authProvider.twitter( clientId: *****************************,

url: appConfig.server + 'user/twitter' //authorizationEndpoint: 'https://api.twitter.com/oauth/authenticate', //redirectUri: window.location.origin, //type: '1.0', //popupOptions: { width: 495, height: 645 });

Satellizer, simple à configurer

18

Chemin de connexion > Satellizer > Backend > Echanges

Page 19: Authentification sociale en angular 1.pptx

angular.module('userModule').controller('SocialController', ['$scope', '$auth', '$localStorage', '$location', function ($scope, $auth, $localStorage, $location) { $scope.socialLoading = false; $scope.authenticate = function (provider) { $scope.socialLoading = true; $auth.authenticate(provider) .then(function (response) { //console.log('Response : ',response); $localStorage.user = response.data.oUser; $scope.socialLoading = false; $location.path('/profil'); }) .catch(function (response) { // Something went wrong. }); }; }]);

SocialController4

Satellizer, simple à utiliser

19

Chemin de connexion > Satellizer > Backend > Echanges

Page 20: Authentification sociale en angular 1.pptx

4Page.html

<element ng-click="authenticate('facebook')" ></element>

<element ng-click="authenticate(‘twitter')" ></element>

<element ng-click="authenticate(‘instagram')" ></element>

Satellizer, simple à utiliser

20

Chemin de connexion > Satellizer > Backend > Echanges

Page 21: Authentification sociale en angular 1.pptx

Backend

21

Chemin de connexion > Satellizer > Backend > Echanges

Page 22: Authentification sociale en angular 1.pptx

Backend : Vérifier et générer

•Cross domainheader('Access-Control-Allow-Origin: ' . 'http://frontend.com');header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS"); header('Access-Control-Allow-Headers: Content-Type, x-xsrf-token,x-session-token,Authorization'); header('Access-Control-Allow-Credentials: true');

FacebookController

1

2

3

Récupérer les paramètres (code et id client)

Demander un token à Fb avec la clé secrète

Récupérer les infos utilisateurs via l’api facebook

4 Traiter les infos utilisateurs

5 Générer un JWT

6 Retourner le JWT ainsi que des infosen clair (nom utilisateur…)

22

Chemin de connexion > Satellizer > Backend > Echanges

Page 23: Authentification sociale en angular 1.pptx

Backend : Vérifier et générer

• FacebookController

$sPostdata = file_get_contents("php://input");$aPostDatas = json_decode($sPostdata, true); // : $request->getPost()

$sCode = $aPostDatas['code'];$sIdClient = $aPostDatas['clientId'];$sRedirectUri = $aPostDatas['redirectUri'];

3 Récupérer les infos utilisateurs via l’api facebook

23

Chemin de connexion > Satellizer > Backend > Echanges

Page 24: Authentification sociale en angular 1.pptx

• FacebookController

2 Demander un token à Fb avec la clé secrète

$client = new \GuzzleHttp\Client(); $params = [ 'code' => $sCode, 'client_id' => $sIdClient, 'redirect_uri' => $sRedirectUri, 'client_secret' => $this->aFacebookConfig['app_secret'] ];

// Step 1. Exchange authorization code for access token. $accessTokenResponse = $client->request('GET', 'https://graph.facebook.com/v2.5/oauth/access_token', [ 'query' => $params ]); $aAccessToken = json_decode($accessTokenResponse->getBody(), true); $sAccessToken = $aAccessToken['access_token']; 24

Chemin de connexion > Satellizer > Backend > Echanges

Backend : Vérifier et générer

Page 25: Authentification sociale en angular 1.pptx

• FacebookController

3 Récupérer les infos utilisateurs via l’api facebook

try { // Returns a `Facebook\FacebookResponse` object $response = $this->oFacebook->get('/me?fields=id,name,email', $sAccessToken); } catch (Facebook\Exceptions\FacebookResponseException $e) { echo 'Graph returned an error: '.$e->getMessage(); exit; } catch (Facebook\Exceptions\FacebookSDKException $e) { echo 'Facebook SDK returned an error: '.$e->getMessage(); exit; }

$user = $response->getGraphUser();$aDatas = array(

'iId' => $user['id'], 'sName' => $user['name'], 'sEmail' => $user['email'] );

25

Backend : Vérifier et générer

Chemin de connexion > Satellizer > Backend > Echanges

Page 26: Authentification sociale en angular 1.pptx

4

• FacebookController

Traiter les infos utilisateurs

//Search if this user exists in our database$oUser = $this->oUserService->findUserFacebook($aDatas);

if($oUser === false){$oUser = $this->oUserService->saveUserFacebook($aDatas);

}

26

Backend : Vérifier et générer

Chemin de connexion > Satellizer > Backend > Echanges

Page 27: Authentification sociale en angular 1.pptx

• FacebookController

//Return valid tokenif($oUser === false){

$aRes['success'] = false;}else{

$aRes = $this->oUserService->generateTockenUser($oUser);$aRes['success'] = true;

}

5 Générer un JWT

6 Retourner le JWT ainsi que des infos en clair (nom utilisateur…)

return new JsonModel($aRes);

27

Backend : Vérifier et générer

Chemin de connexion > Satellizer > Backend > Echanges

Page 28: Authentification sociale en angular 1.pptx

Echanges

28

Chemin de connexion > Satellizer > Backend > Echanges

Page 29: Authentification sociale en angular 1.pptx

A chaque requête, le JWT !

angular.module('userModule').controller('SocialController',['$scope', '$auth', '$localStorage', '$location',function ($scope, $auth, $localStorage, $location){ $scope.socialLoading = false;

$scope.authenticate = function (provider) {

$scope.socialLoading = true;$auth.authenticate(provider) .then(function (response) {

//console.log('Response : ',response); $localStorage.user = response.data.oUser; $scope.socialLoading = false; $location.path('/profil'); }) .catch(function (response) { // Something went wrong. }); };}]);

• SocialController

29

Chemin de connexion > Satellizer > Backend > Echanges

Page 30: Authentification sociale en angular 1.pptx

angular.module('userModule').factory('TokenInterceptor', function ($q, $localStorage, $location ) {

//AuthenticationService) { return { request: function (config) { config.headers = config.headers || {}; if ($localStorage.satellizer_token) { config.headers.Authorization = 'Bearer ' + $localStorage.satellizer_token; //config.headers['x-session-token']= 'Bearer '+$localStorage.satellizer_token; }else{ config.headers['x-session-token']= ''; } return config; },

•TokenInterceptorService

30

Chemin de connexion > Satellizer > Backend > Echanges

A chaque requête, le JWT !

Page 31: Authentification sociale en angular 1.pptx

angular.module('defaultApp').config(function ($httpProvider) { $httpProvider.interceptors.push('TokenInterceptor'); });

•Config.js

31

A chaque requête, le JWT !

Chemin de connexion > Satellizer > Backend > Echanges

Page 32: Authentification sociale en angular 1.pptx

$sRole = 'guest'; $oJwt = null;

$oContainer = new Container('oUser'); $oAuthorization = $oMvcEvent->getTarget()->getRequest()->getHeaders('Authorization'); //$oAuthorization = $oMvcEvent->getTarget()->getRequest()->getHeaders(x-session-token); if( $oAuthorization !== false && $oAuthorization != ''){ $sJWT = $oAuthorization->getFieldValue(); $sJWT = substr($sJWT,7);//7 = size of 'BEARER ' $oJWTService = $oMvcEvent->getApplication()->getServiceManager()->get('JWTService'); try{ $oJwt = $oJWTService->decode($sJWT); $sRole = $oJwt->context->user->sRole;

$oContainer->oUser = $oJwt->context->user; }catch(ExpiredException $oException){

}catch(Exception $oException){

}

•Module.php

32

Chemin de connexion > Satellizer > Backend > Echanges

A chaque requête, le JWT !

Page 33: Authentification sociale en angular 1.pptx

Aller plus loin•Regarder les fichiers de démo sur le github de satellizer (très bien faits et doc très claire !)

•Penser à relier les comptes en base avec les ids des réseaux sociaux

•Détruire le JWT dans le localStorage à la deconnexion

•Ne pas oublier que l’on peut utiliser plusieurs backend donc plusieurs applis avec le JWT !

33

Page 34: Authentification sociale en angular 1.pptx

Conclusion•Les réseaux sociaux ont une façon similaire de

proposer l’authentification

•Très simple de centraliser les connexion avec Satellizer

34

Page 35: Authentification sociale en angular 1.pptx

Sources et webographie

•Site dédié aux JWT : documentations, librairies, debuger... https://jwt.io/introduction/

•RFC 7519 : Json Web Token https://tools.ietf.org/html/rfc7519

•Tuto angular et JWT http://www.ekino.com/introduction-aux-json-web-tokens/

•Nombre de sites internet dans le monde http://hitek.fr/bonasavoir/combien-site-internet-dans-monde_588

•Pourcentage d’actifs sur réseaux sociaux http://www.blogdumoderateur.com/chiffres-reseaux-sociaux/

•Scratchpad angular contenant l’authentification par réseau socialhttps://github.com/Lymke/angular-scratchpad

35

Page 36: Authentification sociale en angular 1.pptx

Merci pour votre écoute

Si vous avez des questions, je peux peut-être y répondre :)

36