Comment programmer avec Yii2 Intégration AuthClient avec Twitter et Google

Si vous demandez, "Qu'est-ce que Yii?" Découvrez mon tutoriel précédent: Introduction au framework Yii, qui passe en revue les avantages de Yii et inclut un aperçu des nouveautés de Yii 2.0, publiées en octobre 2014.

Dans cette série de programmation avec Yii2, je guide les lecteurs dans l'utilisation du framework Yii2 pour PHP récemment mis à jour. Dans ce tutoriel, je vous guiderai à travers l'intégration du support intégré AuthClient pour permettre la connexion à partir de réseaux tiers tels que Twitter, Google et Facebook..

Pour ces exemples, nous allons continuer à imaginer que nous construisons un cadre pour la publication de mises à jour de statut simples, par exemple. notre propre mini-Twitter, en utilisant notre hello codebase. Utilisez les liens GitHub sur cette page pour télécharger le référentiel de code..

Dans Programmation avec Yii2: Intégration de l'enregistrement des utilisateurs, j'ai parcouru l'intégration de la bibliothèque Yii2-User pour l'enregistrement et l'authentification des utilisateurs. Dans ce tutoriel, nous allons apprendre à intégrer AuthClient à Yii2-User et à remplacer ses vues..

Juste un rappel, je participe aux discussions ci-dessous. Si vous avez une question ou une suggestion de sujet, veuillez poster un commentaire ci-dessous. Vous pouvez également me joindre sur Twitter @reifman ou m'envoyer un email à Lookahead Consulting.

Qu'est-ce qu'AuthClient??

AuthClient est la prise en charge intégrée de Yii pour l'authentification de vos applications via des services tiers avec OpenID, OAuth ou OAuth2.. 

Par exemple, AuthClient permet aux nouveaux visiteurs de s’inscrire et de se connecter à votre application en utilisant leur compte Twitter au lieu de devoir fournir un mot de passe..

Une prise en charge immédiate est fournie aux clients suivants:

• Facebook
• GitHub
• Google (via OpenID et OAuth)
• LinkedIn
• Microsoft Live
• Gazouillement
• VKontakte et Yandex (via OpenID et OAuth) sont également populaires en Russie

La configuration de chaque client est un peu différente. Pour OAuth, vous devez obtenir l'ID client et la clé secrète auprès du service que vous allez utiliser. Pour OpenID, cela fonctionne dans la plupart des cas..

Pour ce tutoriel, je vais vous expliquer comment ajouter les authentifications Twitter et Google..

Installer AuthClient dans notre application

Ajouter AuthClient à Composer

Premièrement, nous devons ajouter la bibliothèque AuthClient à composer.json:

"minimum-stabilité": "stable", "require": "php": "> = 5.4.0", "yiisoft / yii2": "*", "yiisoft / yii2-bootstrap": "* *", " yiisoft / yii2-swiftmailer ":" * "," dektrium / yii2-user ":" 0.8.2 "," stichoza / google-translate-php ":" ~ 2.0 "," yiidoc / yii2-redactor ":" 2.0 .0 "," yiisoft / yii2-authclient ":" * ",

Ensuite, nous devons mettre à jour le compositeur:

sudo composer update Mot de passe: Chargement des référentiels du compositeur avec les informations de paquet Mise à jour des dépendances (y compris require-dev) - Suppression de bower-asset / jquery.inputmask (3.1.58) - Installation de bower-asset / jquery.inputmask (3.1.61) Chargement à partir du cache Écrire un fichier verrou Générer des fichiers à chargement automatique 

Configuration du support AuthClient

Nous devons ajouter les paramètres de configuration AuthClient à notre fichier de configuration Web dans \ config \ web.php.

