上一篇寫了一點點Yii2的數據庫相關知識和強大的Gii,這一篇就如上一篇的最后所說的一樣:在Yii2中實現用戶的注冊和登錄。
你可以直接到Github下載源碼,以便可以跟上進度,你也可以重頭開始,一步一步按照這個教程來做。本期的用戶注冊和登錄,我會使用一個很棒的composer package :dektrium/yii2-user,下面就開始我們的故事吧。
用戶的注冊和登錄
在現在的Web應用中,幾乎每一個應用都會需要用戶注冊,不管是使用的第三方還是自建的注冊登錄系統,我們都需要通過某些表單來收集一些必要的用戶數據。這些功能在Yii2之中實現起來並不難,而且有很多種方法,好像很多方法都是比較直接,簡單粗暴。這可能是很多人喜歡Yii的原因,就像很多人喜歡PHP一樣,就是簡單粗暴!
其實在Yii2中,它本身就自帶了一個登錄的實現:
但是我們重復去制造這個輪子是因為我們需要一些更加實用性的改善,比如:在注冊的時候,發送驗證郵箱。這幾乎是每一個Web應用在注冊的時候都會考慮的內容。
如果你安裝的是Yii2 Advanced Application Template,那么Yii2其實就把這些功能都寫好了,而且你還會有一個后台管理的模塊。但是我們的教程是基於Yii2's Basic Application Template
,而且我提倡大家來動手造一下這個輪子。
帶上我們的作案工具,我們要來造輪子了。
安裝Yii2-User
我們這里的Yii2-User
安裝步驟參照Yii2-User
的官方安裝文檔。我們直接使用composer來進行安裝:
composer require "dektrium/yii2-user:0.9.*@dev"
稍微等待一下,安裝完畢之后就可以進行對應的配置了,我們需要配置的文件是config/web.php
,找到components
,然后在與它同級的位置增加一個modules
:
'components' => [ // other settings... ], 'modules' => [ 'user' => [ 'class' => 'dektrium\user\Module', 'confirmWithin' => 21600, 'cost' => 12, 'admins' => ['admin'] ], ],
這里還需要將
components
下面的user
部分注釋掉,不然就會一直登錄不了:
/* 'user' => [ 'identityClass' => 'app\models\User', 'enableAutoLogin' => true, ],*/
還有最后一步就是執行Yii2-User的migration
了,在helloYii/
目錄下執行:
php yii migrate/up --migrationPath=@vendor/dektrium/yii2-user/migrations
然后你會看到:
果斷yes
Bang,到這里Yii2-User安裝和配置已經完成了。
配置SwiftMailer
安裝完Yii2-User之后我們先不急着去想怎么實現登錄和注冊(其實很是比較簡單的),我們之前說過的目標是實現用戶在注冊時候發送驗證郵件的,這里我們先來配置一下我們的郵箱服務,因為Yii2-User可以直接使用郵箱來進行注冊驗證和密碼找回等功能。在config/web.php
找到mailer
這個部分:
'mailer' => [ 'class' => 'yii\swiftmailer\Mailer', // send all mails to a file by default. You have to set // 'useFileTransport' to false and configure a transport // for the mailer to send real emails. 'useFileTransport' => true, ],
修改成我們下面的這個樣子:
'mailer' => [ 'class' => 'yii\swiftmailer\Mailer', 'viewPath' => '@app/mailer', 'useFileTransport' => false, 'transport' => [ 'class' => 'Swift_SmtpTransport', 'host' => 'smtp.live.com', 'username' => 'jellybool@outlook.com', 'password' => 'your-password', 'port' => '587', 'encryption' => 'tls', ], ],
這里由於我經常使用的是outlook
,不要覺得我是奇葩。所以我在這里使用的是outlook
的SMTP配置,各位可以根據自己的需要來進行相應的修改。
開始使用Yii2-User
郵箱配置好了之后,我們就可以開始使用Yii2-User了,首先我們來修改一下我們的導航欄,因為我們想實現的就是我們常常看到的在導航欄的右側的注冊和登錄按鈕。在/views/layouts/main.php
找到:
echo Nav::widget([ 'options' => ['class' => 'navbar-nav navbar-right'], 'items' => [ ['label' => 'Home', 'url' => ['/site/index']], [ 'label' => 'Status', 'items' => [ ['label' => 'View', 'url' => ['/status/index']], ['label' => 'Create', 'url' => ['/status/create']], ], ], ['label' => 'About', 'url' => ['/site/about']], ['label' => 'Contact', 'url' => ['/site/contact']], Yii::$app->user->isGuest ? ['label' => 'Login', 'url' => ['/site/login']] : ['label' => 'Logout (' . Yii::$app->user->identity->username . ')', 'url' => ['/site/logout'], 'linkOptions' => ['data-method' => 'post']], ], ]);
上面的啟示就是我們在上一篇文章修改過后的導航欄的代碼,然后用下面的代碼進行替換:
$navItems=[ ['label' => 'Home', 'url' => ['/site/index']], ['label' => 'Status', 'url' => ['/status/index']], ['label' => 'About', 'url' => ['/site/about']], ['label' => 'Contact', 'url' => ['/site/contact']] ]; if (Yii::$app->user->isGuest) { array_push($navItems,['label' => 'Sign In', 'url' => ['/user/login']],['label' => 'Sign Up', 'url' => ['/user/register']]); } else { array_push($navItems,['label' => 'Logout (' . Yii::$app->user->identity->username . ')', 'url' => ['/site/logout'], 'linkOptions' => ['data-method' => 'post']] ); } echo Nav::widget([ 'options' => ['class' => 'navbar-nav navbar-right'], 'items' => $navItems, ]);
修改完成之后,我們直接訪問:http://localhost:8999/user/register
,你將會看到下面的類似頁面:
有沒有覺得很神奇?沒錯Yii2-User幫我們都全部寫好了!然后我們輸入相應的信息點擊注冊,之后就會看到這個信息提示頁面:
提示新說表明驗證郵箱已經發送,我們登錄qq郵箱去看看,果然:
看到這個,相信大家都會很開心,有圖有真相。直接點擊郵件的驗證鏈接,然后就會看到Yii2-User給我們反饋的驗證成功的信息:
注意右上角,這個時候我們已經登錄到應用了,如果點擊Logout就會回到登錄頁面:
到這里,注冊登錄整個流程就實現完了,不過還有一個我們日常開發經常遇到的情況:忘記密碼。嗯,對於這個情況,Yii2-User直接就提供了這個功能!你可以直接訪問:http://localhost:8999/user/forgot
就可以看到了:
嗯,就這樣,很簡單吧。借助Yii2-User這個強大的composer package
,我們可以輕松實現用戶注冊,登錄和忘記密碼等各個功能。當然,Yii2-User還有很多特性,我們這里只是用到了很小一部分,你可以直接到文檔中查看:
https://github.com/dektrium/yii2-user/blob/master/docs/README.md
最后希望這一篇文章可以幫你解決一些問題。下一步我肯能會說一下用戶權限控制和管理,因為這里實現的用戶注冊,所以下一篇顯得是自然而然的。
源碼會放在 Github:https://github.com/JellyBool/helloYii