Share
Wat je gaat creërenDeze tutorial maakt deel uit van de Build Your Startup With PHP-serie op Envato Tuts +. In deze serie begeleid ik je door een opstart van concept naar realiteit te starten met behulp van mijn Meeting Planner-app als een realistisch voorbeeld. Elke stap die ik doe, zal ik de Meeting Planner-code vrijgeven als open-source voorbeelden waar je van kunt leren. Ik zal ook opstartgerelateerde zakelijke problemen aanpakken zodra deze zich voordoen.
In deze zelfstudie begeleid ik u bij het implementeren van OAuth-integratie met algemene sociale netwerken om het aanmelden en herhaald gebruik eenvoudiger en efficiënter te maken. Ik zal Facebook, Google, Twitter en LinkedIn verkennen, de netwerken die volgens mij het meest geschikt zijn voor de doelgebruikers van Meeting Planner.
Alle code voor Meeting Planner is geschreven in het Yii2 Framework voor PHP. Als je meer wilt weten over Yii2, bekijk dan onze parallelle serie Programming With Yii2 bij Envato Tuts+.
Als je Meeting Planner nog niet hebt uitgeprobeerd, probeer dan nu je eerste vergadering te plannen. Het begint echt dit jaar samen te komen. Uiteindelijk was ik in staat de ingebouwde AuthClient-ondersteuning van Yii2 te gebruiken om in te loggen bij alle bovenstaande netwerken, zodat je deze kunt gebruiken om je nu te registreren.
Feedback is welkom. Als je een vraag of een suggestie voor een onderwerp hebt, plaats dan een commentaar hieronder. Je kunt me ook bereiken via Twitter @reifman.
AuthClient is Yii's ingebouwde ondersteuning voor uw applicaties om te authenticeren via services van derden met OpenID, OAuth of OAuth2.
Als je mijn Yii2-serie in juni 2015 had gevolgd, had je me gezien dat ik AuthClient gebruikte om te integreren met Google via OpenID, maar het bedrijf stopte zijn ondersteuning voor de specificatie kort daarna. Toen, in december, schreef ik een tutorial waarin de Yii2-User-extensie werd gebruikt om Google OAuth-ondersteuning toe te voegen - het Yii2 Framework had dit nog niet. Yii2-User integreert echter niet goed met gevestigde codebases die al een gebruikersgeoriënteerde codebase hebben. Maar gelukkig had het Yii2 Framework sindsdien ondersteuning voor Google OAuth toegevoegd, en alles is eenvoudiger geworden.
In deze zelfstudie zal ik je helpen met het gebruik van de nieuwe AuthClient-functionaliteit om te integreren met een aantal populaire sociale netwerken. Out of the box, Yii biedt ondersteuning voor de volgende clients:
Een andere motivatie voor het ondersteunen van verbinding met Meeting Planner via sociale netwerken is dat het mensen in staat stelt om op te komen en hun naam en e-mail gemakkelijk met ons te delen. Met e-mail- en wachtwoordregistratie leren we nooit hun naam. Twitter maakt echter, in tegenstelling tot andere sociale netwerken, aanzienlijk problematische hindernissen voor het verkrijgen van e-mailadressen van gebruikers, waardoor ik het uiteindelijk voor nu uitschakelde.
Laten we beginnen met de code-integratie.
Ten eerste moeten we de Yii-componenten installeren voor OAuth, Yii's AuthClient.
Laten we de AuthClient-bibliotheek toevoegen aan composer.json:
"minimum-stability": "stable", "require": "php": "> = 5.4.0", "yiisoft / yii2": "*", "yiisoft / yii2-bootstrap": "*", " yiisoft / yii2-swiftmailer ":" * "," 2 amigos/yii2-google-maps-library ":" * "," 2 amigos/yii2-google-places-library ":" * "," 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 amigos/yii2-resource -manager-component ":" 0.1. * "," yiisoft / yii2-authclient ":" ~ 2.0.0 ",
Vervolgens moeten we de componist bijwerken:
sudo composer update Wachtwoord: Plaatsen van composer-repositories met pakketinformatie Bijwerken van afhankelijkheden (inclusief require-dev) - Updating 2 amigos/yii2-date-time-picker-widget (0.1.0 => 0.1.1) Uitchecken 572e2448ba1cd207b339dd5d117e3d1d23f0bbc3 - Installeren van yiisoft / yii2 -authclient (2.0.2) Laden vanuit cache Schrijvingsslotbestand Autoload-bestanden genereren
En we moeten de AuthClient-configuratie-instellingen toevoegen aan ons configuratiebestand in \ Frontend \ config \ main.php.
Voeg array-elementen toe voor alle services van derden die u wilt ondersteunen (details hierover zijn te vinden in de AuthClient-gids):
'components' => ['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 '],],],],
Om codes voor al die sleutels en geheimen te verkrijgen, moet u uw aanvraag bij elk sociaal netwerk registreren. Dit kan vaak tijdrovend zijn.
Volg me terwijl ik je doorloop bij het aanmelden bij sommige van de netwerken en een aantal van de diepere configuratieaspecten met anderen.
Maak een nieuwe Twitter-applicatie op het Twitter Application Dashboard:
Klik Maak een nieuwe app-Ik vond dat de callback-URL niet nodig was, maar voor nu heb ik de placeholder http://mydomain.com/user/security/auth gebruikt.
Dit is de nieuwe pagina voor onze applicatie:
Hier is de instellingen pagina:
Hier is de Sleutels en toegangstokens pagina. Hier moeten we het kopiëren Consumer Key (API Key) en Consumer Secret (API Secret):
Die sleutels gaan in ons mp.ini-bestand, dat wordt ingelezen in de $ config variabele hierboven om AuthClient voor Twitter te configureren.
Laten we vervolgens de Facebook-ontwikkelaarsconsole en bezoeken Voeg een nieuwe app toe:
We zullen ervoor kiezen om een te maken WWW Website app voor nu:
Geef de naam van onze applicatie op:
En verzamel ons nieuw App-ID:
Ze vragen om alle reguliere informatie, zoals URL's:
En dan kun je onze vinden Meeting Planner app in de lijst:
Hier is het Facebook-dashboard voor uw toepassing:
Google API's zijn iets complexer dan Twitter en Facebook, dus de UX is een beetje moeilijker te volgen. Maar eigenlijk, als je eenmaal een applicatie hebt gemaakt, heb je OAuth 2.0-sleutels nodig, die je krijgt door het toepassingsgebied op het inlogscherm te openen:
Dat brengt je hier:
Om veiligheidsredenen heeft Google (en LinkedIn) een volledige lijst nodig met precies welke URL-paden en parameters kunnen worden gebruikt tijdens een OAuth-reeks. Tijdens de ontwikkeling kan dit veel aanpassingen vereisen, zelfs voor testen van localhost.
Nadat u ze heeft ingevoerd, ziet u ze hieronder staan:
Google helpt u graag bij het configureren van het toestemmingsscherm dat uw gebruikers te zien krijgen wanneer zij zich aanmelden of hun Google-account koppelen aan Meeting Planner:
LinkedIn is vrij eenvoudig vergeleken met Google. U hebt de basisgegevens voor uw toepassing nodig:
Net als Google hebben ze alle URL's nodig die u in ontwikkeling en productie zult gebruiken. U kunt ook de sleutels op deze pagina verkrijgen:
Bij het beschermen van uw sleutels van GitHub beschreef ik in detail hoe ik een configuratiebestand gebruik om mijn sleutels apart van mijn GitHub-repository op te slaan. Vervolgens neem ik dit bestand op aan het begin van mijn Yii-configuratiebestanden. Dit weerhoudt me ervan om per ongeluk mijn sleutels in mijn repository in te checken en mijn accounts in gevaar te brengen.
We plaatsen zowel de sleutels als de geheimen van Twitter en Facebook in /var/secure/mp.ini buiten de repository:
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 =" IxxxxxxxxxxxxxxI "
Hier is weer de code in \ Frontend \ config \ main.php welke deze instellingen bevat en de individuele configuratievariabelen instelt:
'app-frontend', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['log'], 'controllerNamespace' => 'frontend \ controllers', 'components' => ['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' => [
Nu we klaar zijn om code te schrijven om sociale aanmelding en aanmelding te integreren, hebben we de database nodig om een Auth tabel met de sociale dienst, zijn ID voor de persoon en de gebruikersnaam voor die persoon in Meeting Planner:
./ yii migreren / create create_auth_table Yii Migration Tool (gebaseerd op Yii v2.0.2) Maak nieuwe migratie '/Users/Jeff/Sites/mp/console/migrations/m150227_235635_create_auth_table.php'? (ja | nee) [nee]: ja Nieuwe migratie is succesvol gemaakt.
Dit is hoe de migratie eruit ziet:
Accentsconagua
db-> driverName === 'mysql') $ tableOptions = 'KARAKTER SET utf8 COLLATE utf8_unicode_ci ENGINE = InnoDB'; $ this-> createTable ('% auth', ['id' => Schema :: TYPE_PK, 'user_id' => Schema :: TYPE_BIGINT. 'NOT NULL', 'source' => Schema :: TYPE_STRING. 'NOT NULL', 'source_id' => Schema :: TYPE_STRING. 'NOT NULL',], $ tableOptions); $ this-> addForeignKey ('fk-auth-user_id-user-id', '% auth', user_id ',' % user ',' id ',' CASCADE ',' CASCADE '); public function down () $ this-> dropForeignKey ('fk-auth-user_id-user-id', '% auth'); $ This-> dropTable ( '% auth'); Dit is het resultaat wanneer we het uitvoeren:
./ yii migreren / omhoog Yii Migration Tool (gebaseerd op Yii v2.0.2) Totaal 1 nieuwe migratie die moet worden toegepast: m150227_235635_create_auth_table Pas de bovenstaande migratie toe? (yes | no) [nee]: yes *** apply m150227_235635_create_auth_table> create table % auth ... done (time: 0.016s)> voeg buitenlandse sleutel toe fk-auth-user_id-user-id: % auth (user_id) references % user (id) ... done (time: 0.012s) *** applied m150227_235635_create_auth_table (time: 0.033s) Migratie succesvol uitgevoerd.
Nogmaals, ik gebruikte Yii's codegenerator Gii om het Auth-model te maken:
Uiteindelijk bevat de Auth-tabel inhoud zoals deze:
De AuthChoice-widget van Yii2 werkt uitstekend bij het implementeren van de aanmeldknoppen voor elke service die u configureert. En het doet dit in de volgorde waarin u de reeks services en sleutels hebt ingesteld (zodat u deze kunt wijzigen).
Het is vrij eenvoudig om de widget aan onze formulieren toe te voegen via login.php en signup.php:
Of log in met een van de volgende services:
['site / auth', 'mode' => 'login'], 'popupMode' => false,])?>
Hier is onze aanmeldingspagina nu:
Voor bestaande gebruikers die zijn aangemeld, heb ik een eenvoudige manier gemaakt om hun account te koppelen. Het heet Sociale accounts koppelen op de pagina met profielinstellingen:
Als u klikt LinkedIn, hier is hun OAuth-scherm dat u zal vragen toestemming te geven aan Meeting Planner:
En hier is het scherm voor Google:
Maar wat gebeurt er echt als de gebruiker ons toestaat om zijn sociale accountgegevens te delen? Laten we de code doorlopen die ik heb geschreven om de acties van de gebruikers te verwerken.
De \ Frontend \ controllers \ SiteController.php verwerkt de inkomende auth actie voor de functie onAuthSuccess:
/ ** * @inheritdoc * / public function actions () 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'],],];
De meeste goede OAuth-clients bieden vergelijkbare informatie in een vergelijkbare propertyarray, behalve Twitter. Twitter was te laat met het spel van het delen van e-mailadressen en voor mijn MVP zal het extra werk het niet waard zijn om het nu te configureren. Google en Facebook komen zo veel vaker voor.
Ten eerste verzamel ik de servicegegevens en verzamel ik zoveel mogelijk persoonlijke gegevens: e-mail, voor- en achternaam, volledige naam en vooral de externe ID van die gebruiker op dat sociale netwerk:
openbare functie onAuthSuccess ($ client) $ mode = Yii :: $ app-> getRequest () -> getQueryParam ('mode'); $ attributes = $ client-> getUserAttributes (); $ serviceId = $ attributen ['id']; $ serviceProvider = $ client-> getId (); $ serviceTitle = $ client-> getTitle (); $ firstname = "; $ lastname ="; $ fullname = "; switch ($ serviceProvider) case 'facebook': $ username = $ email = $ attributes ['email']; $ fullname = $ attributes ['name']; break; case 'google': $ email = $ attributen ['e-mails'] [0] ['waarde']; if (isset ($ attributes ['displayName'])) $ fullname = $ username = $ attributes ['displayName']; if (isset ( $ attributen ['naam'] ['familyName']) en isset ($ attributen ['name'] ['givenName'])) $ lastname = $ attributes ['name'] ['familyName']; $ firstname = $ attributes ['name'] ['givenName']; break; case 'linkedin': $ username = $ email = $ attributes ['email-address']; $ lastname = $ attributes ['voornaam']; $ voornaam = $ attributen ['achternaam']; $ fullname = $ voornaam. ". $ achternaam; breken; case 'twitter': $ gebruikersnaam = $ attributen ['screen_name']; $ fullname = $ attributen ['naam']; // to do - fix social helpers $ email = $serviceId.'@twitter.com '; breken; // to do - splits namen in eerste en laatste met parser $ auth = Auth :: find () -> where (['source' => (string) $ serviceProvider, 'source_id' => (string) $ serviceId, ]) -> on (); In de laatste regels code hierboven, zoeken we in de Auth tabel voor de externe ID van de persoon. Als ze niet bestaan, zijn ze nieuw voor Meeting Planner. Als ze bestaan, herkennen we ze.
Evenzo moeten we controleren of hun e-mailadres al bestaat, omdat het mogelijk is dat de persoon met dat e-mailadres eerder is geregistreerd bij Meeting Planner.
Wanneer er geen huidige geverifieerde gebruiker op MeetingPlanner.io is, kijkt de onderstaande code naar de binnenkomende gebruikersgegevens.
Als de externe ID al in onze Auth-tabel staat, loggen we ze in. Dat was gemakkelijk (voor hen)!
Als we de ID niet herkennen, maar we hebben het e-mailadres al geregistreerd, vragen we hen om in te loggen via gebruikersnaam en wachtwoord en vervolgens hun account te koppelen.
if (Yii :: $ app-> user-> isGuest) if ($ auth) // als de user_id geassocieerd met deze oauth-login geregistreerd is, probeer deze dan in te loggen $ user_id = $ auth-> user_id; $ person = new \ common \ models \ User; $ identity = $ person-> findIdentity ($ user_id); Yii :: $ app-> gebruiksvriendelijkheid> login ($ identiteit); else // het is een nieuwe oauth-id // controleer eerst of we het e-mailadres weten als (isset ($ email) && User :: find () -> where (['email' => $ email]) -> bestaat ()) // de e-mail is al geregistreerd, vraag persoon om accounts te linken na het inloggen in Yii :: $ app-> getSession () -> setFlash ('error', [Yii :: t ('frontend', " De e-mail in dit client -account is al geregistreerd. Meld u eerst aan met uw gebruikersnaam en wachtwoord en link vervolgens naar dit account in uw profielinstellingen. ", ['Client' => $ serviceTitel]),]); $ This-> redirect ([ 'login']); else if ($ mode == 'login') // ze probeerden in te loggen met een niet-verbonden account - vraag hen om normaal in te loggen en te linken na Yii :: $ app-> getSession () -> setFlash ('error ', [Yii :: t (' frontend ',' We herkennen de gebruiker niet met deze e-mail van client. Als u zich wilt aanmelden, probeert u het hieronder opnieuw. Als u client wilt koppelen aan uw vergadering Planner-account, log eerst in met uw gebruikersnaam en wachtwoord en bezoek vervolgens uw profielinstellingen. ", ['Client' => $ serviceTitel]),]); $ This-> redirect ([ 'aanmelden']); 
Als ze vervolgens op de inlogpagina zijn begonnen toen ze op de knop voor het sociale account klikten en we de externe ID of het e-mailadres niet herkennen, leiden we ze door naar de aanmeldingspagina en vragen ze het opnieuw te proberen: vanaf de registratiepagina.
Als ze zijn gelinkt vanaf de aanmeldingspagina, we zorgen ervoor dat de nieuwe gebruiker geen dubbele gebruikersnaam riskeert (van een reeds bestaande Meeting Planner-gebruiker). In dit scenario breiden we de gebruikersnaam nu uit met een willekeurige reeks. En we registreren ze als een nieuwe gebruiker bij Meeting Planner met een wachtwoord (wat ze niet echt nodig hebben).
else if ($ mode == 'signup') // registreer een nieuwe account met oauth // zoek naar gebruikersnaam die al bestaat en onderscheid deze als (isset ($ username) && User :: find () -> where ( ['gebruikersnaam' => $ gebruikersnaam]) -> bestaat ()) $ gebruikersnaam. = Yii :: $ app-> beveiliging-> generateRandomString (6); $ wachtwoord = Yii :: $ app-> beveiliging-> generateRandomString (12); $ user = nieuwe gebruiker (['gebruikersnaam' => $ gebruikersnaam, // $ attributen ['login'], 'email' => $ email, 'wachtwoord' => $ wachtwoord, 'status' => gebruiker :: STATUS_ACTIEF ,]); $ Gebruiksvriendelijkheid> generateAuthKey (); $ Gebruiksvriendelijkheid> generatePasswordResetToken (); $ transactie = $ gebruiker-> getDb () -> beginTransactie (); if ($ user-> save ()) $ auth = new Auth (['user_id' => $ user-> id, 'source' => $ serviceProvider, // $ client-> getId (), 'source_id' => $ serviceId, // (string) $ attributen ['id'],]); if ($ auth-> save ()) $ transaction-> commit (); Yii :: $ app-> gebruiksvriendelijkheid> login ($ user); else print_r ($ auth-> getErrors ()); else print_r ($ user-> getErrors ()); // ondertekening beëindigen
In de laatste stappen hierboven voegen we hun externe sociale accountgegevens toe aan de Authtabel voor toekomstige herkenning.
Als ze afkomstig zijn van het tabblad Sociale links koppelen op de pagina met gebruikersprofielen (in plaats van onze login- of aanmeldingspagina), dan moeten we gewoon hun externe accountgegevens toevoegen aan Auth, en verplaats hun login naar Gebruikers :: STATUS_ACTIVE. (Vergeet niet dat gebruikers die afkomstig zijn van uitnodigingslinks op de Meeting Planner, maar nooit zijn geregistreerd, een Gebruikers :: STATUS_PASSIVE stand).
else // gebruiker al ingelogd, link de accounts if (! $ auth) // add auth provider $ auth = new Auth (['user_id' => Yii :: $ app-> user-> id, ' source '=> $ serviceProvider,' source_id '=> $ serviceId,]); $ Autoritei-> validate (); $ Autoritei-> save (); $ u = Gebruiker: findOne (Yii :: $ app-> user-> id); $ u-> status = Gebruiker :: STATUS_ACTIEF; $ U-> update (); Yii :: $ app-> sessie-> setFlash ('succes', Yii :: t ('frontend', 'Uw account serviceProvider is verbonden met uw Meeting Planner-account. In de toekomst kunt u zich aanmelden met een enkele account klik op het logo. ', array (' serviceProvider '=> $ serviceTitle))); Dit is hoe dat eruit ziet (in de toekomst zal ik de naaminformatie van de OAuth-informatie invullen - het is nog niet gedaan):
Ik moet toegeven dat de impact van werkende OAuth-verbindingen met belangrijke diensten zoals Google, Facebook en LinkedIn behoorlijk dramatisch is. Het maakt het aanmelden en het regelmatig gebruiken van Meeting Planner zo eenvoudig en versnelt toekomstige authenticatie. Het is echt ongelooflijk.
Meeting Planner is de afgelopen maanden echt samen gekomen. Probeer nu de sociale login en registratie! Bekijk de komende tutorials in onze Building Your Startup With PHP-serie - er komen veel leuke functies aan terwijl het product op weg is naar MVP.
Ik begin ook te experimenteren met WeFunder op basis van de implementatie van de nieuwe crowdfundingregels van de SEC. Overweeg om ons profiel te volgen. Ik kan hierover meer schrijven als onderdeel van onze serie.
Aarzel niet om uw vragen en opmerkingen hieronder toe te voegen; Ik neem over het algemeen deel aan de discussies. Je kunt me ook bereiken via Twitter @reifman. Ik verwelkom aanvragen voor functies en onderwerpen.
Als je wilt weten wanneer de volgende Yii2-handleiding aankomt, volg me dan @reifman op Twitter of bekijk mijn instructeurspagina. Op mijn instructeurspagina staan alle artikelen uit deze serie zodra ze zijn gepubliceerd.