Ajoutez des éléments de tableau pour tous les services tiers que vous souhaitez prendre en charge (pour plus d'informations, reportez-vous au Guide AuthClient). Pour le moment, nous utiliserons des clés de substitution pour Twitter.

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en', // retour au français 'components' => ['authClientCollection' => ['class' => 'yii \ authclient \ Collection', 'clients' => ['google' => ['class' => 'yii \ authclient \ clients \ GoogleOpenId'], 'twitter' => ['class '=>' yii \ authclient \ clients \ Twitter ',' consumerKey '=>' twitter_consumer_key ',' consumerSecret '=>' twitter_consumer_secret ',],],],

Google fonctionnera tel quel sans configuration supplémentaire, mais pour Twitter, nous devons enregistrer une application..

Inscrivez-vous à notre application Twitter

Créez une nouvelle application Twitter sur le tableau de bord des applications Twitter:

Cliquez sur Créer une nouvelle application. J'ai trouvé que l'URL de rappel était inutile, mais pour l'instant j'ai utilisé l'espace réservé http://mydomain.com/user/security/auth.

Voici la nouvelle page de notre application:

Ici se trouve le Réglages page:

Ici se trouve le Clés et jetons d'accès page. Ici, nous devons copier le Clé consommateur (clé API) et Consommateur Secret (API Secret):

Nous allons utiliser ces clés dans un instant.

Protéger les clés de GitHub

Dans Protéger vos clés de GitHub, j'ai décrit en détail la manière dont j'utilise un fichier de configuration pour stocker toutes mes clés en dehors de mon référentiel GitHub. Ensuite, j'inclus ce fichier au début de mes fichiers de configuration Yii. Cela m'empêche de vérifier accidentellement les clés de mon référentiel et de compromettre mes comptes.. 

De plus, dans Introduction à MailTrap: un faux serveur SMTP pour les tests de pré-production de la messagerie d'application, j'ai commencé à intégrer les paramètres SMTP personnalisés de MailTrap à ma configuration Yii SwiftMailer à des fins de test. Cela nous permettra de recevoir les courriels d'inscription lors de notre inscription sur notre plateforme de développement local..

Nous plaçons les clés d'application Twitter et les clés SMTP MailTrap dans /var/secure/hello.ini en dehors du référentiel:

oauth_twitter_key = "xxxxxxxxxxxxxxxxxxx" oauth_twitter_secret = "xxxxxyyyyzzzzz2222xxxxxxxx" oauth_twitter_secret = "xxxxxyyyyzzzzz2222xxxxxxxx" "

Voici le code dans \ config \ web.php qui inclut ces paramètres et définit les variables de configuration individuelles:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en', // retour au français 'components' => ['authClientCollection' => ['class' => 'yii \ authclient \ Collection', 'clients' => ['google' => ['class' => 'yii \ authclient \ clients \ GoogleOpenId'], 'twitter' => ['class '=>' yii \ authclient \ clients \ Twitter ',' consumerKey '=> $ config [' oauth_twitter_key '],' consumerSecret '=> $ config [' oauth_twitter_secret '],],],], 

Plus bas, voici comment nous configurons les paramètres SMTP pour SwiftMailer:

'mailer' => ['class' => 'yii \ swiftmailer \ Mailer', 'viewPath' => '@ app / mailer', 'useFileTransport' => false, 'transport' => ['class' => ' Swift_SmtpTransport ',' host '=> $ config [' smtp_host '],' username '=> $ config [' smtp_username '],' password '=> $ config [' smtp_password '],' port '=>' 25 ' , 'cryptage' => 'tls',],],

Mise à jour du schéma de base de données pour stocker les clés de session

Comme nous utilisons Yii2-User, une table de jetons a déjà été fournie pour stocker les clés AuthClient..

utilisez yii \ db \ Schema; utilisez dektrium \ user \ migrations \ Migration; / ** * @author Dmitry Erofeev  * / class m140504_130429_create_token_table étend la migration fonction publique up () up () $ this-> createTable ('% token', '' id_utilisateur '=> Schéma :: TYPE_INTEGER.' PAS NULL ',' code '=> Schéma :: TYPE_STRING. '(32) NOT NULL', 'created_at' => Schéma :: TYPE_INTEGER. 'NOT NULL', 'type' => Schéma :: TYPE_SMALLINT. 'NOT NULL'], $ this-> tableOptions); $ this-> createIndex ('token_unique', '% token', ['user_id', 'code', 'type'], true); $ this-> addForeignKey ('fk_user_token', '% token', 'user_id', '% user', 'id', 'CASCADE', 'RESTRICT');  public function down () $ this-> dropTable ('% token'); 

Nous examinerons le contenu de ce tableau à la fin de ce tutoriel, après nous être enregistrés via Twitter..

Ajouter le widget AuthClient à l'interface utilisateur

La page de connexion Yii2-User affiche son widget Connect pour les services AuthClient sur la page de connexion. Notez les icônes Google et Twitter au bas de la page:

Pour une raison quelconque, cependant, ils ne sont pas inclus sur la page d'inscription. Cela me semble un oubli.

Afin de modifier la page d'inscription, nous devons remplacer la vue d'enregistrement. Heureusement, Yii et Yii2-user rendent cela facile à voir et à remplacer les vues dans Yii2-User..

Retournant vers \ config \ web.php, nous ajoutons le composant de vue ci-dessous:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en', // retour à l'anglais 'components' = = '[' view '=> ['theme' => ['pathMap' => ['@ dektrium / user / views' => '@ app / views / user'],],], 'authClientCollection' => [

Ensuite, nous plaçons notre propre version modifiée de register.php dans Yii2-User dans @ app / views / user / registration / register.php. Lorsque la page d'inscription est demandée, Yii chargera notre version, qui comprend le widget Connect:

 * * Pour obtenir les informations complètes sur le copyright et la licence, veuillez consulter le fichier LICENSE.md * distribué avec ce code source. * / use yii \ helpers \ Html; utilisez yii \ widgets \ ActiveForm; utilisez dektrium \ user \ widgets \ Connect; / ** * @var yii \ web \ View $ this * @var yii \ widgets \ Formulaire $ ActiveForm * @var dektrium \ user \ models \ Utilisateur $ utilisateur * / $ ceci-> titre = Yii :: t ('utilisateur ', 'S'inscrire'); $ this-> params ['breadcrumbs'] [] = $ this-> title; ?> 
 
 
 
 
titre)?>
 
 
  'formulaire d'inscription', ]); ?>  ['/ user / security / auth']])?> champ ($ modèle, 'nom d'utilisateur')?> champ ($ modèle, 'email')?> getModule ('utilisateur') -> enableGeneratingPassword == false):?> champ ($ model, 'password') -> passwordInput ()?>   'btn btn-success btn-block'])?>  
 
 
  
 
 
 

