Share
Ce que vous allez créerCe tutoriel fait partie de la série Construire votre démarrage avec PHP sur Envato Tuts +. Dans cette série, je vous guide dans le lancement d'une startup du concept à la réalité, en utilisant mon application Meeting Planner comme exemple concret. À chaque étape du processus, je publierai le code de Meeting Planner sous forme d’exemples open source à partir desquels vous pourrez apprendre. Je traiterai également les problèmes liés au démarrage au fur et à mesure qu'ils surviennent.
Dans ce tutoriel, je vais vous guider dans la mise en œuvre de l'intégration de OAuth avec des réseaux sociaux courants pour faciliter l'inscription et l'utilisation répétée. J'explorerai Facebook, Google, Twitter et LinkedIn, les réseaux que je considère les plus appropriés pour les utilisateurs cibles de Meeting Planner..
Tout le code de Meeting Planner est écrit dans le framework Yii2 pour PHP. Si vous souhaitez en savoir plus sur Yii2, consultez notre série parallèle Programmation avec Yii2 chez Envato Tuts+.
Si vous n'avez pas encore essayé Meeting Planner, essayez de planifier votre première réunion maintenant. Il commence vraiment à se réunir cette année. En fin de compte, j'ai pu utiliser le support AuthClient intégré de Yii2 pour permettre la connexion à partir de tous les réseaux ci-dessus. Vous pouvez donc les utiliser pour vous inscrire maintenant..
Les commentaires sont les bienvenus. Si vous avez une question ou une suggestion de sujet, veuillez poster un commentaire ci-dessous. Vous pouvez également me joindre sur Twitter @reifman.
AuthClient est le support intégré de Yii pour que vos applications s'authentifient via des services tiers avec OpenID, OAuth ou OAuth2..
Si vous aviez suivi ma série Yii2 en juin 2015, vous m'auriez certainement vu utiliser AuthClient pour une intégration avec Google via OpenID, mais la société a cessé de prendre en charge la spécification peu de temps après. Puis, en décembre, j'ai écrit un didacticiel utilisant l'extension Yii2-User pour ajouter la prise en charge de Google OAuth. Le framework Yii2 ne l'avait pas encore. Cependant, Yii2-User ne s'intègre pas bien avec les bases de code établies qui ont déjà une base de code orientée utilisateur. Mais heureusement, le framework Yii2 avait depuis pris en charge Google OAuth et tout est devenu plus simple..
Dans ce didacticiel, je vais vous expliquer comment utiliser la nouvelle fonctionnalité AuthClient pour l'intégrer à divers réseaux sociaux populaires. Yii fournit immédiatement une assistance technique aux clients suivants:
Une autre motivation pour soutenir la connexion à Meeting Planner via les réseaux sociaux réside dans le fait qu’il permet aux personnes de se présenter et de partager facilement leur nom et leur adresse électronique avec nous. Avec l’enregistrement de courriels et de mots de passe, nous n’apprenons jamais leur nom. Cependant, contrairement aux autres réseaux sociaux, Twitter crée des obstacles importants à l'obtention des adresses électroniques des utilisateurs, ce qui m'a amené à le désactiver pour le moment..
Commençons avec l'intégration du code.
Premièrement, nous devons installer les composants Yii pour OAuth, le système AuthClient de Yii..
Ajoutons la bibliothèque AuthClient à composer.json:
"minimum-stabilité": "stable", "require": "php": "> = 5.4.0", "yiisoft / yii2": "*", "yiisoft / yii2-bootstrap": "* *", " yiisoft / yii2-swiftmailer ":" * "," 2 amis "," 2 "," 2 "," 2 "," 2 "," 2 "," 2 "," 2 "," stichoza / google-translate- php ":" ~ 2.0 "," 2 amigos/yii2-date-time-picker-widget ":" * "," yiisoft / yii2-jui ":" * "," cebe / yii2-gravatar ":" * ", "kartik-v / yii2-widget-fileinput": "*", "kartik-v / yii2-widget-switchinput": "*", "yiisoft / yii2-imagine": "*", "2 personnes" -manager-composant ":" 0.1. * "," yiisoft / yii2-authclient ":" ~ 2.0.0 ",
Ensuite, nous devons mettre à jour le compositeur:
sudo composer update Mot de passe: Chargement des référentiels du compositeur avec les informations sur le paquet. Mise à jour des dépendances (y compris require-dev) - Mise à jour de 2 amis (y compris) -authclient (2.0.2) Chargement à partir du cache Écriture d'un fichier de verrouillage Génération de fichiers à chargement automatique
Et nous devons ajouter les paramètres de configuration AuthClient à notre fichier de configuration dans \ frontend \ config \ main.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):
'composants' => ['authClientCollection' => ['class' => 'yii \ authclient \ Collection', 'clients' => ['facebook' => ['class' => 'yii \ authclient \ clients \ Facebook ',' clientId '=> $ config [' oauth_fb_id '],' clientSecret '=> $ config [' oauth_fb_secret '],],' google '=>' 'class' => 'yii \ authclient \ clients \ GoogleOAuth' , 'clientId' => $ config ['oauth_google_client_id'], 'clientSecret' => $ config ['oauth_google_client_secret'],], 'linkedin' = '' class '=>' yii \ authclient \ clients \ LinkedIn ', 'clientId' => $ config ['linkedin_client_id'], 'clientSecret' => $ config ['linkedin_client_secret'], 'twitter' => '' class '=>' yii \ authclient \ clients \ Twitter ',' consumerKey '=> $ config [' oauth_twitter_key '],' consumerSecret '=> $ config [' oauth_twitter_secret '],],],],
Pour obtenir les codes de toutes ces clés et secrets, vous devez enregistrer votre application auprès de chaque réseau social. Cela peut souvent prendre beaucoup de temps.
Suivez le processus en vous inscrivant sur certains des réseaux et sur certains aspects plus profonds de la configuration avec d'autres.
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):
Ces clés vont dans notre fichier mp.ini, qui est lu dans le $ config variable ci-dessus pour configurer AuthClient pour Twitter.
Ensuite, visitons la console de développement Facebook et Ajouter une nouvelle application:
Nous choisirons de créer un Site Web WWW application pour l'instant:
Indiquez le nom de notre application:
Et collectionne nos nouveaux ID de l'application:
Ils demandent toutes les informations habituelles, telles que les URL:
Et alors vous pouvez trouver notre Planificateur de réunion app dans la liste:
Voici le tableau de bord Facebook pour votre application:
Les API de Google sont un peu plus complexes que Twitter et Facebook, donc l'UX est un peu plus difficile à suivre. Mais en gros, une fois que vous créez une application, vous avez besoin des clés OAuth 2.0, que vous obtenez en ouvrant la zone de l'application sur l'écran des informations d'identification:
Cela vous amène ici:
Pour des raisons de sécurité, Google (et LinkedIn) exigent une liste complète des chemins et paramètres d'URL pouvant être utilisés au cours d'une séquence OAuth. Pendant le développement, cela peut nécessiter beaucoup d’ajustements, même pour les tests effectués par localhost..
Une fois que vous les avez entrés, vous les verrez énumérés ci-dessous:
Google fait un travail remarquable en vous aidant à configurer l'écran de consentement que vos utilisateurs verront lorsqu'ils tenteront de s'inscrire ou associeront leur compte Google à Meeting Planner:
LinkedIn est assez simple comparé à Google. Vous avez besoin des détails de base pour votre application:
Comme Google, ils nécessitent toutes les URL que vous utiliserez pour le développement et la production. Vous pouvez également obtenir les clés sur cette page:
Dans Protéger vos clés de GitHub, j'ai décrit en détail comment utiliser 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..
Nous plaçons les clés et les secrets de l'application Twitter et Facebook dans /var/secure/mp.ini en dehors du référentiel:
oauth_fb_id = "154xxxxxxxxxxxxxx33" oauth_fb_secret = "bcxxxxxxxxxxxxxxdda" oauth_twitter_key = "JCpxxxxxxxxxxxxxxnsF" oauth_twitter_secret = "f3xxxxxxxxxxxxxxxxxxxxxxxxxxxxu37" oauth_twitter_token = "153xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxfBj" oauth_twitter_token_secret = "Synxxxxxxxxxxxxxxxxxxxxxxxxxxxx4X" oauth_google_client_id = "1xxxxxxxxxxxxxxxxxxxxxxq.apps.googleusercontent.com" oauth_google_client_secret = "cfkxxxxxxxxxxxxxxox" linkedin_client_id = « 7xxxxxxxxxxxxxxq "linkedin_client_secret =" IxxxxxxxxxxxxxxxI "
Voici encore le code en \ frontend \ config \ main.php qui inclut ces paramètres et définit les variables de configuration individuelles:
'app-frontend', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'controllerNamespace' => 'frontend \ controllers', 'composants' => ['authClientCollection' => [ 'class' => 'yii \ authclient \ Collection', 'clients' => ['google' => ['class' => 'yii \ authclient \ clients \ GoogleOpenId'], 'facebook' => ['class' => 'yii \ authclient \ clients \ Facebook', 'clientId' => $ config ['oauth_fb_id'], 'clientSecret' => $ config ['oauth_fb_secret'],], 'twitter' => ['class' = > 'yii \ authclient \ clients \ Twitter', 'consumerKey' => $ config ['oauth_twitter_key'], 'consumerSecret' => $ config ['oauth_twitter_secret'],],],], 'urlManager' => [
Maintenant que nous sommes prêts à écrire du code pour intégrer l'inscription et la connexion sociales, nous avons besoin de la base de données pour créer un Auth table qui stockera le service social, son identifiant pour la personne et le identifiant d'utilisateur pour cette personne dans Meeting Planner:
./ yii migrate / create create_auth_table Outil de migration Yii (basé sur Yii v2.0.2) Créer une nouvelle migration '/Users/Jeff/Sites/mp/console/migrations/m150227_235635_create_auth_table.php'? (oui | non) [non]: oui Nouvelle migration créée avec succès.
Voici à quoi ressemble la migration:
Accentsconagua
db-> nomDuPort === 'mysql') $ tableOptions = 'CHARACTER SET utf8 COLLATE utf8_unicode_ci ENGINE = InnoDB'; $ this-> createTable ('% auth', ['id' => Schema :: TYPE_PK, 'ID_utilisateur' => Schema :: TYPE_BIGINT. 'NOT NULL', 'source' => Schema :: TYPE_STRING. 'NOT NULL', 'source_id' => Schéma :: TYPE_STRING. 'NOT NULL',], $ tableOptions); $ this-> addForeignKey ('fk-auth-user_id-user-id', '% auth', 'id_utilisateur', '% user', 'id', 'CASCADE', 'CASCADE '); fonction publique down () $ this-> dropForeignKey ('fk-auth-user_id-user-id', '% auth'); $ this-> dropTable ('% auth'); Voici le résultat lorsque nous l'exécutons:
./ yii migrate / up Yii Outil de migration (basé sur Yii v2.0.2) Total 1 nouvelle migration à appliquer: m150227_235635_create_auth_table Appliquer la migration ci-dessus? (yes | no) [no]: yes *** application de m150227_235635_create_auth_table> créer une table % auth… done (heure: 0.016s)> ajouter une clé étrangère fk-auth-utilisateur_id-utilisateur-id: % auth (id_utilisateur) références % user (id)… terminé (heure: 0.012s) *** appliqué m150227_235635_create_auth_table (heure: 0.033s) Migration réussie.
Une fois encore, j'ai utilisé le générateur de code de Yii, Gii, pour créer le modèle Auth:
En fin de compte, la table Auth contiendra le contenu suivant:
Le widget AuthChoice de Yii2 fait un excellent travail en implémentant les boutons de connexion pour chaque service que vous configurez. Et cela se fait dans l'ordre dans lequel vous configurez le tableau de services et de clés (pour pouvoir le changer).
C'est assez simple d'ajouter le widget à nos formulaires à login.php et signup.php:
Ou connectez-vous avec l'un des services suivants:
['site / auth', 'mode' => 'login'], 'popupMode' => false,])?>
Voici notre page d'inscription maintenant:
Pour les utilisateurs existants connectés, j'ai créé un moyen simple de lier leur compte. C'est appelé Lien des comptes sociaux sur la page des paramètres de profil:
Si vous cliquez LinkedIn, voici leur écran OAuth qui vous demandera de donner la permission à Meeting Planner:
Et voici l'écran pour Google:
Mais que se passe-t-il réellement lorsque l'utilisateur nous permet de partager les détails de son compte social? Passons en revue le code que j'ai écrit pour traiter les actions des utilisateurs.
le \ frontend \ controllers \ SiteController.php traite l'entrée auth action à la fonction onAuthSuccess:
/ ** * @inheritdoc * / actions de fonction publique () return ['error' => ['class' => 'yii \ web \ ErrorAction',], 'captcha' => ['class' => 'yii \ captcha \ CaptchaAction ',' fixedVerifyCode '=> YII_ENV_TEST? 'testme': null,], 'auth' => ['class' => 'yii \ authclient \ AuthAction', 'successCallback' => [$ this, 'onAuthSuccess'],],];
La plupart des bons clients OAuth fournissent des informations similaires dans un tableau de propriétés similaire, à l'exception de Twitter. Twitter a tardé à partager des adresses électroniques et, pour mon MVP, il ne vaudra pas la peine de le configurer pour le moment. Google et Facebook sont tellement plus répandus.
Tout d'abord, je collecte les détails du service et collecte autant de données personnelles que possible: courrier électronique, noms et prénoms, nom complet, et plus particulièrement l'ID externe de cet utilisateur sur ce réseau social:
fonction publique onAuthSuccess ($ client) $ mode = Yii :: $ app-> getRequest () -> getQueryParam ('mode'); $ attributs = $ client-> getUserAttributes (); $ serviceId = $ attributs ['id']; $ serviceProvider = $ client-> getId (); $ serviceTitle = $ client-> getTitle (); $ firstname = "; $ lastname ="; $ nom complet = "; commutateur ($ serviceProvider) cas 'facebook': $ username = $ email = $ attributs ['email']; $ nom complet = $ attributs ['nom']; casse 'cas; google': $ email = $ attributs ['emails'] [0] ['valeur']; if (isset ($ attributs ['displayName'])) $ fullname = $ username = $ attributs ['displayName']; if (isset ( $ attributs ['nom'] ['nom_famille']) et isset ($ attributs ['nom'] ['nom complet'])) $ dernier nom = $ attributs ['nom'] ['nom_famille']; $ prénoms = $ attributs ['nom'] ['nomDonné']; casse; 'page' ': $ username = $ email = $ attributs [' adresse email ']; $ dernier nom = $ attributs [' premier-nom ']; $ prenom = $ attributs ['nom de famille']; $ nom complet = $ prénom. ". $ dernier nom; Pause; cas 'twitter': $ username = $ attributs ['nom_écran']; $ nom complet = $ attributs ['nom']; // à faire - réparer les assistants sociaux $ email = $serviceId.'@twitter.com '; Pause; // à faire - diviser les noms en premier et dernier avec l'analyseur $ auth = Auth :: find () -> où (['source' => (chaîne) $ serviceProvider, 'source_id' => (chaîne) $ serviceId, ]) -> un (); Dans les dernières lignes de code ci-dessus, nous recherchons dans le Auth table pour l'ID externe de la personne. S'ils n'existent pas, ils sont nouveaux dans Meeting Planner. S'ils existent, alors nous les reconnaissons.
De même, nous devons vérifier si leur adresse électronique existe déjà, car il est possible que la personne possédant cette adresse électronique ait déjà été enregistrée dans Meeting Planner..
Lorsqu'il n'y a pas d'utilisateur authentifié actuel sur MeetingPlanner.io, le code ci-dessous examine les données de l'utilisateur entrant..
Si l'ID externe est déjà dans notre table Auth, nous les connectons. C'était facile (pour eux)!
Si nous ne reconnaissons pas l'identifiant mais que nous avons déjà enregistré l'adresse e-mail, nous leur demandons de se connecter via un nom d'utilisateur et un mot de passe, puis de lier leur compte..
if (Yii :: $ app-> user-> isGuest) if ($ auth) // si l'ID utilisateur associé à cet identifiant de connexion oauth est enregistré, essayez de les connecter à $ user_id = $ auth-> utilisateur_id; $ person = new \ common \ models \ User; $ identity = $ person-> findIdentity ($ user_id); Yii :: $ app-> user-> login ($ identity); else // c'est un nouvel identifiant oauth // vérifie d'abord si nous connaissons l'adresse e-mail if (isset ($ email) && Utilisateur :: find () -> Où (['email' => $ email]) -> existe ()) // l'email est déjà enregistré, demandez à la personne de lier les comptes après la connexion à Yii :: $ app-> getSession () -> setFlash ('error', [Yii :: t ('frontend', ' L'e-mail de ce compte client est déjà enregistré. Veuillez vous connecter en utilisant d'abord votre nom d'utilisateur et votre mot de passe, puis créez un lien vers ce compte dans les paramètres de votre profil. ", ['Client' => $ serviceTitle]),]); $ this-> redirect (['login']); else if ($ mode == 'login') // ils essayaient de se connecter avec un compte non connecté - demandez-leur de se connecter normalement et de se lier après Yii :: $ app-> getSession () -> setFlash ('error ', [Yii :: t (' frontend ', "Nous ne reconnaissons pas l'utilisateur avec cet email de client. Si vous souhaitez vous inscrire, essayez à nouveau ci-dessous. Si vous souhaitez associer un client à votre réunion Compte de planificateur, identifiez-vous d'abord avec votre nom d'utilisateur et votre mot de passe. Ensuite, accédez aux paramètres de votre profil. ", ['Client' => $ serviceTitle]),]); $ this-> redirect (['inscription']); 
Ensuite, s'ils ont démarré sur la page de connexion lorsqu'ils ont cliqué sur le bouton de compte social et que nous ne reconnaissons pas l'ID externe ou l'adresse de messagerie, nous les redirigeons vers la page d'inscription et leur demandons de réessayer, à partir de la page d'inscription..
S'ils ont un lien depuis la page d'inscription, nous nous assurons que le nouvel utilisateur ne risque pas un nom d'utilisateur en double (d'un utilisateur de Meeting Planner préexistant). Dans ce scénario, nous étendons simplement le nom d'utilisateur avec une chaîne aléatoire pour l'instant. Et nous les enregistrons en tant que nouvel utilisateur dans Meeting Planner avec un mot de passe (dont ils n'ont pas vraiment besoin)..
else if ($ mode == 'inscrivez-vous') // créez un nouveau compte en utilisant oauth // cherchez un nom d'utilisateur déjà existant et différenciez-le si (isset ($ username) && User :: find () -> where ( ['username' => $ username]) -> existe ()) $ username. = Yii :: $ app-> security-> generateRandomString (6); $ password = Yii :: $ app-> security-> generateRandomString (12); $ user = nouvel utilisateur (['username' => $ username, // $ attributs ['login'], 'email' => $ email, 'password' => $ password, 'status' => Utilisateur :: STATUS_ACTIVE ,]); $ user-> generateAuthKey (); $ user-> generatePasswordResetToken (); $ transaction = $ user-> getDb () -> beginTransaction (); if ($ user-> save ()) $ auth = new Auth (['user_id' => $ user-> id, 'source' => $ serviceProvider, // $ client-> getId (), 'id_source' => $ serviceId, // (chaîne) $ attributs ['id'],]); if ($ auth-> save ()) $ transaction-> commit (); Yii :: $ app-> user-> login ($ user); else print_r ($ auth-> getErrors ()); else print_r ($ user-> getErrors ()); // fin de l'inscription
Dans les étapes finales ci-dessus, nous ajoutons les détails de leur compte social externe au Authtableau pour la reconnaissance future.
S'ils proviennent de l'onglet Lier les comptes sociaux de la page de profil de l'utilisateur (au lieu de notre page de connexion ou d'inscription), il nous suffit d'ajouter les détails de leur compte externe à Auth, et déplacez leur login vers Utilisateur :: STATUS_ACTIVE. (N'oubliez pas que les utilisateurs qui arrivent de liens d'invitation de Meeting Planner mais qui ne se sont jamais enregistrés ont un Utilisateur :: STATUS_PASSIVE mode.)
else // utilisateur déjà connecté, liez les comptes si (! $ auth) // ajoutez le fournisseur d'authentification $ auth = new Auth (['user_id' => Yii :: $ app-> user-> id, ' source '=> $ serviceProvider,' source_id '=> $ serviceId,]); $ auth-> validate (); $ auth-> save (); $ u = User :: findOne (Yii :: $ app-> user-> id); $ u-> status = User :: STATUS_ACTIVE; $ u-> update (); Yii :: $ app-> session-> setFlash ('success', Yii :: t ('frontend', 'Votre compte serviceProvider a été connecté à votre compte Meeting Planner. À l'avenir, vous pourrez vous connecter avec un seul cliquez sur son logo. ', array (' serviceProvider '=> $ serviceTitle))); Voici à quoi cela ressemble (à l'avenir, je vais compléter les informations de nommage à partir des informations OAuth - ce n'est pas encore terminé):
Je dois admettre que l’impact des connexions OAuth fonctionnelles aux principaux services tels que Google, Facebook et LinkedIn est assez dramatique. Cela simplifie l'inscription et l'utilisation régulière de Meeting Planner et accélère l'authentification future. C'est vraiment un peu incroyable.
Meeting Planner s'est vraiment réuni ces deux derniers mois. S'il vous plaît essayer le login et l'enregistrement social maintenant! Surveillez les prochains tutoriels dans notre rubrique Construire votre démarrage avec la série PHP. De nombreuses fonctionnalités amusantes vous attendent alors que le produit se dirige vers MVP..
Je commence également à expérimenter WeFunder à partir de la mise en œuvre des nouvelles règles de la SEC en matière de financement participatif. S'il vous plaît envisager de suivre notre profil. Je peux écrire à ce sujet plus dans le cadre de notre série.
N'hésitez pas à ajouter vos questions et commentaires ci-dessous; Je participe généralement aux discussions. Vous pouvez également me joindre sur Twitter @reifman. Je me félicite des demandes de fonctionnalités et de sujets.
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..
