メール認証方式のユーザ登録機能を実装する〜Reactjs + Django 環境｜macOS〜

フロントエンド環境を構築

開発用サイトを Django 側に登録します。

ここでの開発用サイトは localhost:3000 を指します。ユーザ登録時、ユーザに送信されるメール本文の中に使用されますので、フロントエンド環境を設定する前に済ませておきます。ちなみに、( 本番環境なら your-domain.com のように変更する必要があります )

project/settings.py の EMAIL_FILE_PATH と DEFAULT_FROM_EMAIL の内容がメール本文に反映されます。
EMAIL_FILE_PATH = ‘tmp/emails’
DEFAULT_FROM_EMAIL = ‘admin@mydomin.com’

※ メールログの例：

Create-react-app ツールを使用して React アプリを作成します。

try🐶everything email-auth$ npx create-react-app frontend
...

try🐶everything email-auth$ cd frontend/
try🐶everything frontend$ yarn start

http://localhost:3000 にアクセス出来るか確認します。問題なければ Ctrl+C で React 開発サーバを閉じておきます。

フロントエンド用ソースをコピペします。

※ reactjs-auth-django-rest を利用しますが、そのままではエラーが発生するため使えません。したがって、以下の手順で修正していきます。

ユーザを登録

http://localhost:3000/signup から登録できます。

すると、アカウントを有効化するためのメールが送信されます。
有効な SMTP 設定をすれば、登録メールに送られますが、ここでは開発用の設定をしているためtmp/emails/ の下にメールログだけが保存されます。( ▼ )

メール本文のリンク ( ↑赤い線 ) をコピーしてブラウザの URL 入力欄にペーストします。

これで、メール認証でユーザ登録ができました。

以下は、ユーザ認証には直接関係ありませんが、登録ユーザのプロフィールをアップデートするための設定です。

UserProfile 項目を修正します。( 任意 )

components/auth/UserProfile.js を修正します。( Line 27〜29 )

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { getUserProfile } from "../../actions/authActions";

class UserProfile extends Component {
    static propTypes = {
        getUserProfile: PropTypes.func.isRequired,
        user: PropTypes.object
    };

    componentWillMount() {
        this.props.getUserProfile();
    }

    renderUser() {
        const user = this.props.user;
        console.log(user);
        if (user) {
            return (
                <div className="mx-2">
                    <h4>Username: {user.username}</h4>
                    <h4>First Name: {user.first_name}</h4>
                    <h4>Last Name: {user.last_name}</h4>
                    <h4>E-mail: {user.email}</h4>
                    <h4>Company: {user.company}</h4>
                    <h4>Department: {user.department}</h4>
                    <h4>Current Position: {user.current_position}</h4>
                    <hr />
                    <h4>About Myself:</h4>
                    <p>{user.about}</p>
                </div>
            );
        }
        return null;
    }

    render() {
        return (
            <div>
                {this.renderUser()} <hr />
                <Link className="btn btn-primary mr-2" to="/profile_edit">
                    Update Profile
                </Link>
                <Link className="btn btn-primary" to="/change_password">
                    Change Password
                </Link>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        user: state.auth.user
    };
}

export default connect(
    mapStateToProps,
    { getUserProfile }
)(UserProfile);

components/auth/UserProfileEdit.js を修正します。 ( Line 56〜81 )

import React, { Component } from "react";
import { reduxForm, Field, propTypes } from "redux-form";
import { connect } from "react-redux";

import {
    renderField,
    renderTextAreaField,
    renderError
} from "../../utils/renderUtils";
import { updateUserProfile } from "../../actions/authActions";

class Login extends Component {
    static propTypes = {
        ...propTypes
    };

    render() {
        const { handleSubmit, error } = this.props;

        return (
            <div className="row justify-content-center">
                <form
                    className="col col-sm-4 card mt-5 p-2"
                    onSubmit={handleSubmit}
                >
                    <h4 className="text-md-center">Edit Profile</h4>
                    <hr />

                    <fieldset className="form-group">
                        <Field
                            name="username"
                            label="Username"
                            component={renderField}
                            type="text"
                        />
                    </fieldset>

                    <fieldset className="form-group">
                        <Field
                            name="first_name"
                            label="First Name"
                            component={renderField}
                            type="text"
                        />
                    </fieldset>

                    <fieldset className="form-group">
                        <Field
                            name="last_name"
                            label="Last Name"
                            component={renderField}
                            type="text"
                        />
                    </fieldset>

                    <fieldset className="form-group">
                        <Field
                            name="company"
                            label="Company"
                            component={renderField}
                            type="text"
                        />
                    </fieldset>

                    <fieldset className="form-group">
                        <Field
                            name="department"
                            label="Department"
                            component={renderField}
                            type="text"
                        />
                    </fieldset>

                    <fieldset className="form-group">
                        <Field
                            name="current_position"
                            label="Current Position"
                            component={renderField}
                            type="text"
                        />
                    </fieldset>

                    <fieldset className="form-group">
                        <Field
                            name="about"
                            label="About Yourself"
                            component={renderTextAreaField}
                            type="text"
                        />
                    </fieldset>

                    <fieldset className="form-group">
                        {renderError(error)}
                        <button action="submit" className="btn btn-primary">
                            Save
                        </button>
                    </fieldset>
                </form>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        initialValues: state.auth.user
    };
}

export default connect(mapStateToProps)(
    reduxForm({
        form: "update_user_profile",
        onSubmit: updateUserProfile
    })(Login)
);

UserProfile をアップデートしてみます。

下記のリンクへアクセスし、変更した項目でアップデートできるか確認します。
http://localhost:3000/profile
http://localhost:3000/profile_edit

また、http://localhost:8000/api/user と http://localhost:8000/admin でも確認できます。

問題なく修正できれば OK です。

あとがき

※ やり残したこと ( メモ )：
・機能追加：ソーシャルログイン ( facebook / twitterなど )

・登録時、Confirm Email フィールドを追加
・パスワードをリセットする際、登録されたメールアドレスかをチェック