Voici notre page d'inscription maintenant:

Expérience utilisateur de la connexion via les services

Voici à quoi ressemble le processus d'inscription. Lorsque vous cliquez sur l'icône Twitter ci-dessus, il vous sera demandé de vous connecter à votre compte Twitter:

Ensuite, il vous sera demandé d'autoriser l'application avec votre compte:

Ensuite, cela vous mènera au Relier formulaire d'inscription dans notre application-cette page est également fourni par Yii2-User:

Quand vous cliquez terminer, il insère votre jeton OAuth dans la table Token et vous redirige vers la page d'accueil entièrement authentifiée avec notre application:

Voici un aperçu de la table Token, qui stocke les clés de session de service pour chaque utilisateur:

Lors des tentatives de connexion suivantes, Twitter vous redirigera sans autorisation supplémentaire..

C'est ainsi que nous intégrons des services tiers dans le modèle d'application de base Yii2 avec Yii2-User. J'espère que vous êtes ravi de voir à quel point c'est simple.

Vous voudrez peut-être consulter notre série Construire votre démarrage avec PHP, qui utilisera le modèle avancé de Yii2 avec une intégration tierce (en dehors de Yii2-User).

Et après?

Surveillez les prochains tutoriels de ma série de programmation avec Yii2 pendant que je continue à plonger dans différents aspects du cadre.. 

Je me félicite des demandes de fonctionnalités et de sujets. Vous pouvez les poster dans les commentaires ci-dessous ou m'envoyer un email sur mon site Lookahead Consulting.

Si vous souhaitez savoir quand le prochain tutoriel Yii2 arrive, suivez-moi @reifman sur Twitter ou consultez ma page d'instructeur. Ma page d’instructeur comprendra tous les articles de cette série dès leur publication.. 

• Guide de l'extension AuthClient pour Yii 2
  
• Documentation de la bibliothèque Yii2 OAuth2
• Yii2 Developer Exchange, mon site de ressources Yii2
• Une collection de scripts basés sur Yii sur CodeCanyon