Comment programmer avec Yii2 Authentification Google

Ce que vous allez créer

Si vous demandez, "Qu'est-ce que Yii?" check-out Introduction au framework Yii, qui passe en revue les avantages de Yii et comprend un aperçu de Yii 2.0.

Dans cette série de programmation avec Yii2, je guide les lecteurs dans l'utilisation du framework Yii2 pour PHP. Dans ce didacticiel, je continuerai à vous guider tout au long de l'intégration du logiciel AuthClient intégré, à l'aide de l'API des comptes Google et d'OAuth 2.0.. 

Il peut être utile d’examiner Programmation avec Yii2: Intégration de l’enregistrement utilisateur, qui décrit l’intégration de la bibliothèque Yii2-User pour l’enregistrement et l’authentification des utilisateurs, et Programmation avec Yii2: Intégration AuthClient avec Twitter, Google et d’autres réseaux, qui explore l’intégration. avec authentification Twitter et le support désormais obsolète pour OpenID de Google. Ce didacticiel vous montrera comment passer de notre intégration antérieure de Google OpenID à l'intégration de OAuth 2.0 avec l'API des comptes Google..

Pour ces exemples, nous allons continuer à développer le framework de la série, notre hello codebase. Utilisez les liens GitHub sur cette page pour obtenir le téléchargement du référentiel de code..

Avant de commencer, rappelez-vous que j’essaie de participer aux discussions ci-dessous. Si vous avez une question ou une suggestion de sujet, veuillez poster un commentaire ci-dessous ou contactez-moi sur Twitter @reifman. Vous pouvez aussi m'envoyer un email directement.

Si vous avez remarqué qu'il y a eu un retard dans cette série, c'est parce que je suis de retour d'une opération au cerveau. Merci de votre patience et de votre soutien. Je suis heureux de pouvoir écrire régulièrement et je suis impatient de poursuivre la couverture de Yii2..

Mise à jour d'un utilisateur Yii2

Depuis que j'ai écrit pour la dernière fois sur ces sujets, Yii2 User s’est beaucoup amélioré. La première chose à faire est de mettre à jour sa bibliothèque. Vous pouvez le faire avec composer en ligne de commande:

composer require "dektrium / yii2-user: 0.9. * @ dev" 

Ceci mettra automatiquement à jour composer.json:

"minimum-stabilité": "stable", "require": "php": "> = 5.4.0", "yiisoft / yii2": "*", "yiisoft / yii2-bootstrap": "* *", " yiisoft / yii2-swiftmailer ":" * "," dektrium / yii2-user ":" 0.9.*@dev "," stichoza / google-translate-php ":" ~ 2.0 "," yiidoc / yii2-rédacteur ": "2.0.0", "yiisoft / yii2-authclient": "*",,

Ensuite, lancez les dernières migrations de base de données pour Yii2 User. Ceci actualisera votre base de données avec la dernière bibliothèque:

php yii migrate / up --migrationPath = @ vendor / dektrium / yii2-user / migrations

Vous verrez probablement quelque chose comme ça:

$ php / mp (yes | no) [no]: yes *** application de m141222_110026_update_ip_field> modifiez la colonne registration_ip de la table % user en chaîne (45)… terminé (heure: 0.009s) *** appliqué m141222_110026_update_ip_field (heure: 0.030s) ) *** application de m141222_135246_alter_username_length> modifier le nom d'utilisateur de la colonne dans la table % user en chaîne (255)… terminé (heure: 0.010s) *** appliqué chaîne de code (32) à la table % social_account… done (heure: 0.008s)> ajouter une colonne created_at entier à la table % social_account… done (heure: 0.009s)> ajouter une chaîne d'email de colonne à la table  % social_account… done (heure: 0.008s)> ajouter une chaîne à la table % social_account… done (heure: 0.009s)> créer un index unique account_unique_code sur % %_social_account (code)… done (heure: 0.016s) *** appliqué m150614_103145_update_social_account_table (heure: 0.059s) *** appliqué m150623_212711_fix_username_notnull> al nom d'utilisateur de la colonne ter dans la table % user en chaîne (255) NOT NULL… terminé (heure: 0.009s) *** appliqué m150623_212711_fix_username_notnull (heure: 0.011s) Migration réussie.

Vous devez également déplacer la définition de composant pour yii2-user vers les modules dans \ hello \ config \ web.php:

'modules' => ['redactor' => 'yii \ rédacteur \ RedactorModule', 'class' => 'yii \ rédacteur \ RedactorModule', 'uploadDir' => '@ Webroot / uploads', 'uploadUrl' => ' / hello / uploads ',' user '=> [' class '=>' dektrium \ user \ Module ',' enableUnconfirmedLogin '=> TRUE,' confirmWithin '=> 21600,' cost '=> 12,' admins '= > ['admin']],],

Enregistrez votre projet Google

Pour que les utilisateurs de votre application Yii2 puissent s’inscrire et se connecter à leur compte Google, vous devez enregistrer un projet Google sur la console du développeur:

Let's Créer un projet appelé yii2hello:

Vous serez dirigé vers la page d'accueil du projet avec diverses options dans le menu de gauche:

Il est important de demander l’accès aux groupes d’API que nous utilisons avec Google. Pour les utilisateurs Yii2, nous devons activer les API Google+. Cliquer sur API et authentification> API et rechercher Google+:

Puis clique Activer l'API:

Vous verrez une liste des API activées qui comprend maintenant le API Google+:

