Yii2系列教程四：實現用戶注冊，驗證，登錄

jopen 9年前發布 | 34K 次閱讀 Yii2 Web框架

原文來自： https://jellybool.com/post/programming-with-yii2-integrating-user-regi...

本來打算昨晚寫的這篇教程，但是忙著約會去了，所以現在補上吧。

上一篇寫了一點點 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']
        ],
    ],

還有最后一步就是執行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，你將會看到下面的類似頁面：