Ensuite, nous devons ajouter des informations d'identification afin d'authentifier nos demandes d'API avec Google pour les activités de ce projet. Cliquez sur Lettres de créance:

Utilisons le ID client OAuth 2.0 option ci-dessus. Il vous sera ensuite demandé de créer un Écran de consentement OAuth et complétez les informations sur votre application qui seront présentées aux utilisateurs qui essaient de s’inscrire ou de se connecter avec votre application:

Sur le Lettres de créance page, nous choisirons application Web, et comme nous testons localement, nous fournirons deux paramètres pour les rappels d'authentification. J'utilise le port 8888 pour mon développement local. Alors, mon Origines JavaScript autorisées sera http: // localhost: 8888 et l'utilisateur Yii2 requiert le URI de redirection autorisés chemin de http: // localhost: 8888 / hello / user / security / auth? authclient = google.

Vous serez présenté avec des clés d'API, également connu sous le nom de identité du client et secret client:

Je vais revoir où placer ces clés ci-dessous.

Configuration du support AuthClient

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.. 

Dans mon /var/secure/hello.ini fichier, je stocke toutes les clés de mon application; placez également vos clés API Google ici:

oauth_google_clientId = "41xxxxxxxxxxxxxeusercontent.com" oauth_google_clientSecret = "LmxxxxxxxxxxxxxxxxxxxxxxFJ4" oauth_twitter_key = "rxkxxxxxxxxxxxxxxxxxopjU" oauth_twitter_secret = "b7gU4twxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxkLy0z2e" smtp_host = "mailtrap.io" smtp_username = "2xxxxxxxxxxxxxxxxx2" smtp_password = "2xxxxxxxxxxxxxxxxx5" MYSQL_HOST = "localhost" mysql_un = "xxxxxxxxxxxx" mysql_db = "bonjour" mysql_pwd = "xxxxxxxxxxxxx"

Nous devons ajouter des références à ces clés dans les paramètres de configuration AuthClient de 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:

 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'language' => 'en', // retour à l'anglais 'components' = = '[' view '=> ['theme' => ['pathMap' => ['@ dektrium / user / views' => '@ app / views / user'],],], 'authClientCollection' => ['class' => 'yii \ authclient \ Collection ',' clients '=> [' google '=> [' class '=>' dektrium \ utilisateur \ clients \ Google ',' clientId '=> $ config [' oauth_google_clientId '],' clientSecret '= > $ config ['oauth_google_clientSecret'], ',' twitter '=> [' class '=>' yii \ authclient \ clients \ Twitter ',' consumerKey '=> $ config [' oauth_twitter_key '],' consumerSecret '=> $ config ['oauth_twitter_secret'],],],],

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..

Pour ce tutoriel, j'ai constaté que je devais mettre à jour les informations de port pour SwiftMailer à 2525 en \ config \ web.php:

'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 '=>' 2525 ' , 'cryptage' => 'tls',],],

Enregistrement avec votre compte Google

Nous sommes enfin prêts à explorer l'utilisation de l'interface frontale de l'utilisateur Yii2. Commençons par l'inscription. Clique sur le S'inscrire option dans le menu et vous verrez ce formulaire:

Pour vous inscrire à tout ce que nous avons créé aujourd'hui, cliquez sur l'icône Google+. Étant donné que je ne suis connecté qu'à un seul compte Google, il y aura une fenêtre contextuelle transparente et une redirection pour terminer mon inscription:

Vous devriez voir la page d'accueil montrant que vous êtes authentifié dans le coin supérieur droit:

Connexion avec votre compte Google

Cliquez sur Connectez - Out et ensuite, nous pouvons essayer de vous connecter avec l'icône Google+. Cliquez sur Se connecter dans le menu en-tête:

Puis cliquez sur le Icône Google+ encore. Vous serez redirigé vers l'écran d'accueil, indiquant que vous êtes à nouveau connecté. Assez cool, hein? Mais que se passe-t-il si vous êtes connecté à deux comptes Google??

Lorsque vous sélectionnez votre compte Google pour vous connecter, vous êtes redirigé vers la page d'accueil en mode authentifié..

Le profil de l'utilisateur et la zone de connexion

Bien que ce ne soit pas encore configuré dans notre menu d’en-tête Bootstrap, si vous visitez  http: // localhost: 8888 / hello / user / settings / networks, vous verrez la nouvelle interface de connexion pour les comptes tiers au sein de l'utilisateur Yii2:

Une fois connectés, vos utilisateurs peuvent se connecter et se déconnecter de leurs comptes sociaux à partir d’ici. Il y a aussi une zone de gestion de compte et de profil d'utilisateur. C'est assez bien fait. 

Vous voudrez peut-être consulter ma série Construire votre démarrage avec PHP, qui utilise le modèle avancé de Yii2 avec une intégration tierce, actuellement sans utilisateur Yii2. Cependant, il existe maintenant un guide pour intégrer l'utilisateur Yii2 avec le modèle avancé, je peux donc le mettre à jour prochainement..

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.. 

  • Programmer avec Yii2: Intégrer l'enregistrement de l'utilisateur (Tuts +)
  • Programmation avec Yii2: Intégration AuthClient avec Twitter, Google et d'autres réseaux (Tuts +)
  • Guide de l'extension AuthClient pour Yii 2
  • Documentation de la bibliothèque Yii2 OAuth2
  • Yii2 Developer Exchange, mon site de ressources Yii2